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.

Coleta curadora de análise DESIGN.md por sites focados em desenvolvedores.

Coleção de DESIGN.md

Copie um DESIGN.md para o seu projeto, diga ao seu agente de IA “construa-me uma página parecida com esta” e gere uma interface de alta qualidade que se mantenha visualmente consistente com a linguagem de design.

Construído com profundidade real de projeto — incluindo padrões analisados, fichas e regras — para geração de interfaces de alta qualidade, não saídas de nível de superfície.

O que é DESIGN.md?

DESIGN.md é um novo conceito introduzido pelo Google Stitch. Um documento de sistema de design de texto simples que os agentes de IA leram para gerar UI consistente.

É só um ficheiro de marcação. Sem exportações de Figma, sem esquemas JSON, sem ferramentas especiais. Jogue-o na raiz do seu projeto e qualquer agente de codificação de IA ou Google Stitch compreende instantaneamente como a sua UI deve olhar. Markdown é o formato LLMs lido melhor, então não há nada para analisar ou configurar.

Ficheiro	Quem lê?	O que define
AGENTS.md	Agentes de codificação	Como construir o projeto
DESIGN.md	Agentes de concepção	Como o projeto deve parecer e se sentir

Este repo fornece arquivos prontos para usar DESIGN.mdextraído de sites reais.

Solicitar um DESIGN.md

Podes.solicitar um DESIGN.md para site específico, incluindo pedidos privados entregues exclusivamente a você.

Ferramentas do ecossistema de design e desenvolvimento com IA

Você envia produtos com IA, mas todos os lançamentos ainda morrem silenciosamente porque ninguém posta sobre isso.EveryFeed conecta seu assistente de IA a um espaço de trabalho social que esboça, agenda e publica em mais de 35 canais — sem agência, sem contratação de marketing.

👉 Destaque seu produto ao lado de desenvolvedores, designers e vibecoders que criam interfaces com agentes de programação com IA e construtores web. Rankeado #150 globalmente no GitHub. Um recurso comunitário usado por desenvolvedores, designers e vibecoders.

Coleção

Plataformas de IA e LLM

• Claude - Assistente de IA do Antrópico. Acento de terracota quente, layout editorial limpo
• Cohere - Plataforma de IA Enterprise. Gradientes vibrantes, estética de painel rico em dados
• ElevenLabs - Plataforma de voz IA. IU cinematográfica escura, estética de ondas de áudio
• Minimax - AI fornecedor modelo. Interface escura ousada com acentos de néon
• Mistral AI - Um fornecedor de LLM de peso aberto. Minimalismo de engenharia francesa, em tons roxos
• Ollama - Execute LLMs localmente. Primeiro terminal, simplicidade monocromática
• OpenCode AI - Plataforma de codificação de IA. Tema escuro centrado no desenvolvimento
• Replicate - Execute modelos ML através da API. Limpar a tela branca, para a frente do código
• Runway - Plataforma de ferramentas criativas de IA com uma estética editorial filme-festival - heróis escuros cinematográficos, bandas de leitura papel-branco, sans único proprietário, e pura pílula preta CTAs.
• Together AI - Infra-estrutura de IA de código aberto. Desenho técnico, em estilo de projeto
• VoltAgent - Estrutura de agente de IA. Tela negra, acento esmeralda, terminal-nativo
• xAI - Laboratório de IA do Elon Musk. Stark monocromático, minimalismo futurista

Ferramentas para desenvolvedores e IDEs

• Cursor - Primeiro editor de código de IA. Interface escura elegante, acentos de gradiente
• Expo - Reagir plataforma nativa. Tema escuro, com letras apertadas, código-cêntrico
• Lovable - Construtor de IA. Gradientes brincalhões, amigável estética dev
• Raycast - Lançador de produtividade. Cromado escuro, acentos de gradiente vibrantes
• Superhuman - Cliente de e-mail rápido. IU escuro Premium, teclado-primeiro, brilho roxo
• Vercel - Plataforma de implantação Frontend. Precisão preta e branca, Geist fonte
• Warp - Terminal moderno. Interface tipo IDE escura, interface baseada em blocos de comando UI

Backend, bancos de dados e DevOps

