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 — e tudo é público, no repositório, commit a commit.
O produto é o método
Um portfólio de product builder tem um problema honesto: qualquer um diz que domina IA. A prova não é a tela bonita — é o 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 público. Esta página é o tour por esse rastro.
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 encadeadas, com pontos de decisão que são meus, não do agente.
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 — a voz do portfólio é minha, não do gerador.
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 — e 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 exato deste tour.
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. O imprevisto virou regra permanente.
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 de o que soa como eu continua sendo meu. O agente propõe; eu decido.
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 fica no projeto, não na minha cabeça.
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.