前端 Prompt 编写规范指南

推荐语

掌握前端Prompt编写规范，让AI生成代码更高效精准，提升开发效率！

核心内容：
1. 前端Prompt编写的五大关键要素（5W-S）
2. 结构化需求说明书与自然语言的区别
3. 不同场景下的Prompt句式模板与应用示例

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

在 AI Coding 工程中，前端 Prompt 编写规范尤为重要，尤其当你使用 LLM（如 ChatGPT、Claude、Gemini）辅助生成代码、组件、页面结构或样式时。为了让生成结果高效、稳定、结构清晰且具备可维护性，你需要遵循一套系统的前端 Prompt 编写规范。

一、整体思路：Prompt ≠ 自然语言，而是「结构化需求说明书」

AI Prompt 不是随便一说，而是具备“清晰上下文 + 明确目标 + 结构化信息”的可执行开发指令。

二、前端 Prompt 编写五大要素（5W-S）

Who：角色与目标人群

Prompt 句式模板：

“你是一个 {{角色类型}}，正在使用 {{技术栈}} 开发前端组件。”

What：目标产物是什么

Prompt 句式模板：

“请为我生成一个 {{技术框架}} + {{语言}} 的 {{组件/页面/模块}}。”

Where：使用上下文/场景

Prompt 句式模板：

“该组件将用于 {{页面类型}} 的 {{位置}}，用于与 {{依赖项}} 协同工作。”

Why：背后逻辑/业务需求

Prompt 句式模板：

“目的是为了 {{交互动机/业务目标}}，用户在 {{触发条件}} 时应看到 {{UI反馈}}。”

Spec：结构/行为/样式细化说明

这是 Prompt 的核心模块，需要尽可能结构化与精细化说明：

Prompt 句式模板：

组件结构如下：props: ...事件：...样式要求：...使用的 API：...返回格式：...

示例：整合后的 5W-S Prompt 模板（React 组件）

你是一名前端工程师，正在使用 React + TypeScript 开发一个后台管理系统页面。请为我生成一个可复用的分页器组件，用于产品列表页的底部导航区，用户可以切换页码、跳转到第一页或最后一页。其主要目的是让用户方便地浏览大量数据，并支持快速跳页、状态更新反馈。
【Props】- totalPages: number- currentPage: number- onPageChange: (page: number) => void
【样式要求】- 使用 TailwindCSS 风格，圆角 + hover 效果- 响应式适配移动端，按钮缩小并居中
【返回格式】- 只返回完整的组件代码（TSX），含类型定义、注释，避免多余文字

三、常见前端 Prompt 模版结构

3.1 组件生成类 Prompt 模板（推荐结构化）

请帮我生成一个前端组件，满足以下条件：
【组件框架】：React + TypeScript + styled-components  【组件名称】：StatusButton  【功能描述】：根据传入的状态值（active、pending、disabled）展示不同颜色和按钮文字  【Props 定义】：- status: 'active' | 'pending' | 'disabled'- onClick?: () => void
【样式需求】：颜色参考 Ant Design 的主色调，按钮带圆角，hover 时颜色加深  【使用场景】：用户管理后台，激活/禁用用户  【返回格式】：仅输出完整代码块（含 props 接口与样式）

3.2 页面结构生成 Prompt 模板

请帮我设计一个登录页面，要求如下：
【技术栈】：React + TailwindCSS  【页面区域】：1. 左侧区域显示品牌 Logo 和介绍语2. 右侧是登录表单，包括用户名、密码和“记住我”复选框3. 提交按钮在底部居中，并包含 loading 状态【功能逻辑】：- 输入后实时校验格式- 点击登录后调用 `api/login` 接口，并根据返回跳转首页【返回内容】：返回完整页面 JSX 结构 + 表单逻辑 + 样式

3.3 前端样式设计类 Prompt

请根据以下描述，设计一段前端样式：
【目标组件】：卡片组件（Card）  【风格参考】：现代扁平风（Modern Flat UI），圆角 + 阴影  【元素】：标题、正文、按钮，按钮右下角浮动  【响应式要求】：移动端堆叠展示，PC 居中显示三列  【技术方案】：TailwindCSS 样式写法【返回】：HTML 结构 + 完整 Tailwind 样式类

3.4 接口封装与调用（React）

请使用 axios 封装一个通用请求模块  【接口】：请求用户数据 `/api/user/:id`  【功能】：支持请求拦截器、统一错误处理  【封装形式】：`/utils/request.ts` 模块 + 使用示例  【返回】：封装代码 + 使用 demo + 类型定义

四、推荐：整理成文件结构

/prompts/├─ components/│  ├─ button.md│  ├─ form.md├─ layout/│  ├─ login.md│  ├─ dashboard.md├─ style/│  ├─ card-style.md│  ├─ dark-mode.md├─ logic/│  ├─ axios-wrapper.md│  ├─ pinia-user-store.md├─ ai/│  ├─ prompt-input.md│  ├─ chat-display.md

