aubarcito48/portfolio

Generar Diseño

Crea nuevas pantallas de diseño a partir de descripciones de texto, imágenes o maquetas, edita pantallas existentes con prompts y tokens de sistema de diseño, y genera variantes de diseño usando Stitch MCP.

[!NOTE] Revisa tu prompt de sistema para obtener instrucciones sobre cómo manejar los prefijos de herramientas MCP para todas las herramientas mencionadas en esta habilidad (por ejemplo, list_projects, generate_screen_from_text, edit_screens).

🎨 Pipeline de Mejora de Prompts

Antes de llamar a cualquier herramienta de generación o edición de Stitch, DEBES mejorar el prompt del usuario.

1. Analizar Contexto

• Proyecto: Usa list_projects para encontrar el projectId correcto. Si no existe un proyecto adecuado, créalo usando create_project.
• Sistema de Diseño: Verifica si existe un sistema de diseño para el proyecto mediante list_design_systems. Si existe, los tokens de diseño (colores, fuentes, redondez) ya están aplicados a nivel de proyecto — NO incluyas ninguna instrucción de color, fuente o tema en el prompt de generación. Si no existe, delega primero en la habilidad manage-design-system antes de generar pantallas.

2. Refinar Terminología UI/UX

Consulta Mapeos de Diseño para reemplazar términos vagos.

• Vago: "Haz un encabezado bonito"
• Profesional: "Barra de navegación fija con efecto glassmorphism y logotipo centrado"

Usa Palabras Clave de Prompts para nombres de componentes, paletas de adjetivos, roles de color y descripciones de forma.

3. Estructurar el Prompt Final

Formatea el prompt mejorado para Stitch. Enfócate exclusivamente en diseño, contenido y estructura — nunca incluyas colores, fuentes o instrucciones de tema (estos son manejados por la habilidad manage-design-system a nivel de proyecto).

Para nuevas pantallas, usa esta plantilla:

[Propósito general e intención del usuario para la página]

**PLATAFORMA:** [Web/Móvil], prioridad [Escritorio/Móvil]

**ESTRUCTURA DE LA PÁGINA:**
1. **Encabezado:** [Descripción de navegación y marca]
2. **Sección Hero:** [Titular, subtítulo y CTA principal]
3. **Área de Contenido Principal:** [Desglose detallado de componentes]
4. **Pie de página:** [Enlaces e información de copyright]

Para ediciones, sé específico sobre qué cambiar:

• Ubicación: "Cambia el [botón principal] en la [sección hero]..."
• Visuales: "...a un azul más oscuro (#004080) y agrega una sombra sutil."
• Estructura: "Agrega un botón secundario junto al principal con el texto 'Saber Más'."

[!CAUTION] NO incluyas códigos hex, nombres de fuentes, paletas de colores, valores de redondez ni ningún token de sistema de diseño en un prompt de generación. Estos se aplican a nivel de proyecto por la habilidad manage-design-system y causarán conflictos si se duplican. (Para prompts de edición, los códigos hex son aceptables para ajustes precisos de color.)

4. Presentar Información de la IA

Después de cualquier llamada a herramienta, siempre muestra al usuario los outputComponents (Descripción de Texto y Sugerencias).

Consulta ejemplos/enhanced-prompt.md para un ejemplo completo de prompt mejorado antes/después.

---

Pasos

Determinar el Modo

Decide qué flujo usar según la solicitud del usuario:

• El usuario quiere crear a partir de una descripción de texto → flujo Generar desde Texto
• El usuario proporciona una imagen, captura de pantalla o maqueta → flujo Generar desde Imagen
• El usuario quiere modificar una pantalla existente → flujo Editar
• El usuario quiere variaciones de diseño/color/contenido → flujo Generar Variantes

---

Flujo Generar desde Texto (Nueva Pantalla)

1. Mejorar el Prompt del Usuario

Aplica el Pipeline de Mejora de Prompts anterior.

2. Identificar el Proyecto

Usa list_projects para encontrar el projectId correcto si aún no se conoce.

3. Generar la Pantalla

Llama a la herramienta generate_screen_from_text con el prompt mejorado y el designSystem ID (si se encontró en el Paso 1).

{
  "projectId": "...",
  "prompt": "[Tu Prompt Mejorado]",
  "designSystem": "assets/...", // Opcional: Pasa si se encontró en el Paso 1
  "deviceType": "DESKTOP"  // Opciones: MOBILE, DESKTOP, TABLET
}

4. Presentar Retroalimentación de la IA

Siempre muestra al usuario la descripción de texto y las sugerencias de outputComponents.

5. Descargar Assets de Diseño

Después de la generación, descarga las URLs de HTML y captura de pantalla de outputComponents al directorio .stitch/designs.

• Nombrado: Usa el ID de la pantalla o un slug descriptivo para el nombre del archivo.
• Herramientas: Usa curl -o mediante run_command o similar.
• Directorio: Asegúrate de que exista .stitch/designs.

6. Revisar y Refinar

• Si el resultado no es exactamente el esperado, continúa con el flujo Editar para hacer ajustes específicos.
• NO regeneres desde cero a menos que el diseño fundamental esté mal.

---

Flujo Generar desde Imagen (Imagen/Maqueta → Diseño)

Usa este flujo cuando el usuario proporcione una imagen, captura de pantalla o maqueta de diseño para recrear en Stitch.

1. Identificar el Proyecto

Usa list_projects para encontrar el projectId correcto. Si no existe un proyecto adecuado, créalo usando create_project.

2. Subir la Imagen

