¿Qué es DESIGN.md? El archivo de diseño que leen los agentes de código con IA (con ejemplos gratuitos para apps móviles)

DESIGN.md es un archivo Markdown que describe la identidad visual de un producto para los agentes de código con IA. El formato de Google Labs combina tokens de diseño en YAML (opcionales) con instrucciones redactadas sobre cómo usarlos. De este modo, el agente puede leer reglas concretas de color, tipografía, espaciado y componentes antes de generar una interfaz.

Para quienes desarrollan apps móviles, lo útil es poder llevar esas decisiones a la siguiente pantalla. Empieza con un archivo de nuestra biblioteca gratuita de DESIGN.md para móviles, revisa las pantallas junto a él y adapta las reglas a tu app.

¿Quién creó DESIGN.md?

Google Labs publica el formato DESIGN.md que utiliza Stitch. Google introdujo la importación y exportación de DESIGN.md en su anuncio de Stitch de marzo de 2026 y, más tarde, publicó el borrador de la especificación como código abierto en abril. El repositorio oficial todavía clasifica el formato como alpha, por lo que conviene revisar la especificación vigente si vas a construir una integración.

Un archivo llamado DESIGN.md también puede ser un documento común de un proyecto. Al compartir uno, aclara qué formato utiliza y mantén el texto sin formato disponible para poder inspeccionarlo.

¿Qué contiene un archivo DESIGN.md?

La especificación de Google Labs describe un cuerpo en Markdown con un bloque frontmatter en YAML opcional. Los grupos de tokens abarcan colores, tipografía, bordes redondeados, espaciado y componentes. El cuerpo redactado explica decisiones como dónde aplicar un color de acento o en qué se diferencian los botones de las tarjetas. Los valores exactos y las instrucciones escritas cumplen funciones distintas.

La especificación admite cadenas de color en CSS, incluidos valores hexadecimales. Si usas valores hexadecimales en YAML, escríbelos entre comillas: un símbolo de almohadilla sin comillas inicia un comentario. Una referencia como {colors.primary} apunta a otro token dentro del archivo. La biblioteca de Sleek muestra muestras hexadecimales junto al texto original para que puedas verificar la paleta antes de descargarla.

¿Cómo es un ejemplo mínimo de DESIGN.md?

Un archivo DESIGN.md inicial puede describir un sistema visual básico: una paleta, un estilo de cuerpo de texto, un valor de espaciado y un botón. El siguiente ejemplo fue preparado para esta guía. Guárdalo como DESIGN.md y ve añadiendo reglas según las necesidades de tu app móvil. Es un punto de partida, no una biblioteca de componentes terminada.

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

Revisa tus cambios con el comando de validación del repositorio. Sus resultados pueden ayudarte a detectar referencias rotas y problemas de contraste entre pares de colores. Aun así, inspecciona la pantalla generada: un archivo de texto no puede mostrarte una etiqueta cortada, un control confuso o un teclado tapando un formulario.

npx @google/design.md lint DESIGN.md

¿Cómo usar DESIGN.md con Claude Code?

Guarda DESIGN.md en tu proyecto y pide a Claude Code que lo lea para las tareas de interfaz. La documentación de memoria de Anthropic explica que las importaciones de CLAUDE.md se cargan al iniciar la sesión. Usa una referencia simple a la ruta para leerlo cuando haga falta, o una regla en .claude/rules/ con patrones paths que coincidan con tus archivos de interfaz.

Por ejemplo, añade esta instrucción a CLAUDE.md sin una importación @:

For UI tasks, read DESIGN.md before creating or changing app screens.

Después, solicita una pantalla específica con sus distintos estados. Por ejemplo, pide una lista de tareas que incluya un estado vacío y un estado de fallo de sincronización. Revisa si la interfaz generada respeta los valores del archivo y actualízalo cada vez que decidas modificar el diseño. Nuestra guía para diseñar con Claude explica este flujo de trabajo con más detalle.

¿Cómo usar DESIGN.md con Cursor o Stitch?

En Cursor, adjunta explícitamente DESIGN.md a la tarea o haz referencia a él desde una regla del proyecto. En Stitch, aprovecha su flujo de trabajo de importación y exportación de DESIGN.md para trasladar las reglas de diseño entre proyectos. La diferencia es importante: un agente de código necesita el archivo dentro de su contexto, mientras que Stitch ofrece un flujo de trabajo estructurado en torno a este formato.

Para Cursor, la documentación sobre reglas explica las reglas de proyecto y las referencias a archivos. Una regla puede indicarle al agente que lea DESIGN.md cuando haga cambios en la interfaz. Define con cuidado cuándo se aplica la regla para evitar cargar un documento de diseño extenso en tareas de backend que no lo requieren.

En el caso de Stitch, el anuncio sobre DESIGN.md de Google confirma que se pueden importar y exportar reglas de diseño entre proyectos. Tras realizar la importación, compara la pantalla generada con el archivo fuente y ajusta las reglas cuando sea necesario.

¿Cómo usa Sleek DESIGN.md para los estilos de apps móviles?

Sleek guarda un archivo de diseño en cada una de sus referencias destacadas reutilizables. Al seleccionar Usar este estilo y describir tu app, Sleek envía ese archivo junto con tu brief durante el proceso de generación. El archivo define la estética; tu brief determina el propósito y el contenido de la app. Puedes inspeccionar tanto las pantallas como el archivo de diseño antes de empezar.

La galería de referencias y la biblioteca de DESIGN.md comparten los mismos proyectos destacados. Sleek utiliza la estructura de Google Labs y añade propiedades de componentes como bordes y sombras, que el linter señala como advertencias. También incluye directrices sobre iconografía, ilustración, jerarquía y detalles visuales característicos. El archivo de estilo recoge las decisiones visuales para generar una nueva app.

Abre un estilo en la biblioteca para copiar o descargar su archivo DESIGN.md, o elige Use this style in Sleek para ingresar la idea de tu app. Si prefieres controlar Sleek directamente desde tu entorno de desarrollo, la guía de configuración para agentes explica esa integración independiente.

Preguntas frecuentes sobre DESIGN.md