stitch::code-to-designpor Google Labs

Stitch Code to Design Skill.

Un skill de Claude Code y Codex para diseño de UI: convierte código frontend en un diseño Stitch mediante HTML estático y extracción de sistema de diseño.

Web y UI
Archivo de diseño

Descargar OpenDesign Ver guía de uso

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

Metadatos y encabezados de sección leídos del archivo original el 14 de septiembre de 2026 · 3645 caracteres en total

01 Qué hace

Qué Hace el Skill stitch::code-to-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Convierte una base de código frontend existente (React + Vite, Next.js, Angular, Vue) en un Stitch Design encadenando tres skills: extract-static-html, extract-design-md y upload-to-stitch. Está dirigido a diseñadores y desarrolladores que quieren llevar una aplicación en ejecución o un directorio web ya compilado a Stitch para poder iterar sobre él allí.

El workflow extrae un único archivo HTML autocontenido, escribe un sistema de diseño en .stitch/DESIGN.md, crea el sistema de diseño en Stitch y luego sube el HTML como una pantalla titulada con la ruta de la página. Es la ruta obligatoria para las solicitudes de guardar, migrar o subir, y la verificación del HTML es opcional y nunca bloquea la ejecución.

Qué produce

Un archivo HTML autocontenido, por ejemplo /path/to/extracted/standalone.html.
Una descripción de sistema de diseño escrita como DESIGN.md.
Una pantalla subida a Stitch cuyo nombre y título identifican la ruta de la que proviene en la aplicación.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Extraer un Archivo HTML Autocontenido
Delega en el skill extract-static-html, que trabaja a partir de la salida de compilación o de un servidor de desarrollo en ejecución, como Vite o Angular CLI ng serve, y produce un único archivo HTML independiente.
02
Ofrecer Verificación Sin Pausar
Tras la extracción, le indica al usuario dónde está el archivo para que pueda comprobarlo por sí mismo en un navegador, y la ejecución continúa al siguiente paso independientemente de ello.
03
Analizar el origen para crear un sistema de diseño
El skill extract-design-md lee los componentes, las hojas de estilo y las configuraciones de tema del proyecto, y su resultado se escribe en un archivo de sistema de diseño.
04
Crear el sistema de diseño en Stitch
El skill manage-design-system sube DESIGN.md y llama a create_design_system_from_design_md con los esquemas requeridos.
05
Subir el HTML como una pantalla (Screen)
El mismo script de carga envía el HTML independiente usando la clave de API de Stitch y el projectId, con el argumento title configurado como la ruta de la página para que la pantalla sea identificable en Stitch.

02 Encuentra tu caso de uso

Cuándo usar el Skill stitch::code-to-design

Usa el skill stitch::code-to-design en Claude Code o Codex cuando el trabajo sea diseño de interfaz de este tipo. El alcance y límites abajo se toman del propio archivo del skill.

Buen caso de uso

Una aplicación existente escrita en React + Vite, Next.js, Angular o Vue que el usuario quiere trasladar a Stitch y seguir mejorando allí.
Una solicitud formulada de manera informal como guardar, migrar o subir, en lugar de como una tarea explícita de conversión.
Un proyecto que ya se ejecuta en un servidor de desarrollo de Vite o que se sirve mediante Angular CLI ng serve.
Un workspace de Angular organizado con angular.json, plantillas .html externas, archivos de tema y componentes, todo lo cual alimenta la extracción del sistema de diseño.

Conozca los límites

No hay nada ejecutable al que apuntar: el workflow necesita ya sea un servidor de desarrollo local en ejecución o un directorio de aplicación web compilado que contenga index.html y assets.

Qué proporcionar

El projectId de destino en StitchLas cargas necesitan un proyecto de destino; si no se conoce, búsquelo primero con list_projects.
La ruta al HTML extraídoEl archivo independiente producido en el paso 1 debe entregarse al paso de carga, junto con la clave de API y el projectId.
Los archivos fuente del proyectoLos componentes, las hojas de estilo y las configuraciones de tema son lo que lee el análisis del sistema de diseño para derivar DESIGN.md.

03 Dentro del skill

Reglas que el skill stitch::code-to-design da a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Usarlo siempre para la intención de guardar, migrar o subir
Cualquier traslado de aplicaciones web existentes o componentes de React/Angular/Vue a Stitch debe pasar por este skill, incluso un simple guardado, porque es la única vía que también extrae el sistema de diseño y enlaza los assets.
Escribir el sistema de diseño en .stitch/DESIGN.md
El archivo del sistema de diseño se coloca en .stitch/DESIGN.md y debe seguir la estructura definida por el skill extract-design-md.
Nunca bloquear en la verificación
La verificación del HTML extraído la decide el usuario y es opcional; el agente debe pasar directamente al paso del sistema de diseño en lugar de esperar.
Etiquetar la carga del sistema de diseño
Pase el argumento --generated-by 'stitch::code-to-design' al subir DESIGN.md, para que quede registrado el origen del producto generado.
Etiquetar la carga del HTML de forma diferente
La subida de HTML usa el otro marcador, --generated-by 'stitch::extract-static-html', no el de code-to-design.
Reutilizar Una Sola API Key Para Ambas Subidas
La clave de API de Stitch proporcionada en el paso 4 es la misma clave necesaria para la subida de HTML; no hay una segunda credencial.

04 Ponlo a trabajar

Instala stitch::code-to-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega stitch::code-to-design a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Formulario genérico de la CLI skills para plugins/stitch-design/skills/code-to-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

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]'.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Abra el archivo extraído en un navegador para confirmar que la página se renderiza como se espera.
Si el usuario regresa con problemas después de revisar la extracción, corríjalos antes de continuar el workflow.

En OpenDesign importe stitch::code-to-design desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Rama main
Archivo de skill: plugins/stitch-design/skills/code-to-design/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 0337446
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 8.304 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una calificación ni un recuento de uso de stitch::code-to-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

WorkflowIndica al agente que siga los pasos indicados para convertir código existente.
Requisitos previosNecesita un servidor de desarrollo en ejecución o un directorio de aplicación compilada, además de un projectId de Stitch.
PasosCinco pasos ordenados, cada uno delegando en otro skill o script.

La descripción propia del Skill

«- Convierte código frontend (Vite, React, Angular, Vue, etc.) a un Stitch Design encadenando extracción de HTML estático, extracción de sistema de diseño y carga de archivos. **SIEMPRE** usa este skill cuando la intención del usuario sea mover aplicaciones web existentes o componentes React/Angular/Vue a Stitch (por ejemplo, solicitudes de "guardar", "migrar" o "subir"). Debes usar este skill incluso para operaciones simples de "guardar", ya que es la única forma de asegurar que el sistema de diseño se extraiga y los recursos se vinculen correctamente.»

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 3.645 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill stitch::code-to-design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Solo sube una pantalla, o también construye el sistema de diseño?

Ambas cosas. El archivo DESIGN.md se sube y el sistema de diseño se crea en Stitch a través del workflow manage-design-system, que usa el script de subida y la llamada create_design_system_from_design_md con los esquemas requeridos.

¿Qué skill extrae realmente el HTML de mi aplicación?

extract-static-html realiza la extracción, produciendo un único archivo HTML autocontenido a partir del resultado de compilación o de un servidor de desarrollo en ejecución, como el de Vite.

Stitch Code to Design

Ejecuta stitch::code-to-design en una tarea de diseño UI real.

Descarga OpenDesign, importa stitch::code-to-design desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills