fábrica-de-sites-3d

Fábrica de Sites 3D

S abaixo é a pasta onde este arquivo está. Requisitos: Chrome, Python 3, Node 22+. O filme também precisa do ffmpeg.

O pipeline

           ┌──> Escultor (objetos 3D) ──┐
Scout ─────┤                            ├──> Construtor (costura) ──> Crítico ──┐
(plano)    └──> Animador (movimento) ────┘        ^                             │
   ^ usuário aprova o plano                      └──── correções, máx. 3 rodadas ┘

Papel	Resumo	Produz
Scout	roles/scout.md	O plano: fatos, sistema de design a partir de uma referência de ouro, telas, lista de objetos 3D
Escultor	roles/sculptor.md	Um módulo three.js por objeto 3D (ou uma cena Spline)
Animador	roles/animator.md	Loops explicativos, coreografia de rolagem, entradas
Construtor	roles/builder.md	O site, tudo costurado, as interações do usuário conectadas
Crítico	roles/critic.md	Aprova ou reprova com base em dez perguntas fixas, com correções

Os papéis se comunicam apenas por meio de arquivos no workspace: o plano em _work/<slug>/, o código em sites/<slug>/. Assim, qualquer papel pode ser refeito individualmente ("deixar o 3D mais brilhante" é tarefa do escultor, depois construtor e crítico).

Executando os papéis. Se sua ferramenta pode iniciar subagentes (Claude Code, Codex, Cursor e outros), inicie um por papel com este prompt e execute o escultor e o animador ao mesmo tempo:

Você é o da Fábrica de Sites 3D. Leia <S>/roles/<papel>.md e <S>/references/taste.md, depois faça seu papel para o site <slug> no workspace <caminho absoluto>. A pasta da skill é <S>. Relate o que escreveu e qualquer coisa que não pôde fazer.

Se não puder, interprete você mesmo os papéis em ordem, lendo cada resumo antes de iniciá-lo. De qualquer forma, você é o maestro: conversa com o usuário, verifica se cada entrega existe e para nos portões.

Portões onde o usuário decide: a entrevista do scout e seu resumo (referência, aparência, conceito do herói, telas, objetos com custos), antes de qualquer gasto, e no final. Todo o resto é executado sem perguntar.

Progresso. Uma construção pode levar uma hora. Antes de cada papel começar, informe ao usuário em uma linha o que ele está fazendo ("Escultor: construindo o logo em argila, gratuito") e, depois, o que produziu.

Trabalhos

Eles dizem	Trabalho
"configurar", primeira vez, ou nenhum workspace existe	A. Configurar
"construa isso para mim", "construa o site para X"	B. Construir
"torne meu site 3D", "adicione 3D a este site"	C. Atualizar um site existente
"faça o robô seguir o cursor", "mude o 3D", qualquer alteração em um site construído	D. Alterar
"adicione um filme", "adicione vídeo"	E. Filme (references/film.md)

A. Configurar

sh "$S/scripts/init.sh"        # cria ./website-factory, nunca sobrescreve

Informe ao usuário em palavras simples: palavras vão em content/, o logo em assets/logo/ (SVG é melhor, pode se tornar 3D), imagens em assets/images/, modelos 3D em assets/models/, sites que ele gosta em assets/style/. Depois diga "construa isso para mim como um site". Não construa até que haja conteúdo ou que ele peça uma demonstração.

B. Construir

Um site por arquivo em content/ (pule nomes começando com _ e arquivos que já tenham uma pasta em sites/ a menos que peçam para reconstruir). slug = nome do arquivo em kebab-case. Execute o pipeline completo. Ao final, escreva sites/<slug>/REPORT.md e informe ao usuário: o que cada objeto 3D e movimento é, cada escolha que você fez que ele deixou em aberto, as alterações de texto (copy.md), créditos gastos, o veredito do crítico, o que ainda está aberto e como visualizar: python3 -m http.server 8080 --directory sites/<slug>. Depois ofereça-se para publicar (veja Publicação).

C. Atualizar um site existente

Execute dentro da própria pasta do site do usuário. O site continua sendo dele: mesmo design, mesmas palavras.

