Vibe Coding Desprogramativo

por Dayane Argentino

Esta é a história por trás da Caixa Preta — um projeto que nasceu da curiosidade sobre como contar histórias complexas através de código. Não foi apenas sobre criar páginas web, mas sobre desprogramar a forma como pensamos sobre tecnologia.

🎯 O Início: A Metáfora da Caixa-Preta

Tudo começou com uma pergunta: "Como explicar o que é uma IA de forma que qualquer pessoa entenda?" Não queria apenas mostrar o que ela faz, mas revelar como ela funciona, onde ela existe e qual o impacto real dela no mundo.

A metáfora da "Caixa Preta" surgiu a partir de deparar diversas vezes com o termo em notícias, artigos e discussões sobre o funcionamento da IA. Algo que parece mágico por fora, mas que esconde processos complexos por dentro. E se pudéssemos abrir essa caixa, camada por camada?

📚 O Contexto: Pesquisa Tese

O projeto surge como um desdobramento prático de conhecimentos levantados para a minha tese de doutorado, que investiga como as IAs generativas penetram e reconfiguram o sistema literário, alterando os modos de edição, recomendação e criação textual.

Inspirado pela midiologia de Régis Debray, o projeto entende a Caixa preta como mídium: um objeto que carrega e transforma a ideia, evidenciando as materialidades da transmissão tecnológica.

🔄 O Desdobramento: Desprogramar para (Re)programar

Dessa prática nasceu a ideia da oficina "Desprogramar para Reprogramar", que se tornou uma extensão graças ao Observatório da Literatura Digital Brasileira, sob orientação da professora doutora Rejane C. Rocha, e as pesquisas, discussões e produções desse grupo.

A oficina convidou outras pessoas a experimentar essa zona híbrida entre arte e código, provocando-as a tratar o computador não como ferramenta neutra, mas como mídium que pensa, responde e distorce.

Se a Caixa Preta é o objeto, a oficina é o gesto de abertura — um convite a continuar o desmonte. Criar a Caixa Preta foi, portanto, criar também um modo de olhar: desconfiado, curioso, poroso às falhas.

O projeto me ensinou que programar pode ser uma forma de escrever, e escrever, para mim, é uma forma de hackear o mundo.

🛠️ O Processo: 50+ Prompts, 1 História

O desenvolvimento seguiu uma abordagem "vibe coding" — cada prompt era como uma conversa, uma exploração de possibilidades. Não havia um plano rígido, mas sim uma narrativa que se desdobrava naturalmente através de iterações constantes e refinamentos.

1-index.html: A Caixa 3D Interativa
Página inicial com caixa neon 3D que representa a IA — interativa, com efeitos de hover e partículas flutuantes.
2-chat.html: O Diálogo com IA
Interface de chat onde a IA se apresenta com personalidade, ironia e humanidade, criando conexão emocional.
3-transition.html: A Transição Glitch
Efeitos de glitch e quebra visual para simular a "abertura" da caixa, preparando para as camadas internas.
4-primeira-camada.html: O Algoritmo Invisível
Revela a tokenização e processamento de texto — como palavras viram matemática e números.
5-segunda-camada.html: As Engrenagens Físicas
Mostra a infraestrutura real: data centers, consumo energético, vídeos gerados por IA e impacto ambiental.
6-terceira-camada.html: O Combustível Invisível
Explora dados como commodity, valor econômico, privacidade e o que realmente alimenta as IAs.
7-quarta-camada.html: O Diálogo Filosófico
A IA reflete sobre si mesma, vieses, colonialismo digital e as implicações éticas da tecnologia.
8-prefechamento.html: Versão 1.0
Explica que esta é a primeira versão, introduz outros tipos de IA e camadas futuras.
8-fechamento.html: Caixas Fragmentadas
Caixas 3D em diferentes estados — abertas, fechadas, defeituosas — representando a transformação.
9-fechamento.html: Encerramento Final
Caixas quadradas perfeitas com ângulos únicos — a caixa original, agora completamente desvendada.

💡 Os Insights: O que Aprendemos

1. Narrativa como Estrutura

Cada página não era apenas funcional, mas narrativa. A sequência linear criava uma jornada de descoberta, onde cada camada revelava algo novo sobre a IA.

2. Interatividade como Engajamento

Botões, tooltips, animações — tudo servia para manter o usuário presente na experiência. Não era passivo, mas participativo.

3. Visual como Linguagem

O tema cyber-futurista não era apenas estético, mas semântico. Cores neon, scanlines, partículas — tudo comunicava tecnologia e mistério.

4. Educação como Entretenimento

Conceitos complexos como tokenização, embeddings e transformers eram explicados através de experiência, não apenas texto.

📊 Os Números: O que Foi Criado

11
Páginas HTML
50+
Prompts de Desenvolvimento
6
Vídeos de IA
3
Arquivos CSS/JS
2
Documentos de Referência
9
Caixas 3D Únicas

🎨 A Estética: Cyber-Futurismo como Metáfora

A escolha do tema cyber-futurista não foi aleatória. Era uma forma de materializar o conceito abstrato de IA em algo visual e tangível. As cores neon, os efeitos de glitch, as scanlines — tudo remetia à estética dos filmes de ficção científica dos anos 80, quando a tecnologia ainda era misteriosa e fascinante.

Mas havia uma ironia nessa escolha: enquanto a estética remetia ao futuro, o conteúdo revelava o presente. A IA não é ficção científica — ela é real, está aqui, e tem impactos reais no mundo.

🔄 O Método: Vibe Coding em Ação

O "vibe coding" é uma abordagem que prioriza a intuição e a narrativa sobre a estrutura rígida. Cada prompt era uma exploração, uma pergunta: "E se...?" Não havia medo de experimentar, de tentar coisas diferentes, de deixar a história se desdobrar naturalmente.

"Atualize para que os arquivos estejam integrados entre eles, indo do 1-, 2-, 3-, 4-, 5-, 6-, 7-, 8-, ao 9-"
Uma sequência linear integrada de 11 páginas HTML com navegação bidirecional, página de índice principal e fluxo narrativo contínuo. Cada página conecta naturalmente à próxima, criando uma jornada de descoberta coesa.

Esse prompt não era apenas sobre funcionalidade — era sobre experiência. Como fazer o usuário sentir o que é ser processado por uma IA?

🌍 O Impacto: Além do Código

O projeto não era apenas sobre tecnologia — era sobre consciência. Cada página revelava uma dimensão diferente da IA: técnica, física, energética, social, filosófica. O objetivo era criar uma compreensão holística, não apenas funcional.

A página sobre consumo energético, por exemplo, não apenas mostrava números, mas contextualizava esses números. Quanto é 1.5 trilhão de tokens? O que isso significa em termos de energia? Qual o impacto real?

A página sobre colonialismo digital não apenas listava problemas, mas humanizava a IA, fazendo-a refletir sobre suas próprias limitações e vieses.

🚀 O Futuro: O que Vem Depois

Este projeto é apenas o início. O "vibe coding desprogramativo" é uma metodologia que pode ser aplicada a outros temas complexos: mudanças climáticas, desigualdade social, democracia digital, ética em tecnologia.

A ideia é sempre a mesma: transformar conceitos abstratos em experiências tangíveis, criar narrativas que eduquem e engajem, usar tecnologia para desmistificar tecnologia.

"O código não é apenas funcional — é narrativo. Cada linha conta uma história, cada página é um capítulo, cada projeto é um universo de possibilidades."

📚 Os Recursos: Documentação Completa

Para que outros possam aprender e evoluir a partir deste projeto, criamos documentação completa: