stitch::generate-designpor Google Labs

Stitch Generate Design Skill.

Un skill de Claude Code y Codex para diseño de UI: genera, edita y varía pantallas en Stitch desde texto o imágenes de referencia.

Web y UI
Archivo de diseño

Descargar OpenDesign Ver guía de uso

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

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

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

01 Qué hace

Qué hace el skill stitch::generate-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

Este skill controla Stitch MCP mediante cuatro flujos: generar una pantalla nueva a partir de texto, recrear una imagen o mockup, editar una pantalla existente y generar variantes. Antes de cualquier llamada de generación o edición, ejecuta un pipeline de mejora del prompt que resuelve el proyecto y el sistema de diseño, sustituye el lenguaje vago por terminología de UI/UX a partir de sus mapeos de diseño, y formatea el prompt en torno a la disposición, el contenido y la estructura, usando una plantilla con secciones PLATFORM y PAGE STRUCTURE.

El estilo visual se mantiene a nivel de proyecto, por lo que los prompts de generación no deben llevar códigos hexadecimales, tipografías ni valores de redondeo. La retroalimentación de la IA se muestra tras cada llamada y los recursos se descargan en .stitch/designs.

Qué produce

El HTML y la captura de pantalla de la pantalla generada, descargados en el directorio .stitch/designs.
La descripción de texto y las sugerencias de la IA devueltas en outputComponents, mostradas al usuario.
Pantallas de variantes para la dirección elegida, en tandas de una a cinco.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Mejorar el Prompt Antes de Cualquier Otra Cosa
El pipeline es obligatorio, no opcional: el agente reescribe la solicitud del usuario antes de que se le permita llamar a una herramienta de generación o edición de Stitch.
02
Comprobar Qué Estiliza Ya el Proyecto
Si el proyecto ya tiene un sistema de diseño, los colores, tipografías y el redondeo se aplican a nivel de proyecto, por lo que el prompt mejorado debe omitir por completo el estilo visual.
03
Formatear el Prompt como Plataforma Más Secciones de Página
Las pantallas nuevas siguen una plantilla que indica primero el propósito general, luego PLATFORM, y después un PAGE STRUCTURE numerado que va desde Header hasta Footer.
04
Elegir Uno de los Cuatro Flujos
La solicitud se enruta hacia Generate from Text, Generate from Image, Edit o Generate Variants antes de llamar a ninguna herramienta.

02 Encuentra tu caso de uso

Cuándo usar el skill stitch::generate-design

Use la skill stitch::generate-design en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. El alcance y los límites se toman del propio archivo de la skill.

Buen caso de uso

Comenzar una pantalla completamente nueva a partir de una descripción escrita de la página.
Recrear algo que ya tiene como imagen, captura de pantalla o mockup.
Realizar un cambio específico en una pantalla que ya existe en el proyecto.
Explorar diseños, esquemas de color o textos alternativos para una pantalla que ya tiene.

Conozca los límites

No generará pantallas antes de que exista un sistema de diseño: si el proyecto no tiene ninguno, el trabajo se traslada primero al skill manage-design-system.
Subir una imagen no se hace aquí; la imagen primero se convierte en contenido de pantalla mediante el skill de carga, y solo después se refina con ediciones.

Qué proporcionar

EntradaEsto es lo que la canalización de mejora reescribe en un prompt de Stitch estructurado.
El proyecto objetivoEl agente busca el proyecto por su id, y solo crea uno cuando no existe ningún proyecto adecuado.
La pantalla para ediciones o variantesLas ediciones y variantes necesitan tanto el projectId como el screenId, obtenidos al listar o recuperar pantallas.

03 Dentro del skill

Reglas que el Skill stitch::generate-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.

