Módulo 1.3 · Inputs | T1 Fundamentos

📚 A pilha de inputs — do genérico ao específico

Quanto mais alta a camada, melhor o output. A camada 5 é rara — mas leva 15 min pra montar e transforma resultado.

✍️ Input texto: anatomia do prompt ideal

Prompt em linguagem natural não é "escrever bem" — é estruturar. A fórmula que funciona: feeling + audiência + restrições.

✗ Prompt solto

"Crie uma landing page moderna
e bonita para meu SaaS de
produtividade."

Zero audiência, zero feeling, zero restrição → newspaper default.

✓ Prompt estruturado

"Landing para Foco24 — focus tool
para solo founders que odeiam
notificação. Feeling: late-night
cinematic (A24). Audiência: lê
Hacker News. Sem gradientes,
sem orbes flutuantes."

Feeling nomeado + audiência específica + restrições explícitas → output premium.

📄 Arquivos: DOCX, PPTX, XLSX, PDF

Claude Design lê documentos nativamente. Para DOCX/PPTX/XLSX, extrai via zip+XML. Para PDF, invoca a skill read_pdf. Você nunca precisa copiar-colar o conteúdo.

💎 Use case matador: PDF → Slides

Anexe um PDF longo (relatório, paper, e-book) e peça:

"Transforme este PDF em uma apresentação.
Extraia apenas as ideias mais importantes.
Simplifique informação complexa.
Cada slide deve comunicar UMA ideia clara."

Funciona muito bem. Resultado: deck pronto em 2 min, mantendo a hierarquia conceitual do documento original.

🖼️ Imagens de referência

Opus 4.7 tem visão nativa. Anexe 2-4 screenshots de sites/apps que você gosta — Claude extrai padrões visuais (cor, tipografia, estrutura, densidade) e aplica. Mais eficiente que descrever em texto.

⚠️ Aviso do system prompt

"Claude é melhor em recriar interfaces baseadas em código do que em screenshots. Quando tiver fonte de dados, foque mais em explorar código e contexto de design do que screenshots."

Ou seja: se tem o repo, prefira o repo. Screenshot é plano B.

🌐 URL de site (web capture nativo)

Cole qualquer URL no painel — Claude captura, extrai paleta, tipografia e estrutura. Um dos hacks oficiais da comunidade: apontar para o site do competidor para ter um ponto de partida estético sólido sem reinventar a roda.

🎯 Prompt de referência cruzada

"Visite linear.app. Extraia paleta,
tipografia, densidade e spacing.
Gere um DESIGN.md derivado disso.
Depois, use esse DESIGN.md para
criar minha landing page de
[descrição do produto]."

🔗 GitHub repo: extrair do código real

A força máxima. Cole URL github.com/owner/repo — Claude usa github_list_repos, github_get_tree, github_import_files para navegar e importar seletivamente.

Fluxo automático

Claude extrai owner/repo/ref/path da URL
Pega default_branch via github_list_repos
Lista árvore com github_get_tree + path_prefix
Importa subset relevante com github_import_files
Lê os arquivos importados — extrai tokens, componentes, paleta

🎨 Marca / Design System: o combo mágico

O nível 5 da pilha. Combine: (1) brand guidelines + (2) repo com código real + (3) páginas reais renderizadas + (4) descrição curta do estilo ("tech, moderno, profissional"). Resultado: tudo que Claude gerar sai consistente desde o primeiro render.

🚀 DESIGN.md: a âncora

Claude mantém automaticamente um arquivo DESIGN.md no projeto com:

•Cores primárias, secundárias, neutras (hex exatos)
•Font stacks (headline + body + mono)
•Spacing scale, border radii, shadows
•Componentes principais + variantes
•Tom de voz / copywriting

Orgs têm múltiplos DESIGN.md (por marca/projeto), controle de acesso (view/edit).

✅ Resumo do Módulo

✓

Pilha de inputs — texto < arquivos < URL < repo < design system. Quanto mais alto, melhor.

✓

Fórmula de texto — feeling + audiência + restrições > "crie algo bonito".

✓

Arquivos nativos — DOCX/PPTX/XLSX via zip+XML; PDF via skill read_pdf.

✓

Código > screenshot — o próprio system prompt diz isso. Prefira repo quando existe.

✓

Web capture — apontar para competidor → DESIGN.md derivado → seu design.

✓

DESIGN.md é a âncora — mantém consistência entre todos os projetos da marca.

Próximo Módulo:

1.4 — 🎨 Seu primeiro design (landing em 5 min)

← Módulo 1.2 Módulo 1.4 →