Sistemas de diseño para agentes de IA.
Elige un sistema de diseño completo para tu sitio web o tu app (colores, fuentes, escala tipográfica, radio de esquina y espaciado, en claro y en oscuro) y dáselo a Codex o a Claude Code de una sola vez: como un archivo DESIGN.md, un tema de shadcn o un único prompt.
24 design systems
- PaperWebSereno, editorial y legible, como la página de un libro bien maquetado.Headings in Source Serif 4
- SwissWebNegro, blanco y un solo rojo señal sobre una cuadrícula estricta.Headings in Archivo
- LedgerWebUna interfaz densa y oscura para números, con un acento ámbar de terminal.Headings in IBM Plex Sans
- MonoWebPáginas blancas lisas, tipografía Geist y un solo azul cobalto, hechos para documentación y herramientas de desarrollo.Headings in Geist
- AtelierWebMarfil, tinta y una serif refinada, como el lookbook de una casa de moda.Headings in Cormorant Garamond
- NoirWebNegro, blanco hueso y una serif enorme. El trabajo es el único color.Headings in Instrument Serif
- HarborWebAzul marino, espacio en blanco y una estructura firme para productos B2B serios.Headings in Plus Jakarta Sans
- NordicWebAzules apagados, grises suaves y una seguridad tranquila para herramientas de productividad.Headings in Manrope
- ClinicWebVerde azulado sereno, tipografía clara y lenguaje sencillo para webs de salud.Headings in Source Sans 3
- TerraWebMusgo, lino y arcilla para marcas que trabajan cerca de la tierra.Headings in DM Serif Display
- ChalkWebLuminoso, redondeado y alentador, como una buena aula.Headings in Nunito
- PopWebContornos negros gruesos, sombras duras y amarillo limón. Ruidoso a propósito.Headings in Unbounded
- StrideAppGrandes números condensados y un naranja enérgico para apps de movimiento.Headings in Barlow Condensed
- PantryAppCálido, amable y apetitoso, para apps de comida y pedidos.Headings in Bricolage Grotesque
- CalmAppVerde salvia suave, una serif amable y espacio para respirar.Headings in Newsreader
- WalletAppSaldos claros, verde sereno y números en los que confiar.Headings in Manrope
- FocusAppUna página blanca, un solo azul y nada más entre tú y la tarea.Headings in Instrument Sans
- ChatterAppBurbujas redondas, un verde azulado amable y las conversaciones en primer plano.Headings in Plus Jakarta Sans
- VoyageAppFotos a sangre, azul océano y una serif que parece una postal.Headings in DM Serif Display
- BoutiqueAppFotos de borde a borde, una serif Bodoni y negro sobre blanco, como un escaparate.Headings in Bodoni Moda
- QuestAppRachas, XP y botones robustos que hacen que practicar parezca un juego.Headings in Nunito
- CareAppUna tarea clara por pantalla, para pacientes que solo quieren resolverlo.Headings in Source Sans 3
- VinylAppPrimero la portada, un botón de reproducir rosa intenso y una sala oscura para escuchar.Headings in Syne
- HearthAppLuz ámbar cálida sobre una pantalla de inicio oscura y tranquila.Headings in Outfit
Qué incluye cada sistema de diseño
- Colores para modo claro y oscuro, con nombres por rol, como los nombran shadcn y Tailwind: background, primary, muted, border, ring y cinco colores de gráfico. Todos los colores de texto cumplen el contraste WCAG sobre su fondo.
- Fuentes y una escala tipográfica, de Google Fonts, con tamaños, interlineados y espaciado entre letras desde el display hasta la letra pequeña.
- Radio de esquina, espaciado y sombras, más una cuadrícula para sitios web, o áreas táctiles, barra de pestañas y márgenes de pantalla para apps móviles.
- Reglas de uso: para qué sirve, qué componentes construir y qué evitar, para que el agente tome las decisiones que tomaría el sistema.
Tres formas de usar uno
- Copia el prompt en Codex o Claude Code. Apunta al agente al DESIGN.md en texto plano del sistema, que guarda en tu proyecto y sigue en todas las pantallas.
- Descarga el DESIGN.md y ponlo tú mismo en la raíz de tu proyecto. Consulta qué es DESIGN.md y cómo usarlo.
- Instala el tema de shadcn con un solo comando, o pega el
globals.cssen un proyecto de Tailwind v4.
Los 24 sistemas también están en GitHub, con sus archivos DESIGN.md y temas de shadcn: ummydev/design-md.
Sistemas web y de apps
Los sistemas web están pensados para landing pages, sitios de marketing, documentación y dashboards. Los sistemas de apps están pensados para pantallas de móvil: áreas táctiles más grandes, una barra de pestañas inferior y tamaños de texto que se leen bien en iOS y Android. Cada sistema tiene su propio aspecto, elegido para evitar los patrones que hacen que las interfaces hechas con IA se parezcan todas, como los degradados morados y el glassmorphism.
Preguntas frecuentes
¿Estos sistemas de diseño son gratis?
Sí. Puedes copiar, descargar y usar cada sistema de diseño gratis en tus propios proyectos.
¿Funcionan con otras herramientas de IA además de Codex y Claude Code?
Sí. DESIGN.md es Markdown en texto plano, así que cualquier agente que lea archivos de tu proyecto puede seguirlo, y el tema de shadcn funciona en cualquier proyecto de shadcn o Tailwind.
¿Puedo cambiar un sistema de diseño?
Sí. Edita el DESIGN.md o las variables CSS, o pídele a tu agente que los ajuste, por ejemplo para cambiar el color principal por el de tu marca.