Design com IA → código com IA: como nasceu o visual deste blog
Do prompt ao template: como o Claude Design gerou três direções visuais e o agente implementou tudo em Django.
Do design ao template em poucas horas
O visual deste blog não saiu de um briefing pra um designer humano — foi criado inteiramente com Claude Design, a ferramenta de design generativo da Anthropic, e depois implementado pelo próprio agente de IA.
O processo
Comecei com uma ideia vaga: queria um blog minimalista, com cara de quem escreve por hobby mas se importa com tipografia. Sem moodboard, sem referências visuais concretas — só uma vibe.
O Claude Design gerou três direções visuais a partir de prompts em linguagem natural:
- Zen Serif — off-white quente, Source Serif 4 como corpo, JetBrains Mono pra datas e tags. Minimalista, quase um caderno de anotações.
- Hacker Mono — tudo monospace, cursor piscante, listagem tipo ls do terminal. Vibe Hacker News encontra DOS prompt.
- Editorial — magazine moderno com featured post grande, hierarquia visual forte, mistura serif e sans. Cor verde-pinheiro como acento.
O handoff
O Claude Design exporta um bundle com HTML/CSS/JS funcionando — protótipos navegáveis que mostram exatamente como o design se comporta em um viewport mobile. Não são wireframes estáticos; são componentes interativos.
O export inclui:
- Componentes React (JSX) com props e estado
- CSS inline e variáveis de tema
- Dark/light mode funcional
- Navegação clicável entre home, post e tags
A implementação
Aqui é onde o processo brilha. Em vez de pegar o design do Figma e traduzir manualmente pra templates Django, o agente de IA:
- Leu os arquivos do handoff — entendeu a estrutura CSS, as variáveis de cor, a tipografia
- Traduziu pra Django templates — substituiu React por Jinja/Django template tags, manteve a estrutura HTML e CSS
- Criou o CSS customizado — copiou as variáveis do design e adaptou pro Django static files
- Implementou o theme toggle — JavaScript simples que lê localStorage e troca data-theme
O que ficou bom
O resultado final é muito próximo do protótipo original. As cores, espaçamentos e tipografia batem. O que mudou:
- Adicionamos JSON-LD e Open Graph pra SEO
- Ajustamos o CSS pro desktop (o design original era só mobile)
- Adicionamos screenshots reais do site no conteúdo
O que aprendi
O fluxo design com IA → implementação com IA elimina uma das maiores fricções do desenvolvimento web: a tradução entre design e código. Não tem handoff meeting, não tem pixel-pushing, não tem "isso não é possível no CSS". O mesmo agente que entende o design também escreve o template.
Claro, o humano ainda precisa ter bom gosto pra dizer "isso, é por aqui". Mas a execução braçal — que costumava levar dias — ficou questão de horas.
O resultado
O post rodando no dark mode — o tema padrão de quem passa mais tempo no terminal do que no sol:
