Ejemplos de DESIGN.md: plantillas gratis para webs y apps.

La forma más rápida de escribir un buen DESIGN.md es partir de uno completo. Aquí tienes 24 ejemplos gratis, 12 para sitios web y dashboards y 12 para apps móviles. Cada uno incluye colores para modo claro y oscuro, fuentes, una escala tipográfica, radio de esquina, espaciado y reglas de uso, y cada uno es un archivo Markdown sin formato que tu agente puede leer desde su URL.

Actualizado el 6 de noviembre de 2026 · 5 min de lectura

Qué aspecto tiene un DESIGN.md completo

Un DESIGN.md tiene un front matter YAML con los tokens de diseño, seguido de secciones que explican cómo usarlos. Esta es una versión abreviada del ejemplo de Swiss:

---
version: alpha
name: 'Swiss'
colors:
  primary: '#D70015'
  on-primary: '#FFFFFF'
  surface: '#FFFFFF'
  on-surface: '#0A0A0A'
typography:
  headline-lg:
    fontFamily: 'Archivo'
    fontSize: 56px
    fontWeight: 700
rounded:
  md: 0px
---

## Overview

Swiss follows the International Typographic Style: big grotesque type,
a strict grid, square corners and lots of white.

## Do's and Don'ts

- Do make the headline the biggest thing on the page.
- Don't round corners or add shadows.

Los archivos completos incluyen además colores secundarios y terciarios, una escala tipográfica del display a la letra pequeña, espaciado, componentes y layout. Para conocer el formato en sí, consulta DESIGN.md para Codex.

Ejemplos de DESIGN.md para sitios web y dashboards

Paper, editorial: Sereno, editorial y legible, como la página de un libro bien maquetado. DESIGN.md
Swiss, minimalista en cuadrícula: Negro, blanco y un solo rojo señal sobre una cuadrícula estricta. DESIGN.md
Ledger, dashboard SaaS oscuro: Una interfaz densa y oscura para números, con un acento ámbar de terminal. DESIGN.md
Mono, documentación técnica: Páginas blancas lisas, tipografía Geist y un solo azul cobalto, hechos para documentación y herramientas de desarrollo. DESIGN.md
Atelier, moda de lujo: Marfil, tinta y una serif refinada, como el lookbook de una casa de moda. DESIGN.md
Noir, portfolio oscuro: Negro, blanco hueso y una serif enorme. El trabajo es el único color. DESIGN.md
Harbor, B2B empresarial: Azul marino, espacio en blanco y una estructura firme para productos B2B serios. DESIGN.md
Nordic, SaaS sereno: Azules apagados, grises suaves y una seguridad tranquila para herramientas de productividad. DESIGN.md
Clinic, salud: Verde azulado sereno, tipografía clara y lenguaje sencillo para webs de salud. DESIGN.md
Terra, ecológico y terroso: Musgo, lino y arcilla para marcas que trabajan cerca de la tierra. DESIGN.md
Chalk, educativo y cercano: Luminoso, redondeado y alentador, como una buena aula. DESIGN.md
Pop, neobrutalista: Contornos negros gruesos, sombras duras y amarillo limón. Ruidoso a propósito. DESIGN.md

Ejemplos de DESIGN.md para apps móviles

Los ejemplos de apps añaden las reglas que necesitan las pantallas de móvil: áreas táctiles, una barra de pestañas inferior, márgenes de pantalla y cómo se presentan los números.

Stride, app de fitness: Grandes números condensados y un naranja enérgico para apps de movimiento. DESIGN.md
Pantry, app de pedidos de comida: Cálido, amable y apetitoso, para apps de comida y pedidos. DESIGN.md
Calm, app de bienestar: Verde salvia suave, una serif amable y espacio para respirar. DESIGN.md
Wallet, app de finanzas: Saldos claros, verde sereno y números en los que confiar. DESIGN.md
Focus, app de tareas: Una página blanca, un solo azul y nada más entre tú y la tarea. DESIGN.md
Chatter, app de mensajería: Burbujas redondas, un verde azulado amable y las conversaciones en primer plano. DESIGN.md
Voyage, app de viajes: Fotos a sangre, azul océano y una serif que parece una postal. DESIGN.md
Boutique, app de compras de moda: Fotos de borde a borde, una serif Bodoni y negro sobre blanco, como un escaparate. DESIGN.md
Quest, app de aprendizaje gamificado: Rachas, XP y botones robustos que hacen que practicar parezca un juego. DESIGN.md
Care, app de salud: Una tarea clara por pantalla, para pacientes que solo quieren resolverlo. DESIGN.md
Vinyl, app de música y podcasts: Primero la portada, un botón de reproducir rosa intenso y una sala oscura para escuchar. DESIGN.md
Hearth, app de hogar inteligente: Luz ámbar cálida sobre una pantalla de inicio oscura y tranquila. DESIGN.md

Cada nombre enlaza a una vista previa en vivo en modo claro y oscuro; cada enlace a DESIGN.md abre el archivo sin formato.

Cómo usar un ejemplo

Copia el prompt de la página del sistema en Codex o Claude Code. Le indica al agente que guarde el archivo como DESIGN.md en tu proyecto y lo siga en cada pantalla.
O descarga el archivo y ponlo tú mismo en la raíz de tu proyecto. Codex lee AGENTS.md automáticamente pero no DESIGN.md, así que añade a AGENTS.md una línea que apunte a él.
Cambia lo que necesites. Cambia el color principal por el de tu marca, o pídele a tu agente que ajuste las fuentes, y conserva el resto.

DESIGN.md es un formato de texto sin formato, así que el mismo archivo funciona en otras herramientas que lo leen, como Google Stitch.

Preguntas frecuentes

¿Estas plantillas de DESIGN.md son gratis?

Sí. Todos los ejemplos son gratis para copiar y usar en tus propios proyectos.

¿Hay algún ejemplo de DESIGN.md para una app móvil?

Sí. Doce de los ejemplos están pensados para apps móviles, desde fitness y pedidos de comida hasta banca, mensajería y hogar inteligente.

¿Puedo hacer mi propio DESIGN.md?

Sí. Usa el generador de DESIGN.md para crear uno a partir de tus propios colores, fuentes, esquinas y espaciado.