Browse commands

/impeccable document

Document

Genera un DESIGN.md conforme a la especificación que captura tu sistema visual para que cada agente de IA mantenga la coherencia de marca.

DESIGN.mdGoogle Stitch format
01Overview

Creative North Star: “The Editorial Sanctuary.” Quiet type, generous air, one committed accent.

02Colors
03Typography
AaCormorant Garamond · Instrument Sans
04Elevation

Flat by default. Shadows appear only as a response to state.

05Components
06Do’s and Don’ts
Tint neutrals toward the accent hue.Gradient text for emphasis.

Las seis secciones son fijas, en un orden fijo, con nombres fijos. Junto a él, DESIGN.json se genera como archivo complementario legible por máquina para el panel de diseño del Modo Live.

Cuándo usarlo

Ejecuta /impeccable document una vez que tengas suficiente sistema visual para documentar: colores, tipografía, al menos un botón y una tarjeta. El comando escanea tu código, extrae los tokens y patrones de componentes que encuentra, y escribe un DESIGN.md en la raíz del proyecto que sigue el formato Google Stitch DESIGN.md, seis secciones en un orden fijo, interoperable con cualquier otra herramienta compatible con DESIGN.md.

Recurre a él cuando:

  • Acabas de ejecutar /impeccable teach y PRODUCT.md ya existe. Document es el archivo visual correspondiente.
  • Un comando te sugirió usarlo. Live, craft y polish leen DESIGN.md. Si no existe, la habilidad sugiere ejecutar document primero.
  • El diseño se ha desviado de un DESIGN.md anterior y el archivo ya no describe el sistema actual.
  • Antes de una gran redisición, para capturar el estado actual como referencia para la siguiente dirección.

Para proyectos sin código aún (una ejecución fresca de teach, nada construido), existe un modo semilla: /impeccable document --seed hace cinco preguntas estratégicas rápidas (estrategia de color, dirección tipográfica, energía del movimiento, referencias y anti-referencias) y escribe un esqueleto. Vuelve a ejecutar en modo escaneo cuando haya código.

Cómo funciona

La pasada de escaneo busca recursos de diseño en orden de prioridad: propiedades personalizadas CSS, configuración Tailwind, temas CSS-in-JS, archivos de tokens de diseño, código fuente de componentes, la hoja de estilos global, y finalmente estilos calculados del renderizado en vivo si hay un navegador disponible. Extrae automáticamente todo lo que puede, luego hace una pregunta agrupada para las partes que necesitan aporte creativo: la Estrella Polar Creativa (una única metáfora con nombre para todo el sistema, como “The Editorial Sanctuary”), nombres descriptivos de colores, la filosofía de elevación y el carácter de los componentes.

El resultado es un DESIGN.md con exactamente seis secciones: Overview, Colors, Typography, Elevation, Components, Do’s and Don’ts. Los encabezados son fijos carácter por carácter para que el archivo sea analizable por otras herramientas. Junto a él, se escribe DESIGN.json como archivo complementario legible por máquina. Ese archivo es lo que el panel de diseño del modo live usa para renderizar los tiles de botón, input, nav y tarjeta reales de este proyecto en lugar de una aproximación genérica.

Cada otro comando lee DESIGN.md al invocarse. Variantes, pulidos, auditorías y nuevas funcionalidades heredan el sistema visual sin que se lo digan.

Pruébalo

/impeccable document

En un proyecto con tokens ya definidos, esto toma unos dos minutos: el escaneo encuentra tu paleta y pila tipográfica, eliges una Estrella Polar entre 2 o 3 opciones, confirmas nombres descriptivos de colores (“Deep Muted Teal-Navy”, no “blue-800”), y el archivo aparece en la raíz del proyecto.

En un proyecto nuevo:

/impeccable document --seed

Cinco preguntas, unos cinco minutos. El archivo es un esqueleto, marcado con un comentario <!-- SEED --> para ser honesto sobre lo que es. Vuelve a ejecutar sin el flag una vez que hayas implementado los tokens.

Errores comunes

  • Ejecutarlo demasiado pronto. En un proyecto sin tokens implementados, el modo semilla es lo correcto. No fabriques una especificación completa que el código no pueda respaldar. Un DESIGN.md falso es peor que ningún DESIGN.md.
  • Tratar DESIGN.md como documentación solo para humanos. Es principalmente para la IA. Cada otro comando lo lee. La firmeza del formato (“nunca”, “siempre”, reglas con nombre) es intencionada.
  • Añadir una sección de nivel superior Layout / Motion / Responsive. La especificación tiene seis secciones, en un orden fijo, con nombres fijos. Incluye el contenido de layout o motion en Overview (reglas de filosofía) o Components (comportamiento por componente).
  • Sobrescribir un DESIGN.md existente sin preguntar. Document siempre confirma primero. Si quieres empezar de cero, renombra el archivo existente o dile explícitamente a la habilidad que lo sobrescriba.