在 AI Coding 工程中，前端 Prompt 编写规范尤为重要，尤其当你使用 LLM（如 ChatGPT、Claude、Gemini）辅助生成代码、组件、页面结构或样式时。为了让生成结果高效、稳定、结构清晰且具备可维护性，你需要遵循一套系统的前端 Prompt 编写规范。
一、整体思路：Prompt ≠ 自然语言，而是「结构化需求说明书」
AI Prompt 不是随便一说，而是具备“清晰上下文 + 明确目标 + 结构化信息”的可执行开发指令。
二、前端 Prompt 编写五大要素（5W-S）
|
|
|
|
|---|---|---|
| Who |
|
|
| What |
|
|
| Where |
|
|
| Why |
|
|
| Spec（结构化描述） |
|
|
Who：角色与目标人群
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
Prompt 句式模板：
“你是一个 {{角色类型}}，正在使用 {{技术栈}} 开发前端组件。”
What：目标产物是什么
|
|
|
|---|---|
|
|
|
|
|
.jsx
.vue、.ts、JSON 配置、Markdown 文档 |
|
|
|
Prompt 句式模板：
“请为我生成一个 {{技术框架}} + {{语言}} 的 {{组件/页面/模块}}。”
Where：使用上下文/场景
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
Prompt 句式模板：
“该组件将用于 {{页面类型}} 的 {{位置}}，用于与 {{依赖项}} 协同工作。”
Why：背后逻辑/业务需求
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
Prompt 句式模板：
“目的是为了 {{交互动机/业务目标}}，用户在 {{触发条件}} 时应看到 {{UI反馈}}。”
Spec：结构/行为/样式细化说明
这是 Prompt 的核心模块，需要尽可能结构化与精细化说明：
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
div.container > Card > Button |
|
|
|
|
|
|
|
POST /api/login
{ username, password } |
|
|
|
|
|
|
|
|
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 模板组件库，便于复用与组合
方法：
-
将常用 Prompt 拆分为模板片段：
-
基础组件描述.md -
表单校验逻辑.md -
axios封装片段.md
-
使用模板组合器（如 JS 脚本、YAML 拼接器）生成完整 Prompt：
-
在实际使用中通过模板引擎（如 Mustache、EJS、Handlebars）填充变量 -
可集成到前端工程生成器（如 CLI、Vite Plugin）
# 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}}
✅ 技巧五：Prompt 测试与版本管理（Prompt Testing & Versioning）
目的：确保 Prompt 生成质量稳定，避免因模型变化带来输出不一致
方法：
|
|
|
|---|---|
|
|
|
|
|
v1.2.3），可打 tag |
|
|
|
|
|
|
✅ 技巧六：Prompt 工具链集成（CLI + 编辑器 + Docs）
目的：将 Prompt 编写纳入前端开发常规流程中，像写代码一样维护 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 工程化 = 模板化 + 结构化 + 流程化
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
总结：Prompt 是「前端工程的一等产物」
在 AI Coding 中，Prompt 编写规范与代码规范并重，它直接影响生成组件的可维护性、一致性与扩展性。 良好的 Prompt 编写，不仅能提升效率，也让前端工程师从“写代码”升级为“设计生产流程”。
