Desktop metaphor fell out of fashion na web, mas ambientes criativos (DAWs, IDEs, editores de vídeo) preservam porque organização espacial importa. Queria provar que SaaS poderia roubar essa UX de volta — especialmente com IA como sidekick sempre à mão.
mOSaiko Creative OS
Sistema operacional criativo no browser — desktop com mini-apps de IA
- Cliente
- Produto interno studiomosaiko
- Ano
- 2026
- Duração
- 7 phases, 20 plans, 84 commits — sessão única
- Atuação
- Produto, design, desenvolvimento, integração IA
Construir desktop navegável com 15+ mini-apps, window management real (drag, resize, min/max), persistência por usuário, e IA integrada — tudo no browser, com framework que permita replicar a estrutura para outros SaaS depois.
Next.js como shell, PostgreSQL para content/state, Docker Swarm para deploy, Groq + Gemini para IA. Executado em sessão épica de 20 plans via GSD. Framework resultante é reutilizável — qualquer SaaS futuro pode herdar a estrutura de desktop/janela.
Processo
Como o projeto saiu do papel
- 01 · TESE
Trazer a lógica de desktop de volta ao navegador
A premissa era simples. Ferramenta criativa pede espaço, memória visual e contexto ao mesmo tempo. Em vez de empilhar tudo em coluna, o produto retomou a lógica de desktop para transformar o navegador em ambiente de trabalho de verdade.
- 02 · ARQUITETURA
Construir um desktop vivo com janelas reais
O núcleo foi desenhado como sistema operacional criativo. Mais de 15 miniapps convivem no mesmo plano com arrastar, redimensionar, minimizar, maximizar, ordem de camadas, abertura em cascata e encaixe em grade. Cada app ocupa seu lugar sem quebrar o todo.
- 03 · INTEGRAÇÃO
Mini-apps, IA e conteúdo conversando no mesmo ambiente
Terminal de IA, ferramenta de desenho, pomodoro, jogo de tangram, navegador de arquivos, lixeira com restauração, configurações e páginas institucionais passaram a conviver no mesmo ambiente. A inteligência da IA entra integrada, conectada nos lugares certos. A lixeira foi pensada com descarte suave e restauração — o usuário deleta sem medo de perder.
- 04 · ENTREGA
Primeira versão fechada em sessão única intensa
A construção foi planejada e executada em ritmo de operação concentrada. Em vez de mês e meio espalhado, o trabalho saiu numa sessão única de produção contínua. O resultado não foi só o lançamento do mosaiko.cc — foi também uma base reaproveitável que acelera os próximos produtos do studiomosaiko sem precisar montar o piso de novo.
O que foi construído
Desktop com window management
Arraste, redimensione, minimize, maximize. Z-index respeitado. Cascata de janelas novas. Grid snap opcional.
15+ mini-apps integrados
AI terminal (Groq), paint, pomodoro, tangram puzzle, paleta Claude Code, file explorer, trash com restore, settings, about — cada um com UX própria.
Side panels contextuais
Dois painéis laterais fixos com módulos configuráveis — monitor sistema, quick notes, agenda, música.
Retro icon system
16+ ícones pixel-art em SVG animados com spring physics no Framer Motion. Mosaiko personality.
Content DB (CRUD migrado de MDX)
Posts, notes, tasks — tudo em PostgreSQL com API completa. Migrou do fluxo MDX estático para dinâmico sem perder content.
Trash com soft delete
Delete qualquer item vai pro lixo. Restore em 1 clique. Purge opcional por admin.
Decisões de design
Por que escolhemos cada caminho
- 01 / 03Lógica de desktop em vez de interface plana
- Trabalho criativo precisa de organização espacial. Janela aberta ao lado de janela, sobreposição controlada e memória de onde cada coisa estava ajudam mais do que fluxo único de telas empilhadas. A decisão devolve profundidade ao navegador e aproxima o uso de ferramentas de criação que o usuário já conhece — paint, editor, planilha — sem precisar aprender uma nova interface.
- 02 / 03Base reaproveitável em vez de projeto isolado
- O trabalho não foi tratado como peça única. A estrutura de janelas, mini-apps, dados e padrões de interação foi pensada pra ser herdada por outros produtos. Isso reduz o custo de cada projeto novo e transforma o trabalho em fundação de linha — cada produto futuro do studiomosaiko nasce com metade do caminho já feito.
- 03 / 03Conjunto de ícones com personalidade, em vez de interface genérica
- Os ícones em pixel art animados resolvem mais do que navegação. Eles dão temperamento, ritmo e assinatura visual ao sistema inteiro. Sem isso, o produto correria o risco de virar mais uma interface limpa e esquecível — como tantas outras que abrem em uma aba e fecham na seguinte.
Stack técnico
Resultados
- Shipped
- mosaiko.cc LIVE com v2.0
- Execução GSD
- 7 phases, 20 plans, 84 commits em 1 sessão
- Framework reutilizável
- Base para futuros SaaS studiomosaiko
Lições
O que ficou pra próxima
Lógica de desktop resgata organização que interface plana ignora
Interface plana força navegação linear — uma coisa de cada vez. Desktop deixa o usuário organizar ferramentas em paralelo. Pra fluxo criativo onde IA, desenho, anotação e leitura precisam coexistir, isso vira diferença real: sai da troca constante de aba e entra em ambiente de trabalho que respeita a memória espacial humana.
Base reaproveitável vence projeto isolado
Em vez de produto único, a fundação foi montada pra ser herdada por outros. Isso transforma cada produto futuro em montagem sobre a base existente, não em obra do zero. O esforço inicial pesado deixa de ser custo afundado e vira ativo — quem reutiliza paga uma vez e aproveita várias.
Sessão única intensa exige plano explícito antes de começar
Construir um sistema completo em ritmo concentrado só funciona com mapa fechado antes da primeira hora. Cada parte pré-definida, cada dependência mapeada, cada decisão tomada antes da implementação começar. Sem esse mapa, a mesma sessão produziria caos e abandono no meio — com ele, vira ritmo constante até o lançamento.