Design.md

Source: https://github.com/VoltAgent/awesome-design-md at f6961238d5cd
License: MIT
Read the English original

This edition is an AI-assisted translation.

Colección curada de análisis DESIGN.md por sitios web centrados en desarrolladores.

Selección de DESIGN.md

Copie un DESIGN.md en su proyecto, dígale a su agente de IA que me compruebe una página que se parezca a esto y genere IU de alta calidad que se mantenga visualmente coherente con el lenguaje de diseño.

Construido con profundidad de diseño real —incluyendo patrones analizados, fichas y reglas— para la generación de IU de alta calidad, no salidas de nivel superficial.

¿Qué es DESIGN.md?

DESIGN.md es un nuevo concepto introducido por Google Stitch. Un documento del sistema de diseño de texto claro que los agentes de IA leen para generar IU consistente.

Es sólo un archivo de marcado. Sin exportaciones Figma, sin esquemas JSON, sin herramientas especiales. Suéltala en su raíz de proyecto y cualquier agente de codificación AI o Google Stitch entiende instantáneamente cómo debería mirar su interfaz de usuario. Markdown es el formato LLMs mejor leído, así que no hay nada que analizar o configurar.

Archivo	Quien lo lee	Lo que define
AGENTS.md	Agentes de codificación	Cómo construir el proyecto
DESIGN.md	Agentes de diseño	Cómo debe mirar y sentir el proyecto

Este repo proporciona archivos DESIGN.md listos para usarextraído de sitios web reales.

Solicitar un archivo DESIGN.md

Puedessolicitar un DESIGN.md para un sitio web específico, incluyendo solicitudes privadas entregadas exclusivamente a usted.

Herramientas del ecosistema de diseño y desarrollo con IA

Usted envía productos con AI, pero cada lanzamiento todavía muere silenciosamente porque nadie pone sobre ello.EveryFeed enchufa a su asistente de inteligencia artificial en un espacio de trabajo social que redacte, programe y publique en 35 canales, sin agencia, sin contrato de marketing.

👉 Presenta tu producto junto a desarrolladores, diseñadores y vibecoders que crean interfaces con agentes de programación con IA y herramientas web. Ranked #150 globalmente en GitHub. Un recurso comunitario utilizado por desarrolladores, diseñadores y vibecoders.

Colección

Plataformas de IA y LLM

• Claude - Asistente de inteligencia de Antrópico. Caliente acento terracota, diseño editorial limpio
• Cohere - Plataforma Enterprise AI. gradientes visbrant, estética de panel de datos
• ElevenLabs - Plataforma de voz AI. IU cinematográfica oscura, estética de audio-ondas
• Minimax - proveedor de modelos AI. Interfaz oscura con acentos de neón
• Mistral AI - Proveedor de LLM de peso abierto. minimalismo francés, tono púrpura
• Ollama - Corre LLMs localmente. Terminal primero, monocroma simplicidad
• OpenCode AI - Plataforma de codificación AI. Tema oscuro centrado en el desarrollo
• Replicate - Ejecute modelos ML a través de API. Lona blanca limpia, código para adelante
• Runway - Plataforma creativa-herramientas AI con una estética cinematográfica-festival, héroes oscuros cinemáticos, bandas de lectura de papel blanco, sans únicos propietarios y píldoras negras puras CTAs.
• Together AI - Infraestructura de IA de código abierto. Diseño técnico, de estilo plano
• VoltAgent - Marco de agente de inteligencia artificial. Vacío-negro, acento esmeralda, terminal-native
• xAI - El laboratorio AI de Elon Musk. Monocromo de Stark, minimalismo futurista

Herramientas para desarrolladores e IDE

• Cursor - El primer editor de códigos. Interfaz oscura elegante, acentos gradientes
• Expo - Reactar plataforma nativa. Tema oscuro, apretado de letras, centrado en código
• Lovable - IA constructor de pisos completos. gradientes juguetones, estética dev amigable
• Raycast - El lanzador de productividad. Cromo oscuro elegante, acentos gradientes vibrantes
• Superhuman - Cliente de correo electrónico rápido. UI oscura Premium, teclado-primero, brillo púrpura
• Vercel - Plataforma de despliegue de Frontend. Precisión blanca y negra, Fuente Geist
• Warp - Terminal moderno. Interfaz oscura similar a IDE, comando basado en bloque UI

Backend, bases de datos y DevOps

