Uma skill de geração visual carrega um design system embutido: tokens de cor, escala tipográfica e uma biblioteca de componentes. Esses três pilares se combinam para produzir cada bloco da página. O diagrama mostra como as partes do design system convergem na saída.
O design system embutido — ilustrativo. Efeitos e JS (ciano) entram na montagem.
Conteúdo detalhado
🎨 A paleta como variáveis CSS
A skill não diz "use cores bonitas". Ela embute um bloco :root com variáveis CSS nomeadas: fundo, superfícies com transparência, bordas, e cinco acentos com significado — azul (primário), laranja (volta/aviso), verde (confirmado), lavanda (conexão) e dourado (evento/VIP). Cada acento tem um par "glow".
Trecho real do SKILL.md
:root {
--bg: #06060a; /* deep space black */
--surface: rgba(255,255,255,0.05);
--border: rgba(255,255,255,0.07);
--accent: #5ad1ff; /* sky blue — primary */
--orange: #ff7a59; /* returns / warnings */
--green: #7dffaa; /* confirmations / go */
--purple: #c084fc; /* transit / layovers */
--gold: #fbbf24; /* events / VIP */
--radius: 16px;
}
🎯 Por que tokens, não cores soltas
- •Identidade: toda saída sai com a mesma cara, sem o Claude reinventar a paleta.
- •Significado: a cor carrega informação (verde = confirmado), não é só decoração.
- •Tema: trocar de claro para escuro é só reescrever as variáveis.
💡 Dica prática
Na sua skill, dê às variáveis nomes semânticos (--accent, --green), não nomes de cor (--blue1). Nome semântico sobrevive a uma troca de paleta; nome de cor vira mentira na primeira revisão.
🔤 Tipografia e escala
A skill define uma escala tipográfica explícita: Inter para texto (pesos 300–900), uma fonte mono para horários e códigos, e tamanhos por papel — hero responsivo via clamp(), cabeçalhos de seção, corpo, e rótulos em caixa-alta com letter-spacing.
✓ Boas escolhas da skill
- ✓Mono para dados: horários e códigos alinham e ficam legíveis.
- ✓clamp() no hero: escala fluida sem media query.
- ✓Rótulos uppercase + tracking: hierarquia clara para tags.
✗ O que isso evita
- ✗Tamanhos aleatórios a cada geração.
- ✗Horários desalinhados em fonte proporcional.
- ✗Hero que estoura no mobile ou some no desktop.
A escala, em uma olhada
💡 Dica prática
Reserve a fonte mono para dados que se alinham — horas, valores, códigos. É um truque barato que faz cartões de voo e tabelas de orçamento parecerem produto de verdade.
🧱 A Component Library (12 blocos)
Esta é a maior seção do design system: doze componentes, cada um descrito com sua anatomia — o que contém, como se comporta no hover, quando expande. Hero, banner de evento, cartões de voo, seletor de dia + agenda, hotel, pet care, mapa de rota SVG, stats bar, orçamento, checklists, rodapé de navegação e theme toggle.
Cartões de voo expansíveis
Componente nº 3
Cabeçalho com logo, número + rota, e uma tag colorida (Leg 1/2/3, Transit, Return). Ao clicar, o corpo expande mostrando horários, terminais, duração, aeronave, classe e código de reserva.
Seletor de dia + agenda
Componente nº 4
Botões de dia em rolagem horizontal; o ativo ganha borda verde. Clicar carrega a timeline daquele dia num cartão abaixo, com horário em mono e descrição.
Checklists interativas
Componente nº 10
Agrupadas por categoria (pré-voo, pet, dia de volta). Cada item alterna ao clique, com barra de progresso e contador. O estado persiste via localStorage.
📊 Por que descrever a anatomia
- Cada componente vira uma peça pronta que o Claude monta, em vez de improvisar layout do zero.
- A anatomia define estados (hover, expandido, ativo) — sem isso, a interatividade some.
- O reuso garante que todos os cartões da página tenham o mesmo comportamento.
💡 Dica prática
Descreva cada componente como "contém X, no hover faz Y, ao clicar faz Z". Esse formato curto dá ao Claude tudo o que ele precisa para recriar o comportamento sem você colar o CSS inteiro.
🏷️ Sistema de tags por cor
A skill traz uma tabela que mapeia significado → cor. As tags são pílulas em caixa-alta, com fundo translúcido da cor correspondente. É o princípio "colour-code everything" virando regra concreta: você lê o status de um voo só pela cor, sem ler o texto.
O mapa de cores da skill
A anatomia de uma tag
.tag {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
padding: 3px 8px;
border-radius: 999px; /* pílula */
}
💡 Dica prática
Fixe o significado das cores no SKILL.md, não na cabeça. Quando o mapa está escrito, toda execução usa o mesmo código de cores — e a página fica escaneável de relance.
✨ Visual Effects e o exemplo de saída
Os efeitos visuais são o que tira a página da zona "documento": orbs (blurs radiais fixos ao fundo), glassmorphism (backdrop-filter blur + borda interna), shimmer nos banners, hover-lift nos cartões e o contrail animado do avião. Abaixo, um mock do resultado — recriação ilustrativa, não um screenshot real.
Tóquio 2026 ✈️
Recriação ilustrativa da saída — não um screenshot real. Note as tags por cor e o glassmorphism.
📊 O que cada efeito entrega
- Orbs: profundidade e atmosfera ao fundo, sem competir com o conteúdo.
- Glassmorphism: cartões parecem flutuar — a cara de app moderno.
- Hover-lift: feedback tátil; o usuário sente que a página responde.
- Contrail: o detalhe lúdico que dá personalidade à marca.
💡 Dica prática
Efeitos são tempero, não prato. A skill descreve poucos e bem definidos. Liste só os efeitos que reforçam a marca — uma página coberta de animações cansa e parece amadora.
⚙️ JavaScript e persistência de estado
A última peça do design system são os padrões de JavaScript. Eles transformam a página de estática em viva: troca de dia por data-attribute, acordeão de voos com transição de max-height, checklists que salvam em localStorage, theme toggle persistido e barras de progresso calculadas automaticamente.
O padrão de persistência (essência)
// item da checklist salva estado por viagem
function toggle(item, tripKey) {
item.classList.toggle('done');
const done = [...document.querySelectorAll('.done')]
.map(el => el.dataset.id);
localStorage.setItem(tripKey, JSON.stringify(done));
updateProgress(); // recalcula a barra
}
// ao abrir: restaura o que estava marcado
const saved = JSON.parse(localStorage.getItem(tripKey) || '[]');
✓ Padrões que valem ouro
- ✓localStorage com chave por viagem: várias páginas não se atropelam.
- ✓Acordeão por max-height: transição suave sem JS pesado.
- ✓Progresso automático: contado dos itens marcados, não fixo.
✗ Armadilhas
- ✗Chave de localStorage genérica que colide entre viagens.
- ✗Esquecer de restaurar o estado ao abrir a página.
- ✗Depender de framework para algo que vanilla resolve.
💡 Dica prática
Persistir estado é o que faz o usuário voltar à página. Uma checklist que esquece o que foi marcado é inútil. Sempre que sua skill gerar algo interativo, descreva como o estado é salvo e restaurado.
Exercícios práticos
1. Extraia o design system
Pegue a paleta de uma skill (ou de um app que você gosta) e escreva o bloco :root com nomes semânticos. Liste 5 acentos e o que cada um significa.
2. Documente um componente
Escolha um componente da sua skill futura e descreva-o no formato "contém X · no hover Y · ao clicar Z". Inclua os estados (ativo, expandido, marcado).
3. Crie um SKILL.md rodável com design system
Salve como ~/.claude/skills/expense-report/SKILL.md, reinicie o Claude Code e digite /expense. A skill conduz o setup e gera um HTML com design system embutido e estado persistido.
---
name: expense-report
description: Generates a self-contained HTML expense
report with a built-in design system and saved
state. Trigger on "/expense", "expense report",
"log my expenses", "trip costs". Asks for the
period, currency and categories BEFORE generating.
---
# Expense Report
## What This Skill Does
Generates a single self-contained HTML expense
report: a stats bar (total, count, avg), category
cards, an itemised table with mono-aligned values,
and a checklist of receipts that saves state. Looks
like an app, not a document.
## Setup Flow — CRITICAL
1. What period and currency?
2. Which categories? (travel, food, lodging, other)
3. Offer to read receipts from email/drive.
4. Confirm a summary, THEN generate.
## Design System
:root tokens — --bg, --surface, --accent (blue),
--green (paid), --orange (pending), --gold (flagged).
Inter for text, mono for amounts. Tags are uppercase
pills, colour-coded by status.
## Output Format
One HTML file. CSS in <style>, JS in <script>.
localStorage for the receipt checklist, keyed per
report. No external deps except Google Fonts.
Save as expense-{period}.html.
## Key Principles
1. Colour-code by payment status.
2. Mono-align all amounts.
3. Interactive > static (save receipt state).
4. One file, zero dependencies.
🎨 Resumo do Módulo
Você concluiu a Trilha 2! Próximo passo:
Trilha 3 — Skills de Frontend & Geração: correções ao vivo no navegador e um funil inteiro em um prompt.