82 lines
5.7 KiB
Markdown
82 lines
5.7 KiB
Markdown
|
```
|
|||
|
|
我需要测试大语言模型的编程能力，请给我一篇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 部分只是一个静态图片，那么它的前端工程化能力在处理复杂视觉需求上是不合格的。
|