Haz que Claude Code y Cursor creen interfaces iguales a una web

Por qué un DESIGN.md es mejor que una captura de pantalla#

Pasos#

1. 1

   Elige un sitio cuya interfaz se parezca a lo que estás creando

   Las pantallas de producto con una densidad parecida funcionan mejor que una landing con un gran hero. Si estás creando un dashboard, elige un producto que tenga uno. Mira primero la galería de DESIGN.md: puede que el archivo ya esté ahí.

2. 2

   Consigue su DESIGN.md

   Cópialo de la página de la galería, o pega la URL en la página de inicio de Design Extractor y haz una extracción Pro. Pro recorre las páginas clave del sitio, y una extracción tarda al menos un minuto.

3. 3

   Guárdalo como DESIGN.md en la raíz de tu repositorio

   Ponlo junto a README.md y AGENTS.md y haz commit, para que cada rama y el agente de cada compañero lean el mismo archivo.

4. 4

   Apunta a tu agente al archivo

   Añade una referencia breve en CLAUDE.md para Claude Code, o una regla de proyecto para Cursor. Los bloques están abajo.

5. 5

   Pide la interfaz con los términos del archivo

   Nombra tokens y componentes en tu prompt (primary, body-md, la receta de un botón) y pide al agente que enumere cualquier valor que no encuentre en lugar de inventarlo.

6. 6

   Revisa el resultado con el archivo

   Comprueba colores, fuentes, radios y estados con el DESIGN.md antes de aceptar el cambio.

Ejemplo práctico: Linear#

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Apunta a tu agente al archivo#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Prompts que usan los tokens#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Revisa lo que creó el agente#

• Colores. Busca valores hex en el diff. Cada uno debería estar en el DESIGN.md. Uno nuevo suele significar que el agente adivinó.
• Fuentes. Muchas marcas usan fuentes comerciales que no puedes distribuir. La sección Typography del archivo suele nombrar una alternativa de código abierto; asegúrate de que el agente cargó esa y no una fuente de respaldo cualquiera.
• Radios y espaciado. Los botones y las tarjetas deberían usar los tokens de redondeo del archivo, no un valor por defecto como 8px en todas partes.
• Estados. Los estilos de hover y focus forman parte de cada receta de componente. Recorre la página con el tabulador y revisa el anillo de foco.
• Recetas marcadas. Si el archivo marca una receta, su geometría es una aproximación. Compara ese componente con el sitio real.

Si editas el DESIGN.md a mano, compruébalo con el validador de DESIGN.md gratuito antes de que tu agente lo vuelva a leer.

Archivos usados en esta guía#

Cada una de estas páginas de la galería tiene el DESIGN.md completo para copiarlo en tu repositorio, con su paleta y su muestra tipográfica.

• 
  Software y SaaS · Productivity & Notes

  Linear

  El sistema de diseño de Linear es un producto de interfaz densa, orientado primero al modo oscuro y pensado para equipos de ingeniería. La paleta de superficies se apoya en negros casi puros (#08090a, #0f1011) con grises oscuros en capas para diferenciar la barra lateral, las tarjetas y los paneles. La tipografía es exclusivamente Inter Variable, con un interletraje negativo y preciso en los tamaños de titular, y Berkeley Mono para el código en línea. El lenguaje de radios es deliberadamente pequeño (predominan los de 2 a 6 px), y las formas de píldora se reservan para insignias y chips de estado. La elevación se expresa mediante bordes interiores sutiles de 1 px y sombras difusas de baja opacidad, en lugar de capas dramáticas. El color principal de la llamada a la acción es el índigo característico de Linear (#5e6ad2), que se usa en el botón de registro y en los enlaces clave.

• 
  Finanzas y fintech

  Stripe

  Stripe, el sitio de marketing de la página principal, usa un sistema de diseño muy controlado (HDS, Stripe Design System) basado en la fuente variable "sohne-var" en pesos ligeros (300–400), una paleta de marca que va del azul marino profundo al índigo, anclada en #533afd (Stripe Indigo), y un característico degradado espectral a sangre completa en el encabezado. Los componentes tienen radios bajos (4–6 px), sombras planas o mínimas y se estructuran en torno a una cuadrícula base de 8 px. El tono general es autoritario pero cercano: infraestructura financiera comunicada mediante una tipografía segura de sí misma y un uso contenido del color.

• 
  Desarrollo e infraestructura · Developer Tools & IDEs

  Supabase

  Supabase utiliza un sistema de diseño con prioridad al modo oscuro, anclado en un fondo casi negro y profundo (oklch ~0.19) con un acento verde vivo de marca (#3ecf8e / #3fcf8e). La disposición se organiza en una cuadrícula responsiva de tarjetas de funciones. Manrope se usa para los títulos de presentación e Inter para el texto de cuerpo y la interfaz, mientras que Source Code Pro se encarga de todos los contextos monoespaciados y de código. El sistema de color se basa en propiedades personalizadas de oklch con nombres semánticos. Las tarjetas tienen un radio de 12px con un tratamiento de borde sutil, los botones usan un radio de 6–8px, y la densidad general es moderada, con una cuadrícula base de espaciado de 8px.

Ver todos los ejemplos de DESIGN.md