• ClickHouse - Base de dados de análise rápida. Estilo de documentação técnica amarelada
• Composio - Plataforma de integração de ferramentas. Escuro moderno com ícones coloridos de integração
• HashiCorp - Automatização de infra-estruturas. Empresa limpa, preta e branca
• MongoDB - Base de dados de documentos. Marca de folha verde, foco da documentação do desenvolvedor
• PostHog - Análise de produtos. Marca de ouriço brincalhão, interface escura amigável ao desenvolvedor
• Sanity - Plataforma de conteúdo sem cabeça com uma superfície de marketing editorial escura - 112px tipo display, sobrancelhas técnicas IBM Plex Mono, e um único sotaque vermelho coral reservado para o CTA de maior prioridade.
• Sentry - Erro na monitorização. Painel escuro, densa, acento rosa-púrpura
• Supabase - Alternativa Firebase de código aberto. Tema de esmeralda escura, primeiro código

Produtividade e SaaS

• Cal.com - Programação em código aberto. UI neutra limpa, simplicidade orientada para o desenvolvedor
• Intercom - Mensagens de clientes. Paleta azul amigável, padrões de UI conversacional
• Linear - Gestão de projetos para engenheiros. Ultra-minimal, preciso, sotaque roxo
• Mintlify - Plataforma de documentação. Limpo, verde-acentado, leitura-otimizado
• Notion - Tudo em um espaço de trabalho. Minimalismo morno, posições serif, superfícies macias
• Resend - API de e- mail para desenvolvedores. Tema escuro mínimo, acentos monoespaciais
• Zapier - Plataforma de automação. Laranja quente, amigável ilustração orientada

Ferramentas de design e criação

• Airtable - Hibrido de base de dados. Estética de dados coloridos, amigáveis e estruturados
• Clay - Agência criativa. Formas orgânicas, gradientes suaves, disposição orientada para a arte
• Figma - Ferramenta de design colaborativo. Vibrante multi-color, brincalhão mas profissional
• Framer - Construtor de sites. Negrito preto e azul, motion-first, design-forward
• Miro - Colaboração visual. Acento amarelo brilhante, estética de tela infinita
• Webflow - Construtor visual web. Azul-acentado, local de marketing polido estética

Fintech e criptomoedas

• Binance - Troca de criptografia. Bold Binance amarelo em monocromático, trading-floor urgência
• Coinbase - Troca de criptografia. Identidade azul limpa, confiança focada, sentimento institucional
• Kraken - Plataforma de negociação de criptografia. UI escura acentuada com roxo, painéis com densidade de dados
• Mastercard - Rede global de pagamentos. Tela de creme quente, formas de pílula orbital, calor editorial
• Revolut - Banco digital. Interface escura elegante, placas de gradiente, precisão fintech
• Stripe - Infra-estruturas de pagamento. Gradientes roxos assinatura, elegância peso-300
• Wise - Transferência de dinheiro internacional. Acento verde brilhante, amigável e claro

Comércio eletrônico e varejo

• Airbnb - Mercado de viagens. Acento de coral quente, fotografia orientada, UI arredondada
• Meta - Loja de tecnologia. Fotografia em primeiro lugar, superfícies binárias de luz/escuro, Meta Blue CTAs
• Nike - Atletismo. UI monocromática, Futura maiúscula maciça, fotografia sanguinária
• Shopify - Plataforma de comércio electrónico. Primeiro cinematográfico escuro, acento verde neon, tipo de display ultra-leve
• Starbucks - Emblema do comércio de café. Sistema terra-verde de quatro camadas, tela de creme quente, tipografia SoDoSans proprietária

Mídia e tecnologia de consumo

• Apple - Electrónica de consumo. Espaço branco Premium, SF Pro, imagens cinematográficas
• HP - PC e impressora fabricante. Tela branca pura, sinal azul elétrico HP CTA, forma geométrica DJR Micro, azul chevron decorações
• IBM - Tecnologia empresarial. Sistema de design de carbono, paleta azul estruturada
• NVIDIA - Computação GPU. Energia verde-negra, estética do poder técnico
• Pinterest - Plataforma de descoberta visual. Acento vermelho, grade de alvenaria, imagem-primeiro
• PlayStation - Loja de consoles de jogos. Disposição do canal de três superfícies, interação em escala de hover ciano
• SpaceX - Tecnologia espacial. Stark preto e branco, imagens sanguinárias, futuristas
• Spotify - Música a transmitir. Verde vibrante no escuro, tipo negrito, orientado a álbuns de arte
• The Verge - Mídia editorial de tecnologia. Acentos de menta ácida e ultravioleta, Manuka tipo display
• Uber - Plataforma de mobilidade. Negrito preto e branco, tipo apertado, energia urbana
• Vodafone - Marca global de telecomunicações. Exibição monumental em maiúsculas, bandas de capítulos Vodafone Red
• WIRED - Revista técnica. Densidade de folha larga branca de papel, serif personalizado, ligações azul- tinta

