83.3K+Descargar
Ir a la guía de uso
enhance-promptpor Google Labs

Enhance Prompt Skill.

Una skill de Claude Code y Codex para diseño de interfaz: reescribe ideas vagas de interfaz en prompts pulidos y optimizados para Stitch.

  • Web y UI
Descargar OpenDesignVer guía de uso
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/enhance-prompt/SKILL.mdSKILL.md
--- name: enhance-prompt description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results. --- ## Prerequisites ## When to Use This Skill ## Enhancement Pipeline ## Output Options ## Examples ## Tips for Best Results
Metadatos iniciales y encabezados de sección leídos del archivo original el 14/09/2026 · 6618 caracteres en total

01 Qué hace

Qué hace el skill enhance-prompt 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 convierte ideas de UI poco definidas en prompts adaptados para la generación en Stitch. Actuando como un Stitch Prompt Engineer, auditar la entrada en busca de plataforma, tipo de página, estructura, estilo visual, colores y componentes ausentes, luego reescribe expresiones vagas en nombres de componentes específicos, amplifica los adjetivos de ambiente, agrupa el contenido en secciones numeradas y da formato a cada color como nombre, código hex y función.

Cuando el proyecto tiene un DESIGN.md, su paleta, tipografía y estilos de componentes se incorporan en un bloque DESIGN SYSTEM (REQUIRED); cuando no lo tiene, una sugerencia remite al skill design-md. La salida es texto copiable por defecto, o un archivo como next-prompt.md para stitch-loop.

Qué produce

  • Un prompt mejorado que comienza con una descripción de una línea sobre el propósito y el ambiente de la página, seguida del bloque del sistema de diseño y la estructura de página numerada.
  • Un archivo opcional next-prompt.md, escrito para usarse con el skill stitch-loop.
  • Un archivo opcional con un nombre personalizado elegido por el usuario.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Auditar la Entrada sin Procesar

    El skill verifica el prompt del usuario según seis elementos: plataforma, tipo de página, estructura, estilo visual, colores y componentes.

  2. 02
    Incorporar el Sistema de Diseño

    Busca un DESIGN.md en el proyecto actual y lee el bloque del sistema de diseño para que la paleta, la tipografía y los estilos de componentes puedan reutilizarse en el nuevo prompt.

  3. 03
    Aplicar las Técnicas de Mejora

    Los términos vagos se convierten en componentes con nombre, los adjetivos se amplifican en un ambiente, el contenido se organiza en secciones numeradas y los colores se escriben con un nombre descriptivo, un valor hex y una función.

  4. 04
    Dar Formato a la Salida en un Orden Fijo

    El resultado comienza con una descripción de una línea sobre el propósito y el ambiente de la página, luego un bloque DESIGN SYSTEM (REQUIRED), y después una Estructura de Página numerada.

02 Encuentra tu caso de uso

Cuándo usar la skill enhance-prompt

Usa el skill enhance-prompt en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El ajuste y los límites a continuación están tomados del propio archivo del skill.

Buen caso de uso

  • Perfeccionando un prompt de UI antes de enviarlo a Stitch.
  • Retrabajando un prompt que ya había producido resultados de generación deficientes.
  • Añadir consistencia de sistema de diseño a una idea simple.
  • Convertir un concepto vago en un prompt estructurado y accionable.

Conozca los límites

  • Agrupar varios cambios no relacionados en una sola solicitud de edición se desaconseja activamente; las ediciones deben gestionarse un cambio a la vez.
  • El sobrediseño es un antipatrón: cuando el usuario quiere algo simple, la mejora debe mantenerse acorde con esa intención.

Qué proporcionar

  • La idea inicial o el prompt existenteUna idea vaga de generación de UI o un prompt de bajo rendimiento es el material de partida que el skill reescribe.
  • El DESIGN.md del proyecto, si existeSe lee del proyecto actual para que su paleta, tipografía y estilos de componentes puedan trasladarse al nuevo prompt.

03 Dentro del skill

