aubarcito48/portfolio

코드에서 디자인으로

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

이 스킬은 세 가지 다른 스킬을 순서대로 오케스트레이션합니다:

1. extract-static-html: 빌드 출력 또는 실행 중인 개발 서버(예: Vite 개발 서버 또는 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 추출

자체 포함된 HTML 파일을 생성하기 위해 extract-static-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를 참조하세요.

extract-design-md 스킬의 출력 구조에 따라 .stitch/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. Stitch에 HTML 업로드

동일한 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의 화면 이름/제목이 애플리케이션의 경로를 명확히 식별하도록 합니다.