Neo Stitch

Esboce com imagens. Dê vida com vídeo. Entregue em HTML.

Um canvas local onde ideias de interface crescem em árvore —
do prompt à imagem, da imagem ao movimento, do movimento ao código.

_{A árvore de ideias do JarvisOS → enquadrar uma família com o botão do meio → o visualizador com as irmãs → a vista de uma imagem com um vídeo por modelo.}

Ferramentas como o Stitch geram telas direto em código, e o código puxa tudo para o genérico. Modelos de imagem fazem o contrário: inventam interfaces que nenhum template entrega. O Neo Stitch aposta nisso. Primeiro a imagem, depois o movimento, por último o HTML — e você só gasta código no que já foi aprovado.

Cada ideia vira um nó num canvas infinito. Você pede, o Claude Code gera, você marca as melhores e pede de novo a partir delas. O resultado é uma árvore viva de exploração, com a linhagem de cada tela à vista: de onde veio, o que saiu dela, quanto custou.

 brief ─▶ tela ─▶ pedido ─▶ 🖼 imagens ─▶ pedido ─▶ 🖼 imagens …
                                  │
                                  ▼  (a imagem aprovada ganha vídeo)
                          🎬 pedido de vídeo ─▶ vídeos (um por modelo)
                                  │
                                  ▼
                          </> HTML vivo  (impl/<código>/vN)

1. Você pede no canvas. Selecione imagens ou referências, tecle N, escreva a intenção e envie com ⌘↵.
2. O Claude Code atende. Ele ouve a fila do app (fila.jsonl), lê o contexto do pedido — entradas, comentários com pin, o brief — e escreve os prompts.
3. As imagens penduram na árvore. Geradas em paralelo no OpenRouter (GPT Image 2 por padrão, com várias referências), com custo e prompt guardados em cada nó.
4. A aprovada ganha vida. Um pedido de vídeo (V) anima a tela em vários modelos de uma vez, com a interface travada: câmera fixa, texto intacto, só se mexe o que foi pedido.
5. O vídeo vira HTML. Com o movimento aprovado, a tela é reconstruída em HTML/CSS de verdade — fontes, caixas, cores e ícones medidos contra a imagem.

O JarvisOS — o painel de um orquestrador de agentes de voz — foi o primeiro projeto a fazer o caminho inteiro.

🖼 Imagem	🎬 Vídeo	HTML
GPT Image 2 reinterpretando uma referência do Pinterest (uma esfera de tinta se desfazendo).	Hailuo 3, 6 s: a esfera respira, o LED percorre o arco e "Storytelling" é selecionado.	HTML/CSS em cqw (escala com a janela), textos reais e o fundo reconstruído. Diferença média para o mock: 2,8/255.

🖼 Imagem	🎬 Vídeo (4 s)
Layout aprovado + referência de um neurônio como núcleo.	Hailuo 3 Max: o núcleo pulsa e faíscas correm pelos dendritos até os agentes ativos.

Cada pedido de vídeo roda em vários modelos ao mesmo tempo, e a vista da imagem mostra todos lado a lado para comparar. Abaixo, a JAR-095 com o mesmo prompt:

Testamos os 25 modelos de image-to-video do OpenRouter em quatro telas. O que importa aqui não é o vídeo mais bonito, e sim o que não mexe na interface:

• Árvore de ideias que se arranja sozinha: empilhada, em grade ou em blocos 3×3 / 4×4 / 5×5. Arraste qualquer nó e o galho vai junto.
• Pedidos como pontos: o pedido concluído encolhe num ponto sobre a linha (passe o mouse para ver o card), e a árvore fica só com as imagens.
• Recolher com intenção: cada galho fecha numa pílula com a contagem; ⌘1/⌘2/⌘3 mostram uma geração de cada vez; ⌘A deixa só o caminho até as aprovadas.
• Visualizador com comentários em pontos da imagem (ou em segundos do vídeo), "Veio de" / "Saiu daqui" e um filme estilo Finder com as irmãs.
• Pedidos de vídeo com vários modelos, duração, resolução e estimativa de custo antes de enviar.
• Vistas: qualquer nó abre o canvas recortado a partir dele; a barra lateral guarda os pinados e o histórico das 10 últimas.
• Desfazer tudo: ⌘Z/⌘⇧Z para posições, galhos, marcações, pedidos e itens apagados (nada sai do disco: vai para a lixeira do projeto).
• Custos sob controle: custo por imagem, por pedido e por dia, com tetos que pedem confirmação.
• Local e simples: um servidor Python sem dependências, um JSON por nó, nada de banco de dados.

Requisitos: macOS (as miniaturas usam o sips), uv com Python 3.11+, Node 20+, Claude Code, uma chave do OpenRouter e, para as capas dos vídeos, ffmpeg.

git clone https://github.com/rtadewald/neo-stitch.git
cd neo-stitch

# o app (React + React Flow)
npm --prefix app install
npm --prefix app run build

# a chave do OpenRouter (fica fora do git)
echo 'OPENROUTER_API_KEY=sk-or-...' > .env

# o servidor: API + arquivos + app em http://localhost:8730/
uv run ferramentas/servidor.py

Abra o Claude Code na pasta do projeto e diga "ouça o canvas". Ele liga o Monitor da fila e o ponto verde "Claude" acende no topo do app. A partir daí, cada pedido enviado no canvas é atendido na hora.

Para mexer no app com recarga instantânea: npm --prefix app run dev (porta 5173, repassa a API para a 8730).

O guia completo está em docs/USO.md.

O app não chama nenhuma IA sozinho. Ele escreve uma linha na fila.jsonl a cada pedido, e o Claude Code, seguindo a skill neo-stitch, faz o resto:

uv run ferramentas/neo.py ver JAR-042          # o pedido com todo o contexto
uv run ferramentas/gerar.py JAR-042 --json …   # gera as imagens e pendura no canvas
uv run ferramentas/gerar_video.py JAR-122 --prompt-arquivo prompt.txt   # um vídeo por modelo

Os mesmos comandos funcionam pelo chat: "gera 3 variações da JAR-042 mais neon" cria o pedido no canvas, com a linhagem.

ferramentas/          Python, só biblioteca padrão (uv run)
  servidor.py         API + arquivos (com Range, para os vídeos) + app compilado
  base.py             caminhos, trava por projeto, nós, códigos, custos
  neo.py              o lado do Claude: fila, contexto, direções, estados, diário
  gerar.py            imagens (OpenRouter /images, em paralelo, várias referências)
  gerar_video.py      vídeos (OpenRouter /videos, assíncrono, vários modelos)
  openrouter.py       cliente HTTP mínimo
app/src/              Vite + React 19 + React Flow 12
  Canvas.tsx          o canvas: árvore, atalhos, seleção, menu, organização
  nodes.tsx           os nós: brief, tela, pedido, imagem, referência, vídeo
  Viewer.tsx          o visualizador com pins e linhagem
  Trilho.tsx          a barra lateral: vistas pinadas e histórico
  layout.ts           a árvore e os modos de arranjo
projects/<slug>/      os dados (um JSON por nó, imagens, vídeos, impl/) — fora do git
.claude/skills/       a skill que ensina o Claude a operar o canvas

Decisões e escopo completos em specs.md.

• O HTML dentro do app: as versões de impl/<código>/vN como nós do canvas, ligadas ao vídeo e à imagem.
• Do vídeo ao HTML animado: a skill video2html usa o vídeo aprovado como referência de movimento na reconstrução.
• Pedir o HTML pelo app (um botão no vídeo que vira uma ação da fila).
• Editar padrões e tetos do projeto pela interface.