Concluí o Maior Redesign do Meu Site em Anos. Durante o Café da Manhã.
Reconstruí meu site inteiro em 3 dias usando IA — não como assistente de código, mas como meu desenvolvedor de verdade. Eu tomei as decisões; o Claude Code escreveu 28.000 linhas.
São 8h47 de um sábado. Estou comendo uma baguete vietnamita de porco (Bánh Mì Heo Quay). E acabei de publicar a peça final do redesign mais abrangente que meu site pessoal viu desde 2021.
Cinco anos. É quanto tempo eu ficara sem fazer nada substancial no meu site. Claro, aqui e ali ajustava algum texto, adicionava um post novo. Mas o design? A arquitetura? A experiência geral? Intocados desde antes da pandemia acabar de vez.
Essa manhã, finalizei o sistema de design TRANSMISSION — uma renovação visual completa com nova tipografia, paleta de cores, animações e uma página de produtos premium. Mas isso é só o grand finale de um sprint de 3 dias que transformou tudo.
Os números:
- 40 commits em 3 dias
- 28.129 linhas de código adicionadas
- 4.950 linhas de CSS novo
- 11 arquivos CSS (antes eram 1)
- Sistema completo de modo escuro
- Tudo responsivo, mobile-first
- Página de produtos personalizada com screenshots reais
Tempo total para o redesign inteiro: algumas horas em 3 dias. 36 commits só no Dia 1. O push final de hoje: 30 minutos enquanto tomava café da manhã.
Sem agência de design. Sem mockups no Figma. Sem cronograma de vários meses. Só eu e o Claude Code. :D
E preciso deixar uma coisa clara: Não escrevi uma única linha de CSS. Não escrevi o PHP. Não rodei os comandos de deploy manualmente. O Claude Code fez 100% da implementação — o design, o código, os commits git, o deploy. Eu só tomei decisões. "Mais brilho." "Essa fonte não tá certa." "Deixa os cards mais premium."
É assim que o desenvolvimento com IA realmente parece em 2026.
---
O Ponto de Partida: Abandonado Desde 2021
Vou ser honesto sobre onde eu estava.
Meu site em 1º de janeiro de 2026:
- Um arquivo CSS com 700 linhas de espaguete
- Fonte Poppins para tudo (a escolha de "não pensei muito em tipografia")
- Sem sistema de design — cores hardcoded em todo lugar
- Modo escuro básico que quebrava em metade das páginas
- Página de produtos: Sem página de produtos; o site inteiro era só o blog.
- Experiência mobile que era "responsiva" do mesmo jeito que um terno barato "serve"
Eu tinha ficado tão focado no meu trabalho principal, aprendendo sobre IA Generativa e depois construindo o STRAŦUM e o DIALØGUE — minhas duas aplicações de IA — que meu site pessoal havia se tornado o filho descalço do sapateiro.
Toda vez que um potencial cliente ou colaborador visitava, via um site que gritava "2021 ligou pedindo o tema WordPress de volta."
---
Por Que Agora? E Por Que Desse Jeito?
Duas coisas aconteceram no final de 2025:
Primeiro, lancei o STRAŦUM e o DIALØGUE. Duas aplicações de IA em produção, construídas sozinho enquanto mantinha meu emprego de VP em uma agência global de publicidade. Usuários reais, discussões reais de receita, credibilidade real em jogo.
Meu site pessoal era a porta de entrada para produtos reais. Precisava estar à altura.
Segundo, comecei a usar o Claude Code de verdade. Não como chatbot. Como ambiente de desenvolvimento. E descobri algo que mudou tudo: o plugin `frontend-design`.
Esse plugin não só escreve CSS. Ele *pensa* sobre design. Combinações de tipografia. Teoria das cores. Composição espacial. É o que evita que o código gerado por IA pareça "lixo de IA."
Pensei: e se eu simplesmente... reconstruísse tudo? Não num hack de fim de semana. Mas de verdade. Com um sistema de design real. Com o Claude Code fazendo o trabalho pesado enquanto eu tomo as decisões.
---
O Sprint de 3 Dias: O Que Realmente Aconteceu
Dia 1: O Big Bang — 36 Commits
Não planejei fazer 36 commits num dia. Mas uma vez que comecei, não consegui parar.
Configuração inicial, backup do tema existente, início da modularização do CSS.
Reconstruí toda a arquitetura CSS. Aquele arquivo único de 700 linhas virou:
```
css/
├── style.css # Só tokens de design
├── components.css # Botões, cards, navegação
├── homepage.css # Hero, produtos, seções de posts
├── about.css # Página Sobre
├── blog.css # Arquivo do blog
├── dark-mode.css # Sistema completo de modo escuro
├── mobile-nav.css # Barra de navegação inferior
├── search.css # Overlay de busca
├── single-post.css # Tipografia de post de blog
└── products.css # Página de produtos premium
```
Cada arquivo tem uma função. Cada arquivo usa variáveis CSS do root. Sem mais ficar vasculhando 700 linhas para descobrir por que um botão está com a cor errada. :P
Reformulação do modo escuro. Meu antigo modo escuro era vergonhoso — texto que sumia, botões sem contraste. Reconstruí do zero:
- 658 linhas de CSS dedicado ao modo escuro
- Proporções de contraste adequadas (em conformidade com WCAG)
- Remoção de todas as 89 declarações `!important` (sim, 89)
- Tokens de cores semânticos que trocam automaticamente
Ao final do dia: Homepage redesenhada, página Sobre reconstruída, navegação inferior mobile adicionada, integração com newsletter feita. 36 commits.
Dia 2: Arquitetura e Infraestrutura — 9 Commits
O Dia 2 foi sobre deixar tudo sustentável.
A grande refatoração: O `functions.php` passou de 724 linhas de caos para 25 linhas de includes limpos:
```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```
Também configurei Docker para desenvolvimento local, fiz uma auditoria de segurança no GCP e escrevi documentação.
Dia 3: O Finale do TRANSMISSION — O Sprint do Café da Manhã
É aqui que o plugin `frontend-design` mostrou seu valor.
Descrevi o que queria: "Retro-futurista. Passado analógico encontra futuro digital. Premium mas não corporativo. Técnico mas caloroso." Depois fui buscar o café da manhã.
Quando voltei com meu bánh mì, o Claude Code tinha gerado o sistema de design TRANSMISSION completo:
Tipografia:
- Playfair Display — Títulos (elegante, editorial)
- DM Sans — Corpo do texto (limpo, legível)
- JetBrains Mono — Código e dados (credibilidade técnica)
Cores:
```css
--color-cream: #fffbeb; /* Fundo quente */
--color-navy: #0f172a; /* Primário profundo */
--color-cyan: #22d3ee; /* Acento de energia */
--color-amber: #f59e0b; /* Acento quente */
```
Tipografia Fluida:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
Os títulos escalam automaticamente de mobile para desktop. Sem media queries.
Depois atacou a página de produtos. A página que era só texto se tornou:
Seção Hero:
- Texto de destaque em estilo terminal
- Título em Playfair: "What I'm Building"
- Barra de estatísticas: 2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- Formas geométricas flutuantes com animações sutis
Cards de Produtos:
- Fundos com gradiente navy premium
- Screenshots reais dos sites em produção (não mockups)
- Contêineres com moldura de navegador e pontos de controle de janela
- Estados de hover com brilhos cyan/amber
- Listas de recursos com marcadores de seta
- CTAs de largura total
Os screenshots sozinhos foram uma aventura. O Claude Code navegou para meus sites em produção, capturou as páginas, otimizou de 1,8MB para 229KB (86% menor) e as embrulhou em contêineres estilizados.
---
A Stack: Surpreendentemente Simples
Aqui está tudo que usei:
Claude Code — A IA que escreve código, roda comandos e mantém contexto. Uma IA que tem acesso ao meu sistema de arquivos, pode rodar comandos git e lembra o que construímos ontem.
Plugin frontend-design — A diferença entre "CSS gerado por IA" e "CSS que parece ter sido projetado". Teoria de tipografia, relações de cores, composição espacial já embutidas.
Docker — Desenvolvimento WordPress local. Um `docker-compose up` e tenho um espelho de produção.
Chrome DevTools MCP — O Claude Code pode controlar um navegador. "Verifica o modo escuro no mobile" → screenshot real da página renderizada. Sem troca de abas.
gcloud CLI: que o Claude controla
---
As Partes Honestas
Não foi mágica. As coisas deram errado:
Caos de pastas aninhadas: O Docker copy criou uma estrutura `gambit-child/gambit-child/`. Levou 10 minutos para debugar.
Texto sumindo no modo escuro: Alguns títulos estavam herdando cores erradas. Resolvido sendo mais específico com os seletores.
Otimização de imagens: Screenshots brutos eram enormes. Tive que aprender que `sips -Z 800` no macOS redimensiona imagens sem ferramentas externas.
Atribuição de template do WordPress: Esqueci que a nova página de produtos precisava ser atribuída no admin do WP. Clássico.
A diferença é que o debugging levou minutos, não horas. O Claude Code conseguia ver a página renderizada, identificar o problema e propor correções na mesma conversa.
---
Antes e Depois: Os Números
| Métrica | 1º de janeiro de 2026 | 10 de janeiro de 2026 |
|--------|-----------------|------------------|
| Arquivos CSS | 1 | 11 |
| Linhas de CSS | ~700 | 4.950 |
| Arquitetura PHP | Monolítica | Modular (6 arquivos) |
| Tipografia | 1 fonte | Sistema de 3 fontes |
| Tokens de Cor | ~5 hardcoded | 15+ semânticos |
| Modo Escuro | Quebrado | 658 linhas, conformidade WCAG |
| Página de Produtos | Texto simples | Premium com screenshots |
| Nav Mobile | Nenhuma | Barra inferior com 6 ações |
| Animações | 0 | 7 (fadeInUp, float, glow, etc.) |
| Última Atualização Maior | 2021 | Hoje |
Transformação total: 28.129 linhas adicionadas em 123 arquivos em 40 commits em 3 dias. Tudo escrito pelo Claude Code.
---
O Que Isso Custou
Dinheiro: $0 em design. Assinatura do Claude Code. Hosting no GCP que já tinha.
Tempo: 3 dias decorridos. Mas meu tempo ativo de verdade? Talvez 2-3 horas no total. Eu descrevia o que queria, o Claude Code construía e eu voltava mais tarde para revisar. Essa manhã eu iniciei o redesign final, fui tomar café da manhã e voltei para confirmar — 30 minutos de atenção real.
Minha contribuição de verdade: Zero linhas de código. Descrevi o que queria, revisei o que o Claude Code construiu e disse coisas como "o estado de hover precisa de mais brilho" ou "esse espaçamento tá errado."
Comparação: Uma agência de design teria cotado 8-12 semanas e mais de $10.000 para esse escopo. E eu ainda teria que implementar os arquivos Figma deles.
---
O Que Aprendi
1. Não sou mais desenvolvedor — sou diretor criativo. O Claude Code escreveu cada linha de código. Tomei decisões de gosto. "Essa animação está lenta demais." "O ciano precisa de mais brilho no modo escuro." "Deixa as estatísticas do hero mais proeminentes." Essa é uma habilidade fundamentalmente diferente de programar.
2. Modularize primeiro. O primeiro instinto do Claude Code foi dividir a base de código em arquivos lógicos antes de fazer mudanças visuais. Cada mudança subsequente foi mais fácil por causa dessa fundação.
3. Sistemas de design se acumulam. Uma vez que os tokens do TRANSMISSION existiam, cada novo componente era só combinar variáveis existentes. A página de produtos levou 45 minutos porque o sistema já estava lá.
4. O plugin frontend-design faz a diferença. CSS gerado por IA regular parece "lixo de IA" — genérico, seguro, esquecível. O plugin frontend-design pensa sobre combinações de tipografia, teoria das cores, composição espacial. É por isso que isso não parece gerado por IA.
5. Publique incrementalmente. 40 commits, não 1. Cada peça foi ao ar quando estava pronta. O Claude Code gerenciou o fluxo de trabalho git — staging, commits, push, criação de PRs.
---
Experimente Você Mesmo
Se seu site pessoal está "bom o suficiente" desde 2021:
1. Instale o Claude Code com o plugin `frontend-design`
2. Descreva o vibe que quer (o meu: "retro-futurista, analógico encontra digital")
3. Comece com a arquitetura — modularize antes de embelezar
4. Construa o sistema de design — tokens, tipografia, cores
5. Depois construa as páginas — cada uma usa o sistema que você criou
6. Publique com frequência — não espere pelo "pronto"
A parte mais difícil não é a tecnologia. É decidir o que você quer que seu site *transmita*.
Uma vez que você sabe isso, o resto é conversa.
Atualização: Essa lição sobre gosto em vez de implementação ficou ainda mais clara quando comecei a construir um app nativo para iOS sem saber Swift. O Claude criou um scaffold de 7.568 linhas de código em uma noite — mas o trabalho de "diretor criativo" para fazer tudo parecer certo? Esse ainda é completamente humano.
Quando foi a última vez que você reconstruiu algo que estava adiando por anos? O que finalmente te fez começar — e como você se sentiu quando terminou?
Abraços,
Chandler
---
*Ainda construindo, ainda publicando, ainda curtindo aquele bánh mì.*
---
