Como foi criar este site

2026-10-02T00:00:00+00:00

Tudo começou numa sexta-feira à tarde. Nos dias anteriores eu tinha esbarrado no Twitter com a página pessoal do suzuori, um player de osu!, e ela ficou na minha cabeça.

O design me chamou atenção justamente por ser simples. Hoje a gente vive cercado de páginas com cara de IA slop, cheias de cards dentro de cards, cada vez mais complexas e "modernas", e aquele jeito básico de fazer site meio que caiu no esquecimento. Então, com meu amigo Maot na call e uma assinatura nova do Claude recém-paga, resolvemos colocar nosso amigo Claude para trabalhar.

Começando pelo Figma

Começamos instalando o plugin do Figma no Claude Code, que já vem com o MCP dele:

/plugin install figma@claude-plugins-official

Depois disso criamos um projeto novo no Figma e começamos a juntar referências. Além da página do suzuori, entraram o omdb, o próprio site do osu! e a página do anime 11eyes. A ideia nunca foi copiar nenhum deles, e sim utilizá-los como referência.

Pedimos para o Claude montar algumas propostas a partir disso. Primeiro vieram três paletas de cores, e a que ganhou foi a "Céu Azul", um fundo lavanda com roxo, rosa e um azul de link bem clássico. Com a paleta escolhida, pedimos uma segunda rodada, agora com quatro layouts diferentes: uma janela no estilo Windows 98, um caderno pautado com abas, um "HTML 1999" com tabelas e fonte serifada, e um com caixas de diálogo de RPG, com status e inventário.

Indo para o Penpot

No meio do caminho batemos no limite de chamadas do MCP do Figma. Foi aí que o Maot sugeriu o Penpot, uma ferramenta de design parecida com o Figma, só que gratuita e open source, que também tem um MCP para o Claude conversar com ela.

Diferente do Figma, o MCP do Penpot roda na sua própria máquina. O primeiro passo é baixar e subir o servidor, o que dá para fazer com um comando só:

npx -y @penpot/mcp@latest

Esse comando deixa dois endereços rodando: um em localhost:4400, com o plugin que vai dentro do Penpot, e outro em localhost:4401, que é o MCP em si. Com ele de pé, falta apresentar o servidor ao Claude Code:

claude mcp add penpot -t http http://localhost:4401/mcp

Por fim, dentro do Penpot, é só carregar o plugin pelo endereço http://localhost:4400/manifest.json e clicar em "Connect to MCP server". A partir daí o Claude consegue ler e desenhar direto no seu arquivo, desde que a aba do Penpot fique aberta com o plugin ligado.

Escolhendo o modelo

Com os quatro layouts lado a lado, o que mais me ganhou foi o HTML 1999. Mas eu ainda queria um modo escuro, então testamos mais algumas coisas em cima dele: seis esquemas de cores e doze combinações de fontes.

No fim ficaram dois temas. O escuro usa as cores do meu terminal, o kitty, com fundo cinza, texto branco e aquele cursor verde. O claro é o Lavanda, que veio da paleta Céu Azul. Para as fontes, ficou a JetBrains Mono nos títulos e a Tinos no texto, que lembra bastante a Times New Roman de antigamente.

Também aproveitei para enxugar algumas coisas na mão. Saíram o banner de "em construção", o livro de visitas e o contador de visitas. Por mais que sejam a cara da época, eu queria um site estático de verdade, sem nada que precisasse de servidor. A única coisa bem anos 2000 que ficou foi o botão 88x31, um terminal em pixel art com cursor piscando, que você encontra na página Sobre.

Do design para o código

Implementar de fato foi a parte mais tranquila. Eu queria escrever os posts em Markdown e ter só arquivos estáticos no final, sem banco de dados e sem servidor rodando nada. Olhamos algumas opções, como o Hugo e o Eleventy, e acabamos indo de Zola, um gerador de sites estáticos escrito em Rust. Ele é um binário só, sem dependências, e já vem com quase tudo pronto: destaque de código, feed, índice de busca, categorias e tags.

O fluxo de trabalho é bem simples. Enquanto escrevo, deixo um servidor local rodando, que recarrega a página sozinho a cada arquivo salvo. Quando está tudo certo, o build gera a pasta public/ com o site pronto:

zola serve
zola build

Nesse contexto, passamos o design do Penpot para HTML e CSS praticamente tela por tela: a Home, a lista de posts com filtros e busca, a página do post com sumário e blocos de código, e a página Sobre. As cores dos dois temas viraram variáveis no topo do CSS, então trocar de tema é só trocar o conjunto de variáveis. Depois disso fomos acertando os textos aos poucos, em português e em inglês.

Algumas regras guiaram tudo. O site precisa funcionar sem JavaScript, e o pouco que existe serve só para o botão de tema, o botão de copiar código e a busca, que roda inteira no navegador em cima de um índice gerado pelo próprio Zola. Também não tem nenhum rastreador nem nada vindo de fora: até as fontes ficam no próprio site.

Para não ter que montar tudo na mão a cada post, ainda ganhei um scriptzinho que cria a pasta do post, já com o cabeçalho preenchido e uma pasta para as imagens. Foi com ele que este texto nasceu:

./novo-post.sh -c pessoal -t "zola,penpot" "Como foi criar este site"

Por fim, o site fica hospedado no Cloudflare Workers, servindo só os arquivos estáticos, sem nenhum código rodando no servidor. Publicar uma versão nova é gerar o build e mandar a pasta para lá:

zola build && npx wrangler deploy

O resultado é este que você está vendo agora na sua tela.

Obrigado por ler.

dasdwqdf

Como foi criar este site

Começando pelo Figma

Indo para o Penpot

Escolhendo o modelo

Do design para o código