🚀 前端 Prompt 工程化：进阶技巧完全指南

✅ 技巧一：使用结构化语法（Prompt 模板 DSL）

目的：提升 Prompt 的可读性和 AI 解析精度

方法：将自然语言结构转为“可结构化解析”的模板

#Prompt Type: Component_Generation  组件名: StatusButton  目标框架: React + TypeScript  用途描述: 状态切换按钮，状态有 active/pending/disabled  Props:   - status: 'active' | 'pending' | 'disabled'  - onClick: () => void  样式风格: Ant Design 色彩风格，hover 高亮  逻辑说明: 根据 status 变化显示不同颜色与文字  返回格式: JSX + 类型定义 + 样式块

效果：AI 可更精准地映射结构、识别变量，提升输出一致性。

✅ 技巧二：多轮 Prompt 拆解生成流程（Prompt Chain）

目的：分步骤控制质量，避免一次生成过度臃肿或失控

方法：

配合使用：通过 prompt 工程脚本（如 promptchain.yaml）控制执行流程。

✅ 技巧三：Prompt 模板模块化（Prompt Snippet Library）

目的：形成统一的 Prompt 模板组件库，便于复用与组合

方法：

1. 将常用 Prompt 拆分为模板片段：

• 基础组件描述.md
• 表单校验逻辑.md
• axios封装片段.md

• 使用模板组合器（如 JS 脚本、YAML 拼接器）生成完整 Prompt：

# prompt-template.yaml- include: base/react-header.md- include: parts/button-logic.md- include: parts/style-tailwind.md- include: utils/export-format.md

自动化生成结果即为标准 Prompt 文本，输入 AI 即可使用。

---

✅ 技巧四：使用变量注入（Prompt Parameterization）

目的：提升 Prompt 重复利用效率，可用于代码生成器或 VSCode 插件

方法：在 Prompt 中使用占位符变量，如：

请生成一个 {{framework}} + TypeScript 的组件，名称为 {{componentName}}。  该组件的功能是：{{description}}  Props 定义如下：{{props}}  样式要求为：{{style}}  返回格式：{{outputType}}

• 在实际使用中通过模板引擎（如 Mustache、EJS、Handlebars）填充变量
• 可集成到前端工程生成器（如 CLI、Vite Plugin）

---

✅ 技巧五：Prompt 测试与版本管理（Prompt Testing & Versioning）

目的：确保 Prompt 生成质量稳定，避免因模型变化带来输出不一致

方法：

技术手段	说明
快照测试	将每次生成的结果存为 snapshot，对比变更差异（如 Jest Snapshot）
Prompt 版本控制	使用 Git 对 Prompt 模板版本化（如 v1.2.3），可打 tag
多模型兼容测试	使用多个模型运行同一 Prompt，测试兼容性（GPT-4o vs Claude 3 vs Gemini）
Prompt Linter（实验性）	检查结构是否符合 DSL 语法标准，如字段缺失、格式错误等

---

✅ 技巧六：Prompt 工具链集成（CLI + 编辑器 + Docs）

目的：将 Prompt 编写纳入前端开发常规流程中，像写代码一样维护 Prompt。

推荐工具组合：

工具类型	工具名	用途
Prompt CLI	Promptfoo / 自定义脚本	本地测试 Prompt 输出
模板系统	Mustache / EJS / YAML 编排器	动态拼接 Prompt
编辑器插件	VSCode Snippet / Copilot Chat Prompt Injector	快捷插入 Prompt 模板
Prompt 文档	mdx 文档系统 + docusaurus / vitepress	建立 Prompt 文档站点

---

✅ Bonus：建议结构命名规范（可配合 Prompt 库）

/prompts/├─ components/│  ├─ button.prompt.md│  ├─ form.prompt.md├─ logic/│  ├─ axios-wrapper.prompt.yaml│  ├─ validation-rules.prompt.ts├─ style/│  ├─ tailwind-card.prompt.md├─ templates/│  ├─ react-component.mustache│  ├─ vue3-page.ejs

---

🎯 总结：Prompt 工程化 = 模板化 + 结构化 + 流程化

维度	对应目标
结构化	明确语法与模块结构，提升 AI 解析准确度
模板化	提升重复利用效率，统一生成风格
多轮分层	控制复杂度，精细调整每一步结果
工具链集成	纳入前端开发工具链中，规范化协作
测试与版本	保证长期可靠输出，规避模型波动

---

总结：Prompt 是「前端工程的一等产物」

在 AI Coding 中，Prompt 编写规范与代码规范并重，它直接影响生成组件的可维护性、一致性与扩展性。 良好的 Prompt 编写，不仅能提升效率，也让前端工程师从“写代码”升级为“设计生产流程”。