• ClickHouse - Base de datos de análisis rápido. Estilo de documentación técnica centrado en amarillo
• Composio - Plataforma de integración de herramientas. Moderno oscuro con iconos de integración colorida
• HashiCorp - Automatización de la infraestructura. Enterprise-clean, negro y blanco
• MongoDB - Base de datos de documentos. Marcado de hojas verdes, enfoque de documentación del desarrollador
• PostHog - Análisis de productos. Playful hedgehog branding, desarrollador-friendly oscuro UI
• Sanity - Plataforma de contenido sin cabeza con una superficie de marketing editorial oscura - 112px tipo de pantalla, cejas técnicas IBM Plex Mono, y un solo acento rojo coral reservado para la CTA de máxima prioridad.
• Sentry - Monitoreo de errores. Dashboard oscuro, data-dense, acento rosa-purple
• Supabase - Una alternativa de bomberos de código abierto. Tema esmeralda oscuro, primer código

Productividad y SaaS

• Cal.com - Programación de código abierto. UI neutral limpia, simplicidad orientada al desarrollador
• Intercom - Mensajería de clientes. Paleta azul amigable, patrones de interfaz de usuario
• Linear - Gestión de proyectos para ingenieros. acento ultra-minimal, preciso, morado
• Mintlify - Plataforma de documentación. Limpio, ecológico, optimizado para lectura
• Notion - Un espacio de trabajo completo. minimalismo cálido, encabezamientos de serif, superficies suaves
• Resend - Email API para desarrolladores. Tema mínimo oscuro, acentos monoespaciales
• Zapier - Plataforma de automatización. naranja cálido, amistosa ilustración impulsada

Herramientas de diseño y creatividad

• Airtable - Hibrido de la hoja de cálculo. Colorido, amigable, estructurado de datos estético
• Clay - Agencia creativa. Formas orgánicas, gradientes suaves, diseño orientado al arte
• Figma - Herramienta de diseño colaborativo. Vibrant multicolor, juguetón pero profesional
• Framer - Editor de sitios web. Bold negro y azul, movido primero, diseño hacia adelante
• Miro - Colaboración visual. Acento amarillo brillante, tela infinita estética
• Webflow - Construcción web visual. Estética del sitio de marketing pulido y centrado en azul

Fintech y criptomonedas

• Binance - Cambio de crípto. Bold Binance Amarillo en monocromo, urgencia de la planta comercial
• Coinbase - Cambio de crípto. Identidad azul limpia, sentimiento institucional centrado en la confianza
• Kraken - Plataforma comercial Crypto. UI oscura centrada en el púrpura, dashboards de datos
• Mastercard - Red mundial de pagos. Lona de crema caliente, formas de píldora orbital, calidez editorial
• Revolut - Banca digital. Interfaz oscura elegante, tarjetas gradientes, precisión fintech
• Stripe - Infraestructura de pagos. Persianas moradas, peso-300 elegancia
• Wise - Transferencia internacional de dinero. Brillante acento verde, amistoso y claro

Comercio electrónico y venta minorista

• Airbnb - Mercado de viajes. Caliente acento coralino, grabado en fotografía, redondeado UI
• Meta - Tienda de Tech. Fotógrafo-primero, superficies de luz binaria / oscuro, Meta Blue CTAs
• Nike - Athletic retail. Monochrome UI, mayúscula masiva Futura, fotografía de sangre completa
• Shopify - Plataforma de comercio electrónico. Primer cine, acento verde de neón, tipo de pantalla ultraligera
• Starbucks - Cafetería insignia. Sistema verde terrestre de cuatro niveles, lona de crema caliente, tipografía SoDoSans

Medios y tecnología de consumo

• Apple - Electrónica de consumo. Espacio blanco Premium, SF Pro, imagen cinematográfica
• HP - PC e impresora. lienzo blanco puro, HP Electric Blue signal CTA, geométrico Forma DJR Micro, azul chevron decoraciones
• IBM - Tecnología empresarial. Sistema de diseño de carbono, paleta azul estructurada
• NVIDIA - Computación de GPU. Energía negra verde, estética de poder técnico
• Pinterest - Plataforma de descubrimiento visual. Acento rojo, cuadrícula de mampostería, imagen
• PlayStation - Gaming console retail. Diseño de canal de tres superficies, interacción a escala cian hover
• SpaceX - Tecnología espacial. Stark imágenes en blanco y negro, de sangre completa, futurista
• Spotify - Flujo musical. Vibrant green on dark, bold type, album-art-driven
• The Verge - Medios editoriales técnicos. Acentos ácido-mint y ultravioleta, Manuka tipo de visualización
• Uber - Plataforma de movilidad. Bold negro y blanco, tipo apretado, energía urbana
• Vodafone - Marca mundial de telecomunicaciones. Visualización de mayúsculas Monumental, bandas de capítulo rojo Vodafone
• WIRED - Revista Tech. Densidad de hoja de papel blanco, serif personalizado, enlaces de tinta azul

