用 AI 写前端：Cursor / Copilot / v0 的正确用法与提示词工程
掌握 AI 编程工具的正确用法，学会写高质量提示词、做代码审查、管好 AI 生成代码的质量，避开「AI 写了一堆但没法用」的常见坑
- 了解主流 AI 编程工具（Cursor、GitHub Copilot、v0、Claude Code）的定位和适用场景
- 掌握 AI 辅助编程的正确工作流：先想清楚 → 给清晰上下文 → 让 AI 生成 → 审查测试 → 迭代
- 写代码提示词就抓五个核心：角色设定、上下文、约束、示例、输出格式。
- 掌握 AI 生成代码的审查方法：安全性、性能、可维护性、边界条件
- 理解 AI 编程的能力边界和常见陷阱，学会「用 AI 但不依赖 AI」
AI 编程工具全景
2024-2026 年，AI 编程工具已经从「玩具」变成了「生产力工具」。主流工具各有定位，不要只盯着一个用。
主力开发用 Cursor，它的代码库引用、Composer 多文件编辑、Agent 模式是目前不错的 AI 编程体验；快速出 UI 原型用 v0，输入一句话生成 React+Tailwind 组件，复制到项目里微调就行；批量重构、自动化任务用 Claude Code，它是终端代理，能跑命令、改文件、跑测试；简单补全用 GitHub Copilot，轻量，不打断现有流程。别纠结哪个最好，不同场景用不同工具，组合用效率最高。本课程的朋友好学 App 开发里，主要用 Cursor 做主力开发，用 v0 快速出 UI 原型，用 Claude Code 做批量重构。
AI 辅助编程的正确工作流
很多人用 AI 编程的方式是「打开 Cursor，输入「帮我写一个登录页面」，然后复制粘贴，跑不起来就骂 AI 垃圾」——这是错的用法。AI 是放大器，它放大你的能力，也放大你的混乱。你自己都没想清楚要什么，AI 给你的就是一堆看似正确但没法用的代码。正确的工作流是五步：
「帮我写一个 XX 系统」——范围太大，AI 只能给泛泛的模板代码，没法用。拆成小任务：「帮我写这个登录表单的组件，用 React+TypeScript+Ant Design，包含邮箱/密码/记住我/登录按钮，验证邮箱格式，点击登录调用 /api/login」；不给上下文直接让 AI 写——AI 不知道你的技术栈、代码风格、已有组件，写出来的代码和你的项目不兼容。用 @引用相关文件，或说明「这是一个 Next.js 项目，用 TypeScript，用 Tailwind CSS，已有 useAuth hook」；AI 写完直接合并不审查——AI 会犯错，比如引入安全漏洞、性能问题、边界条件遗漏、API 用错，不审查就合并是埋雷。必须逐行读、跑测试；一次让 AI 改太多文件——多文件大改动容易出错且难以审查，一次改一个文件或一个功能，小步快跑；把 AI 当「搜索引擎」而不是「协作者」——只让它写代码片段，没用到它的推理能力，比如分析问题、解释代码、提方案。
高质量提示词的六个要素
提示词的质量直接决定 AI 输出的质量。好的代码提示词要包含六个要素。
高质量提示词六要素详解
①角色设定（Role）
告诉 AI 它是谁、以什么身份回答。「你是一个有 10 年经验的资深前端工程师，精通 React/TypeScript/性能优化，代码风格简洁可维护」比「帮我写代码」效果好得多。角色设定会影响 AI 的知识选择和输出风格。
②任务描述（Task）
要写任务，就得说清具体要做啥。别写「做一个页面」，得写「创建一个用户登录页面组件，包含邮箱输入框、密码输入框、记住我复选框、登录按钮，点击登录调用 /api/login 接口，成功后跳转到 /dashboard」。任务越具体，输出越能用。
③上下文（Context）
给 AI 足够的背景信息：技术栈是 React 18 + TypeScript + Next.js + Tailwind CSS，项目结构、相关代码用 @引用文件或直接粘贴，还有已有实现、约束条件（不能用某个库、要兼容某个浏览器、要符合某个设计规范）。上下文越充分，AI 写出的代码和你项目的兼容性就越好。
④约束条件（Constraints）
直接跟AI说清楚不能做啥、必须守啥。比如：「必须用函数组件+Hooks，不能用类组件」「必须做TypeScript类型定义，不能用any」「必须处理加载状态和错误状态」「必须做无障碍（aria-label）」「代码不能超过100行」。这些约束能让AI输出的东西质量明显提升，不会瞎发挥出你不想要的内容。
⑤示例（Examples）
给 AI 看你期望的输出示例（Few-shot）。就说：「这是我们项目里已有的一个类似组件的写法：[粘贴代码]，请按照同样的风格和结构写新的组件」。示例是最有效的提示词技巧之一，AI 会模仿示例的风格、结构、命名、错误处理方式。
⑥输出格式（Output Format）
直接告诉 AI 输出格式。就说「只输出组件代码，不要解释」「用 Markdown 代码块包裹」「先给方案分析，再给代码」「代码里加中文注释」。明确格式能避免 AI 输出一堆没用的解释，或者格式乱了没法直接用。
// 一个高质量提示词示例（对比反面）
// ❌ 反面：「帮我写一个搜索框」
// ✅ 正面：
// """
// 你是一个有 10 年经验的资深前端工程师，精通 React/TypeScript/可访问性。
//
// 任务：创建一个带防抖的搜索输入框组件 SearchInput。
//
// 上下文：
// - 技术栈：React 18 + TypeScript + Tailwind CSS
// - 这是我们项目已有的输入框风格（粘贴一个已有组件代码作为示例）
// - 父组件会传入 onSearch 回调，搜索时调用
//
// 约束：
// - 必须用函数组件 + Hooks
// - 必须做 300ms 防抖（输入停止 300ms 后才触发搜索）
// - 必须有加载状态（搜索中显示 loading 图标）
// - 必须有清除按钮（有输入时显示，点击清空）
// - 必须做可访问性（aria-label、aria-busy）
// - 必须有 TypeScript 类型定义，不能用 any
//
// 输出：只输出组件代码，用 Markdown 代码块包裹，代码里加必要的中文注释。
// """
print("六要素齐全的提示词，输出质量会高一个数量级")AI 生成代码的审查清单
AI 写的代码不能直接用，必须审查。用这个清单逐项检查：
AI 编程的能力边界
AI 很强，但不是万能的。得搞清楚它的边界，才能用对。
写样板代码（CRUD、表单、列表、API 调用）；解释不熟悉的代码/概念；代码重构（重命名、提取函数、转换风格）；写测试用例；排查常见错误（把报错信息贴给 AI，它通常能定位原因）；生成文档和注释；探索性编程（「用 X 技术实现 Y 大概怎么写」）；UI 原型快速生成（v0）。
复杂的架构设计和技术选型，得结合你的业务场景和团队情况，AI 只能给通用建议；深度的性能优化，得做 profiling 和对代码库的深入理解，AI 容易给泛泛的建议；涉及最新技术/库，AI 训练数据有截止日期，对 2025 年后新出的库/API 可能不了解，会编造不存在的 API；安全审计，AI 能发现常见漏洞，但复杂的业务逻辑漏洞、权限绕过需要人来审；跨多个文件的大型重构，容易遗漏、引入不一致，需要小步迭代+测试；数学/算法正确性，AI 写的算法可能有边界错误，必须用测试验证；理解你的业务上下文，AI 不知道你的用户、竞品、业务目标，需要你明确告诉它。
AI 是「副驾驶」不是「自动驾驶」——你是司机，方向和决策由你做，AI 帮你踩油门和打方向盘；「先想清楚再问 AI」——你自己都没想清楚的问题，AI 也给不了好答案，花 5 分钟想清楚问题，能省 1 小时和 AI 来回拉扯；「小步快跑，一次一件事」——不要一次让 AI 做整个功能，拆成小任务，做完一个验证一个；「永远不要盲目信任 AI 的输出」——代码要读、要测、要审，文档要核实事实，API 要查文档确认存在；「用 AI 学习而不是代替思考」——让 AI 解释它为什么这么写，你理解了才是你的，不理解就复制粘贴是给自己埋雷；「建立自己的提示词库」——把好用的提示词保存下来，反复使用和迭代，效率会越来越高。
本节小结
AI编程工具：Cursor（主力IDE）、Copilot（轻量补全）、v0（UI原型）、Claude Code（终端代理）、国产工具（中文好/免费多），不同场景组合使用。正确工作流五步：想清楚→给上下文→让AI生成→审查测试→迭代。高质量提示词六要素：角色设定、任务描述、上下文、约束条件、示例、输出格式。AI代码审查六维度：安全性、性能、边界条件、类型安全、可维护性、依赖。AI擅长样板代码/解释/重构/测试/排错，不擅长架构设计/深度性能/最新技术/安全审计/大型重构/算法正确性/业务理解。核心心法：AI是副驾驶不是自动驾驶，先想清楚再问，小步快跑，永远审查，用AI学习而不是代替思考。下一节进入后端选型——前端做好了，后端该用什么语言和框架。
资深工程师加餐
底层原理 · 大厂视角 · 工程经验，点卡片展开
独立开发者选栈的第一标准是“能不能一个人最快稳定交付”，而不是哪个框架最新。Next.js 这类全栈框架把路由、构建、静态导出、服务端接口收敛到一套工具链里，配合静态导出 + WebView 原生壳，能让一个人同时覆盖 Web 与移动端；选型时先验证最不确定的环节（离线运行、原生能力、AI 流式），跑通原型再全面投入，避免做到一半发现关键能力不成立。