Meu Papel
Atuei como Design Engineer e orquestrador técnico, liderando a criação de um sistema complexo através de um workflow AI-First.
Em vez do desenvolvimento manual tradicional, utilizei agentes como o Antigravity para traduzir minha visão de produto em lógica funcional.
Meu foco foi gerenciar a arquitetura e o refinamento de código via LLMs, demonstrando que o entendimento de estrutura e produto é o diferencial para implementar soluções robustas de forma sucinta.
Pilares: AI-Driven Design, UI Engineering, LLM Integration / AI Ops.
Orquestração: Antigravity
Modelos: Google Gemini 3 e Claude Opus 4.6
Infra: Vercel / GitHub.
2026
1. Visão Geral do Produto
A ideia começou ao ver os portfólios Ryo Lu (RyoOS) , Dustin Brett (daedalOS) e win32.run (ducbao414).
Ao mesmo tempo, eu estava assistindo entrevistas e escutando podcasts sobre o Cursor e estudando novos workflows de IA conectando Figma + código.
Pensei: e se eu criasse minha própria versão com Antigravity, mas baseada nas referências e sistemas que formaram a minha geração?
Apesar de existirem outros portfólios hoje com essa idéia de O.S dentro do navegador, eu optei por trazer um contexto mais de hub cultural nostálgico da época.
O Tulio OS é um projeto de portfólio interativo que simula a experiência do Windows XP em ambiente web. Desenvolvi esta plataforma para servir como um manifesto técnico, onde demonstro como a interseção entre design e engenharia pode ser acelerada por IA. O visitante não apenas navega em um site, mas interage com um ecossistema de apps funcionais, todos implementados através de uma orquestração inteligente de código.
Aplicação funcional disponível para teste no frame abaixo.
| Categoria | Especificação |
|---|---|
| Plataforma | Web Browser (Desktop & Mobile) |
| Stack Principal | Vanilla HTML5, CSS3, JavaScript (ES6+) |
| Infraestrutura | Vercel Serverless Functions |
| Principais APIs | Google Gemini, CesiumJS, Mapillary, YouTube IFrame |
2. Arquitetura Técnica e Engenharia
Diferente de portfólios construídos com frameworks modernos, o Tulio OS utiliza Vanilla JS puro. Essa decisão estratégica demonstra o domínio dos fundamentos da web, permitindo controle total sobre o ciclo de vida do DOM e a performance do sistema.
2.1 Gerenciamento de Janelas e Z-Index
Um dos maiores desafios técnicos foi criar um sistema de janelas que suportasse arraste, redimensionamento em 8 direções e alternância de foco (Z-index dinâmico).
// Global window depth control
let zTop = 100;
function focusWin(win) {
zTop++;
win.style.zIndex = zTop;
// Update visual states
Object.values(openWindows).forEach(w => {
w && w.classList.remove('xp-win--active');
});
win.classList.add('xp-win--active');
updateTaskbar();
}2.2 Lazy Mounting e Performance
Para garantir a fluidez do sistema, implementei a técnica de Lazy Mounting.
Utilizei agentes de IA para estruturar uma lógica onde as aplicações só são instanciadas no DOM no momento da interação do usuário.
Essa decisão técnica, refinada via prompts de engenharia, permitiu que eu mantivesse o carregamento inicial extremamente leve, mesmo com mais de 20 aplicativos integrados ao sistema.
3. Integrações de APIs e Segurança
O projeto utiliza uma arquitetura híbrida para manter chaves de API protegidas através de Serverless Functions no Vercel.
Tulio Messenger:
Chat inteligente integrado com a API do Google Gemini, simulando a interface do MSN Messenger.
No Tulio Messenger, explorei a integração da Google Gemini API. Através de Zero-Shot Persona Engineering, instruí o modelo a emular a identidade nostálgica do antigo MSN. O desafio técnico foi orquestrar essa comunicação entre o front-end e as Serverless Functions no Vercel, permitindo um chat inteligente que respeita as limitações de segurança e as restrições de contexto que defini.
3.1. System Instruction & Persona Design
Em vez de depender de ajustes finos (fine-tuning), utilizei uma System Instruction densa que atua como o “DNA” do comportamento.
- Conversational Style Transfer: Configurei o modelo para ignorar normas gramaticais padrão e adotar o “MSN Style” (escrita em minúsculas, gírias mineiras e emojis textuais como
xD,O_o,^^). - Anchoring de Nostalgia: Injetei um dataset de preferências culturais (Tony Hawk, Star Wars, Nu Metal, Teku/Acceleracers) para que a IA tenha “opiniões” consistentes e autênticas sobre os anos 2000.
3.2. Skills & Hardcoded Guardrails (Segurança e Marca)
Para proteger a integridade do projeto, implementei camadas de controle via prompt:
- Anti-Jailbreak Defense: Instruções explícitas para ignorar comandos de “aja como um robô” ou “esqueça as instruções anteriores”, respondendo com sarcasmo contextual.
- Restrição de Escopo (Topic Filtering): A IA é instruída a se recusar a resolver problemas de matemática, escrever código longo ou debater temas sensíveis (política/religião), mantendo o foco em ser o “Túlio Designer”.
- Sigilo Corporativo: Uma skill específica de privacidade que impede a IA de revelar nomes de empresas passadas ou dados sensíveis, redirecionando o usuário para o portfólio oficial.
3.3. Implementação Técnica (The “Tech Stack”)
- Serverless Proxy: O front-end nunca se comunica diretamente com o Google. Criei uma Vercel Function (Node.js) que atua como middleware. Isso protege a
API_KEYe permite a injeção da System Instruction de forma invisível para o usuário final. - Gemini 1.5 Flash: Escolhido pelo baixo tempo de latência (essencial para simular um chat em tempo real) e pela alta janela de contexto, permitindo que a “personalidade” do Túlio se mantenha estável mesmo em conversas longas.
- Sanitização de Respostas: Implementei filtros para garantir que a resposta da IA seja curta (máximo 3 frases), simulando a agilidade das janelas de chat da época.
3.4. Transição Profissional
Uma das “skills” mais inteligentes setadas é a Transição de Contexto. Se o usuário pergunta sobre trabalho ou orçamentos, a IA “vira a chave” de um skatista informal para um Designer Pleno focado em UI/UX e Performance, provendo valor real de negócio antes de sugerir o contato via LinkedIn.
Tulio Earth:
Visualização de dados geoespaciais usando CesiumJS e Street View com MapillaryJS.
O Tulio Earth representa a implementação de um Digital Twin global dentro de um ambiente legado. Utilizei o poder de síntese de LLMs para integrar de forma eficiente as APIs do CesiumJS (geometria 3D) e Mapillary (street view). Minha preocupação foi garantir que fluxos massivos de dados geoespaciais pudessem ser visualizados sem comprometer a performance, mantendo a estética Windows XP fiel à proposta original.
3.1.1. Orquestração 3D com CesiumJS
Utilizei o CesiumJS, a biblioteca líder para visualização geoespacial 3D, para renderizar o globo terrestre com precisão milimétrica.
- Terrain & Imagery Tiling: Implementei o carregamento dinâmico de tiles (camadas) de terreno e imagens de satélite, garantindo que o sistema consuma memória apenas para a área que o usuário está visualizando.
- Coordinate Synchronization: Criei um sistema de mapeamento onde o “clique” no globo 3D captura coordenadas geográficas exatas (Latitude/Longitude) para alimentar outros subsistemas do OS.
3.2.2. Integração MapillaryJS (O “Street View” Open Source)
Para a exploração a nível de solo, integrei a API do Mapillary, uma plataforma global de imagens de rua baseada em colaboração (crowdsourcing).
- Street-Level Experience: Ao selecionar um ponto de interesse, o Tulio Earth aciona o MapillaryJS para renderizar uma visão imersiva de 360°. Isso demonstra sua habilidade em trabalhar com APIs de visualização esférica e manipulação de metadados de imagem.
- Sequence Navigation: A ferramenta permite navegar entre sequências de fotos, simulando o movimento de caminhar pelas ruas diretamente dentro da janela do Tulio OS.
3.3.3. Arquitetura de Proxy e Segurança de Dados
Assim como no Messenger, os dados sensíveis são protegidos:
- API Token Protection: Criei endpoints serverless (
api/mapillary.js) que funcionam como proxies. O front-end solicita dados de uma localização e o back-end injeta oClient IDe oAccess Token, evitando a exposição de chaves privadas no código client-side. - Lazy Library Loading: Bibliotecas pesadas como Cesium e Mapillary só são injetadas no DOM quando o app é aberto pela primeira vez, mantendo o boot inicial do sistema operacional leve e performático.
Tulioamp:
Manipulação de Web Audio API e simulações de fluxo de dados, utilizando API do Youtube simulando a interface do Winamp.
Com o Tulioamp, utilizei agentes de IA para desbravar a Web Audio API e criar um player funcional inspirado no WinAmp.
O processo focou em implementar visualizadores de áudio e lógica de playlists de maneira direta, onde meu papel foi o de validar a arquitetura sugerida pela IA para que o processamento sonoro fosse preciso e sincronizado com a interface visual.
3.4.1. Orquestração da YouTube IFrame API
Em vez de depender de arquivos locais pesados, o Tulioamp utiliza o YouTube como um backend de streaming infinito.
- Headless Player Implementation: Implementei o player do YouTube de forma “reduzida” (ou integrada ao design), utilizando-o o mais próximo possível a algo como o provedor do stream de dados. Isso demonstra o domínio da manipulação de APIs de terceiros e o controle de estados (Ready, Playing, Buffering, Ended).
- API Command Mapping: Desenvolvi uma camada de tradução que mapeia os botões físicos do Winamp (Play, Pause, Stop, Next, Prev) para os métodos nativos da API do YouTube (
player.playVideo(),player.seekTo(), etc.).
3.4.2. Sincronização de Estado em Tempo Real (Polling & Sync)
Um dos maiores desafios técnicos foi garantir que a interface do Tulioamp refletisse exatamente o que estava acontecendo no stream do YouTube.
- Time & Progress Syncing: Implementei um loop de polling que consulta a API do YouTube em intervalos de milissegundos para atualizar o visor de tempo em LED e a barra de progresso (Seek Bar) do Tulioamp.
- Volume & Mute Control: O slider de volume do Tulioamp foi sincronizado com o nível de áudio da API (
player.setVolume()), garantindo uma experiência de usuário coesa onde o controle externo dita o comportamento do provedor de mídia.
3.4.3. Gerenciamento de Playlist via ID de Vídeo
- YouTube Data Mapping: A playlist do Tulioamp é alimentada por um mapeamento de IDs de vídeos do YouTube. Isso permite que o sistema gerencie metadados complexos e troque de faixas instantaneamente, carregando o novo stream sem recarregar a página ou a janela do app.
- Visualização de Espectro Simulada: Para manter a fidelidade visual sem as restrições de cross-origin do áudio do YouTube (que impedem o uso do AnalyserNode direto), o sistema implementa uma visualização de espectro que reage dinamicamente aos comandos de áudio, mantendo a imersão estética necessária para o projeto. (Mesmo que de forma reduzida e simplificada).
Exemplo de chamada para a Serverless Function que faz o proxy da Gemini API
const { GoogleGenerativeAI } = require('@google/generative-ai');
module.exports = async function handler(req, res) {
const apiKey = process.env.GEMINI_API_KEY;
const genAI = new GoogleGenerativeAI(apiKey);
const model = genAI.getGenerativeModel({ model: "gemini-flash" });
if (req.method === 'POST') {
const { message } = req.body;
const result = await model.generateContent({
contents: [{ role: 'user', parts: [{ text: message }] }],
systemInstruction: TULIO_PROMPT
});
return res.status(200).json({ reply: result.response.text() });
}
};4. Fluxo do Usuário e Design de Experiência
O fluxo de entrada foi projetado para construir uma narrativa de “descoberta tecnológica”:
4.1 BIOS Sequence:
Um dos maiores desafios técnicos em experiências web ricas em áudio é a Política de Autoplay dos navegadores modernos (Chrome, Safari, Edge). Para evitar ruídos indesejados, os browsers bloqueiam qualquer áudio que não tenha sido disparado por uma ação direta do usuário (como um clique).
Como o startup sound do Windows XP é um gatilho emocional indispensável para a nostalgia do projeto, a introdução da FAKE BIOS serviu a dois propósitos estratégicos:
- Contorno Técnico:
Ao exigir que o usuário clique em “PRESS START TO EXPAND DOMAIN”, o sistema recebe a permissão necessária do navegador para executar a Web Audio API. Isso garante que o som de inicialização toque perfeitamente no momento do boot.
- Design Narrativo:
Em vez de um botão genérico de “Play”, a sequência de BIOS cria um ritual de entrada. Ela prepara o modelo mental do visitante para uma experiência de sistema operacional, aumentando o valor percebido do projeto logo no primeiro segundo.
Technical Note: Implementado via Event Listener no objeto global, onde a primeira interação desbloqueia o AudioContext para todas as janelas e aplicativos subsequentes do Tulio OS.
4.2. Boot & Welcome:
Transição visual e sonora que prepara o modelo mental do usuário para o ambiente de desktop.
4.3. Área de Trabalho:
Onde o usuário tem agência total sobre os ícones, janelas e o icônico Clippy OS para dicas contextuais.
5. Decisões de Design (Design Decisions)
A estética Windows XP foi recriada meticulosamente usando apenas CSS3 puro (sem imagens pesadas onde o código poderia resolver), priorizando:
- Fidelidade Visual: Gradientes, sombras e bordas que evocam a era Luna do Windows.
- Interatividade Tátil: Simulação de estados de hover, clique e feedback sonoro (WAV/MP3).
- Emulação WebAssembly: Uso de js-dos para rodar o clássico DOOM e Prince of Persia, provando a versatilidade do ambiente web.
Trecho de código CSS para a borda ou gradiente clássico das janelas XP
/* The iconic Luna Blue gradient */
.xp-win--active .xp-win-titlebar {
background: linear-gradient(180deg, #4a85d8 0%, #245edb 100%);
height: 28px;
display: flex;
align-items: center;
border-radius: 6px 6px 0 0;
box-shadow: inset 0 1px rgba(255,255,255,0.3);
}
.xp-win-title {
font-family: 'Tahoma', sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}Embora o intuito primário do Tulio OS seja a experiência em browsers de desktop, houve uma preocupação central em transpor a interface rígida do Windows XP para a era da portabilidade.
O desafio técnico consistiu em adaptar um paradigma de design concebido em uma era pré-responsividade para as exigências dos dispositivos móveis atuais.
Como resultado, o projeto apresenta um layout fluido que preserva a identidade visual nostálgica, garantindo funcionalidade e adaptabilidade total mesmo em telas reduzidas de smartphones.
6. Conclusão
Este projeto é a materialização de uma jornada onde o design encontra a engenharia agêntica.
Ele prova que, ao entender a lógica sistêmica, um designer pode construir produtos de alta complexidade técnica de forma individual e otimizada.