# Stitch::code To Design > Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos. Fuente: https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-code-to-design Markdown: https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-code-to-design.md Repositorio: https://github.com/google-labs-code/stitch-skills Autor: google-labs-code Licencia: Apache-2.0 Actualizado: el mes pasado Coste de contexto: 120 tok instalada, 912 tok al activarse, 912 tok con todos los archivos del bundle Bundle: 1 archivo, 4 KB Permisos que pide: stitch*:*, bash, read, write, web_fetch ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add google-labs-code/stitch-skills --skill code-to-design --agent claude-code # Cursor npx -y skills add google-labs-code/stitch-skills --skill code-to-design --agent cursor # Codex npx -y skills add google-labs-code/stitch-skills --skill code-to-design --agent codex # Gemini CLI npx -y skills add google-labs-code/stitch-skills --skill code-to-design --agent gemini # Windsurf npx -y skills add google-labs-code/stitch-skills --skill code-to-design --agent windsurf # Cline npx -y skills add google-labs-code/stitch-skills --skill code-to-design --agent cline ``` ## Qué hace - Extrae un HTML autocontenido a partir del build o el servidor de desarrollo - Analiza el código fuente para generar un sistema de diseño en .stitch/DESIGN.md - Sube el DESIGN.md y crea el sistema de diseño en Stitch - Sube el HTML extraído a Stitch con el título correspondiente a la ruta de la página ## Cuándo usarla - El usuario quiere mover una app web o componentes React/Angular/Vue existentes a Stitch - El usuario pide 'guardar', 'migrar' o 'subir' su código a Stitch, incluso en operaciones simples de guardado ## Qué la activa - "Guarda mi app de Vite en Stitch" - "Migra este componente de Angular a un diseño de Stitch" - "Sube mi proyecto de React a Stitch para poder iterar el diseño" ## Antes de instalar - Requiere un servidor de desarrollo en ejecución o un directorio de build con index.html, y el projectId de destino en Stitch. - runs shell commands - writes to your files ## Archivos - SKILL.md — 4 KB ## SKILL.md Reproducido tal cual desde google-labs-code/stitch-skills bajo Apache-2.0. Esta sección es el documento original y está en inglés. # 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. ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [google-labs-code](https://skillsagentes.com/creators/google-labs-code.md) — 15 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Stitch::react Components](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-components.md): Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza/actualiza componentes React existentes con los últimos diseños de Stitch, usando red a nivel de sistema y validación basada en AST. - [Stitch::react Native](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-native.md): Convierte diseños HTML de Stitch en componentes React Native, o sincroniza/actualiza componentes nativos existentes según los últimos diseños de Stitch, usando StyleSheet. - [Stitch::extract Static Html](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-extract-static-html.md): Extrae HTML estático autocontenido de una app web o componentes React, inlineando CSS e imágenes, para capturar una vista o subirla a Stitch. - [Stitch::upload To Stitch](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-upload-to-stitch.md): Sube assets locales (imágenes, mockups, HTML extraído, markdown de diseño) a un proyecto de Stitch, útil cuando las llamadas MCP fallan o se truncan por límites de tokens en base64. - [Shadcn Ui](https://skillsagentes.com/skills/google-labs-code/stitch-skills/shadcn-ui.md): Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas. ## Skills relacionadas - [Design Review](https://skillsagentes.com/skills/garrytan/gstack/design-review.md): Ojo de diseñador para QA: detecta inconsistencias visuales, problemas de espaciado y jerarquía, patrones de "AI slop" e interacciones lentas — y luego los corrige. - [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas. - [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas. - [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo. - [Image Generation](https://skillsagentes.com/skills/bytedance/deer-flow/image-generation.md): Se usa cuando el usuario pide generar, crear, imaginar o visualizar imágenes: personajes, escenas, productos o cualquier contenido visual. Admite prompts estructurados e imágenes de referencia. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)