OpenDesign

요금제 카드, 기능 비교표, 자주 묻는 질문을 담은 HTML 페이지를 만듭니다. 요금제 수와 추천 표시를 정리해 가입 전에 내용을 비교할 수 있는 시안을 제작합니다.

• 구독 요금 페이지를 시안으로 만듭니다
• 요금제별 기능을 비교합니다
• 개인용과 기업용 요금제를 제시합니다

성장과 자금 소진, 사업을 지속할 경로를 정리해 경영진의 결정을 돕는 HTML 슬라이드를 만듭니다. 기존 디자인 규칙을 따르며 가로로 넘겨 볼 수 있습니다.

• 경영진을 위한 사업 검토 자료 제작
• 이사회 의사결정 자료 준비
• HTML로 성장과 자금 소진 설명

제품 공개, 예고편, 배경 반복 영상에 쓰는 3~10초 동영상을 생성합니다. 피사체, 움직임, 조명을 정리하고 지정한 길이와 화면 비율로 MP4를 저장합니다.

• 제품 공개 영상 제작
• 움직임이 있는 짧은 예고편 제작
• 분위기를 전달하는 배경 반복 영상 제작

메모나 문서를 발표 구성과 페이지별 이미지·도표·영상 계획, 제작 지시서로 정리합니다. 렌더링 후에는 구성과 각 슬라이드의 일치 여부를 최대 세 차례 점검합니다.

• 메모나 녹취록으로 발표 구성하기
• 슬라이드별 이미지·도표·영상 계획하기
• HTML 슬라이드나 PPTX 제작 지시서 작성하기

신문지 느낌의 배경에 검은색 초굵은 글자와 가는 구분선을 배치해 스위스 인쇄물풍 웹 프로토타입을 만듭니다. 빨간색으로 강조하며 편집 기사와 작품집을 단단한 인상으로 구성합니다.

• 신문풍 편집 페이지 시안 제작
• 제작사 포트폴리오 제작
• 선언문 사이트 제작

새 기능의 문제, 목표, 범위, 성공 지표를 한 페이지 제품 요구사항 문서로 정리합니다. 사용자 요구, 단계별 실행 계획, 미해결 질문을 담아 HTML로 출력합니다.

• 새 기능의 제품 요구사항 문서 작성
• 목표와 범위에 포함하지 않을 사항 공유
• 성공 지표와 측정 방법 정리

누적된 코드 변경을 차이 파일과 파일별 설명으로 정리합니다. 확인 화면에서 승인, 거부, 부분 승인을 선택해 기록하고 계획 범위에서 거부된 변경을 되돌립니다.

• 코드 이전 후 변경 내용을 확인할 때
• 파일별로 변경을 승인할 때
• 인계 시 검토 결정을 기록할 때

출시 전 제품의 사전 등록 페이지를 브랜드 색상과 글꼴에 맞춰 만듭니다. 로고, 제품 소개, 이메일 등록 양식을 하나의 HTML 파일로 구성합니다.

• 출시 전 이메일 등록 페이지를 만들 때
• 베타 버전 참여자를 모집할 때
• 사전 이용에 대한 관심을 모을 때

프로젝트의 빌드, 타입 검사, 테스트 명령을 실행합니다. 성공 여부와 실패 내용을 보고서와 로그에 저장해 자동 수정 반복 작업의 종료 판단에 활용합니다.

• 프레임워크 이전 후 동작을 검증합니다
• 편집 완료 후 빌드와 테스트를 확인합니다
• 자동 수정 반복 작업의 종료를 판단합니다

여러 소셜 미디어의 팔로워 수, 반응 지표, 인기 게시물, 화제와 댓글을 살펴보는 분석 화면을 만듭니다. 일관된 예시 데이터를 넣은 단일 HTML 시제품입니다.

• 창작자용 분석 화면 시제품 제작
• 여러 소셜 미디어의 지표 표시 설계
• 팔로워 추이와 인기 게시물 표시

화면 구성을 검토할 수 있도록 손으로 그린 듯한 HTML 와이어프레임을 만듭니다. 모눈종이, 메모지, 대략적인 차트와 안별 탭 라벨로 초기 구상을 시각화합니다.

• 포털이나 대시보드의 초기 구성을 검토합니다
• 여러 안을 탭 라벨로 표시합니다
• 화면 초안에 검토용 주석을 붙입니다

Linear의 지난 24시간 이슈 업데이트, 상태 변경, 담당자 배정과 주기 진행 상황을 일일 요약으로 정리합니다. Orbit이 자동 실행하며 간결한 HTML 화면으로 보여 줍니다.

