Como este site foi construído
Um bônus: o portfólio documentando a própria construção. Do brainstorm ao deploy, o processo inteiro está aqui, público no repositório.
O produto é o método
Um portfólio de product builder tem um problema honesto: qualquer um diz que domina IA. A prova está no processo que fez a tela existir e continuar de pé em produção.
Então a decisão foi construir este site com o mesmo método que ele descreve, e deixar o rastro aberto: spec, plano, execução e revisão, tudo commitado no repositório. Esta página é o tour por esse histórico.
O pipeline, etapa por etapa
Nada aqui foi "pedir código pra IA e colar". Cada mudança passou por um fluxo fixo de skills, com pontos de decisão que ficam comigo.
brainstorming
│ (design aprovado pelo João)
▼
spec + self-review ──────▶ docs/superpowers/specs/
│
▼
plano em tasks ──────▶ docs/superpowers/plans/
│
▼
execução por subagentes
│ revisão em 2 etapas: spec ✓ código ✓
▼
humanizer na copy ──────▶ (João aprova cada ajuste)
│
▼
verificação ──────▶ build · lint · browser
│
▼
git commit
brainstorming
Antes de qualquer código, uma conversa guiada transforma a ideia em requisito. Eu aprovo o design antes de seguir: nenhuma linha nasce sem esse aceite.
spec + self-review
O design aprovado vira um documento de especificação, que passa por uma auto-revisão (placeholders, contradições, escopo) antes de ser commitado em docs/superpowers/specs/.
plano em tasks
A spec vira um plano com tarefas pequenas, cada uma com o código e o comando de verificação. É o mapa que um executor segue sem precisar de contexto meu.
execução por subagentes
Cada tarefa é executada por um subagente novo, com revisão em duas etapas: primeiro a conformidade com a spec, depois a qualidade do código. O que não passa, volta.
humanizer na copy
Todo texto do site passa por uma skill que remove marcas de escrita de IA. Eu aprovo cada ajuste antes de entrar.
verificação antes de concluir
Nada é dado como pronto sem evidência: build, lint e o olho no browser. Só depois vem o commit.
# ferramentas
- Claude Code no fluxo diário
- skills encadeadas (superpowers)
- memória de projeto que vira regra escrita
- git worktrees pra isolar o trabalho
A linha do tempo, commit a commit
# Do brainstorm ao plano
# Da spec ao plano em 10 minutos: desenho antes de qualquer código.
- 63fed5f22/07 17:16docs: spec do portfólio V1 (design aprovado em brainstorming)
- 1f77b0522/07 17:26docs: plano de implementacao V1 (16 tasks)
# Fundação: sistema antes das telas
# Tokens, conteúdo tipado e componentes base: a estrutura primeiro.
- daa5a6722/07 17:50chore: scaffold Next.js + TS + Tailwind
- 17c93d722/07 18:02feat: design tokens dark/ambar, fontes Inter + JetBrains Mono
- 9d9eca022/07 18:44feat: conteudo tipado (site, home, caso crm)
# Home e o caso /crm
# Home escaneável e o estudo de caso do CRM, seção a seção.
- 6e0b32422/07 19:12feat: home hero + prova em numeros
- 6700d8022/07 22:30feat: /crm hero e problema
- 26bf84e22/07 23:04feat: /crm stack + diagrama ascii
# SEO, acessibilidade e no ar
# SEO, humanizer na copy e o domínio próprio: no ar no dia seguinte.
- 7480d0523/07 09:55feat: seo completo, og image, favicon, analytics, sitemap
- 33a724b23/07 11:42style: passe humanizer no copy (11 ajustes aprovados pelo usuario)
- 99ee99523/07 15:54chore: dominio de producao joaoleal.dev (canonical/og/sitemap)
# Prova real: prints com dados fictícios
# Prints reais com dados mascarados na camada de rede, 86% mais leves.
- 4f10ca623/07 22:38feat: prints reais do CRM com dados ficticios (6 de 7 modulos)
- 9fef57c23/07 22:42perf: prints otimizados (2.6MB -> 0.37MB, -86%)
- 65a0dfc24/07 00:44feat: print do modulo Documentos + prints regerados com mascara na rede
# Segundo caso: /socio
# Novo ciclo (brainstorm, spec, plano) e componentes extraídos pra reuso.
- 22bfb3224/07 01:39docs: spec da pagina /socio (Socio & builder, Drakes + Ortho)
- 5bc72da24/07 01:55refactor: CaseHero e BackLink genericos (compartilhados por /crm e /socio)
# Esta página
# O mesmo método documentando a si mesmo. Você está lendo o resultado.
- efa5abd24/07 02:11docs: spec da pagina /making-of (bonus: como o site foi construido)
Os artefatos, abertos
Spec do portfólio V1
O design aprovado no brainstorming, antes da primeira linha de código.
Plano V1 (16 tasks)
A spec quebrada em tarefas pequenas, cada uma com código e verificação.
Spec da página /socio
O ciclo do segundo caso do site, do mesmo jeito: desenho antes de codar.
Plano /socio (8 tasks)
Plano da página dos negócios em que sou sócio, tarefa a tarefa.
Spec desta página
A recursão: a especificação do /making-of que você está lendo agora.
Plano desta página
E o plano que a construiu: o mapa que os subagentes seguiram.
AGENTS.md
Regra nascida de um imprevisto: avisa toda sessão que o Next aqui não é o do treino da IA.
Bastidores
Mascarar no DOM não bastava
Os prints do CRM precisavam de dados fictícios. A primeira tentativa trocava o texto na tela, e falhava: o sistema re-renderiza e restaura o dado real no meio da captura.
A solução foi mascarar uma camada antes: interceptar as respostas da API e reescrevê-las antes de chegarem no app. Ainda assim, cada imagem foi revisada a olho antes de publicar. Foi assim que os vazamentos foram pegos.
O framework mudou embaixo do plano
O plano assumia uma versão do Next.js; o scaffold instalou a seguinte, com convenções diferentes. Em vez de brigar com o agente, a lição virou arquivo.
O AGENTS.md passou a avisar toda sessão: leia a doc da versão instalada antes de escrever código.
A voz é minha, não do gerador
IA escreve rápido, mas com tiques reconhecíveis. Toda a copy passou por uma skill que caça essas marcas: foram 11 ajustes só na primeira passada, aprovados um a um.
O critério do que soa como eu continua sendo meu: o agente propõe o ajuste e eu decido se entra.
Nenhuma sessão começa do zero
Cada incidente que custou caro virou memória escrita: o OneDrive segurando lock de arquivo no install, o proxy da Cloudflare conflitando com o SSL da Vercel.
Da próxima vez, o problema já vem resolvido no contexto. O conhecimento mora no projeto.
Feito à vista de todos
Esta página não descreve o método de fora: ela saiu dele. Brainstorm, spec e plano commitados, execução por tarefas, verificação antes do commit, o mesmo fluxo dos outros dois casos.
E tudo está aberto. O repositório é público: dá pra ler cada spec, cada plano e cada commit que levou a este parágrafo.