Português

← Voltar à lista

48K Star Repository: 66 sistemas de design para parar frontends de escrita de IA

itadol5j

Arquitectura md-design

Resolva o problema de AI escrita frontend UI feio: eyesome-design-md

Al, qual é o problema com a frente?A UI é feia.Não sei. A interface de front-end gerada pelo AI Agent muitas vezes carece de um senso de design, mistura de cores está confusa e layout não é coordenado.

Este armazém.Acabou.Outro Organizador 66 ficheiros DESIGN.md, fazer seu agente de IA diretamente geradoUI de precisão de nível de pixelNão sei.

O que é DESSIGN.Md?

DESIGN.md O novo conceito introduzido pelo Google Stitch:

  • Sistema de Desenho de Texto Puro: Markdown definição de arquivo UI especificações de design
  • LLM é o mais fácil de entender.: Markdown é o melhor formato para LLM
  • Não é preciso, Figma.: Sem exportação de arquivos de design, sem necessidade de esquema JSON
  • Inserir: Coloque-o no diretório raiz, AI Agent imediatamente entender

Comparação:

Documentação Quem vai ler? Define o quê?
AGENTES. md Secções Como construir projeto
DESIGN.md Atos de Desenho Como o projeto deve ser apresentado

66 sistemas de concepção

Está disponível-design-md66 arquivos DESIGN.md prontamente disponíveisEm todas as áreas:

AI Corporation

  • Claude, OpenAI, Cohere, Onze Laboratórios, Mistral AI, XAI, etc.
  • Google Gemini, AI, VoltAgent, etc.

Ferramenta de desenvolvimento

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

Tecnologia financeira

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

Sítio Web da marca

  • Maçã, Tesla, Nike, BMW, Ferrari, Lamborghini
  • Spotify, Airbnb, Pinterst, Uber, The Verge, etc.

Ferramenta de desenho

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

Métodos de utilização

Três passos.:

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

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

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

É isso! O AI Agent irá automaticamente:

  • Leia a instrução de cor DESSIGN.md
  • Aplicar fontes e caracteres corretos
  • Usar o espaçamento e disposição corretos
  • Gerar componentes que se encaixam no sistema de design

O que é que o DESSIGN.md contém?

Cada DESIGN.md contém9 capítulos de código de projeto completos:

Capítulo Índice
Temas visuais A atmosfera, densidade, filosofia de design.
2. Normas de cores Nome semântico + Hex + Função
3. Regras da fonte Família de fontes, hierarquia completa
4. Estilos de Componente Botões, cartas, quadros de entrada, navegação, etc.
5. Princípio do layout Razão de espaço, grade, filosofia em branco
6. Nível de profundidade Sistema de sombras, nível da superfície
7. Orientação Normativa Desenho de colunas e modo inverso
Resposta Pontos de paragem, alvos de toque, estratégias de dobragem
Dica Agente Referência de cor rápida, dica pronta

Cada site contém

  • DESIGN.mdDocumento do sistema de projecto (lei do agente IA)
  • Desculpa.Visualização (cor, fonte, componentes)
  • Não sei.: Visualização do modo escuro

Sistema de Desenho de Exemplos

Vários exemplos clássicos:

Vercel.

  • Precisão preto e branco, fonte Geist
  • Extrema simplicidade, prioridade de código

Maçã.

  • Um grande número de fontes White, SF Pro
  • Imagens de nível de filme, sentidos avançados.

Listra.

  • Gradiente roxo signico
  • Peso-300.

Tesla.

  • Desenho extremamente reduzido
  • Fotografia em tela cheia, Universal Sans

Resumo

Não sei o que dizer. Mudar completamente a forma como o IA escreve a interface:

  • 66 arquivos DESIGN.md prontamente disponíveis
  • Cobertura de empresas de IA, instrumentos de desenvolvimento, finanças, marcas, etc.
  • Formato Puro Markdown, LLM melhor compreendido
  • Três passos é suficiente: Copiar Zoom para Projeto Zoom IA Gerar UI perfeita
  • Google Stitch conceito, oficialmente suportado

Desde então, a IA escreveu o front end não mais feio.

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

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