첫 디자인 산출물 만들기

목적

이 lesson은 디자이너·기획자가 Open Design에서 다음 판단을 안전하게 하기 위한 절차입니다.

언제 쓰나

첫 디자인 산출물 만들기가 현재 목표일 때 사용합니다. 다른 목표라면 Workflow Map에서 다른 흐름을 먼저 선택하세요.

준비물

• Repo 문서 또는 설치 경로를 볼 수 있어야 합니다.
• 필요한 경우 Docker, Node 24, pnpm 10.33.x, agent CLI 또는 API 키를 준비합니다.
• 이 패키지는 live 실행을 하지 않았으므로 현장 값은 실제 환경에서 다시 읽습니다.

단계별 확인

1. 1 작업 모드 고르기: Prototype/Deck/Template/Design System 중 결과 형태를 먼저 정합니다.
   docs/modes.md의 mode별 출력 형식 확인
2. 2 스킬 선택: 스킬은 산출물 형태와 agent 지시문을 결정합니다.
   README.md Skills 표와 skills/ 폴더 확인
3. 3 질문 폼으로 요구 고정: 요구사항을 바로 생성하지 않고 discovery form으로 먼저 고정합니다.
   docs/screenshots/02-question-form.png 확인
4. 4 생성 진행 보기: todo progress와 tool stream을 보며 중간 방향을 판단합니다.
   docs/screenshots/04-todo-progress.png 확인
5. 5 미리보기 검토: artifact가 sandbox iframe에서 보입니다.
   docs/screenshots/05-preview-iframe.png 확인
6. 6 저장/내보내기: 완성 산출물을 파일로 저장하거나 export합니다.
   QUICKSTART.md의 Save to disk 설명 확인

구체 증거

흔한 실수

• preview가 깨지면 export보다 원본 artifact/JSX/HTML 오류 확인이 먼저입니다.
• Preview가 보인다고 저장까지 끝난 것은 아닙니다. Save/Export 위치와 artifact 파일을 따로 확인합니다.

검증 / readback

다음 질문에 답할 수 있으면 이 lesson의 기본 이해는 통과입니다.

• 이 흐름의 첫 입력은 무엇인가?
• 성공을 어떤 파일, 화면, 명령 결과, 문서 근거로 확인하는가?
• 다음 단계로 가기 전에 멈춰야 하는 조건은 무엇인가?

근거

• docs/modes.md의 mode별 출력 형식 확인
• README.md Skills 표와 skills/ 폴더 확인
• docs/screenshots/02-question-form.png 확인
• docs/screenshots/04-todo-progress.png 확인
• docs/screenshots/05-preview-iframe.png 확인
• QUICKSTART.md의 Save to disk 설명 확인

다음 판단

첫 결과를 저장했다면 “모드·스킬·디자인 시스템 고르기”로 돌아가 다음 작업의 기준을 더 정확히 잡습니다.

검증 경계

이 lesson은 repo/docs와 포함된 screenshot 근거의 정적 매뉴얼입니다. 실제 서버 실행, 현재 UI label, agent 인증 성공, 생성 품질은 현장 검증이 필요합니다.