48K Star Repository: 66 sistemas de diseño para detener la escritura de AI frontends

Resuelve el problema de AI escribiendo frontend UI feo: eyesome-design-md

AI, ¿cuál es el problema con el frente?La UI es fea.No lo sé. La interfaz frontal generada por AI Agent a menudo carece de un sentido de diseño, mezcla de color es confusa y el diseño no está coordinado.

Este almacénSe acabó.Otros organizadores 66 archivos DESIGN.md, haga que su Agente AI generado directamentepixel-level precision UINo lo sé.

¿Qué es DESSIGN.md?

DESIGN.md El nuevo concepto introducido por Google Stitch:

• Sistema de diseño de texto puro: Definición de archivo de marcación UI diseño especificaciones
• LLM es el más fácil de entender.: Markdown es el mejor formato para LLM
• No es necesario, Figma.: Sin exportación de archivos de diseño, sin necesidad de esquema JSON
• Insertar: Ponlo en el directorio raíz, Agente AI inmediatamente entender

Comparación:

Documentación	¿Quién lo leerá?	¿Definir qué?
AGENTS.md	Secciones	Cómo construir el proyecto
DESIGN.md	Leyes de diseño	Cómo debe presentarse el proyecto

66 sistemas de diseño

Está disponible.66 archivos DESIGN.md disponiblesEn todas las áreas:

AI Corporation

• Claude, OpenAI, Cohere, Once laboratorios, Mistral AI, XAI, etc.
• Google Gemini, Together AI, VoltAgent, etc.

Herramientas para desarrolladores

• Vercel, Cursor, Raycast, Warp, Loveable, Expo
• Supabese, Stanley, Linear, PostHog, Sanity, etc.

Tecnología financiera

• Stripe, Coinbase, Binance, Revolut, Wise
• Kraken, Airtable, etc.

Sitio web de marca

• Apple, Tesla, Nike, BMW, Ferrari, Lamborghini
• Spotify, Airbnb, Pinterst, Uber, The Verge, etc.

Herramienta de diseño

• Figma, Framer, Miro, Webflow, Notion, etc.

Uso de métodos

Tres pasos.:

# 1. 复制 DESIGN.md 到项目根目录
# 比如：复制 vercel/DESIGN.md 到你的项目

# 2. 告诉 AI Agent 使用这个设计
"用 DESIGN.md 的设计规范，帮我生成一个首页"

# 3. AI Agent 生成像素级精确的 UI

¡Eso es! AI Agent automáticamente:

• Lea la instrucción de color DESSIGN.md
• Aplicar fuentes y caracteres correctos
• Utilice el espacio correcto y el diseño
• Generar componentes que se ajusten al sistema de diseño

¿Qué contiene DESSIGN.md?

Cada DESIGN.md contiene9 capítulos completos de código de diseño:

Capítulo	Índice
Temas visuales	La atmósfera, densidad, filosofía de diseño.
2. Normas de color	Nombre semántico + Función Hex + Función
3. Reglas de fuente	Familia de fuentes, jerarquía completa
4. Estilos de componentes	Botones, tarjetas, marcos de entrada, navegación, etc.
5. Principio de presentación	Relación de espacio, rejilla, filosofía en blanco
6. Nivel de aplicación	Sistema de sombras, nivel de superficie
7. Orientación normativa	Columnas de diseño y modo inverso
Respuesta	Puntos de descanso, objetivos táctiles, estrategias plegables
Agente Hint	Referencia de color rápido, toque listo

📁 Cada sitio contiene

• DESIGN.mdDocumento del sistema de diseño (AI Agent read)
• Lo siento.Previsualización visual (color, fuente, componentes)
• No lo sé.: Vista previa del modo oscuro

Ejemplo de sistema de diseño

Varios ejemplos clásicos:

Vercel.

• Precisión blanca y negra, Fuente Geist
• Sencillez extrema, prioridad de código

Apple.

• Un gran número de fuentes blancas, SF Pro
• Fotos de nivel cinematográfico, sentidos avanzados.

Stripe.

• gradiente púrpura
• Peso-300.

Tesla.

• Diseño extremadamente reducido
• Fotografía de pantalla completa a nivel de cine, Universal Sans

Resumen

No sé qué decir. Cambiar completamente la forma en que AI escribe el frontend:

• 66 archivos DESIGN.md disponibles
• Cobertura de empresas AI, desarrolladores ' instrumentos, finanzas, marcas, etc.
• Formato marcado puro, LLM mejor entendido
• Tres pasos es suficiente: Copia Zoom para proyectar Zoom AI Generar interfaz perfecta
• Google Stitch concepto, apoyado oficialmente

Desde entonces, AI escribió el extremo delantero ya no es feo.

GitHub:https://github.com/VoltAgent/awasome-design-md

Google Stitch:https://stitch.withgoogle.com/docs/design-md/overview/