Automotivo

• BMW - Automóvel de luxo. Superfícies premium escuras, estética de engenharia alemã precisa
• BMW M - Automóvel de desempenho. Contraste inspirado no desporto motorizado, acentos de cor M, disposição orientada para a precisão
• Bugatti - Hipercarro de luxo. Tela preto-cinema, austeridade monocromática, tipo de exibição monumental
• Ferrari - Automóvel de luxo. Chiaroscuro editorial preto-branco, Ferrari Vermelho com extrema esparsura
• Lamborghini - Automóvel de luxo. Verdadeiro preto catedral, acento de ouro, LamboType personalizado Neo-Grotesk
• Renault - Automóvel francês. Gradientes aurora vívidos, NouvelR tipo de letra proprietário, botões de raio zero
• Tesla - Veículos eléctricos. Subtração radical, fotografia cinematográfica full-viewport, Universal Sans

Web retrô · nostalgia de DESIGN.md

Uma série de sábados — DESIGN.md arquivos extraídos da web da década de 1990. Deixa entrar um e diz ao teu agente de IA para construir uma UI vintage.

• Dell (1996) - Web corporativa da época do catálogo. Moldura de página preta literal, bloco de cores planas “cartões de fita”, títulos Helvetica-Black gorduchos sobre o corpo de Times Roman, e adesivos GIF cortados à mão (NOVO! brotos, selos de prêmio, fotos do produto chanfrado).
• Nintendo.com (2001) - Y2K “console cromo” web. Painéis de metal chanfrado de periwinkle escovado, um âmbar brilhante de navegação de carbono com meio tom, marcas de palavras Arial-Black box-art sobre campos de herói de placa de circuito, e uma bolha de boas-vindas pixel Mario.

O que há em cada DESIGN.md

Cada arquivo segue oformato do Stitch DESIGN.md com secções alargadas:

#	Secção	O que captura
1	Tema Visual & Ambiente	Mood, densidade, filosofia de design
2	Papel & Paleta de Cores	Nome semântico + hex + função funcional
3	Regras de Tipografia	Famílias de fontes, tabela de hierarquia completa
4	Stylings de Componentes	Botões, cartões, entradas, navegação com estados
5	Princípios de Disposição	Escala de espaço, grade, filosofia do espaço em branco
6	Profundidade e Elevação	Sistema de sombras, hierarquia de superfície
7	Faz e não faz	Projeto de guarnições e anti-padrão
8	Comportamento Responsivo	Pontos de paragem, alvos de toque, estratégia de colapso
9	Guia de Pedido de Agente	Referência de cor rápida, prompts prontos para usar

Cada site inclui:

Ficheiro	Objecto
DESIGN.md	O sistema de design (o que os agentes leram)
preview.html	Catálogo visual mostrando amostras de cores, escala de tipo, botões, cartas
preview-dark.html	Mesmo catálogo com superfícies escuras

Como usar

1. Copiar um siteDESIGN.mdem seu root do projeto
2. Diz ao teu agente de IA para o usar.

Contribuição

VerCONTRIBUIÇÃO. md para orientações.

• Melhorar arquivos existentes: Corrigir cores erradas, tokens faltando, descrições fracas
• Questões do relatório: Avise-nos se algo parecer estranho

Antes de abrir um PR, por favorabrir uma edição primeiro para discutir sua ideia e obter feedback de mantenedores.

Licença

Licença MIT - verLICENÇA

Este repositório é uma coleção com curadoria de documentos do sistema de design extraídos de sites públicos. Todos os arquivos DESIGN.md são fornecidos “como é” sem garantia. Os tokens de design extraídos representam valores CSS visíveis publicamente. Nós não reivindicamos a propriedade da identidade visual de qualquer site. Esses documentos existem para ajudar agentes de IA a gerar UI consistente.