Generador de DESIGN.md.

Rellena tus colores, fuentes, radios de esquina y espaciado, y obtén un archivo DESIGN.md que les dice a Codex y a otros agentes de programación qué aspecto debe tener tu producto. Funciona en tu navegador; nada de lo que escribes se sube ni se guarda.

DESIGN.md

---
version: alpha
name: "Pagely"
colors:
  primary: "#1F3D2B"
  on-primary: "#FAF6EE"
  secondary: "#E8735A"
  tertiary: "#F2C14E"
  neutral: "#FAF6EE"
  surface: "#FFFFFF"
  on-surface: "#1F2A22"
typography:
  headline-lg:
    fontFamily: "Georgia"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
  body-md:
    fontFamily: "system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 16px
  lg: 22px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---

## Overview

La identidad visual de Pagely. Cada pantalla usa solo los tokens de este archivo.

## Colors

- **primary (#1F3D2B):** Acciones principales y los elementos más importantes.
- **on-primary (#FAF6EE):** Texto e iconos sobre primary.
- **secondary (#E8735A):** Acentos de apoyo, con moderación.
- **tertiary (#F2C14E):** Elementos destacados como insignias y barras de progreso.
- **neutral (#FAF6EE):** El fondo de la página.
- **surface (#FFFFFF):** Tarjetas, paneles y campos de entrada.
- **on-surface (#1F2A22):** Texto del cuerpo e iconos sobre superficies.

## Typography

Georgia para los titulares, system-ui para todo lo demás. Usa los tamaños definidos arriba y ningún otro.

## Layout

El espaciado sigue la escala: 8px entre elementos relacionados, 16px dentro de los componentes, 24px entre secciones.

## Shapes

Las esquinas miden 8px en elementos pequeños, 16px en botones y campos, 22px en tarjetas.

## Components

Los botones principales usan el color primary con texto on-primary. Usa un solo botón principal por pantalla.

## Do's and Don'ts

- Mantén el contraste del texto en WCAG AA (4.5:1) o superior.
- Reutiliza estos tokens en lugar de inventar valores nuevos.
- No introduzcas colores que no estén definidos aquí.
- No mezcles más de dos tamaños de texto en una misma tarjeta.

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo crear un DESIGN.md

Ponle nombre a tu producto y, si quieres, describe en una o dos frases qué sensación debe transmitir. Esa descripción se convierte en el campo description del archivo y en su Overview.
Define los siete colores: primary, on-primary, secondary, tertiary, neutral, surface y on-surface. Elígelos en las muestras o pega códigos HEX. Si el texto de alguna de las parejas fuera difícil de leer (por debajo de 4.5:1), el formulario indica qué pareja es.
Define la tipografía: una fuente para los titulares y otra para el cuerpo, con un tamaño para cada una.
Define el radio de esquina y el espaciado, cada uno en tres pasos: pequeño, mediano y grande (sm, md y lg).
Copia o descarga el archivo. Se actualiza mientras escribes y parte de un ejemplo completo: Pagely, la app de lectura de nuestra guía de DESIGN.md.

El archivo sigue el formato DESIGN.md de Google Labs:

Tokens en un front matter YAML: tus siete colores, un estilo tipográfico headline-lg y otro body-md, las escalas de radio de esquina y de espaciado, y un componente button-primary que hace referencia a ellos.
Secciones de texto en el orden que marca el formato: Overview, Colors, Typography, Layout, Shapes, Components y Do’s and Don’ts, con una nota sobre para qué sirve cada color y cuatro normas que seguir.

Úsalo con Codex

Guarda el archivo como DESIGN.md en la raíz de tu proyecto, junto a AGENTS.md. Codex lee AGENTS.md automáticamente, pero no busca DESIGN.md por su cuenta, así que enlázalo desde AGENTS.md:

## Design

- Before any UI work, read DESIGN.md and use only its tokens.
- If a screen needs a value that DESIGN.md doesn't define, ask before inventing one.

Después pide pantallas como siempre:

Diseñar con DESIGN.md

Siguiendo DESIGN.md, diseña la pantalla de [inicio] como un único archivo HTML autocontenido. Usa solo los colores, tamaños de texto, radios de esquina y espaciados que define, y enumera lo que hayas necesitado y no esté definido.

A medida que crece tu producto, el archivo puede crecer con él. Añade más estilos tipográficos, componentes como tarjetas y campos, o una sección Elevation & Depth, a mano o con Codex, y comprueba el resultado con npx @google/design.md lint DESIGN.md. La guía de DESIGN.md explica el formato completo y cómo hacer que Codex escriba el archivo a partir de tu código actual.

Preguntas frecuentes

¿Qué es DESIGN.md?

Un archivo de texto que describe tu sistema de diseño a los agentes de programación con IA: colores exactos, tipografía, espaciado y componentes como tokens YAML, más un texto que explica cómo usarlos. Es un formato abierto de Google Labs que nació en Google Stitch, y su especificación sigue marcada como alpha.

¿Codex lee DESIGN.md automáticamente?

No. Codex lee AGENTS.md automáticamente, no DESIGN.md. Basta con una línea en AGENTS.md que le diga que lea DESIGN.md antes de cualquier trabajo de UI, como se muestra arriba.

¿Puedo añadir más de lo que pide el generador?

Sí. El generador cubre los tokens que necesitan la mayoría de las pantallas. El formato también admite más estilos tipográficos, más componentes y una sección Elevation & Depth; añádelos tú al archivo o pídeselo a Codex.

¿Es gratis? ¿Se sube lo que escribo?

Es gratis y no requiere registro. El archivo se crea en tu navegador, y nada de lo que escribes se sube ni se guarda.