Reglas que el skill enhance-prompt da a Claude Code y Codex

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

  1. Consulte primero la guía de Stitch

    Antes de mejorar nada, consulte la documentación oficial de prompting de Stitch, ya que sus recomendaciones pueden anular los patrones incorporados en este skill.

  2. Reformular DESIGN.md como un bloque obligatorio

    Cuando existe un DESIGN.md, su contenido no se cita tal cual; se reformatea en una sección encabezada DESIGN SYSTEM (REQUIRED) en el resultado.

  3. Cubrir el caso de DESIGN.md ausente

    Si no hay un DESIGN.md presente, el prompt mejorado termina con una nota que dirige al usuario al skill design-md para diseños de varias pantallas consistentes.

  4. Escribir los colores en un patrón fijo

    Cada color se expresa como nombre descriptivo, código hexadecimal entre paréntesis y el rol funcional que desempeña, nunca como una muestra sin contexto o un adjetivo vago.

  5. Numerar las secciones de la página

    El contenido de la página se agrupa en secciones numeradas para que Stitch lea la jerarquía, en lugar de dejarse como un párrafo de prosa.

  6. Salida en texto por defecto

    A menos que el usuario indique lo contrario, se devuelve el prompt mejorado como texto para copiar; escribir un archivo es opcional.

  7. Preservar el resto en ediciones puntuales

    Cuando la solicitud es una edición y no una página nueva, el prompt debe indicar que solo se realiza el cambio descrito y que todos los elementos existentes se mantienen.

04 Ponlo a trabajar

Instala enhance-prompt 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.

Añade enhance-prompt 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 enhance-prompt

Forma genérica de la CLI skills para plugins/stitch-utilities/skills/enhance-prompt/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
make me a login page

Fuente: ejemplo de SKILL.md (textual).

Revisa el primer resultado

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

  • El prompt contiene un bloque DESIGN SYSTEM (REQUIRED) que enumera platform, theme, background, primary accent y text primary en ese orden.
  • Cada color se presenta como nombre descriptivo, código hexadecimal y rol funcional.
  • El contenido de la página aparece como secciones numeradas, como un encabezado con navegación, en lugar de una descripción suelta.
  • No sobrevive ninguna palabra vaga de componente; una solicitud de botón se convierte en un botón de llamada a la acción principal.
  • El bloque del sistema de diseño está presente en todo momento, ya que la consistencia es lo que hace que el resultado de varias páginas se mantenga coherente.
  • Para una edición puntual, el prompt indica la ubicación, el estilo, el placeholder, el comportamiento y el ancho en lugar de describir toda la página de nuevo.

En OpenDesign enhance-prompt viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer 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-utilities/skills/enhance-prompt/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 recuento de uso para enhance-prompt.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Requisitos previosConsulte la guía oficial de prompts de Stitch antes de mejorar, ya que puede sustituir estos patrones.
  2. Cuándo usar este skillCuatro desencadenantes: pulir un prompt, corregir un resultado deficiente, añadir consistencia de diseño, estructurar un concepto vago.
  3. Proceso de mejoraCuatro pasos: evaluar carencias, revisar DESIGN.md, aplicar técnicas de palabras clave, vibe, estructura y color, y luego dar formato.
  4. Opciones de salidaTexto para copiar por defecto; opcionalmente escribir next-prompt.md o un archivo con el nombre que indique el usuario.
  5. EjemplosUna solicitud vaga de página de inicio de sesión y una edición puntual para añadir una barra de búsqueda, ambas con el resultado mejorado completo.
  6. Consejos para obtener los mejores resultadosCinco recordatorios sobre especificidad, intención del usuario, estructura numerada, inclusión del sistema de diseño y ediciones de un solo cambio.
La descripción propia del Skill
"Transforma ideas vagas de UI en prompts pulidos y optimizados para Stitch. Mejora la especificidad, añade palabras clave UI/UX, inyecta contexto del sistema de diseño y estructura la salida para mejores resultados de generación."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 6.618 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill enhance-prompt

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

¿Necesito un DESIGN.md antes de poder usar este skill?

No. El skill simplemente busca uno en el proyecto actual. Si no hay ninguno, el prompt mejorado termina con una sugerencia para crear uno con el skill design-md, de modo que todas las páginas generadas compartan el mismo lenguaje visual.

¿Cómo es realmente el prompt final?

Una descripción de una línea sobre el propósito y la vibe de la página, un bloque DESIGN SYSTEM (REQUIRED) con tokens de plataforma, tema, fondo y acento, y luego una Page Structure numerada. La sección de estructura enumera cada área, como el encabezado, el hero y el pie de página.

¿Guarda el prompt en algún lugar o solo lo muestra?

Por defecto devuelve el prompt mejorado como texto para que lo copie. Si solicita un archivo, puede escribir next-prompt.md para el skill stitch-loop, o un nombre de archivo que usted indique.

¿Qué herramientas necesita este skill?

Declara Read y Write como sus herramientas permitidas, lo que cubre la lectura de un DESIGN.md y la escritura de un archivo de prompt opcional.

Enhance Prompt

Ejecuta enhance-prompt en una Tarea de Diseño de Interfaz Real.

El skill enhance-prompt viene incluido en OpenDesign. Descarga la aplicación, selecciona el skill en Plugins → Skills, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt