lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

configuración principiante design-mdfrontenddiseñoagentes

Awesome DESIGN.md: referencias visuales para tu agente

Dale a tu agente una referencia escrita de tipografía, colores y composición antes de generar una interfaz. Adapta los patrones de diseño al producto que estás construyendo.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

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.

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.

ver en .md ¿Prefieres el recurso entero?

Qué es

Awesome DESIGN.md es una colección de análisis de diseño en Markdown mantenida por VoltAgent. La web getdesign.md enlaza el repositorio; los archivos describen patrones visuales de sitios conocidos para usarlos como contexto de generación.

Para qué te sirve

  • Cuando tu agente genera pantallas sin consistencia entre ellas.
  • Cuando sabes qué tipo de composición te interesa, pero te cuesta expresarla.
  • Cuando necesitas una referencia de colores y tipografía que puedas revisar en Git.

Cómo funciona

Eliges un análisis y llevas su DESIGN.md al proyecto. El agente lo lee junto con tus requisitos antes de construir la interfaz. Ese documento describe apariencia y reglas visuales; las instrucciones operativas del agente siguen en su archivo correspondiente. La colección se consulta como documentación, sin instalar un servidor.

Antes de empezar

Necesitas un agente que pueda leer Markdown y un proyecto donde aplicar los criterios. Consultar los archivos no requiere claves; generar código puede consumir tu suscripción o API. La licencia MIT está declarada en el repositorio de la colección.

Límites y alternativas

Los análisis son referencias del mantenedor, no sistemas oficiales de las marcas descritas. Adapta la identidad y los recursos gráficos a tu producto. Un documento visual no valida accesibilidad, funcionamiento ni diseño adaptable: comprueba la interfaz en sus tamaños reales. También puedes redactar un DESIGN.md propio cuando ya tengas una identidad definida.

Recursos