ThreeUI 3D Pages

O que ThreeUI 3D Pages faz?

Use o ThreeUI como uma fonte visual curada, não como uma coleção de prompts para colar cegamente. O objetivo é uma interface coerente e pronta para produção, cujo efeito hero, tipografia, espaçamento, movimento e conteúdo reforcem uma única direção de arte.

Fluxo de Trabalho

1. Estabeleça o briefing de design a partir da solicitação do usuário: produto, público, clima desejado, conteúdo principal e quaisquer restrições de marca necessárias. Não invente alegações sobre o produto nem substitua o texto fornecido por texto de demonstração.

2. Pesquise no catálogo incluído:

   node scripts/threeui.mjs search "liquid metal launch button"
   node scripts/threeui.mjs search "奢侈品香水 落地页 烟雾"
   

3. Selecione duas ou três opções compatíveis e inspecione a mais forte:

   node scripts/threeui.mjs show <item-id>
   node scripts/threeui.mjs guide <item-id>
   

4. Escolha um efeito âncora. Adicione no máximo um elemento ThreeUI de suporte, e somente quando ele servir a uma hierarquia ou papel de interação distinto. Não empilhe shaders não relacionados apenas para deixar a página mais carregada.

5. Leia references/integration.md antes de alterar o código da aplicação. Ele contém as regras de fonte, asset, composição, desempenho e verificação.

Regras de Decisão

• Combine o efeito com o conteúdo. Uma página de produto calma não deve receber automaticamente um campo de partículas de alta energia, e um painel não deve usar um shader cinematográfico de página inteira como superfície principal.
• Prefira uma página inteira ou hero das categorias Landing Pages e Hero quando a tarefa for um novo site. Prefira um componente de fundo quando uma UI existente precisar de profundidade, e um botão ou elemento de UI quando o escopo solicitado for menor.
• Use os metadados runtime, interaction, asset e variants do catálogo para rejeitar candidatos que entrem em conflito com a stack alvo ou com o envelope de desempenho.
• Trate a imagem e o efeito de movimento como uma camada do design. O layout ao redor, a escala tipográfica, os espaços em branco, o contraste e as chamadas para ação ainda determinam se o resultado parece finalizado.
• Se o catálogo não tiver um componente Community adequado, declare isso claramente e construa a solução mais próxima e apropriada a partir da stack existente do projeto. Não afirme que um asset ThreeUI Pro ou indisponível foi usado.

Regras de Fonte

• O código Community é licenciado como MIT. Preserve a atribuição e os avisos de licença incluídos; consulte references/THIRD_PARTY_NOTICES.md. Não redistribua thumbnails ou prévias do ThreeUI remoto.
• Prefira o pacote npm @designcodeio/threeui e seus nomes de importação documentados. Não copie um catálogo de template inteiro para o projeto alvo.
• Se existir um guia de implementação, siga-o antes de improvisar. O guia identifica os arquivos fonte canônicos, assets, versões de runtime e comportamento.
• Nunca substitua um shader, geometria ou asset criado por uma aproximação visual grosseira quando a fonte exata estiver disponível.
• Use o Pro MCP ou CLI somente quando o usuário tiver seu próprio acesso autorizado. Nunca solicite, armazene ou incorpore credenciais no projeto gerado.

Barra de Conclusão

Antes de finalizar, execute os comandos de build, testes e lint do projeto alvo que existirem. Inspecione as renderizações em desktop e mobile, a saída do console do navegador, o comportamento com movimento reduzido e o caminho de fallback do WebGL, quando aplicável. Relate as verificações exatas realizadas e qualquer validação que não pôde ser concluída.