stitch-code-to-design

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 ensure the design system is extracted and assets are properly linked.

설치로 이동 파일 검토

저장소: google-labs-code/stitch-skills
최근 소스 활동: 2026년 7월 29일 17:38
감지된 SKILL.md 언어: 영어
스타: 8,521
포크: 1,112

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/code-to-design.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

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

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

SKILL.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 ensure the design system is extracted and assets are properly linked.
allowed-tools: ["stitch*:*","Bash","Read","Write","web_fetch"]

# Code to Design Transform your existing frontend code (React + Vite, Next.js, Angular, Vue, etc.) into a Stitch Design so you can iterate and improve it using Stitch. This skill orchestrates three other skills in sequence: 1. `extract-static-html`: Extract a single self-contained HTML file from your build output or running dev server (e.g., Vite dev server or Angular CLI `ng serve`). 2. `extract-design-md`: Analyze the source code (including Angular `angular.json`, external `.html` templates, theme files, and components) to create a design system (DESIGN.md). 3. `upload-to-stitch`: Upload that HTML file and the design system to your Stitch project. ## Workflow Follow these steps to convert your existing code. ### Prerequisites - A running local dev server (e.g. `npm run dev`, `ng serve`) OR a built web application directory containing `index.html` and assets. - Target Stitch `projectId` (use `list_projects` if unknown). ### Steps #### 1. Extract Self-Contained HTML Delegate to the `extract-static-html` skill to generate a standalone HTML file. Read [skills/extract-static-html/SKILL.md](../extract-static-html/SKILL.md) for detailed instructions and script usage. Expected output: A single file like `/path/to/extracted/standalone.html`. #### 2. Verify HTML (Optional — User-Driven) After extraction, inform the user of the output file path so they can manually verify in a browser if desired. **Do not block on verification** — proceed directly to Step 3. If the user reports issues after reviewing, fix them before continuing. #### 3. Extract Design System (File) Delegate to the `extract-design-md` skill to analyze the project's source files (components, stylesheets, theme configs) and produce a design system. Read [skills/extract-design-md/SKILL.md](../extract-design-md/SKILL.md) for the full analysis workflow. Write `.stitch/DESIGN.md` following the `extract-design-md` skill's output structure. #### 4. Upload DESIGN.md and Create Design System in Stitch Delegate to the `manage-design-system` skill to upload the `DESIGN.md` and create the design system in Stitch. Read [skills/manage-design-system/SKILL.md](../manage-design-system/SKILL.md) for the full workflow (upload script usage, `create_design_system_from_design_md` call, and required schemas). Pass `--generated-by 'stitch::code-to-design'` when uploading. #### 5. Upload HTML to Stitch Use the same `upload-to-stitch` skill's script to upload the extracted HTML file. Read [skills/upload-to-stitch/SKILL.md](../upload-to-stitch/SKILL.md) for detailed instructions and script usage. You will need: - The path to the standalone HTML file generated in Step 1. - Your Stitch API Key (same key used in Step 4). - The target `projectId`. - The `--generated-by` argument set to `'stitch::extract-static-html'`. - The `--title` argument set to the **route path** of the page (e.g., `'/dashboard'`, `'/settings/profile'`, `'/inbox'`) so that the screen name/title in Stitch clearly identifies its route in the application.

GitHub에서 보기

검색으로 돌아가기 설치로 돌아가기

site-md

Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop

2026-08-13

stitch-extract-static-html

Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.

2026-07-29

stitch-upload-to-stitch

Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to Stitch, particularly when direct MCP tool calls fail or truncate due to base64 token limits.

2026-07-29

이 저장소의 모든 Skills 보기

stitch-code-to-design

소스 정보

설치 방법

AI 어시스턴트로 설치

소스 파일 검토

이 저장소의 다른 Skills

AI 어시스턴트로 설치

이 저장소의 다른 Skills