stitch::code-to-design작성자 Google Labs

Stitch Code to Design 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 정적 HTML 및 디자인 시스템 추출을 통해 프론트엔드 코드를 Stitch 디자인으로 변환합니다.

Web & UI
디자인 파일

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

2026-09-14에 업스트림 파일에서 읽은 프론트 매터 및 섹션 제목 · 전체 3,645자

01 기능

Claude Code와 Codex에서 stitch::code-to-design Skill이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

extract-static-html, extract-design-md, upload-to-stitch 세 개의 skill을 연결하여 기존 프론트엔드 코드베이스(React + Vite, Next.js, Angular, Vue)를 Stitch Design으로 변환합니다. 실행 중인 앱이나 빌드된 웹 디렉터리를 Stitch로 옮겨 그곳에서 반복 작업을 하려는 디자이너와 개발자를 대상으로 합니다.

이 워크플로우는 독립적인 HTML 파일 하나를 추출하고, 디자인 시스템을 .stitch/DESIGN.md에 작성한 뒤, Stitch에 디자인 시스템을 생성하고, 마지막으로 페이지의 라우트 경로로 제목이 지정된 화면으로 HTML을 업로드합니다. 이는 저장, 마이그레이션 또는 업로드 요청에 필요한 경로이며, HTML 검증은 선택 사항이고 실행을 결코 차단하지 않습니다.

산출물

독립적인 HTML 파일 하나, 예를 들어 /path/to/extracted/standalone.html입니다.
DESIGN.md로 작성된 디자인 시스템 설명입니다.
이름과 제목이 애플리케이션 내 출처 라우트를 식별하는, Stitch에 업로드된 화면입니다.

예시 프롬프트 보기 ↗

작동 방식

01
독립적인 HTML 파일 추출하기
extract-static-html skill로 작업을 넘기며, 이는 빌드 출력물이나 Vite, Angular CLI의 ng serve 같은 실행 중인 개발 서버를 기반으로 작동하여 독립형 HTML 파일 하나를 생성합니다.
02
중단 없이 검증 제공하기
추출이 끝나면 사용자에게 파일 위치를 알려주어 브라우저에서 직접 확인할 수 있도록 하며, 실행은 이와 무관하게 다음 단계로 계속됩니다.
03
소스를 디자인 시스템으로 분석하기
extract-design-md 스킬은 프로젝트의 컴포넌트, 스타일시트, 테마 설정을 읽고, 그 결과를 디자인 시스템 파일로 작성합니다.
04
Stitch에서 디자인 시스템 생성하기
manage-design-system 스킬은 DESIGN.md를 업로드하고 필요한 스키마와 함께 create_design_system_from_design_md를 호출합니다.
05
HTML을 화면으로 업로드하기
동일한 업로드 스크립트가 Stitch API 키와 projectId를 사용해 단독 HTML을 전송하며, title 인자는 페이지 라우트로 설정되어 Stitch에서 해당 화면을 식별할 수 있습니다.

02 적합성 확인

stitch::code-to-design 스킬을 사용하는 경우

이 유형의 UI 디자인 작업에는 Claude Code 또는 Codex에서 stitch::code-to-design 스킬을 사용하십시오. 적합성과 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

React + Vite, Next.js, Angular 또는 Vue로 작성된 기존 앱으로, 사용자가 이를 Stitch로 옮겨 그곳에서 계속 개선하고자 하는 경우입니다.
명시적인 변환 작업이 아니라 저장, 마이그레이션, 업로드처럼 느슨하게 표현된 요청입니다.
이미 Vite 개발 서버에서 실행 중이거나 Angular CLI의 ng serve를 통해 서비스되는 프로젝트입니다.
angular.json, 외부 .html 템플릿, 테마 파일, 컴포넌트로 구성된 Angular 워크스페이스이며, 이 모든 것이 디자인 시스템 추출에 사용됩니다.

한계 인지하기

가리킬 수 있는 실행 가능한 대상이 없는 경우입니다: 이 워크플로에는 실행 중인 로컬 개발 서버 또는 index.html과 에셋을 포함한 빌드된 웹 애플리케이션 디렉터리가 필요합니다.

제공할 사항

대상 Stitch projectId업로드에는 대상 프로젝트가 필요하며, 알 수 없는 경우 먼저 list_projects로 조회해야 합니다.
추출된 HTML의 경로1단계에서 생성된 단독 파일은 API 키 및 projectId와 함께 업로드 단계로 전달되어야 합니다.
프로젝트 소스 파일컴포넌트, 스타일시트, 테마 설정은 디자인 시스템 분석이 DESIGN.md를 도출하기 위해 읽는 대상입니다.

03 스킬 내부

stitch::code-to-design 스킬이 Claude Code와 Codex에 제공하는 규칙

