LJC-god/popular-web-designs-skill

Popular Web Designs

54 sistemas de design reais prontos para uso ao gerar HTML/CSS. Cada template captura a linguagem visual completa de um site: paleta de cores, hierarquia tipográfica, estilos de componentes, sistema de espaçamento, sombras, comportamento responsivo e prompts práticos para agentes com valores CSS exatos.

Skills de design relacionados

• claude-design — use para o processo e gosto de design (definindo um briefing, produzindo variantes, verificando um artefato HTML local, evitando o design genérico de IA). Combine este skill quando o usuário quiser uma página bem projetada e estilizada após uma marca conhecida: claude-design orienta o fluxo de trabalho, este skill fornece o vocabulário visual.
• design-md — use quando a entrega for um arquivo de especificação formal DESIGN.md, não um artefato renderizado.

Como Usar

1. Escolha um design do catálogo abaixo
2. Carregue-o: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. Use os tokens de design e especificações de componentes ao gerar HTML
4. Combine com o skill generative-widgets para servir o resultado via túnel cloudflared

Cada template inclui um bloco Notas de Implementação Hermes no topo com:

• Substituições de fontes CDN e tag <link> do Google Fonts (pronta para copiar)
• Pilhas CSS font-family para a fonte primária e monoespaçada
• Lembretes para usar write_file para criação de HTML e browser_vision para verificação

Padrão de Geração HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título da Página</title>
  <!-- Cole a tag <link> do Google Fonts das notas Hermes do template -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Aplique a paleta de cores do template como propriedades personalizadas CSS */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... mais da Seção 2 do template */
    }
    /* Aplique a tipografia da Seção 3 do template */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Aplique os estilos de componentes da Seção 4 do template */
    /* Aplique o layout da Seção 5 do template */
    /* Aplique as sombras da Seção 6 do template */
  </style>
</head>
<body>
  <!-- Construa usando as especificações de componentes do template -->
</body>
</html>

Escreva o arquivo com write_file, sirva com o fluxo de trabalho generative-widgets (túnel cloudflared), e verifique o resultado com browser_vision para confirmar a precisão visual.

Referência de Substituição de Fontes

A maioria dos sites usa fontes proprietárias indisponíveis via CDN. Cada template mapeia para uma substituta do Google Fonts que preserva o caráter do design. Mapeamentos comuns:

Fonte Proprietária	Substituta CDN	Caráter
Geist / Geist Sans	Geist (no Google Fonts)	Geométrica, tracking comprimido
Geist Mono	Geist Mono (no Google Fonts)	Monoespaçada limpa, ligaduras
sohne-var (Stripe)	Source Sans 3	Elegância de peso leve
Berkeley Mono	JetBrains Mono	Monoespaçada técnica
Airbnb Cereal VF	DM Sans	Geométrica amigável e arredondada
Circular (Spotify)	DM Sans	Geométrica, quente
figmaSans	Inter	Humanista limpa
Pin Sans (Pinterest)	DM Sans	Amigável, arredondada
NVIDIA-EMEA	Inter (ou Arial sistema)	Industrial, limpa
CoinbaseDisplay/Sans	DM Sans	Geométrica, confiável
UberMove	DM Sans	Negrito, apertado
HashiCorp Sans	Inter	Empresarial, neutra
waldenburgNormal (Sanity)	Space Grotesk	Geométrica, ligeiramente condensada
IBM Plex Sans/Mono	IBM Plex Sans/Mono	Disponível no Google Fonts
Rubik (Sentry)	Rubik	Disponível no Google Fonts

Quando a fonte CDN de um template corresponde à original (Inter, IBM Plex, Rubik, Geist), não ocorre perda de substituição. Quando uma substituta é usada (DM Sans para Circular, Source Sans 3 para sohne-var), siga atentamente os valores de peso, tamanho e espaçamento entre letras do template — esses carregam mais identidade visual do que a face da fonte específica.

Catálogo de Design

IA e Machine Learning

Template	Site	Estilo
claude.md	Anthropic Claude	Acento terracota quente, layout editorial limpo
cohere.md	Cohere	Gradientes vibrantes, estética de dashboard rica em dados
elevenlabs.md	ElevenLabs	UI escura cinematográfica, estética de formas de onda de áudio
minimax.md	Minimax	Interface escura ousada com acentos neon
mistral.ai.md	Mistral AI	Minimalismo de engenharia francesa, tons roxos
ollama.md	Ollama	Terminal em primeiro lugar, simplicidade monocromática
opencode.ai.md	OpenCode AI	Tema escuro focado em desenvolvedor, monoespaçado completo
replicate.md	Replicate	Tela branca limpa, código em primeiro lugar
runwayml.md	RunwayML	UI escura cinematográfica, layout rico em mídia
together.ai.md	Together AI	Design técnico, estilo de planta baixa
voltagent.md	VoltAgent	Tela preta vazia, acento esmeralda, nativo de terminal
x.ai.md	xAI	Monocromático marcante, minimalismo futurista, monoespaçado completo

