beavon2010/claude-skills

descripción

¿Qué es claude-skills?

Esta skill automatiza la conversión de código frontend existente (React + Vite, Next.js, Angular, Vue, etc.) en un diseño de Stitch, permitiendo a los desarrolladores iterar y mejorar sus aplicaciones visualmente. Orquesta tres habilidades subyacentes: `extract-static-html` para generar un archivo HTML autónomo desde el servidor de desarrollo o la compilación; `extract-design-md` para analizar componentes, estilos y temas del código fuente y crear un sistema de diseño; y `upload-to-stitch` para cargar tanto el HTML como el sistema de diseño en un proyecto de Stitch. Es esencial para cualquier solicitud de guardar, migrar o cargar componentes existentes, ya que garantiza la extracción del sistema de diseño y el enlace correcto de los recursos. El flujo de trabajo incluye pasos para extraer el HTML, generar y subir el DESIGN.md, y finalmente subir el HTML, todo parametrizado con argumentos como `--generated-by` y `--title` para una trazabilidad clara en Stitch. Esta skill es compatible con cualquier framework frontend que produzca un directorio de compilación o un servidor de desarrollo en ejecución.

Compatible con✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/beavon2010/claude-skills/tree/HEAD/.claude/skills/code-to-design

Documentación

Código a Diseño

Transforma tu código frontend existente (React + Vite, Next.js, Angular, Vue, etc.) en un diseño de Stitch para que puedas iterar y mejorarlo usando Stitch.

Esta skill orquesta otras tres habilidades en secuencia:

extract-static-html: Extrae un único archivo HTML autónomo de tu salida de compilación o servidor de desarrollo en ejecución (por ejemplo, servidor de desarrollo de Vite o ng serve de Angular CLI).
extract-design-md: Analiza el código fuente (incluyendo angular.json, plantillas .html externas, archivos de tema y componentes) para crear un sistema de diseño (DESIGN.md).
upload-to-stitch: Sube ese archivo HTML y el sistema de diseño a tu proyecto de Stitch.

Flujo de trabajo

Sigue estos pasos para convertir tu código existente.

Prerrequisitos

Un servidor de desarrollo local en ejecución (por ejemplo, npm run dev, ng serve) O un directorio de aplicación web compilada que contenga index.html y los recursos.
projectId de Stitch de destino (usa list_projects si es desconocido).

Pasos

1. Extraer HTML Autónomo

Delega a la skill extract-static-html para generar un archivo HTML independiente. Lee skills/extract-static-html/SKILL.md para obtener instrucciones detalladas y uso del script.

Salida esperada: Un solo archivo como /path/to/extracted/standalone.html.

2. Verificar HTML (Opcional — Impulsado por el Usuario)

Después de la extracción, informa al usuario de la ruta del archivo de salida para que pueda verificarlo manualmente en un navegador si lo desea. No te detengas en la verificación — continúa directamente al Paso 3.

Si el usuario informa problemas después de revisar, corrígelos antes de continuar.

3. Extraer Sistema de Diseño (Archivo)

Delega a la skill extract-design-md para analizar los archivos fuente del proyecto (componentes, hojas de estilo, configuraciones de tema) y producir un sistema de diseño. Lee skills/extract-design-md/SKILL.md para el flujo de trabajo completo de análisis.

Escribe .stitch/DESIGN.md siguiendo la estructura de salida de la skill extract-design-md.

4. Subir DESIGN.md y Crear Sistema de Diseño en Stitch

Delega a la skill manage-design-system para subir el DESIGN.md y crear el sistema de diseño en Stitch. Lee skills/manage-design-system/SKILL.md para el flujo de trabajo completo (uso del script de carga, llamada a create_design_system_from_design_md, y esquemas requeridos). Pasa --generated-by 'stitch::code-to-design' al subir.

5. Subir HTML a Stitch

Usa el mismo script de la skill upload-to-stitch para subir el archivo HTML extraído. Lee skills/upload-to-stitch/SKILL.md para obtener instrucciones detalladas y uso del script.

Necesitarás:

La ruta al archivo HTML autónomo generado en el Paso 1.
Tu clave API de Stitch (la misma clave usada en el Paso 4).
El projectId de destino.
El argumento --generated-by establecido en 'stitch::extract-static-html'.
El argumento --title establecido en la ruta de ruta de la página (por ejemplo, '/dashboard', '/settings/profile', '/inbox') para que el nombre/título de la pantalla en Stitch identifique claramente su ruta en la aplicación.