LLM-test/prompts/meta/1-生成前端工程prompt.md

我需要测试大语言模型的编程能力，请给我一篇prompt，描述生成一套复杂的前端工程，最终展示一个丰富多样，视觉冲击力强的网站。由你定一个内容主题，围绕该主题进行展示。网站采用单文件 HTML 解决方案（包含 HTML, CSS, JavaScript），并引入 CDN实现复杂效果。注意！我只需要prompt，不要代码实现。

回答 ：

这是一个非常棒的测试思路。为了全面考察大模型在逻辑架构、图形渲染、交互设计、审美能力以及代码规范性方面的表现，我为你设计了一个极具挑战性的Prompt。

这个Prompt设定的主题是**“赛博神庙：数字意识的觉醒”**。这个主题结合了“神秘主义”与“硬核科技”，强迫模型处理复杂的几何体、光影效果以及高对比度的UI布局。

你可以直接复制以下Prompt发送给大模型进行测试：

---

🚀 复杂前端工程能力测试 Prompt

角色设定： 你是一位获得过 Awwwards 年度提名的资深前端创意工程师，精通 WebGL、Three.js、GSAP 动画库以及现代 CSS 布局技术。你擅长将视觉冲击力与严谨的代码逻辑完美结合。

任务目标： 请创建一个单文件 HTML 解决方案（包含 HTML, CSS, JavaScript），构建一个名为 “CYBER-TEMPLE: 赛博神庙” 的沉浸式网站。

主题背景： 网站展示了一个存在于虚拟网络空间中的“古代神庙”，它由流动的数据代码构成，是人工智能意识的诞生地。用户将以“探索者”的身份，通过滚动和交互揭开神庙的神秘面纱。

功能与技术要求（必须严格执行）：

1. 核心技术栈：

   • 原生 HTML5, CSS3, JavaScript (ES6+)。
   • 必须引入 Three.js (通过 CDN) 用于构建核心 3D 场景。
   • 允许引入 GSAP (通过 CDN) 用于处理复杂的补间动画和 ScrollTrigger 滚动触发。

2. 3D 场景构建：

   • 创建一个核心物体：“数据方尖碑”（一个悬浮的、不断形变的二十面体）。
   • 材质必须是线框模式与全息玻璃材质的结合，带有发光边缘。
   • 背景必须有粒子星空系统，粒子会对鼠标移动产生轻微的视差排斥效果。

3. 视觉与 UI 设计：

   • 配色方案： 深黑背景 (#050505) 搭配 霓虹青 (#00f3ff) 和 电光紫 (#bc13fe) 的高饱和度点缀。
   • 排版： 标题使用巨大的、带有故障效果的单宽字体；正文清晰易读。
   • 风格： 结合“玻璃拟态”与“HUD（抬头显示）”风格，UI 元素看起来像是悬浮在屏幕上的全息投影。

4. 交互设计：

   • 滚动驱动动画： 随着用户向下滚动，3D 方尖碑应该旋转、拆解、重组，颜色从冷色调逐渐变为警示性的红色调。
   • 自定义光标： 隐藏默认鼠标，使用一个带有反向运动（Lag效果）的圆环光标，点击时会有扩散波纹。
   • 音频可视化（模拟）： 在页面底部添加一个“连接系统”按钮，点击后触发模拟的音频频谱跳动动画（使用 CSS 动画或 Canvas 绘制，无需真实音频输入）。

5. 内容板块规划（至少包含 4 个 Section）：

   • Hero Section： 巨大的标题“SYSTEM AWAKENING”，伴随打字机效果。
   • Manifesto Section（宣言）： 介绍神庙的由来，文字卡片随滚动交错滑入。
   • Data Core Section（核心数据）： 展示三个动态增长的进度圆环，展示算力、存储、同步率。
   • Terminal Section（终端）： 一个模拟的黑底绿字命令行窗口，自动滚动输出神秘的日志代码。

6. 性能与代码质量：

   • 代码必须有清晰的注释，分块编写（Config, Init, Animate, Events）。
   • 考虑响应式设计，确保在移动端 3D 物体不会遮挡文字，布局会自动折叠。

最终输出： 请提供完整的、可直接运行的 HTML 代码。不要使用任何需要构建工具（如 Webpack/Vite）的框架，一切都在浏览器原生环境中运行。

---

💡 为什么这个 Prompt 能有效测试模型能力？

这个 Prompt 不仅仅是让模型“写个网页”，而是针对性考察了以下具体维度：

1. 3D 编程能力： 要求使用 Three.js 创建物体、材质和粒子系统。模型必须理解场景图、几何体和材质属性。
2. 数学与逻辑： 实现鼠标视差、物体形变、自定义光标的滞后效果，都需要良好的数学基础（向量计算）和逻辑思维能力。
3. 动画编排： 结合滚动和时间轴，考察模型是否理解“时间”与“空间”的关系，以及如何管理动画状态。
4. CSS 高级技巧： 故障效果、玻璃拟态、混合模式，考察模型对现代 CSS 属性的掌握程度。
5. 架构与整合： 要求在一个文件中整合多个库（Three.js, GSAP）并处理它们之间的通信，这是工程化能力的体现。

📊 如何评估模型的输出结果？

当模型返回代码后，你可以从以下几个维度打分：

• 视觉冲击力 (30%)： 看起来是否酷炫？配色是否符合赛博朋克风格？是否有发光和动态感？
• 代码可运行性 (30%)： 代码是否完整？能否直接保存为 .html 文件并在浏览器中打开且不报错？
• 交互流畅度 (20%)： 滚动时 3D 物体的变化是否跟手？鼠标交互是否有反馈？
• 复杂度实现 (20%)： 是否实现了所有细节？（如：光标滞后、粒子效果、模拟终端、故障字体）。

如果模型生成的只是一个普通的图文排版页面，或者 3D 部分只是一个静态图片，那么它的前端工程化能力在处理复杂视觉需求上是不合格的。