AI Coding从0到1方法论

[Daotin]

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 设计稿： #3

2、使用相关设计网站： #4

四、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

比如：

• 前端规范 → 技术栈（语言特定的最佳实践），UI 组件库，样式风格
• 后端结构 → API 模式、数据库查询
• 项目规则 → 命名规范、目录结构、代码风格
• 【可选】🧪 质量保证：测试、安全、性能
• 【可选】🚀 部署运维：CI/CD、容器化
• 【可选】🏢 业务域：特定业务模块规范

如果这是一个 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+提示词，在代码入库各个环节做文章

审查前端代码要点：

• 组件层级混乱，没有保持单一职责
• 无边界处理
• CSS 过多，tailwind 过少
• 缺乏中间状态（加载状态，异常状态）

审查服务端代码要点：

• 审查技术栈是否匹配 pdd 规划
• 生成的接口是否匹配 pdd 规划
• 审查错误处理是否合理，切忌过度防御，该抛异常就抛异常
• 主流程日志是否完善

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