Delega en la habilidad upload-to-stitch para subir la imagen al proyecto. Esto crea una nueva pantalla con la imagen como contenido.

3. Refinar con Edición

Una vez subida, usa list_screens para encontrar el screenId recién creado, luego llama a edit_screens con un prompt descriptivo para refinar el diseño:

{
  "projectId": "...",
  "selectedScreenIds": ["<id-de-pantalla-subida>"],
  "prompt": "[Describe qué ajustar, mejorar o recrear a partir de esta maqueta]"
}

[!TIP] Para mejores resultados, describe la intención detrás de la imagen en lugar de solo decir "haz que se vea así". Por ejemplo: "Esta es una maqueta de panel de control — recréala con una tabla de datos adecuada, navegación lateral y widgets de gráficos."

4. Presentar Retroalimentación de la IA

Siempre muestra al usuario la descripción de texto y las sugerencias de outputComponents.

5. Descargar Assets de Diseño

Descarga las URLs de HTML y captura de pantalla de outputComponents al directorio .stitch/designs.

• Nombrado: Usa el ID de la pantalla o un slug descriptivo para el nombre del archivo.
• Herramientas: Usa curl -o mediante run_command o similar.
• Directorio: Asegúrate de que exista .stitch/designs.

---

Flujo Editar (Modificar Pantalla Existente)

1. Identificar la Pantalla

Usa list_screens o get_screen para encontrar el projectId y screenId correctos.

2. Formular el Prompt de Edición

Aplica el Pipeline de Mejora de Prompts, enfocándote en la especificidad:

• Ubicación: "Cambia el color del [botón principal] en la [sección hero]..."
• Visuales: "...a un azul más oscuro (#004080) y agrega una sombra sutil."
• Estructura: "Agrega un botón secundario junto al principal con el texto 'Saber Más'."

3. Aplicar la Edición

Llama a la herramienta edit_screens.

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Tu prompt de edición específico]"
}

4. Presentar Retroalimentación de la IA

Siempre muestra al usuario la descripción de texto y las sugerencias de outputComponents.

5. Descargar Assets de Diseño

Después de la edición, descarga las URLs actualizadas de HTML y captura de pantalla de outputComponents al directorio .stitch/designs, sobrescribiendo versiones anteriores para asegurar que los archivos locales reflejen las últimas ediciones.

• Nombrado: Usa el ID de la pantalla o un slug descriptivo para el nombre del archivo.
• Herramientas: Usa curl -o mediante run_command o similar.
• Directorio: Asegúrate de que exista .stitch/designs.

6. Actualizar Metadatos del Proyecto

Después de descargar los assets, actualiza .stitch/metadata.json para reflejar cualquier cambio (por ejemplo, títulos de pantalla actualizados o nuevos IDs de pantalla de la edición). El archivo de metadatos rastrea todas las pantallas, sus tipos de dispositivo e información del sistema de diseño. Consulta el examples/metadata.json de la habilidad manage-design-system para conocer el formato.

7. Verificar y Repetir

• Verifica la pantalla de salida para comprobar si los cambios se aplicaron correctamente.
• Si se necesita más pulido, repite el flujo de edición con un nuevo prompt específico.

---

Flujo Generar Variantes (Explorar Variaciones)

Usa este flujo cuando el usuario quiera explorar diseños alternativos, esquemas de color o variaciones de contenido de una pantalla existente.

1. Identificar la Pantalla

Usa list_screens o get_screen para encontrar el projectId y screenId correctos.

2. Configurar Opciones de Variante

Llama a la herramienta generate_variants con las opciones adecuadas:

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Describe la dirección para las variantes]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

Opciones de Variante:

• variantCount: 1–5 variantes (predeterminado: 3)
• creativeRange: REFINE (sutil), EXPLORE (equilibrado) o REIMAGINE (radical)
• aspects: Enfócate en dimensiones específicas — LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT, o déjalo vacío para todas

3. Presentar Retroalimentación de la IA

Siempre muestra al usuario la descripción de texto y las sugerencias de outputComponents.

4. Descargar Assets de Diseño

Descarga las URLs de HTML y captura de pantalla de las variantes de outputComponents al directorio .stitch/designs.

• Nombrado: Usa el ID de la pantalla o un slug descriptivo para el nombre del archivo.
• Herramientas: Usa curl -o mediante run_command o similar.
• Directorio: Asegúrate de que exista .stitch/designs.

---

💡 Consejos

• Sé estructural: Desglosa la página en encabezado, hero, características y pie de página en tu prompt.
• Contenido primero: Describe qué contiene cada sección (texto, imágenes, CTAs) en lugar de cómo se ve.
• Pulido iterativo: Prefiere la edición para ajustes específicos sobre la regeneración completa.
• Sin fuga de tema: Nunca pongas códigos hex, nombres de fuentes o roles de color en un prompt de generación — el sistema de diseño maneja todo el estilo visual.
• Especifica interacciones: Menciona estados hover, animaciones y comportamiento de clic en lugar del estilo visual.
• Mantén las ediciones enfocadas: Una edición a la vez a menudo es mejor que una larga lista de cambios.
• Referencia componentes: Usa términos profesionales como "barra de navegación", "sección hero", "pie de página", "cuadrícula de tarjetas".
• Colores precisos en ediciones: Usa códigos hex para coincidencia exacta de color al editar pantallas existentes.

📚 Referencias

• Mapeos de Diseño — Palabras clave UI/UX y descriptores de atmósfera.
• Palabras Clave de Prompts — Términos técnicos que Stitch entiende mejor.
• Ejemplo de Prompt Mejorado — Mejora de prompt antes/después.