第23期 | Prompt Engineering for 前端

第23期 | Prompt Engineering for 前端 今天你将学会掌握前端专用的结构化 Prompt 框架不是泛泛的「写清楚」学会上下文管理给 AI 看什么信息、看多少、按什么顺序建立可复用的「前端 Prompt 模板库」覆盖日常开发高频场景理解迭代优化的方法论从第一轮输出到最终满意代码 核心知识为什么前端需要专属的 Prompt Engineering你可能看过很多「通用 Prompt 教程」——「要说清楚」「要给示例」「要分步骤」。这些是基础但前端开发有独特的场景你不是让 AI 写一段独立代码而是在一个已有项目中改东西你不是生成纯文本而是生成要跟组件树、状态流、样式系统协作的代码你不是一个人从头到尾而是要在团队规范内输出所以前端 Prompt 的核心不是「写得漂亮」而是让 AI 在正确的上下文中按正确的约束输出正确的代码。结构化 Prompt 框架CRISP我总结了一个前端专用的 Prompt 框架叫CRISP组成部分含义示例C — Context项目上下文「React 18 TS Zustand Tailwind」R — RoleAI 的角色「你是一个熟悉我们项目规范的前端工程师」I — Instruction具体指令「给 UserList 组件添加搜索过滤功能」S — Specification约束条件「用 Zustand 管理过滤状态、支持模糊匹配、中文也要匹配」P — Proof验证方式「确保输入 2 个字就能匹配、空搜索显示全部、搜索结果 0 时显示提示文案」对比差 Prompt vs 好 Prompt差 Prompt帮我写一个搜索功能好 PromptCRISP 结构[Context] React 18 TypeScript Zustand Tailwind CSS 项目参考 src/features/user/ [Role] 你是熟悉我们项目规范的前端工程师遵循 .cursorrules [Instruction] 给 UserList 组件添加搜索过滤功能 [Specification] - 搜索状态用 Zustand store 管理在 userStore 中添加 searchQuery 和 filteredUsers - 支持模糊匹配拼音也要匹配如张匹配zhang - 搜索框放在列表上方带 debounce 300ms - 空搜索时显示全部用户 - 搜索结果为 0 时显示没有找到匹配的用户 [Proof] - 输入张能看到姓张的用户 - 输入zhang也能看到姓张的用户 - 清空搜索框恢复全部列表 - 输入不存在的内容显示空状态提示为什么 CRISP 比「自由描述」好因为它强制你思考五个维度。特别是 S约束和 P验证——大多数人写 Prompt 只写了 I指令然后抱怨 AI 输出不符合预期。其实不是 AI 不行是你没告诉它边界条件和验收标准。上下文管理给 AI 看什么信息上下文是 Prompt 的地基。给少了AI 瞎猜给多了AI 迷失。关键在于精准。上下文分层模型层级何时提供提供什么怎么提供L0 永久上下文每次对话都有项目规范、技术栈.cursorrulesL1 任务上下文每个新任务开始相关文件、接口定义文件引用L2 迭代上下文修改不满意时错误信息、预期行为差异文字追加描述L3 查询上下文需要查 API/文档官方文档 URLWeb引用常见错误给太多文件引用整个项目 → AI 看到几百个文件 → 输出泛泛。只引用跟当前任务相关的 2-5 个文件。不给类型定义AI 不知道 props 的类型 → 生成不兼容的代码 → 你得手动改类型。始终引用相关.d.ts或接口定义文件。不给错误信息AI 输出有 bug → 你只说「不对」→ AI 不知道哪里不对。把报错信息、预期 vs 实际的对比告诉它。前端 Prompt 模板库以下是我常用的 6 个高频模板你可以直接复制使用模板1新建组件[Context] {技术栈描述}参考 {现有类似组件} 的风格 [Role] 前端工程师遵循项目规范 [Instruction] 创建 {组件名} 组件 [Specification] - Props 类型{列出需要的 props 和类型} - 样式方案{Tailwind / CSS Modules / styled-components} - 功能要求{列出核心功能} - 无障碍要求{ARIA 属性、键盘操作} [Proof] 组件在 {场景1} 和 {场景2} 下正确渲染和交互模板2修改现有代码[Context] {要修改的文件} 和 {相关依赖文件} [Role] 前端工程师 [Instruction] 修改 {文件名} 的 {具体位置/功能} [Specification] - 只修改 {指定范围}不要重写整个文件 - 新增逻辑要跟现有代码风格一致 - {其他约束} [Proof] {列出验证条件}模板3调试 Bug[Context] {出问题的文件} [Role] 前端调试专家 [Instruction] 定位并修复 {Bug 描述} [Specification] - 错误现象{实际行为} - 预期行为{应该怎样} - 错误信息{完整的报错/console 输出} - 已尝试的方案{你已经试过的} - 不要猜测先分析根因再给方案 [Proof] 修复后 {场景} 正常工作不引入新问题模板4状态管理设计[Context] {当前 store 文件} 和 {使用 store 的组件} [Role] 状态管理架构师 [Instruction] 设计 {功能名} 的状态管理方案 [Specification] - 优先用 Zustand我们项目约定 - 列出需要的 state、action、computed - 考虑持久化需求localStorage - 考虑与现有 store 的关系独立还是合并 [Proof] 方案能覆盖 {列出使用场景}模板5代码审查[Context] {要审查的代码文件} [Role] 高级前端工程师审查代码质量 [Instruction] 审查这段代码从以下维度给出评价 [Specification] - 审查维度类型安全、性能、可维护性、可访问性、边界情况 - 对每个问题给出问题描述 严重程度(高/中/低) 建议修复方案 - 不只说不好要说为什么不好和怎么改好 [Proof] 审查报告覆盖所有维度修复建议可直接落地模板6学习新概念[Context] 我是一个前端开发者已掌握 {已有知识} [Role] 前端技术导师 [Instruction] 解释 {概念名} [Specification] - 先给一句话总结 - 然后用前端场景类比不要用数学/后端类比 - 给一个完整可运行的代码示例React TS - 标出常见误用场景 - 列出 2-3 个进阶用法 [Proof] 看完后我能回答「{概念} 是什么、什么时候用、怎么用」三个问题迭代优化方法论从第一轮到最终代码三轮迭代法轮次目标Prompt 策略验收标准第1轮方向让 AI 理解你要什么只写 I S指令约束大方向对就行细节可以错第2轮精度修正具体问题指出第1轮哪里不对 追加细节核心逻辑正确第3轮打磨处理边缘情况指出遗漏的边界条件完整可用为什么不是一轮因为你的需求在看到 AI 输出后才会真正清晰。第一轮是让 AI 帮你思考——你看到它的输出才发现「哦我还需要模糊匹配」「哦搜索为空要显示提示文案」。这不是你的问题这是人类思维的规律——我们总是在看到中间结果后才知道最终想要什么。常见误区误区1Prompt 越长越好长 Prompt 不等于好 Prompt。关键是结构清晰、信息精准。一个 50 字的结构化 Prompt 比一个 500 字的流水描述更有效。误区2一次生成完美代码这是不可能的。AI 的价值在于快速迭代不是一次命中。3 轮 CRISP Prompt × 每次 30 秒 90 秒得到满意代码比你自己写 30 分钟快得多。误区3不告诉 AI 它做错了什么说「不对」「重新写」等于什么都没说。告诉 AI具体哪里不对用 S 和 P 维度它才能精准修正。 AI协作实战实战场景用 CRISP 模板开发「标签管理系统」第1轮 Prompt方向[Context] React 18 TS Zustand Tailwind参考 src/features/blog/ [Instruction] 创建标签管理功能TagList TagForm TagFilter [Specification] 用 Zustand 管理 tags 状态支持 CRUD 搜索过滤 [Proof] 能添加、编辑、删除标签搜索能模糊匹配第1轮 AI 输出的问题TagForm 没有验证空标签也能提交删除没有确认搜索没有 debounce没有重复标签检测第2轮 Prompt精度第1轮输出的修改要求 1. TagForm 添加验证标签名不能为空、不能重复提示标签已存在 2. 删除前弹出确认对话框用 ConfirmDialog 组件 3. 搜索输入加 debounce 300ms 4. 标签名限制 2-20 个字符超出提示标签名过长第2轮 AI 输出的问题确认对话框用了 window.confirm不够美观删除后没有从关联文章中移除标签第3轮 Prompt打磨第2轮输出的修改 1. 用自定义 ConfirmModal 组件替代 window.confirm 2. 删除标签时同时清理 blogStore 中所有文章的该标签引用 3. 添加批量删除功能多选 批量操作按钮最终结果三轮迭代从方向 → 精度 → 打磨标签管理功能完整可用。学到了什么第1轮只需要确认方向——别纠结细节让 AI 先出原型第2轮是最关键的——你在这个阶段发现所有遗漏的约束第3轮处理的是你自己都没想到的边界情况比如删除标签要清理关联 动手练习练习1简单用 CRISP 框架重写一个你之前写过的差 Prompt选一个你之前给 AI 的、效果不好的 Prompt用 CRISP 结构重写它。对比两次输出的质量差异。练习2中等建立你的前端 Prompt 模板库在本期提供的 6 个模板基础上根据你的项目特点扩展至少添加 2 个新模板比如API 接口调用、CSS 样式修改修改每个模板中的 Specification 部分加入你项目的具体约束把模板库保存为prompt-templates.md以后开发时直接复制使用练习3挑战三轮迭代法实战选一个你项目中要做的新功能严格按三轮迭代法执行记录每轮的 Prompt 和 AI 输出记录你在每轮发现的遗漏需求写一份迭代复盘如果一开始就写完整 CRISP能省几轮结论哪些约束是「可预见的」一开始就该写哪些是「看了输出才发现的」 本期要点CRISP 框架Context Role Instruction Specification Proof前端专用结构化 Prompt 方法上下文分层L0永久规范→ L1任务文件→ L2迭代修正→ L3文档查询精准给信息Prompt 模板库6 个高频模板覆盖日常开发场景直接复制即用三轮迭代法方向 → 精度 → 打磨让 AI 输出越来越接近你的需求关键转变从「AI 一次性给我完美代码」到「AI 帮我快速迭代到满意代码」 下期预告下一期我们进入 AI 辅助调试——不是让 AI 帮你写代码而是让 AI 帮你找 Bug。你将学会用 AI 定位隐藏 Bug、做代码 Review、分析性能瓶颈实战环节我们会故意埋 3 个 Bug 让 AI 找出来。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交