Como construí um ASCII Art Converter cyberpunk usando apenas prompts

Source: Dev.to

Introdução

Nos últimos meses mergulhei no universo cyberpunk: li Neuromancer, estou em Count Zero, zerei Cyberpunk 2077 e revi Akira, Ghost in the Shell e Cyberpunk Edgerunners. A estética neon, interfaces cruas e informação como matéria‑prima não sai da cabeça.

Ideia e Motivação

Um vídeo no Instagram mostrava uma aplicação que convertia a câmera ao vivo em arte ASCII em tempo real, com análise de IA integrada. O link estava offline, mas a ideia ficou: construir algo semelhante, deixar qualquer pessoa usar com sua própria chave de IA e fazer tudo sem escrever uma linha de código manualmente.

Estratégia: Tudo via Prompt

Já usava o Cursor (inclusive no modo agente), mas ao assinar o Claude Code decidi remover a tentação de tocar no código direto. A regra foi simples: tudo via prompt, sem abrir arquivos para editar. As únicas exceções foram mudanças de uma linha, a conversão de upload para upload as const e um ajuste de cor no CSS.

Organização e Contexto

Antes de qualquer prompt, a feature precisa estar estruturada na cabeça: entradas, saídas, o que muda no estado e o que permanece. Essa clareza é o principal mecanismo de controle quando a implementação é delegada à IA.

Para manter consistência, criei um CONTEXT.md com termos do domínio e um diretório docs/adr/ com decisões arquiteturais importantes (por exemplo, por que o canvas oculto existe separado do canvas visível, ou por que o loop da webcam roda na main thread). Sem esse material, cada novo prompt começaria do zero.

Uso de Skills

Skills funcionam como atalhos de contexto. Em vez de descrever tudo a cada revisão, invoquei /security-review e o agente já sabia o que checar. Usei as skills de Matt Pocock como base e adaptei algumas para o meu fluxo.

Divisão do Problema

Quebrar o problema em partes menores foi essencial. Escopos pequenos e bem definidos evitam que a IA se perca, tornam os resultados mais previsíveis e facilitam a iteração.

Iterações e Aprendizados

• Refatoração de estado: O Claude gerou um componente de upload com useState espalhado por todo lado. Percebi que o padrão estava errado e precisava de useReducer. Enviei um prompt pedindo a extração da lógica para um hook com useReducer e o código ficou limpo, sem abrir o arquivo.

• Problemas de teste: Em outro momento, o Claude entrou num loop tentando resolver um problema de testes, criando novos erros a cada tentativa. Interrompi, reverti tudo e reescrevi o prompt do zero, explicando como os testes são estruturados. A solução chegou na primeira tentativa.

Esses episódios mostraram que velocidade não substitui julgamento. O modelo pode gerar código rápido e errado tão facilmente quanto rápido e certo; sem o conhecimento do domínio, a dívida técnica acumula rapidamente.

Resultado: ASCII Art Converter

O projeto final inclui:

• Webcam ao vivo
• Análise de IA (Anthropic, OpenAI ou Gemini)
• Exportação em PNG e TXT
• Design system cyberpunk totalmente customizado

Tudo foi montado sem abrir um único arquivo para editar. Zero features foram escritas manualmente.

Conclusão

Se você já tem o hábito de pensar antes de codar, documentar decisões e dividir o trabalho em partes pequenas, tem o pré‑requisito para tentar essa abordagem. Não é necessário um projeto grande; um side project já basta para entender onde a estratégia funciona e onde ainda apresenta limitações.

Recursos

• Demo
• Claude Code
• Skills for Real Engineers — Matt Pocock
• Vídeo que inspirou o projeto