Design de Website
Objetivo
Gere um mockup de site HTML de página única e polido para o negócio de um prospecto. O site corresponde à estética buildinamsterdam.com: tipografia ousada, fundos off-white, layouts editoriais em grade, acentos em terracota. Usado para apresentar serviços de web design.
Entradas
- URL da Planilha Google com dados do prospecto
- Número da linha (indexado a partir de 1, excluindo cabeçalho) para selecionar qual prospecto
- Opcional: nome da worksheet (padrão é a primeira planilha)
Colunas Esperadas da Planilha
O script mapeia estas colunas (case-insensitive, correspondência flexível):
| Coluna | Mapeia Para |
|---|---|
| company_name / company | Nome do negócio (hero, nav, rodapé) |
| description / about | Seção Sobre + subtítulo do hero |
| keywords / services | Grade de serviços (separados por vírgula) |
| phone / phone_number | Seção de Contato |
| email / contact_email | Seção de Contato |
| address / full_address | Seção de Contato |
| city, state, country | Informação de localização |
| industry / category | Consultas de pesquisa de imagem Unsplash |
| first_name, last_name | Atribuição do proprietário |
| title / role | Cargo do proprietário |
Scripts
scripts/read_prospect.py— Lê uma única linha de prospecto do Google Sheets → JSONscripts/generate_website.py— Gera um site HTML a partir do JSON do prospecto
Processo
Passo 1: Ler dados do prospecto
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # opcional
Saída JSON para stdout.
Passo 2: Gerar site
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
Ou com um arquivo JSON:
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
Passo 3: Visualizar
Abra o arquivo gerado no navegador:
open .tmp/website_*.html
Saídas
.tmp/website_{company_slug}.html— Arquivo HTML autossuficiente, visualizável em qualquer navegador- Todo CSS é inline, imagens são URLs externas (Unsplash)
Ambiente
UNSPLASH_ACCESS_KEYem.env— Necessário para fotos de stock. Obtenha uma chave gratuita em https://unsplash.com/developers- Se a chave não estiver definida, usa imagens placeholder de picsum.photos
- Credenciais OAuth do Google (token.json / credentials.json) para acesso às planilhas
Sistema de Design
- Fonte: Inter (CDN do Google Fonts)
- Cores: Off-white
#F2EFE6, Preto#000, Branco#FFF, Terracota#C38133 - Tipografia: Display negrito e maiúsculo (72-100px), cabeçalhos de seção (36-48px), corpo (16-18px)
- Layout: Hero em viewport total, Sobre em 2 colunas, grade de serviços em 3 colunas, galeria 2x2
- Botões: Com borda, maiúsculos, com espaçamento entre letras
Casos Extremos
- Colunas ausentes: O script usa valores padrão sensíveis (ex.: "Bem-vindo" se não houver descrição)
- Sem chave Unsplash: Usa imagens placeholder de picsum.photos
- Nomes de empresa longos: CSS lida com quebra de linha usando tamanho de fonte responsivo
- Caracteres especiais: São escapados em HTML na saída