Ferramentas e Plataformas para Desenvolvedores

Template	Site	Estilo
cursor.md	Cursor	Interface escura elegante, acentos gradiente
expo.md	Expo	Tema escuro, espaçamento entre letras apertado, foco em código
linear.app.md	Linear	Modo escuro ultraminimalista, preciso, acento roxo
lovable.md	Lovable	Gradientes divertidos, estética de desenvolvimento amigável
mintlify.md	Mintlify	Limpo, acento verde, otimizado para leitura
posthog.md	PostHog	Marca divertida, UI escura amigável para desenvolvedores
raycast.md	Raycast	Cromo escuro elegante, acentos degradê vibrantes
resend.md	Resend	Tema escuro minimalista, acentos monoespaçados
sentry.md	Sentry	Dashboard escuro, denso em dados, acento rosa-roxo
supabase.md	Supabase	Tema escuro esmeralda, ferramenta de desenvolvedor código em primeiro lugar
superhuman.md	Superhuman	UI escura premium, teclado em primeiro lugar, brilho roxo
vercel.md	Vercel	Precisão em preto e branco, sistema de fontes Geist
warp.md	Warp	Interface escura semelhante a IDE, UI de comandos baseada em blocos
zapier.md	Zapier	Laranja quente, design amigável orientado a ilustrações

Infraestrutura e Nuvem

Template	Site	Estilo
clickhouse.md	ClickHouse	Acento amarelo, estilo de documentação técnica
composio.md	Composio	Escuro moderno com ícones de integração coloridos
hashicorp.md	HashiCorp	Limpo empresarial, preto e branco
mongodb.md	MongoDB	Marca de folha verde, foco em documentação para desenvolvedores
sanity.md	Sanity	Acento vermelho, layout editorial focado em conteúdo
stripe.md	Stripe	Gradientes roxos característicos, elegância peso-300

Design e Produtividade

Template	Site	Estilo
airtable.md	Airtable	Colorido, amigável, estética de dados estruturados
cal.md	Cal.com	UI neutra limpa, simplicidade orientada a desenvolvedores
clay.md	Clay	Formas orgânicas, gradientes suaves, layout dirigido artisticamente
figma.md	Figma	Multicolor vibrante, lúdico mas profissional
framer.md	Framer	Preto e azul ousados, movimento em primeiro lugar, foco em design
intercom.md	Intercom	Paleta azul amigável, padrões de UI conversacionais
miro.md	Miro	Acento amarelo brilhante, estética de tela infinita
notion.md	Notion	Minimalismo quente, títulos com serifa, superfícies suaves
pinterest.md	Pinterest	Acento vermelho, grade de alvenaria, layout focado em imagens
webflow.md	Webflow	Acento azul, estética de site de marketing polido

Fintech e Cripto

Template	Site	Estilo
coinbase.md	Coinbase	Identidade azul limpa, foco em confiança, sensação institucional
kraken.md	Kraken	UI escura com acento roxo, dashboards densos em dados
revolut.md	Revolut	Interface escura elegante, cartões gradiente, precisão fintech
wise.md	Wise	Acento verde brilhante, amigável e claro

Empresarial e Consumo

Template	Site	Estilo
airbnb.md	Airbnb	Acento coral quente, orientado a fotografia, UI arredondada
apple.md	Apple	Espaço branco premium, SF Pro, imagens cinematográficas
bmw.md	BMW	Superfícies escuras premium, estética de engenharia precisa
ibm.md	IBM	Sistema de design Carbon, paleta azul estruturada
nvidia.md	NVIDIA	Energia verde-preta, estética de potência técnica
spacex.md	SpaceX	Preto e branco marcante, imagens sem margens, futurista
spotify.md	Spotify	Verde vibrante sobre escuro, tipo ousado, orientado a álbuns
uber.md	Uber	Preto e branco ousado, tipo apertado, energia urbana

Escolhendo um Design

Combine o design ao conteúdo:

• Ferramentas de desenvolvedor / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
• Documentação / sites de conteúdo: Mintlify, Notion, Sanity, MongoDB
• Marketing / landing pages: Stripe, Framer, Apple, SpaceX
• UIs de modo escuro: Linear, Cursor, ElevenLabs, Warp, Superhuman
• UIs claras/limpas: Vercel, Stripe, Notion, Cal.com, Replicate
• Divertidas/amigáveis: PostHog, Figma, Lovable, Zapier, Miro
• Premium / luxo: Apple, BMW, Stripe, Superhuman, Revolut
• Denso em dados / dashboards: Sentry, Kraken, Cohere, ClickHouse
• Estética monoespaçada / terminal: Ollama, OpenCode, x.ai, VoltAgent