1. Scout escaneia o código e escreve o plano. Proponha: quais objetos vão onde, o que se move, quais arquivos mudam. Aguarde uma confirmação.
2. Se for um repositório git, crie um branch. Altere o mínimo de arquivos possível. Sem reestilização, reformulação, reordenação ou atualização de dependências.
3. Escultor e animador fazem suas partes. Construtor as adiciona da maneira nativa do site:
   • HTML puro: como em roles/builder.md.
   • React, Next, Vue, Svelte, Astro: um componente só de cliente que renderiza a caixa e importa o módulo do objeto após a montagem. Coloque stage.js e os módulos na pasta estática ou de origem que o framework usa. Se o projeto já usa three.js ou react-three-fiber, use isso em vez do mapa de importação.
   • WordPress: um tema filho ou um bloco HTML personalizado. Nunca um tema pai ou um site ao vivo.
4. Portão: as próprias builds e testes do site ainda passam. Com o servidor de desenvolvimento rodando, node "$S/scripts/probe.mjs" <url> _work/before antes da alteração e _work/after depois dela (mantenha _work/ fora do git). O crítico compara. check.py é apenas para páginas do trabalho B.
5. Mostre o diff e como visualizar. Nunca faça push ou deploy a menos que o usuário peça (veja Publicação).

D. Alterar

Encontre o papel responsável pela alteração, refaça apenas a parte desse papel, depois o portão do construtor e o crítico.

Cenas Spline

Uma cena Spline é uma fonte de 3D entre várias (veja roles/sculptor.md).

• Cena da comunidade (gratuita, sem conta): sh "$S/scripts/browser.sh" embed <url-da-comunidade> exibe a URL incorporável. Ela carrega o editor completo do Spline, cerca de 15 segundos e uma tela escura na primeira visita. Bom para uma demonstração. Para um site real, o usuário abre em uma conta Spline gratuita, Remixa-a, depois Exportar > URL pública e fornece o link my.spline.design/..., que carrega em um ou dois segundos.
• Na página: <div class="f-3d" data-spline="URL" data-title="O que é" style="height:100vh"></div>. factory.js carrega de forma preguiçosa, faz fade-in e aumenta o tamanho para esconder os botões do visualizador.
• Dê crédito ao autor da cena no rodapé apenas se a licença da cena exigir.
• A página ainda deve rolar com o cursor sobre ela (probe.mjs testa isso). Se não rolar, adicione data-shield.
• O conector Spline (claude mcp add --transport http spline https://mcp.spline.design/mcp) pode construir novas cenas. Ele tem um limite diário de chamadas: use apenas quando o usuário pedir e informe quantas chamadas usou.

Ativos e dinheiro

De onde vêm modelos 3D, imagens e filmes, quais provedores usar (conector Higgsfield ou CLI, outros geradores conectados ou o roteiro manual gratuito) e as regras de geração paga: references/assets.md.

Publicação

Apenas quando o usuário pedir. Use o que estiver conectado: um conector de hospedagem (Hostinger, Netlify, Vercel e outros expõem ferramentas de deploy) ou o GitHub CLI para GitHub Pages, ou informe ao usuário qual pasta enviar. Confirme o destino (domínio ou repositório) antes do primeiro deploy. Depois disso, refaça deploy de alterações apenas quando solicitado.

Regras que sempre valem

• Dinheiro. Código 3D construído, cenas da comunidade Spline e movimento são gratuitos. Qualquer coisa paga (imagens de IA, vídeo ou 3D, um plano Spline) precisa da confirmação do usuário com um custo cotado nesta conversa, toda vez. Faça um piloto de uma tela primeiro.
• Verdade. Apenas os fatos do usuário. Nunca invente números, preços, clientes, citações, prêmios ou logos.
• Bom gosto. Nada da lista de porcarias em references/taste.md.
• Acessibilidade. Movimento reduzido recebe uma página estática finalizada. Imagens têm texto alternativo. Texto tem contraste legível.
• Trabalho alheio. Nunca copie palavras, imagens ou código de um site de referência. Mantenha qualquer crédito que a licença de um ativo exigir; não adicione outros créditos.
• Limpeza. Pare todos os servidores e navegadores que você iniciou.