Awesome Design HTML
Uma biblioteca de referência de 118 páginas HTML em arquivo único, dividida em:
assets/web/design.zhongguo-colors.html— 🎨 Cores Tradicionais Chinesas (Chinese Traditional Colors): uma página de amostras com 742 matizes derivada de nevertoday/zhongguo-traditional-colors. Os matizes são agrupados automaticamente por família de cor (vermelho/laranja/amarelo/verde/ciano/azul/roxo/branco/cinza-marrom/preto), pesquisáveis por nome ou HEX, clique para copiar. Use quando o usuário quiser uma paleta de cores tradicionais chinesas / 中式配色 / 色卡. Aparece primeiro na galeria.assets/web/— 96 demonstrações de páginas de marketing (incluindo 22 grandes empresas chinesas). Hero + recursos + preços + referência de sistema de design. Use quando o usuário quiser um site / landing page / página de produto no estilo de uma marca.assets/ios/— 22 maquetes de aplicativos iOS. Três molduras de iPhone em um estágio hero mostrando as telas reais do aplicativo (início / detalhes / perfil) + referência de sistema de design. Use quando o usuário quiser uma maquete de UI de aplicativo móvel ou homenagear as superfícies nativas iOS de uma marca (Now Playing, swipe deck, balão de chat, caminho de lição...).
Cada arquivo é autocontido: CSS inline em um bloco de tokens :root, Google Fonts CDN, cores / tipografia / raio / componentes fiéis à marca, além de um link "View source ↗" para a especificação de design subjacente.
Como usar este skill
Quando o usuário mencionar um nome de marca junto com design / estilo / página / UI / hero / preços / tela / iPhone / aplicativo:
- Combine a marca e a plataforma:
- Quer uma página web / landing page / página de marketing → procure em
assets/web/ - Quer uma maquete de aplicativo iOS / tela de iPhone / UI móvel → procure em
assets/ios/ - Algumas marcas têm ambos (Spotify, Notion, Airbnb, etc.) — escolha o que corresponder à intenção do usuário.
- Quer uma página web / landing page / página de marketing → procure em
- Leia o HTML correspondente em
assets/web/design.<slug>.htmlouassets/ios/design.<slug>-ios.html. - Adapte à solicitação do usuário — extraia tokens (cores, tipografia, raio, formato de botão, arquétipo de hero) e aplique-os. Não homogenize várias marcas em um visual genérico.
Nomenclatura de arquivos
- Variante web:
assets/web/design.<slug>.html - Variante iOS:
assets/ios/design.<slug>-ios.html
Alguns slugs foram normalizados:
| Marca | Slug | Notas |
|---|---|---|
| linear.app | linear | |
| mistral.ai | mistral | |
| together.ai | together | |
| x.ai | xai | (apenas web) |
| opencode.ai | opencode | |
| bmw-m | bmw-m | hífen mantido |
| x.com (Twitter) | x-twitter | (apenas iOS) |
| apple-music | apple-music | (apenas iOS) |
Índice de marcas — Web (95)
🇨🇳 Grandes empresas chinesas (22, NOVOS 2026)
ByteDance: feishu (飞书), douyin (抖音), doubao (豆包) Alibaba: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) Tencent: tencent-cloud (腾讯云), wechat (微信) IA chinesa: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · Plataforma Cloud nativa de IA) Veículos elétricos: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) Conteúdo/Consumo: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · feed de exploração em cascata)
Nível global (73)
Produtividade / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier
Ferramentas de desenvolvimento / IDEs: browseros (navegador agêntico · cream + terracota + mascote cachorro), bun (kit de ferramentas JS tudo-em-um · hero heritage cream + rosa choque #ff73a8 + mascote bun · superfície de documentação), cursor, figma, framer, opencode, raycast, sanity, vercel, warp
Plataformas de IA / LLM: claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai
Infraestrutura / Infra de desenvolvimento: composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase
Fintech / Cripto: binance, coinbase, kraken, mastercard, revolut, stripe, wise
Automotivo / Luxo: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
Consumo / Comércio: airbnb, nike, pinterest, shopify, spotify, starbucks, uber
Empresarial / Plataforma: ibm, meta, nvidia, expo
Mídia / Editorial: theverge, wired
Jogos / Aero / Telecom: playstation, spacex, vodafone
Os 3 originais (referências de qualidade): stripe, linear, notion
Índice de marcas — iOS (22)
Música / Vídeo: spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios
Social: instagram-ios, threads-ios, x-twitter-ios, snapchat-ios
Mensagens: whatsapp-ios, telegram-ios, discord-ios
IA / Produtividade: chatgpt-ios, notion-ios
Viagem: uber-ios, airbnb-ios
Relacionamentos: tinder-ios, hinge-ios
Comida / Finanças / Aprendizado: starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios
Arquétipos de marca (consulta rápida quando nenhuma marca específica é mencionada)
| Arquétipo | Exemplos web | Exemplos iOS |
|---|---|---|
| Tela escura + UI do produto como protagonista | linear, warp, cursor, sentry, hashicorp, opencode | spotify, netflix, threads, x-twitter, discord |
| Hero claro + mesh gradiente | stripe, vercel, intercom | apple-music |
| Hero claro + cartões pastel / espectro colorido | notion, slack, airbnb, miro, clay, pinterest, xiaohongshu | instagram, snapchat, duolingo |
| Feed de cartões em cascata / masonry | pinterest, xiaohongshu | — |
| Revista editorial impressa | wired, theverge, claude, mistral, resend, elevenlabs | — |
| Monocromático marcante + raio mínimo | apple, vercel, figma, bugatti, tesla, spacex | uber, threads, chatgpt |
| Maquete de dashboard como peça central | stripe, mongodb, supabase, posthog, hashicorp, coinbase | robinhood |
| Sistema de botões pílula | stripe, slack, airbnb, spotify, mastercard, coinbase | airbnb-ios, instagram-ios |
| Sistema de botões retangulares (8px ou menos) | notion, supabase, vercel, linear, mistral, expo | whatsapp, notion, telegram |
| Automóvel de luxo + tabela de especificações | bmw, ferrari, lamborghini, bugatti, bmw-m, tesla | — |
| Botões 3D com sombra espessa | — | duolingo |
| Swipe deck + ações codificadas por cor | — | tinder |
| Balão de chat bicolor | — | whatsapp, telegram, discord |
Estrutura do arquivo HTML web
<head>
- CSS inline em <style> (bloco único, todos os tokens de design como :root --custom-properties)
- Google Fonts CDN (Inter + fontes complementares adequadas à marca)
<body>
- Navegação superior correspondente à marca
- Hero (padrão característico da marca: mesh, faixa escura, maquete de produto, etc.)
- 2-4 seções de recursos seguindo o ritmo da marca
- Preços ou CTA adequados à marca
- Seção de referência do sistema de design (Parte B):
- Sub-blocos agrupados de "Cor"
- Tabela "Tipografia": nome do token (monoespaçado) + especificação (monoespaçado) + amostra ao vivo
- Escada visual "Raio"
- Matriz "Componentes": botões + campos de entrada + cartões + tags/emblemas
- Rodapé correspondente à marca
- Link flutuante no canto inferior direito "View source ↗" para a fonte original
</body>
Estrutura do arquivo HTML iOS
<head>
- CSS inline, tokens :root, Google Fonts
- CSS da moldura do iPhone (270pt × ~600pt, ilha dinâmica, tela arredondada em 38px, botões laterais)
<body>
- Navegação superior (marca + sufixo iOS)
- Hero com 3 molduras de iPhone:
- iPhone esquerdo (girado -4°) — tela secundária
- iPhone central (escalado 1.05) — tela principal
- iPhone direito (girado +4°) — tela terciária
Cada iPhone mostra: ilha dinâmica + barra de status (9:41) + UI do aplicativo renderizada + rótulo inferior
- Grade "Anatomia da Superfície iOS" (3 superfícies)
- 3 linhas alternadas de recursos específicos do iOS (ex.: Atividade ao Vivo na Ilha Dinâmica, matriz de haptics, widget de tela de bloqueio, gestos de deslizar, etc.)
- Seção de referência do sistema de design (Parte B) — igual à web, mas com tabela de especificações iOS (alturas, paddings, curvas de animação, haptics)
- Rodapé + link flutuante "View source ↗" → galeria spectr.to ou README original
</body>
Padrão de qualidade (ao gerar novas páginas a partir desta referência)
- Honre a assinatura real da marca — não aplique um modelo genérico. O mesh da Stripe, a tela #010102 da Linear, os tons pastel do Notion, o ritmo dos tiles de produto da Apple, a pílula 9999px + tracking maiúsculo do Spotify são identificadores inegociáveis.
- Não introduza acentos cromáticos que a marca não usa — a Linear tem apenas lavanda, a NVIDIA tem apenas verde, a xAI não tem acentos, o Threads não tem acento além do azul herdado e do coração vermelho.
- Combine o formato do botão exatamente — pílula vs. retângulo vs. cantos vivos é definidor de marca.
- Espaçamento negativo entre letras em títulos onde a especificação da marca pede (Linear -3px, Stripe -1.4px, etc.).
- Figuras tabulares (
font-feature-settings: "tnum") onde a marca mostra dinheiro ou números (Stripe, Coinbase, Binance, Wise, Robinhood). - Arquivos iOS: a moldura do iPhone deve incluir Ilha Dinâmica, barra de status às 9:41 com barras de celular + bateria, contagem correta de abas da barra inferior por marca (ex.: Snapchat 5 abas com botão de câmera central, Instagram 5 abas, ChatGPT sem barra de abas).
- Arquivos iOS: botões 3D com sombra espessa são inegociáveis para o Duolingo (box-shadow
0 4-6px 0 mais escuro). O corte de canto do balão de chat é inegociável para o WhatsApp (canto do remetente = 0). - Nenhum brilho de sombra projetada em marcas de tela escura — Linear, Bugatti usam escadas de superfície + linhas finas.
Quando NÃO usar este skill
- O usuário está pedindo um padrão de layout genérico (ex.: "dashboard de duas colunas") sem referência de marca — use o julgamento de design geral.
- O usuário tem seu próprio sistema de design / diretrizes de marca que devem substituir estas referências.
- O usuário está perguntando sobre uma marca que NÃO está na lista de 116 marcas — diga isso explicitamente em vez de adivinhar.
Atribuição de fontes
- Especificações web derivadas de VoltAgent/awesome-design-md (MIT).
- Especificações iOS derivadas de Meliwat/awesome-ios-design-md (Galeria Spectr para especificações completas).
Cada canto inferior direito do HTML linka de volta à sua fonte.