Fable Studio

O que Fable Studio faz?

A partir de uma frase, uma peça completa: um único arquivo HTML que funciona imediatamente, tem boa aparência, som e é adequado para gravação de tela em formato retrato.

A skill elimina as partes propensas a erros. assets/starter.html contém uma estrutura base testada (renderização com efeito de brilho, câmera, som, tela inicial, modo de gravação, controles de filme e viagem no tempo). Você escreve apenas a cena, ou seja, o conteúdo. Assim, toda a sua atenção permanece no design e na história.

Fluxo

1. Escolher o modo

Modo	Quando	Instrução	Modelo	Exemplo
Mundo	Um lugar, um objeto, um clima para explorar. "Construa…", "Cena", "Mundo", "Rua", "Paisagem"	modes/mundo.md	assets/cena-mundo.js	exemplos/mundo-toquio.js
Filme	Uma história com começo e fim. "Curta", "Animação sobre…", "conte", "Autorretrato"	modes/filme.md	assets/cena-filme.js	exemplos/filme-ponto.js
Viagem no Tempo	Uma evolução ao longo do tempo. "História de…", "Evolução", "de X até hoje", "os próximos 30 anos"	modes/viagemtempo.md	assets/cena-viagemtempo.js	exemplos/viagemtempo-humanidade.js

Se não estiver claro, use Mundo. Não pergunte. O valor desta skill está no fato de que uma frase é suficiente.

2. Ler

Leia nesta ordem, e apenas isso:

1. references/engine.md (todos os blocos da estrutura base e as armadilhas da biblioteca)
2. as instruções do seu modo
3. o exemplo do seu modo. Ele mostra o padrão de densidade e cuidado. Adote a abordagem, não o tema.

Se necessário: references/visuals.md (receitas para luz, névoa, neon, água, partículas), references/audio.md (música e sons), references/styles.md (visuais prontos), references/performance.md (suave no celular).

3. Expandir a frase em um esboço

O humano escreve uma frase. A qualidade surge quando você a transforma em um esboço completo antes de escrever código. Defina mentalmente:

• Imagem central: Qual imagem deve permanecer? Todo o resto a serve.
• Clima e paleta: duas a três cores principais mais uma cor base escura. Poucas cores parecem mais sofisticadas do que muitas.
• Luz: De onde vem? O que brilha sozinho?
• Profundidade: Primeiro plano, meio, fundo. Névoa e variação de tamanho.
• Movimento: pelo menos três camadas movendo-se independentemente (por exemplo, chuva, trânsito, placas).
• Câmera: um movimento com intenção, sem rotação aleatória.
• Som: uma paisagem sonora mais música que combine com o clima.
• Interação ou dramaturgia: O que acontece ao tocar (Mundo), como a história se desenrola (Filme), quais marcos (Viagem no Tempo)?

Você não mostra este esboço com antecedência. Você o constrói.

4. Construir

Escreva apenas a cena em um arquivo cena.js, com base no modelo do seu modo. Então:

python3 scripts/construir.py cena.js <nome>.html

O script insere a cena na estrutura base, verifica a sintaxe e avisa sobre coisas que não existem aqui. Você nunca altera a estrutura base. Se algo estiver faltando, construa na cena.

Se você não puder executar comandos: Exiba assets/starter.html completo e inalterado, substituindo apenas o marcador /*__SCENE__*/ pela sua cena.

Regras fixas, porque o resultado precisa funcionar em qualquer lugar (inclusive como artefato no aplicativo Claude):

• Um arquivo. Sem imagens, fontes, modelos ou sons externos. Tudo é gerado no código.
• A única biblioteca é three.js r128, já carregada na estrutura base. Módulos adicionais como OrbitControls, EffectComposer ou Loader não estão disponíveis. A câmera e o efeito de brilho são fornecidos pela estrutura base.
• Sem localStorage, sem import, sem segundo <script>.
• Textos na tela no idioma do humano.

5. Padrão de qualidade

Antes de entregar, percorra esta lista. Cada item tem um motivo: sem ele, o resultado parece uma demonstração técnica, não uma peça final.

• Imagem imediata: Atrás da tela inicial, a cena já está visível. Nada está preto ou vazio.
• Profundidade: A névoa está configurada; há coisas próximas e distantes.
• Brilho com moderação: Algumas poucas superfícies brilham intensamente (brilho 2 a 4), o resto permanece escuro. Se tudo brilha, nada brilha.
• Três camadas em movimento mais movimento de câmera.
• Densidade: A cena consiste em centenas de partes (via FS.inst), não um espaço vazio com cinco cubos.
• Som: Paisagem sonora e música iniciam com o botão Iniciar, baixos o suficiente para serem agradáveis.
• Formato retrato: A imagem central está no meio da tela e funciona em 9:16.
• Título, subtítulo e instruções de uso estão definidos via FS.setup.
• Fatos (apenas Viagem no Tempo e filmes educativos): Cada número e data está correto. Previsões são marcadas como previsão.

6. Verificar

Se você puder executar comandos, teste realmente:

node scripts/verificar.js <nome>.html

Isso inicia a página em um navegador invisível nos formatos paisagem e retrato, relata erros e salva duas imagens. Veja as imagens e corrija até que nenhum erro apareça e a imagem corresponda ao padrão de qualidade. Se nenhum navegador estiver disponível, leia sua cena linha por linha contra a seção "Armadilhas" em references/engine.md. Os erros mais comuns são digitação incorreta em nomes de variáveis e funções que não existem no three.js r128.

7. Entregar

• No aplicativo Claude: como artefato HTML, para funcionar imediatamente e ser compartilhado.
• No Claude Code: como arquivo na pasta do projeto, com a instrução de abri-lo no navegador.

A resposta é breve: uma frase sobre o que foi criado, a operação (arrastar, rolar, tocar, tecla R ou botão "9:16" para o modo de gravação) e três sugestões de variações, cada uma uma frase que o humano pode simplesmente enviar de volta.

Se a página posteriormente mostrar uma mensagem de erro vermelha, o humano a enviará para você. Corrija a causa na cena e reconstrua.

Modo de Gravação

O botão "9:16" ou a tecla R alternam para o formato retrato sem elementos de interface. O Mundo então se move sozinho, o Filme e a Viagem no Tempo começam do início. Assim, com uma gravação de tela, você obtém diretamente um vídeo para Reels, TikTok ou Shorts. Mencione isso em sua resposta, é o objetivo real para muitos.