AI时代的前端编码范式

Daotin 于 2025-10-07 发布 编辑
  1. 一、需求分析
  2. 二、文档生成
  3. 三、UI 设计稿
  4. 四、Coding 阶段
    1. 0. Cursor Rule 规则
    2. 1.每次开发一个 task 小功能
    3. 2.开发完成后，更新 task 文档和 log 文档
    4. 3.开发下一模块的时候，带上之前的文档
    5. 4.保存通用功能 rule.mdc
    6. 5、导出会话记录
  5. 五、代码 CR

Prompt：（参考 RTF Prompt 格式，具体自行修改）

你是一名资深前端专家，擅长现代前端项目的架构设计，前端工程化，以及质量监控和性能优化设计。

包含：技术栈、行为和约束

一、需求分析

  1. 首先发散（7 个维度）：和 gpt 充分沟通 7 个维度：用户，场景，当前痛点，当前方案，频度，广度，深度，然后生成尽可能多的功能点需求
  2. 其次收敛（33 原则）：按照每次开发最多只做 3 个核心需求，每个功能最多只做 3 个功能点

二、文档生成

生成文档的方式：

1、使用 AI 提问生成

示例：

  1. 根据需求 xxx，输出一个需求文档，保存为docs/prd.md

核心点：背景，核心问题，目标，功能流程，技术选型，实施约束

你是一名资深互联网产品经理，我想开发一个小红书内容生成器网站，可以根据用户输入的内容，自动生成符合小红书平台调性的图片卡片和文案。请根据要求，输出一份完整的产品需求说明文档，格式为 markdown 代码块。
  1. 根据需求文档，编写系统概要设计文档。不要添加额外功能，结果输出为docs/pdd.md

核心点：完整性（工程架构，技术栈，开发规范等），准确性，必要性（比如不需要完整的测试流程，不应该过早性能优化，）

  1. 规范文档：包括 UI 规范，前端编码规范，后端编码规范等
  2. （可选）根据需求文档、概要设计文档，输出数据库设计文档，保存为docs/db.md
  3. （可选）根据需求文档、概要设计文档、数据库设计文档，输出接口设计文档，要求包含入参和出参，保存为docs/api.md
  4. 仔细阅读@prd.md 与@pdd.md 文档，帮我规划一个项目执行计划文档，我期望先完成后端接口体系开发，再逐步执行前端开发；另外，每个任务项需要用[ ]标记执行状态，在后续的对活过程中，一旦完成某个任务项就标记为[x]，将结果保存到docs/plan.md 文档中。

核心点：删除开发周期时间相关，删除技术优化相关

2、使用CodeGuide 生成这些 mdc 文档（收费）

三、UI 设计稿

1、使用 AI 提问生成

@prd.md 请你根据该文档，帮我在@index.html 中实现该小程序的原型图

1. 样式：使用 html+tailwindcss 开发所有原型界面。并且使用 uView 的移动端 H5 设计风格

2. 代码结构：每个界面以独立 html 文件形式存储，例如 site.html, person.html 等。index.html 作为主入口，不直接包含所有界面的完整代码，而是通过 iframe 嵌入各界面文件，并在 index 页面中平铺展示所有面，无需使用链接跳转。

3. 真实感增强：界面尺寸需模拟 iphone 15 pro 的屏幕规格，并应用圆角设计，以贴近真实移动设备的外观。

APP 设计稿：APP 设计稿示例

## 角色

你是一位资深产品经理、交互设计师、UI 设计师

## 任务

本次任务的最终目标是生成一套跨平台 LeekHub Stock APP 的 UI 设计图，首先在当前项目目录创建 task.md 文件，列举全部待办事项，每完成一个待办事项就编辑 task.md 文件，使用 ✅ 更新对应事项的完成状态，按照顺序依次完成待办直到所有待办事项均变为完成状态。

### 核心功能

- 支持最小化
- 最小化时鼠标悬浮可以查看股票涨跌细节

## 待办事项

