lab
Esc

Prueba con

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

configuración principiante claude-codecodexdiseñotokens

DESIGN.md: conserva tokens y criterios de tu sistema visual

Comparte con los agentes los valores y las razones de tu diseño en un archivo que puedes validar y comparar entre versiones.

✓ verificado el 27 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: prepara el documento

Comprueba Node.js ≥18.0.0 y npm/npx, según el manifiesto de la CLI. Guarda el ejemplo completo del README como DESIGN.md y sustituye los tokens por los reales. Antes de comparar, guarda una segunda revisión como DESIGN-v2.md en la misma carpeta.

Paso 2: valida

npx @google/design.md lint DESIGN.md

Paso 3: compara una revisión

Con ambos archivos presentes:

npx @google/design.md diff DESIGN.md DESIGN-v2.md

Comprobación

Revisa el JSON de hallazgos. La validación sale con código 1 si hay errores; contrasta después una pantalla con los tokens.

Si algo falla

En Windows usa el alias documentado: npx -p @google/design.md designmd lint DESIGN.md. Corrige referencias rotas antes de exportar.

ver en .md ¿Prefieres el recurso entero?

Qué es

DESIGN.md es una especificación de Google Labs Code para describir una identidad visual a agentes. Une tokens legibles por máquinas con explicaciones en Markdown.

Para qué te sirve

  • Cuando una nueva sesión vuelve a elegir colores y tipografías distintos.
  • Cuando necesitas revisar cambios del sistema visual por separado del código.
  • Cuando quieres exportar tokens a CSS u otras herramientas.

Cómo funciona

Los valores normativos se escriben en YAML, al inicio o dentro de secciones. La prosa explica cómo aplicarlos. La CLI comprueba estructura y referencias, revisa ciertos pares de contraste y compara dos versiones para señalar cambios y regresiones.

Antes de empezar

Necesitas un archivo DESIGN.md con los valores reales de tu producto y Node.js y npm/npx disponibles. La especificación documenta colores, tipografía, espaciado, formas y componentes. Empieza por una muestra pequeña de tu sistema existente.

Límites y alternativas

El formato sigue en fase alfa según la especificación consultada. Un archivo válido no garantiza que la aplicación respete los tokens ni que toda la interfaz sea accesible. Awesome-design-md aporta ejemplos de sistemas; este proyecto define el formato y sus herramientas.

Recursos