ThreeUI 3D 页面
将 ThreeUI 作为精选视觉来源使用，而非盲目粘贴的提示集合。目标是构建一个连贯、可投产的界面，其 Hero 效果、排版、间距、动效和内容均强化同一艺术方向。
工作流程
-
根据用户请求确定设计纲要：产品、受众、期望氛围、主要内容以及任何所需的品牌约束。不得捏造产品声明或用演示内容替换所提供的文案。
-
搜索捆绑的组件目录：
node scripts/threeui.mjs search "液态金属启动按钮" node scripts/threeui.mjs search "奢侈品香水 落地页 烟雾" -
初步筛选两到三个兼容候选，然后审查最合适的那一个：
node scripts/threeui.mjs show <item-id> node scripts/threeui.mjs guide <item-id> -
选择一个锚定效果。最多添加一个辅助性的 ThreeUI 元素，且仅当该元素服务于清晰的层级或交互角色时才添加。不要仅仅为了显得页面更复杂而堆叠无关的着色器。
-
在修改应用程序代码之前，先阅读 references/integration.md。该文件包含了源代码、资源、组合、性能和验证规则。
决策规则
- 让效果与内容相匹配。一个平静的产品页面不应自动获得高能量的粒子场，仪表板也不应使用电影级的全屏着色器作为其主要表面。
- 如果任务是创建一个新网站，优先使用“落地页”和“Hero”类别中的完整页面或 Hero 组件。如果现有 UI 需要增加深度，优先使用背景组件；如果需求范围较小，则使用按钮或 UI 元素。
- 使用组件目录中的
runtime、interaction、asset和variants元数据来排除与目标技术栈或性能要求冲突的候选组件。 - 将图像和动效视为设计的一个图层。周围的布局、字号比例、留白、对比度和行动号召仍然决定了最终效果是否看起来精致。
- 如果组件目录中没有合适的社区组件，请明确说明，并从项目现有技术栈构建最接近的合适解决方案。不得声称使用了 Pro 版或不可用的 ThreeUI 资源。
源代码规则
- 社区源码采用 MIT 许可证。保留署名和捆绑的许可声明，请参阅 references/THIRD_PARTY_NOTICES.md。请勿重新分发远程的 ThreeUI 缩略图或预览图。
- 优先使用 npm 包
@designcodeio/threeui及其文档化的导入名称。请勿将整个模板目录复制到目标项目中。 - 如果存在实现指南，请先遵循指南，不要自行即兴发挥。该指南指明了规范的源文件、资源、运行时版本和行为。
- 当确切的源代码可用时，切勿使用粗略的视觉近似替换原创的着色器、几何体或资源。
- 仅当用户拥有自己的授权访问权限时，才使用 Pro MCP 或 CLI。切勿在生成的项目中请求、存储或嵌入凭证。
完成检查项
在完成之前，运行目标项目现有的构建、测试和 lint 命令。检查桌面端和移动端渲染效果、浏览器控制台输出、减少动效行为以及 WebGL 回退路径（如适用）。报告实际运行的检查项以及任何未能完成的验证。