에이전트에게 SKILL.md가 설정하는 6가지 구체적인 지침, 기본값 및 제한 사항입니다 — 결과를 바꾸는 파일의 핵심 부분입니다.

저장, 마이그레이션 또는 업로드 의도에는 항상 사용하기
기존 웹 앱이나 React/Angular/Vue 컴포넌트를 Stitch로 옮기는 작업은 단순한 저장이라도 반드시 이 스킬을 거쳐야 합니다. 이는 디자인 시스템을 추출하고 에셋을 연결하는 유일한 경로이기 때문입니다.
디자인 시스템을 .stitch/DESIGN.md에 작성하기
디자인 시스템 파일은 .stitch/DESIGN.md에 위치해야 하며, extract-design-md 스킬이 정의한 구조를 따라야 합니다.
검증 단계에서 절대 멈추지 않기
추출된 HTML의 검증은 사용자 주도적이며 선택 사항입니다. 에이전트는 기다리지 말고 곧바로 디자인 시스템 단계로 진행해야 합니다.
디자인 시스템 업로드에 태그 지정하기
DESIGN.md를 업로드할 때 --generated-by 'stitch::code-to-design' 인자를 전달하여 생성된 산출물의 출처를 기록합니다.
HTML 업로드에는 다르게 태그 지정하기
HTML 업로드는 code-to-design용이 아닌 다른 마커인 --generated-by 'stitch::extract-static-html'를 사용합니다.
두 업로드에 동일한 API 키 재사용
4단계에서 제공된 Stitch API 키는 HTML 업로드에도 동일하게 필요한 키이며, 별도의 두 번째 자격 증명은 없습니다.

04 활용하기

Claude Code 또는 Codex에 stitch::code-to-design 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 stitch::code-to-design 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

plugins/stitch-design/skills/code-to-design/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

추출된 파일을 브라우저에서 열어 페이지가 예상대로 렌더링되는지 확인합니다.
사용자가 추출 결과를 검토한 후 문제를 가지고 돌아오면, 워크플로를 계속 진행하기 전에 이를 수정합니다.

OpenDesign에서 SKILL.md 링크를 통해 stitch::code-to-design을 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일: plugins/stitch-design/skills/code-to-design/SKILL.md 검증 시점의 콘텐츠 체크섬 기록됨, 커밋 0337446
License: Apache-2.0 LICENSE에서 확인.
리포지토리 스타: 8,304 GitHub 스냅샷은 2026-09-14에 google-labs-code/stitch-skills 리포지토리 전체에 대해 촬영되었으며, 이 카탈로그에 12개의 스킬이 포함되어 있습니다. stitch::code-to-design의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

워크플로에이전트에게 나열된 단계를 따라 기존 코드를 변환하도록 지시합니다.
전제 조건실행 중인 개발 서버 또는 빌드된 앱 디렉터리와 Stitch projectId가 필요합니다.
단계다섯 개의 순차적 단계로, 각 단계는 다른 스킬이나 스크립트에 위임합니다.

스킬 자체 설명

"- 프론트엔드 코드(Vite, React, Angular, Vue 등)를 정적 HTML 추출, 디자인 시스템 추출 및 파일 업로드를 연결하여 Stitch Design으로 변환합니다. 사용자의 의도가 기존 웹 앱 또는 React/Angular/Vue 컴포넌트를 Stitch로 이동하는 것인 경우(예: "저장", "마이그레이션" 또는 "업로드" 요청) **항상** 이 스킬을 사용하십시오. 디자인 시스템이 추출되고 자산이 제대로 연결되도록 보장하는 유일한 방법이므로 간단한 "저장" 작업에도 이 스킬을 사용해야 합니다."

SKILL.md의 프론트매터 설명입니다. 전체 파일은 약 3,645자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

stitch::code-to-design 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

화면만 업로드하나요, 아니면 디자인 시스템도 구축하나요?

둘 다입니다. DESIGN.md 파일이 업로드되고, manage-design-system 워크플로를 통해 Stitch에 디자인 시스템이 생성되며, 이 워크플로는 업로드 스크립트와 필요한 스키마를 사용하는 create_design_system_from_design_md 호출을 사용합니다.

실제로 제 앱에서 HTML을 추출하는 스킬은 무엇인가요?

extract-static-html이 추출을 수행하며, 빌드 출력이나 Vite와 같은 실행 중인 개발 서버로부터 단일 자체 완결형 HTML 파일을 생성합니다.

Stitch Code to Design

실제 UI 디자인 작업에서 stitch::code-to-design 실행하기.

OpenDesign을 다운로드하고 SKILL.md 링크에서 stitch::code-to-design을 가져온 다음 위 프롬프트를 붙여넣고 결과를 확인하기 전에 계획을 읽으십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design