### 待办事项 1：产品功能设计

- 初始信息：我是你的产品设计助手，现在请你告诉我，你想开发什么样的产品吧~
- 分析用户发送的信息，对不明确的细节进行追问
- 结合追问得到的答案，加以详细描述形成【产品设计文档.md】文件

### 待办事项 2：交互设计

结合{待办事项 1}输出的最终功能，确定该产品包含的所有页面，以下方示例格式输出全部页面的信息。
**示例格式：**
===

<页面名称>
用途：<页面的主要作用>
核心功能：<列出该页面包含的主要功能>

===
所有页面的信息输出完成后，更新【产品设计文档.md】
### 待办事项3：UI设计
- 根据【产品设计文档.md】，同时遵守下方{UI设计风格}和{UI设计规格}，为每个设计图创建独立的html文件。
全部页面的html文件输出完成后，中断任务，提示用户输出"继续"指令
### 待办事项4：提示用户输入"继续"指令
### 待办事项5：创建一个UI.html文件
- UI.html页面的整体背景色为`#f6f6f6`
- 使用iframe技术将所有页面以适当的网格排列在UI.html里面，每个iframe的宽度固定为400px，高度固定为850px，保证每张设计图完整显示出来，不会被裁切或遮挡。
- iframe的背景色为`#f6f6f6`
### 待办事项6：自检代码
依次检查每个页面的html文件：
- 检查：强制隐藏所有滚动条
- 检查：设计图尺寸为 375x812PX
- 检查：信号栏与标题栏背景色必须一致（可以都是透明）
- 检查：图标和其他样式调用方式
- 检查：底部tab栏必须为白色填充，100%不透明度
### 待办事项7：检查UI.html文件
检查UI.html文件的全部代码，删除iframe之外的多余装饰性元素，每张设计图的内部已经带有了mock up的样式代码，UI.html内的iframe不需要带有mock up的样式，如果有也需要进行删除。
## UI设计风格
- 优雅的清新主义美学与功能的完美平衡
- 清新柔和的渐变配色与品牌色系浑然一体
- 恰到好处的留白设计
- 轻盈通透的沉浸式体验
- 信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现
- 用户视线能自然聚焦核心功能
- 精心打磨的圆角
- 细腻的微交互
- 舒适的视觉比例
- 规范的间距
## UI设计规格
1. 单个设计图尺寸为 375x812PX，带有mock up模拟手机的样式
2. 图标：引用在线矢量图标库内的图标
3. 图片：使用Unsplash开源图片网站链接的形式引入
4. 样式必须使用`<link>`标签引入 tailwindcss CDN来完成
5. 状态栏显示时间、信号等模拟信息
6. 信号栏与标题栏背景色必须一致（可以都是透明）
7. 底部tab栏必须为白色填充，100%不透明度
8. 使用固定高度防止容器变形
## 注意事项
1. mock up的颜色只能使用黑色
2. 所有html中都强制隐藏滚动条

2、使用相关设计网站： UI 原型图+设计稿

工具名称 类型 简要说明
Motiff UI 设计稿＋原型图生成 使用自然语言或参考图生成高质量 UI 界面，支持 Material/Ant Design 等设计系统样式定制；提供矢量分层与自动布局功能，支持后期编辑和协作 (Motiff, prototypr.io)。
UX Pilot AI UI 原型图生成 提供从文本或参考图创建高保真原型与 wireframe 的功能，并能生成屏幕链接流程，包含 Figma 插件支持 (uxpilot.ai, Medium)。
Galileo AI (Stitch) UI 原型图／设计稿生成 可从简单文本 Prompt 生成 UI 设计，以前身为 Galileo AI，目前已被 Google 收购并更名为 Stitch (UX 设计学院, usegalileo.ai)。
Uizard UI 原型图／设计稿生成 通过文本 Prompt、草图或截图生成多屏 wireframe、可交互原型，还支持组件迭代与导出设计 (Medium, Uizard, The CPO Club)。
即时 AI（JSai， jsai.cc） UI 设计稿生成 根据文字描述生成可编辑的高质量 UI 设计稿（静态视觉稿）—参考你提供的描述。
MasterGo UI 设计稿＋原型图生成 在线协作平台，支持 AI 自动布局、样式填充、设计规范生成，还能从网页描述生成设计图，协助多端 UI 输出。
Figma Make UI 设计稿＋原型图生成 直接在 Figma 内使用自然语言提示生成交互原型，包括界面结构和逻辑，支持真实数据预览和导出继续迭代