Sin Fuga de Tema en los Prompts de Generación
Nunca incluya códigos hexadecimales, nombres de fuentes o roles de color en un prompt de generación; el sistema de diseño maneja todo el estilo visual y los conflictos de duplicación.
Códigos Hexadecimales Solo al Editar
Se permiten valores hexadecimales exactos para una coincidencia de color precisa en los prompts de edición, que es el único caso donde no se aplica la prohibición del prompt de generación.
Mostrar Siempre outputComponents
Después de cualquier llamada a una herramienta de Stitch, el agente debe mostrar al usuario la Text Description y las Suggestions devueltas, no solo la pantalla resultante.
Editar en Lugar de Regenerar
La regeneración completa se reserva para un diseño fundamental incorrecto; todo lo demás debe pasar por ediciones específicas.
Sobrescribir las Copias Locales Después de una Edición
Las urls actualizadas de HTML y de captura de pantalla se descargan nuevamente sobre los archivos anteriores para que los archivos locales reflejen las últimas ediciones.
Mantener .stitch/metadata.json Sincronizado
Después de descargar los recursos, los metadatos se actualizan con los títulos de pantalla modificados o los nuevos ID de pantalla; el archivo registra todas las pantallas, tipos de dispositivo e información del sistema de diseño.

04 Ponlo a trabajar

Instala stitch::generate-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::generate-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::generate-design

Forma genérica del CLI skills para plugins/stitch-design/skills/generate-design/SKILL.md; el repositorio puede documentar su propia ruta.

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

Adapta esta instrucción con tu propio contenido y restricciones, luego ejecútala en Claude Code o Codex.

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Fuente: ejemplo de SKILL.md (textual).

Revisa el primer resultado

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

Mire la pantalla resultante y confirme que los cambios solicitados realmente se aplicaron.
Si el resultado no es exactamente el esperado, continúe con el flujo de Edición en lugar de regenerar; repita con un nuevo prompt específico cuando se necesite más pulido.
Antes de generar, verifique si existe un sistema de diseño para el proyecto.

En OpenDesign importe stitch::generate-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y 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/generate-design/SKILL.md Suma de verificación del 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 conteo de uso para stitch::generate-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

🎨 Pipeline de mejora de promptsAnaliza el contexto, sustituye términos vagos, estructura el prompt y muestra insights de la IA
PasosSelección de modo más flujos de texto, imagen, edición y variantes con sus llamadas a herramientas
💡 ConsejosSea estructural, priorice el contenido, pula de forma iterativa, evite filtraciones de tema, haga ediciones focalizadas
📚 ReferenciasMapeos de diseño, palabras clave de prompting y un ejemplo de prompt antes/después de la mejora

La descripción propia del Skill

— Genere nuevas pantallas desde prompts de texto o imágenes, edite pantallas existentes con prompts y tokens de sistema de diseño, y genere variantes de diseño usando Stitch MCP. Incluye pipeline de mejora de prompts, mapeos de diseño, terminología profesional UI/UX, capacidades de tokens de diseño y sistema de temas.

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

06 Antes de instalar

Preguntas sobre el skill stitch::generate-design

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

¿Necesito configurar nombres de herramientas antes de que funcione?

El skill llama a herramientas de Stitch MCP como list_projects, generate_screen_from_text y edit_screens, y su propia nota indica seguir su system prompt para saber cómo se manejan los prefijos de herramientas MCP. Así que la convención del prefijo proviene de su configuración, no del skill.

¿En qué se diferencian las variantes de las ediciones?

Las ediciones cambian la pantalla que ya tiene; las variantes exploran alternativas alrededor de ella mediante la herramienta generate_variants. Puede orientar la dirección con creativeRange — REFINE para algo sutil, EXPLORE para algo equilibrado, REIMAGINE para algo radical — y acotar los aspectos, o dejarlos vacíos para incluirlos todos.

¿Puedo partir de una captura de pantalla o un mockup en lugar de una descripción?

Sí. La imagen se entrega al skill upload-to-stitch para incorporarla al proyecto, tras lo cual el agente encuentra el nuevo screenId y refina el diseño con un prompt de edición que describe qué ajustar o recrear.

Stitch Generate Design

Ejecuta stitch::generate-design en una Tarea de Diseño UI Real.

Descargue OpenDesign, importe stitch::generate-design desde su enlace SKILL.md, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills