需求与生成人 → AI 编辑器
写一份完整的设计简报，生成初版
第一轮最重要的不是“让 AI 开始写”，而是把品牌、设计系统、页面结构、文案规则、技术约束一次讲清楚。
提示词 发送给 AI 编辑器
角色：你是获得过 Awwwards 奖项的网站艺术总监，同时是资深前端工程师。
项目：为「河南飘雪科技有限公司」设计并开发品牌官网。公司深耕软件开发十余年，现转型 AI 智能体培训，核心课程为 Vibecoding 与 AI Agent 开发，面向想转型 AI 的职场人、创业者和大学生。
核心策略：我们教 Vibecoding，官网本身就是最好的作品。访客第一眼要相信：这家公司懂 AI，也懂审美。
设计系统「雪落成码」：
1. 背景 #0A1220，文字雪白，强调色 #22D3EE，强调色克制使用
2. 六边形（雪花晶胞）为全站母题：网格背景、图标容器、卡片切角
3. Canvas 雪花粒子缓慢飘落，稀疏、低透明度，移动端关闭
4. 中文用思源黑体，数字与代码用 JetBrains Mono
5. 区块间距桌面 120px；1px 半透明描边卡片，悬停出现极光光晕
6. 禁止大面积实色块与廉价投影
页面结构：固定导航 / Hero（含 macOS 风格终端，逐字打出 AI 生成的代码）/ 品牌故事时间轴 / 课程体系 / 常见问题 / 页脚（含“本站由 AI 智能体协作打造”徽章）
文案规则：自信克制，用事实说话；禁用“赋能、抓手、闭环、顶级、颠覆”；语气是工程师的严谨加教育者的温度。
技术约束：单个 HTML 文件，不依赖构建工具；所有动画在系统开启“减少动态效果”时自动停止。
验收：首屏无需滚动即可看到主标题和按钮；手机端布局单列且可正常阅读。
AI 产出
- 单文件 index.html，约 900 行
- 雪花粒子、终端打字机、数字滚动、手风琴
- 整体偏营销风格：大数字、评价卡片、预约弹窗
文件变更
+ index.html
+ 数据带与数字滚动
+ 评价卡片区块
+ 预约按钮与弹窗
人工评审
“我们的官网是教学展示，不是销售落地页。访客要看到的是我们教什么、怎么教，营销式的大数字和预约弹窗都不需要。”
这一轮的关键经验
AI 默认按“常见营销官网”的套路生成：大数字、评价、预约入口。你的网站要传达什么，只有你清楚，定位必须由人来定。
修改人 → AI 编辑器
从营销型官网，转为教学型官网
修改型提示词要写清三件事：保留什么、删除什么、新增什么。只说“改一下”，AI 很可能连带改掉你满意的部分。
提示词 发送给 AI 编辑器
背景：官网定位为教学展示平台，用于课堂讲解与线下交流时介绍课程内容。
保留：现有设计系统、配色、动效与页面整体结构不变。
删除：
1. 营销型数字展示：数据带与数字滚动
2. 评价卡片区块
3. 全部预约按钮与预约弹窗
新增：
1. 编程工具下载导航：按 AI 编辑器 / 大模型 / 开发环境 / 智能体平台 / 部署分类，标注“必装、二选一、选装”，只链接官方网站
2. 学习路线：两门课分别按周展示，每周写明学什么、产出什么
3. 环境自检命令，支持一键复制
约束：页面上的每一个数字都必须有明确出处；所有占位信息用 HTML 注释标出，方便后续替换。
AI 产出
- 20 款工具，5 个分类，可筛选
- 两条学习路线，各 6 个阶段
- 全站扫描，确认每个数字都有出处
文件变更
- 数据带与评价卡片
- 预约按钮 ×4 与弹窗
+ 工具下载导航
+ 学习路线与环境自检
人工评审
“学员一看官网要能学到真东西。做得高级一点，内容可以拆成多个页面，更具体一点。”
这一轮的关键经验
第一版提示词往往只说清了“做什么”。迭代时要补上“给谁看、看完能带走什么”，AI 才能判断内容的深度。
重构人 → AI 编辑器
拆成多页面，每页都有可带走的干货
这是改动最大的一轮。提示词里不仅规划了页面，还写明了工程要求和自检方式，让 AI 交付前自己先检查一遍。
提示词 发送给 AI 编辑器
目标：访客打开任意一页，都能学到可以直接使用的东西。
页面规划：首页 / Vibecoding 课程 / Agent 课程 / 实训手册 / 工具下载 / 关于我们
每页必须有“可带走的干货”：
1. 课程页：可展开的周大纲（知识点、课堂实操、课后作业）
2. Agent 课程页：一段可运行的完整代码，配逐段注解
3. 实训手册：工作原则、可复制的提示词模板、常见报错排查、可搜索的术语表
4. 工具页：分 Windows / macOS 的安装步骤
设计与动效：
1. 动效必须有目的：页面切换过渡、滚动进度、标题逐字入场
2. 每种布局在全站最多出现一次，避免模板感
3. 全部动效支持“减少动态效果”
工程要求：
1. 抽出共用的 style.css 与 main.js，交互模块按页面元素按需启动
2. 不引入框架与构建工具
交付前自检：用无头浏览器逐页截图检查排版；全站扫描破折号与禁用词；确认每个交互模块都已生效。
AI 产出
- 6 个页面 + 共用样式与脚本
- Agent 循环动画、组件蜂巢图、注解代码
- 无头浏览器截图自检 4 个页面并修复问题
文件变更
+ vibecoding.html agent.html
+ handbook.html tools.html
+ about.html
+ assets/css/style.css
+ assets/js/main.js
~ index.html 重写为首页
人工评审
“要把 Vibecoding 和 AI Agent 做成两套开发流程：提示词怎么写、改了几次、到交付给用户的全过程。”
这一轮的关键经验
让 AI 自己截图、扫描关键词，能省掉大量重复检查。但网站缺什么、下一步往哪走，仍然要人来判断。
新增功能人 → AI 编辑器
新增「开发流程」栏目，也就是本页
新增功能时，要说明它在现有网站中的位置、每个单元展示什么，以及演示效果。
提示词 发送给 AI 编辑器
任务：新增「开发流程」栏目，用两个案例展示 AI 开发全流程，加入全站导航。
案例：
1. Vibecoding：本官网自身的开发过程，内容必须与真实迭代记录一致
2. Agent：一个售后客服 Agent 从需求到上线
每一轮展示：发给 AI 的提示词（可复制，过长时可折叠）/ AI 产出了什么 / 文件变更 / 人工评审发现的问题 / 这一轮的关键经验
交付环节：
1. Vibecoding 案例：列出交付页面、验收清单和展示方式
2. Agent 案例：模拟一段真实对话，并同步展示每一步工具调用与护栏检查
约束：演示用的数据明确标注为示例；沿用现有设计系统，不新增依赖。
AI 产出
- 两个流程页面，可互相切换
- 对话与工具轨迹同步播放的演示组件
- 全站导航与页脚同步更新
文件变更
+ workflow-vibecoding.html
+ workflow-agent.html
~ 6 个页面导航加入「开发流程」
~ style.css main.js 新增组件
人工评审
“首页顶部的动效区域有点单调，整体没有什么设计感。”
这一轮的关键经验
内容齐全不等于有设计感。品牌概念要落到一个看得见、能互动的视觉上，访客才会记住。
视觉升级人 → AI 编辑器
把「雪落成码」做成首屏主视觉
提视觉需求时，不要只说“高级一点”。描述清楚画面怎么动、和用户怎么互动、在什么情况下要降级。
提示词 发送给 AI 编辑器
角色：你是擅长 Canvas 生成式视觉的创意开发者。
问题：首页首屏只有标题和一个终端窗口，视觉单调，缺少品牌记忆点。
任务：把品牌概念「雪落成码」做成可交互的首屏主视觉：
1. 代码字符像雪花一样飘落，按距中心由近到远的顺序凝结成一枚六角雪花；保持十余秒后融化，再重新凝结，循环往复
2. 雪花缓慢旋转、轻微呼吸；枝杈末端使用强调色
3. 鼠标靠近时字符被推开，离开后自动归位
4. 终端窗口与两张信息卡片分层悬浮在雪花前方，随鼠标产生不同深度的视差
5. 全站叠加极轻的颗粒质感；课程卡片加入代码片段小视图和 3D 倾斜悬停
约束：
1. Canvas 离开视口或页面隐藏时暂停渲染
2. 开启“减少动态效果”时直接显示静态雪花
3. 移动端隐藏悬浮卡片，终端放到雪花下方
4. 主标题在桌面端保持两行
交付前自检：截图检查首屏构图，雪花不能被其他元素大面积遮挡。
AI 产出
- 由数百个代码字符组成的六角雪花动画
- 视差悬浮层、磁吸按钮、卡片倾斜
- 自检截图发现终端遮挡雪花、标题折成三行，调整布局后复查通过
文件变更
~ index.html 首屏结构重写
~ style.css 舞台、悬浮层、颗粒质感
+ main.js 雪落成码动画模块
+ main.js 视差、磁吸、倾斜交互
交付团队 → 学员
交付：一套可以直接上屏展示的网站
交付不是“代码写完了”，而是验收通过，并且知道怎样把它展示给用户。
验收清单
- 8 个页面全部可访问，桌面与手机布局分别截图复核
- 文案扫描：无破折号，无“赋能、闭环”等空话
- 数字有出处，占位信息全部用注释标出
- 无障碍：开启“减少动态效果”后动画全部停止
- 零依赖：任意静态服务器即可运行
现场讲解时这样展示
- 首页：介绍我们是谁、两门课的区别
- 课程页：展开一周大纲，看具体学什么
- Agent 课程页：点击注解，逐段讲解真实代码
- 开发流程：看完整过程，理解“人做判断，AI 做执行”
- 工具下载：现场打开清单，回家就能装