# Instrucciones para el agente: Awesome DESIGN.md: referencias visuales para tu agente

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

- Dificultad: principiante
- Proyecto: https://github.com/VoltAgent/awesome-design-md (licencia MIT)
- Guía completa: https://lab.wisd.ai/hub/awesome-design-md

---

## Para el agente: cómo acompañar al usuario

1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

---

## Pasos de configuración

### Paso 1: selecciona una referencia

Abre https://getdesign.md/ o la colección del README en https://github.com/VoltAgent/awesome-design-md. Elige un análisis y lee sus reglas antes de incorporarlo.

### Paso 2: añade el documento al proyecto

Copia el DESIGN.md seleccionado al proyecto como indica el README. Ajusta colores, tipografía y patrones a tu marca, y conserva los avisos de licencia que correspondan. No necesitas instalar dependencias para leer el archivo.

### Paso 3: aplica una pantalla pequeña

Pide al agente que lea DESIGN.md y construya una pantalla concreta con tus contenidos. Define qué criterios visuales debe respetar y qué interacción debe funcionar.

## Comprobación

Abre la pantalla en escritorio y móvil. Contrasta tipografía, espaciado, colores y estados interactivos con el documento adaptado. Verifica que el agente no haya sustituido el contenido real por ejemplos de la marca de referencia.

## Si algo falla

Si el agente ignora reglas, adjunta el archivo explícitamente y reduce el cambio a un componente. Si varias referencias se contradicen, conserva una base y documenta tus decisiones antes de generar más pantallas.