Trae 这个工具出来很久了还没好好尝试做一个产品，刚好上周末有时间就尝试了一下。虽然做的不是很好，但是还是想着分享一下吧。请大佬们请勿吐槽，因为这个是纯AI工具生成自己没有添加和修改任何代码。 作品链接地址
一 、 需求分析
到底想要做一个什么样的产品呢？想好了敲出来，整理好需求喂给它。（这里也是AI工具整理的哈）
在整理需求的时候一定要整理的越简单越好，比如下边这个，我刚开始整理的比较复杂，所以实现出来效果就不是很好。
markdown
# 项目目标：开发一个高度个性化、技术驱动的独立博客网站 (Next.js 技术栈)
## 核心特性需求 (实现独特个性)
1. **动态主题引擎 (Dynamic Theme Engine):**
* **功能:** 用户可在多种预设视觉主题间切换 (如: `Cyberpunk`, `Minimal Dark`, `Vintage Paper`, `Terminal/CLI`)。
* **要求:**
* 使用 CSS Variables (CSS 自定义属性) 定义主题颜色、字体、间距。
* 使用 React Context 或 Zustand 管理全局主题状态。
* 每个主题需包含完整的配色方案 (primary, secondary, background, text, accents) 和字体栈。
* 提供主题切换组件 (`ThemeSwitcher`)，展示主题预览小方块。
* 用户选择自动保存到 `localStorage`。
2. **3D/WebGL 个人头像展示区 (3D Avatar Showcase):**
* **功能:** 在网站 Header 或 About 页面集成一个交互式 3D 模型作为个人头像/标识。
* **要求:**
* 使用 `react-three-fiber` (Three.js for React) 实现。
* 模型格式支持 `.glb` 或 `.gltf`。
* 实现基础交互：鼠标悬停旋转、点击触发简单动画 (如点头、眨眼)。
* 模型需能自适应容器大小，性能优化 (LOD 或简化模型)。
* (可选) 支持根据不同主题切换模型材质/环境光。
3. **AI 辅助内容生成集成 (AI Content Copilot - Optional):**
* **功能:** 在文章编辑器 (如 Markdown) 中，提供 AI 辅助写作功能 (摘要生成、续写、润色)。
* **要求:**
* 集成 OpenAI GPT API (或 Anthropic, Cohere 等)。
* 在编辑器界面添加浮动操作按钮 (如摘要生成、续写建议、语法检查)。
* 用户输入需安全传输，处理结果实时插入编辑器光标位置。
* 提供 API Key 配置界面 (用户自行填入)。
* (重要) 明确标注 AI 生成内容，遵守平台政策。
4. **交互式代码片段实验室 (Interactive Code Lab):**
* **功能:** 文章内可嵌入可编辑、可运行的代码沙盒 (类似 CodePen 嵌入)。
* **要求:**
* 使用 `react-live` 或 `@mdxeditor/editor` 的实时预览组件。
* 支持主流语言 (JS/TS, HTML/CSS, Python 等)。
* 代码编辑区与预览区实时同步。
* 沙盒环境需安全隔离 (Sandbox iframe)。
* 支持保存/加载预设代码示例。
5. **博客小游戏化元素 (Gamification Elements):**
* **功能:** 增加用户阅读粘性，如阅读进度徽章、隐藏成就。
* **要求:**
* 实现基于文章阅读进度的徽章系统 (如 `阅读了 10 篇文章` -> 解锁 `探索者` 徽章)。
* 徽章展示在用户个人资料页或侧边栏。
* 使用 `localStorage` 或 IndexedDB 存储用户成就数据。
* (可选) 设计简单的视觉动画效果解锁成就时触发。
## 技术要求 (必须明确告知 Trae)
* **框架:** Next.js 14 (使用 App Router)。
* **样式:** Tailwind CSS + CSS Modules (或 styled-components)。
* **状态管理:** React Context / Zustand (简单场景) 或 Jotai。
* **数据层:**
* 文章内容存储：本地 Markdown/MDX 文件 (使用 `gray-matter` 解析元数据)。
* 使用 `next-mdx-remote` 或 `@next/mdx` 处理 MDX 内容。
* **部署:** Vercel (原生支持 Next.js)。
* **代码质量:**
* 使用 TypeScript。
* 配置 ESLint + Prettier。
* (重要) 组件需模块化、可复用。
* 充分考虑性能优化 (图片懒加载、代码分割)。
* **安全:**
* 对用户输入进行严格过滤 (如评论、AI 输入框)。
* 避免 XSS 攻击 (尤其在渲染动态内容/MDX 时)。
* API Key 不硬编码，通过环境变量管理。
## 交付物要求
1. 完整的、可运行的 Next.js 项目源代码。
2. 清晰的 `README.md`，包含：
* 项目简介与核心功能
* 本地开发环境搭建指南 (`npm install`, `npm run dev`)
* 环境变量配置说明 (如 OpenAI API Key)
* 部署到 Vercel 的步骤
3. 必要的单元测试 (使用 Jest + React Testing Library)，覆盖核心组件和功能。
下边是修改之后的需求，比之前难度稍微有所降低，所以它理解可能就会好一些。
markdown
请使用纯 HTML、CSS 和 JavaScript (ES6+) 开发一个单页面博客应用 (SPA)。具体要求如下：
1. **文件结构:** 严格按 `index.html`, `styles/`, `scripts/`, `content/`, `assets/` 组织。
2. **核心视觉:**
* 实现视差滚动背景 (`background-attachment: fixed`)。
* 所有内容卡片使用玻璃态效果 (毛玻璃 + 圆角 + 阴影)。
* 使用 CSS `clip-path` 或 SVG 在页面添加非矩形装饰元素。
* 替换默认光标为自定义图形，悬停交互元素时变化。
3. **SPA 路由:**
* 基于 URL hash 变化 (`#home`, `#about`, `#posts/post1`) 实现无刷新导航。
* 使用 `fetch()` 动态加载 `content/posts.json` 和 `content/posts/*.html` 文件。
* 动态更新 `#main-content` 区域。
4. **动态主题:**
* 预设 4 套主题 (`default`, `dark`, `sunset`, `terminal`)。
* 通过修改 `body` 的 `data-theme` 属性切换。
* 在 `themes.css` 使用 CSS 变量定义主题颜色。
* 用户选择保存到 `localStorage`。
5. **内容展示:**
* `index.html` 初始加载文章列表 (从 `posts.json` 生成卡片)。
* 卡片悬停动画：上浮 + 阴影变化。
* 点击卡片加载对应 `postX.html` 到详情页。
* **文章样式：** 用 CSS 为文章内容定义类 Markdown 样式 (h1-h6, ul/ol, code, blockquote, img)。
6. **增强交互 (选做 1-2 项):**
* 首页标题打字机效果。
* Canvas 粒子背景动画。
* 文章阅读进度条。
* 标签筛选功能。
**技术要求:**
* 不使用任何框架 (React/Vue/Angular) 或 CSS 预处理器。
* 使用现代 JavaScript (ES6+ 特性如 `fetch`, `let/const`, 箭头函数)。
* 确保响应式设计 (适配手机/平板/桌面)。
* 代码整洁、模块化，有基础注释。二、实现效果
下边是经过多次修改的最终结果