四、Coding 阶段

核心思路：

1. project rule mdc
2. 根据文档，让 AI 生成开发功能清单 todo tasks
3. 每次开发一个 task 小功能
4. 遇到 bug 自行解决，或者 ask AI
5. 代码一定要自己 code review，要明白为什么这么写
6. 通用的功能开发流程，封装进`单个rule`/`全局rule(memory bank)`，每次开发新模块带上。
7. 开发完成后，更新 task 文档和 log 文档
8. 开发下一模块的时候，带上之前的文档

0. Cursor Rule 规则

  1. 使用 https://cursor.directory/generate 生成文档
  2. 使用 cursor 0.49 的 Generate Cursor Rules 指令

示例：

# 全局规则

- 所有的回答和代码中的文案，均使用简体中文
- 当前是 windows 操作系统，请使用 Windows 系统的相关命令
- 代码中适当位置加入 console.log 打印日志，方便定位问题
- 每个模块开发之前，先阅读开发进度 @task.md 和开发记录 @chat-log.md，然后制定详细的开发计划，等我确认后再开始编写具体代码
- 每个模块开发完成后提醒我进行测试，必须测试完成后才能进行下一个模块开发

1.每次开发一个 task 小功能

仔细思考和设计后，进行 xxx 模块开发（如果有现成的模块直接参考），要求：代码中多加入 console.log 打印日志，方便定位问题

开发过程中，对于不熟悉的技术栈，需要引入外部文档（或者 contenx7 mcp），帮助 Cursor 更好理解如何实现。

2.开发完成后，更新 task 文档和 log 文档

请将以上开发过程、实现的功能、遇到的问题等，采用一段话的形式，记录到 docs/devlog.md 文档中，语言短小精炼。开发进度记录到 docs/task.md 中。

3.开发下一模块的时候，带上之前的文档

现在请参考 reference\src\performance 文件夹下的代码，以及之前完成的 src\plugins\error 代码，根据 tasks 进度，完成页面加载性能指标收集，记住使用 PerformanceObserver 而不是 web-vitals 库

4.保存通用功能 rule.mdc

比如：

如果这是一个 general 的功能，比如说添加一个接口，那就让 AI 再次总结成一个添加接口的 rule 文档。 因为：文档的维护：比如说，我们新加某一个功能的时候，费了半天劲，那就让 AI 总结这次的实现以及下次要注意的点，补充到上面对应的文档中。迭代次数多了，以及各种 rule 文档多了之后，就会发现，一旦有个类似的需求，文档都丢给他，就容易多了。

请将上面 xxx 功能总结成一个用于 xxx 的 rule 指南文档，放在.cursor/rule/xxx-guide.mdc

请总结一下我们刚才添加新接口的过程，生成一个"如何添加新接口"的指南文档，包括：

1. 需要修改哪些文件
2. 代码结构和注意事项
3. 测试方法
4. 潜在的坑和解决方案

5、导出会话记录

方面在已有的基础上，继续演进，优化。

五、代码 CR

1、优先去 gitlab 上面看看有没有做 CR 的机器人吧；对标到 github 上面是：https://www.coderabbit.ai/ ；也可以自己用 vercel ai sdk 来做，就是效果比较一般

2、读取 git+提示词，在代码入库各个环节做文章

审查前端代码要点：

审查服务端代码要点：

之后，让 AI 编写测试脚本，测试接口行为和稳定性。