코드-투-디자인 (Code to Design)

코드-투-디자인

기존 프론트엔드 코드(React + Vite, Next.js, Angular, Vue 등)를 Stitch 디자인으로 변환하여 Stitch에서 반복하고 개선할 수 있습니다.

이 스킬은 세 가지 다른 스킬을 순차적으로 조율합니다:

1. extract-static-html: 빌드 출력물 또는 실행 중인 개발 서버(예: Vite dev server 또는 Angular CLI ng serve)에서 단일 자체 포함 HTML 파일을 추출합니다.
2. extract-design-md: 소스 코드(Angular angular.json, 외부 .html 템플릿, 테마 파일, 컴포넌트 포함)를 분석하여 디자인 시스템(DESIGN.md)을 만듭니다.
3. upload-to-stitch: 해당 HTML 파일과 디자인 시스템을 Stitch 프로젝트에 업로드합니다.

워크플로우

다음 단계에 따라 기존 코드를 변환하세요.

전제 조건

• 실행 중인 로컬 개발 서버(예: npm run dev, ng serve) 또는 index.html과 에셋이 포함된 빌드된 웹 애플리케이션 디렉토리.
• 대상 Stitch projectId(알 수 없는 경우 list_projects 사용).

단계

1. 자체 포함 HTML 추출

extract-static-html 스킬에 위임하여 독립형 HTML 파일을 생성합니다. 자세한 지침과 스크립트 사용법은 skills/extract-static-html/SKILL.md를 참조하세요.

예상 출력물: /path/to/extracted/standalone.html과 같은 단일 파일.

2. HTML 확인 (선택 사항 — 사용자 주도)

추출 후 사용자에게 출력 파일 경로를 알려 사용자가 원하는 경우 브라우저에서 수동으로 확인할 수 있도록 합니다. 확인을 차단하지 마십시오 — 바로 3단계로 진행하세요.

사용자가 검토 후 문제를 보고하면 계속 진행하기 전에 수정하세요.

3. 디자인 시스템(파일) 추출

extract-design-md 스킬에 위임하여 프로젝트의 소스 파일(컴포넌트, 스타일시트, 테마 구성)을 분석하고 디자인 시스템을 생성합니다. 전체 분석 워크플로우는 skills/extract-design-md/SKILL.md를 참조하세요.

.stitch/DESIGN.md를 extract-design-md 스킬의 출력 구조에 따라 작성합니다.

4. DESIGN.md 업로드 및 Stitch에서 디자인 시스템 생성

manage-design-system 스킬에 위임하여 DESIGN.md를 업로드하고 Stitch에서 디자인 시스템을 만듭니다. 전체 워크플로우(업로드 스크립트 사용법, create_design_system_from_design_md 호출 및 필수 스키마)는 skills/manage-design-system/SKILL.md를 참조하세요. 업로드 시 --generated-by 'stitch::code-to-design'를 전달합니다.

5. HTML을 Stitch에 업로드

동일한 upload-to-stitch 스킬의 스크립트를 사용하여 추출된 HTML 파일을 업로드합니다. 자세한 지침과 스크립트 사용법은 skills/upload-to-stitch/SKILL.md를 참조하세요.

필요한 항목:

• 1단계에서 생성된 독립형 HTML 파일의 경로.
• Stitch API 키(4단계에서 사용한 것과 동일한 키).
• 대상 projectId.
• --generated-by 인수를 'stitch::extract-static-html'로 설정합니다.
• --title 인수를 페이지의 라우트 경로(예: '/dashboard', '/settings/profile', '/inbox')로 설정하여 Stitch의 화면 이름/제목이 애플리케이션 내 해당 라우트를 명확히 식별하도록 합니다.