• Linear의 지난 24시간 업데이트 확인하기
• 담당 이슈와 정체된 이슈의 주의점 파악하기
• 주기 진행 상황과 남은 기간 확인하기

실버나 크림색을 바탕으로 부드러운 질감의 웹 시제품을 만듭니다. 이중 테두리 카드, 큰 둥근 모서리, 떠 있는 내비게이션과 자연스러운 움직임을 통일합니다.

• 차분한 SaaS 사이트 시제품 만들기
• 소비자용 사이트의 질감 검토하기
• 카드와 버튼으로 기능 소개하기

판단 오류의 영향이 큰 복잡한 과제를 전제 확인, 조사, 다각도 분석, 실행 후 검증으로 나누어 진행하고 근거와 위험을 정리해 제안합니다.

• 시스템 구조 대안을 비교합니다
• 여러 시스템의 변경 계획을 세웁니다
• 모호한 요청의 전제를 재검토합니다

코드 재작성 계획을 단계별로 작은 수정에 적용합니다. 대상 파일과 위험 제한을 확인하고, 각 변경의 이유와 실행 내역, 진행 상태를 기록합니다.

• 코드 마이그레이션 계획의 단계별 적용
• 국소적인 코드 수정 검토
• 단계 완료와 건너뛰기 사유 기록

복제하거나 다시 구현한 웹사이트의 공개 전 시각적 차이, 추적 스크립트, 원래 브랜드와 언어 잔재, 임시 문구, 외부 의존성을 점검하고 근거가 있는 감사 보고서를 작성합니다.

• 복제 사이트를 공개 전에 점검합니다
• 원래 브랜드와 다른 언어의 잔재를 확인합니다
• 추적 스크립트와 외부 의존성을 확인합니다

제목이 이어지는 정사각형 소셜 미디어 카드 세 장을 만듭니다. 브랜드 표기와 번호를 통일하고 영화 같은 색조를 적용해 하나의 HTML로 구성합니다.

• Instagram 카드 세 장 게시물 제작
• LinkedIn 연속 게시물 디자인
• X 스레드용 카드 제작

시장 정보를 밀도 있게 배치한 거래 분석 대시보드를 단일 HTML로 만듭니다. 밝고 어두운 테마, 차트 상세 보기, 명령 팔레트를 갖춘 화면을 제공합니다.

• 금융 분석 터미널 화면 시제품 제작
• 시장 정보가 밀집된 화면 제시
• 차트 상세 보기와 조작 방식 시연

픽셀 아트 캐릭터, 큰 연도, 움직이는 글자와 연표를 조합해 역사나 상식을 소개하는 애니메이션 HTML 장면을 만듭니다. 화면 녹화에 적합합니다.

• 역사 해설에 쓸 장면 만들기
• 픽셀 아트로 상식 전달하기
• 화면 녹화용 복고풍 움직임 만들기

WebGL로 셰이더, 3D 장면, 입자 움직임을 전체 화면에 그리고 제목을 겹쳐 표시합니다. 외부 통신 없이 하나의 HTML 파일로 완성합니다.

• 웹사이트 첫 화면에 동적 시각 효과를 만듭니다
• 제목이 있는 생성형 아트를 만듭니다
• 3D 장면과 입자 효과를 시험 제작합니다

이번 주 성과, 진행 중인 작업, 장애 요인과 핵심 지표를 주간 보고용 HTML 슬라이드로 정리합니다. 주목할 수치와 이상 징후, 다음 주에 필요한 결정과 요청을 팀에 공유합니다.

• 팀 주간 보고 자료 제작
• KPI 변화와 이상 징후 공유
• 작업 장애 요인과 지원 요청 정리

OpenDesign에서 폴더, zip, GitHub, 마켓을 통한 커뮤니티 플러그인 가져오기를 검증하고 출처와 감지된 파일을 간단히 정리합니다.

• 폴더나 zip에서 가져오기 검증
• GitHub나 마켓을 통한 가져오기 확인
• 설치, 적용, 출처 상태 확인

검토에서 수락한 결과물을 CLI, 코드 에이전트, Figma 등 지정한 작업 환경에 전달하고, 결과물 관리 정보에 출력 대상과 배포 이력을 추가합니다.

• 검토한 결과물을 코드 에이전트에 전달합니다
• 편집 결과를 원본 Figma 파일에 반영합니다
• GitHub에 PR로 결과물을 전달합니다

OpenDesign 마켓플레이스에서 등록된 플러그인을 검색하고 설치하며 배포처와 출처를 확인하는 흐름을 검증하기 위한 최소한의 예제입니다.

• OpenDesign 검색 흐름을 검증합니다
• 마켓플레이스 설치 흐름을 확인합니다
• 플러그인 배포처와 출처 확인을 시험합니다