Awesome Design.MD - aplique o sistema de design de sites famosos ao seu próprio site

 (github.com/VoltAgent)
117 pontos por xguru 24 일 전 | 5 comentários | Compartilhar no WhatsApp
  • DESIGN.md é um conceito introduzido pelo Google Stitch: um documento de design em texto para que agentes de IA leiam e gerem uma UI consistente
  • Sem Figma, schema JSON ou tooling separado: basta copiar um único arquivo Markdown para a raiz do projeto, e o agente de codificação com IA reconhece imediatamente o estilo da UI
  • Forma par com o já existente AGENTS.md, e o DESIGN.md define a aparência visual e a sensação
  • Cada arquivo é composto por 9 seções padrão, incluindo paleta de cores, tipografia, estilização de componentes, layout e comportamento responsivo
  • Para cada site, são fornecidos 3 arquivos em conjunto: DESIGN.md + preview.html + preview-dark.html
  • Inclui sistemas de design de mais de 60 serviços nas categorias IA, ferramentas de desenvolvimento, fintech e enterprise, como Claude, Vercel, Stripe, Notion, Figma e Cursor
    • Copie o DESIGN.md do site desejado para a raiz do projeto e instrua o agente de IA a construir a UI consultando esse arquivo
    • Com uma única frase, como "faça uma página com esta aparência", é possível gerar uma UI correspondente ao site original
  • Licença MIT

Estrutura de cada arquivo DESIGN.md

  • Segue o formato do Stitch DESIGN.md e o expande com as 9 seções abaixo

    # Seção Conteúdo capturado
    1 Visual Theme & Atmosphere clima, densidade, filosofia de design
    2 Color Palette & Roles nome da cor + HEX + papel funcional
    3 Typography Rules família tipográfica, tabela completa de hierarquia
    4 Component Stylings botões, cards, inputs, navegação e estados
    5 Layout Principles escala de espaçamento, grid, filosofia de margens
    6 Depth & Elevation sistema de sombras, camadas de superfície
    7 Do's and Don'ts diretrizes de design e antipadrões
    8 Responsive Behavior breakpoints, alvos de toque, estratégia de redução
    9 Agent Prompt Guide referência rápida de cores, prompts prontos para uso

Coleções incluídas

  • 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

Leituras relacionadas

5 comentários

 
hidarite 24 일 전

O conceito é bom e parece útil, mas... O web design também deve ter direitos autorais, então fico curioso para saber se aplicar algo copiando tudo desse jeito não traria problemas de direitos autorais ou mesmo questões de ética profissional.
 
tsboard 18 일 전

Eu também pensei nisso imediatamente. Hoje em dia, parece que simplesmente assumem que serviços ou agentes de IA têm algum tipo de autoridade extralegal. Será que dá para seguir assim, meio vendado?...
 
kaydash 23 일 전

Legal. Quem trabalha com frontend e design costuma preparar esse tipo de coisa com antecedência antes de começar.
 
m00nlygreat 24 일 전

Mas normalmente o sistema de design fica dentro do framework de frontend na forma de trechos de código, então isso não deveria ser usado em comum, certo..?

Seguir o DESIGN.md parece significar que aquelas cores e diretrizes serão geradas arbitrariamente toda vez...
 
hmmhmmhm 24 일 전

Acho que seria bom usar isso não simplesmente para copiar, mas para criar um novo sistema de design com base em vários sistemas de design.