Automoción

• BMW - Automoción de lujo. Superficies primas oscuras, precisa estética de ingeniería alemana
• BMW M - Automoción de rendimiento. contraste inspirado en Motorsport, M acentos de color, diseño de precisión
• Bugatti - Hipercarro de lujo. Lona de cine negro, austeridad monocroma, tipo de exhibición monumental
• Ferrari - Automoción de lujo. Chiaroscuro negro-blanco editorial, Ferrari rojo con extrema espesura
• Lamborghini - Automoción de lujo. Verdadera catedral negra, acento dorado, LamboType personalizado Neo-Grotesk
• Renault - Automotriz francesa. Vivid aurora gradientes, NouvelR tipografía patentada, botones de cero-radius
• Tesla - Vehículos eléctricos. Sutracción radical, fotografía cinematográfica de todo el mundo, Universal Sans

Web retro · nostalgia de DESIGN.md

Una serie de sábados — Archivos DESIGN.md extraídos de la web de la década de 1990. Deja una y dile a tu agente de IA que construya una interfaz de usuario de época exacta.

• Dell (1996) - Catálogo-era empresa web. Literal black page frame, plano color-block “tarjetas de ribbon”, chunky Helvetica-Black titles over Times Roman body, and hand-cut GIF stickers (NEW! ráfagas, sellos de premios, fotos de productos biseladas).
• Nintendo.com (2001) - Y2K “console chrome” web. Paneles de metal de terciopelo, un nav de carbono de mediana tonelada que brilla en ámbar, esbozó marcadores de arte de caja Arial-Black sobre campos de héroe de circuito, y una burbuja pixel Mario bienvenida.

Qué incluye cada DESIGN.md

Cada archivo sigue elformato de Stitch para DESIGN.md con secciones ampliadas:

#	Sección	Lo que captura
1	Tema visual & Atmósfera	Mood, densidad, filosofía de diseño
2	Paleta de color & Roles	Nombre semántico + hex + función funcional
3	Reglas de tipografía	Familias de fuentes, tabla de jerarquía completa
4	Estabilizaciones de componentes	Botones, tarjetas, entradas, navegación con estados
5	Principios de diseño	Escala de espacio, rejilla, filosofía blanca
6	Profundidad ” Elevación	Sistema de sombras, jerarquía superficial
7	Hacer y no	Guardias de diseño y antipatrones
8	Comportamiento responsable	Puntos de descanso, metas táctiles, estrategia de colapso
9	Agente Prompt Guide	Rápida referencia a color, listos para usar

Cada sitio incluye:

Archivo	Propósito
DESIGN.md	El sistema de diseño (lo que los agentes leen)
preview.html	Catálogo visual que muestra relojes de color, escala de tipo, botones, tarjetas
preview-dark.html	Mismo catálogo con superficies oscuras

Cómo usarlo

1. Copiar un sitioDESIGN.mden su raíz de proyecto
2. Dile a tu agente de inteligencia artificial que lo use.

Colaborar

SeeCONTRIBUCIÓN.md para directrices.

• Mejorar los archivos existentes: Fijar colores equivocados, fichas perdidas, descripciones débiles
• Cuestiones relativas a los informes- Háganos saber si algo se apaga

Antes de abrir un PR, por favorabrir una cuestión primero para discutir su idea y obtener comentarios de los usuarios.

Licencia

Licencia MIT - verLICENSE

Este repositorio es una colección curada de documentos del sistema de diseño extraídos de sitios web públicos. Todos los archivos DESIGN.md se proporcionan “como es” sin garantía. Las fichas de diseño extraídas representan valores CSS visibles públicamente. No reclamamos la propiedad de la identidad visual de ningún sitio. Estos documentos existen para ayudar a los agentes de IA a generar IU consistente.