Awesome Design.MD - Cómo aplicar a tu sitio los sistemas de diseño de sitios web conocidos
(github.com/VoltAgent)- DESIGN.md es un concepto introducido por Google Stitch: un documento de diseño en texto para que los agentes de IA lo lean y generen una UI consistente
- Sin Figma, esquemas JSON ni tooling adicional: basta con copiar un solo archivo Markdown en la raíz del proyecto para que el agente de codificación con IA reconozca de inmediato el estilo de la UI
- Forma pareja con
AGENTS.md, yDESIGN.mddefine la apariencia visual y la sensación - Cada archivo está compuesto por 9 secciones estándar, como paleta de colores, tipografía, estilo de componentes, layout y comportamiento responsivo
- Para cada sitio se ofrece un set de 3 archivos:
DESIGN.md+preview.html+preview-dark.html - Incluye los sistemas de diseño de más de 60 servicios de IA, herramientas de desarrollo, fintech y enterprise, como Claude, Vercel, Stripe, Notion, Figma y Cursor
- Copia el
DESIGN.mddel sitio que quieras a la raíz del proyecto e indícale al agente de IA que construya la UI tomando ese archivo como referencia - Con una sola frase, "hazme una página que se vea así", es posible generar una UI que coincida con el sitio original
- Copia el
- Licencia MIT
Estructura de cada archivo DESIGN.md
-
Sigue el formato de Stitch DESIGN.md y lo amplía con las 9 secciones siguientes
# Sección Contenido capturado 1 Visual Theme & Atmosphere Estado de ánimo, densidad, filosofía de diseño 2 Color Palette & Roles Nombre del color + HEX + rol funcional 3 Typography Rules Familia tipográfica, tabla completa de jerarquía 4 Component Stylings Botones, tarjetas, entradas, navegación y estados 5 Layout Principles Escala de espaciado, grid, filosofía de márgenes 6 Depth & Elevation Sistema de sombras, jerarquía de superficies 7 Do's and Don'ts Guías de diseño y antipatrones 8 Responsive Behavior Breakpoints, objetivos táctiles, estrategia de reducción 9 Agent Prompt Guide Referencia rápida de colores, prompts listos para usar
Colecciones incluidas
- AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
- Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
- Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
- Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
- Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
- Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber
5 comentarios
El concepto suena bien y parece útil, pero... El diseño web también debe tener derechos de autor, y me pregunto si no habría problemas de copyright o incluso de ética profesional al copiarlo y aplicarlo así, prácticamente completo.
A mí también se me ocurrió eso de inmediato. Últimamente parece que simplemente se da por hecho que los servicios o agentes de IA tienen una especie de autoridad extralegal. ¿De verdad está bien avanzar así, como con los ojos medio vendados?...
Qué bien. Quienes trabajan en frontend y diseño suelen preparar este tipo de cosas de antemano antes de empezar.
Pero normalmente el sistema de diseño viene dentro del framework de frontend en forma de fragmentos de código, así que ¿no habría que usar eso de manera compartida..?
Seguir
DESIGN.mdsuena más bien a que van a generar esos colores e indicaciones de forma arbitraria cada vez...Creo que sería bueno usarlo no solo para copiar, sino para crear un nuevo sistema de diseño a partir de varios sistemas de diseño.