前端 Prompt 编写规范指南

显示全部楼层

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

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

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

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

要素	说明	示例
Who	角色与目标人群	“给 React 工程师使用”
What	目标产出是什么	“生成一个可复用的按钮组件”
Where	使用上下文/场景	“用于后台管理系统中的表格操作栏”
Why	背后逻辑 / 业务需求	“需要根据状态切换按钮文字和颜色”
Spec（结构化描述）	输入/输出、行为、样式等	props 接口、交互说明、UI 风格等

Who：角色与目标人群

项目	示例
用户角色	React 开发者、Vue 工程师、产品经理、非技术用户
技术背景	TypeScript 熟练 / 不懂样式配置 / UI 优先思维
影响行为	提示语言偏技术型 or 设计型 / 返回格式代码优先 or 配图优先

Prompt 句式模板：

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

What：目标产物是什么

项目	示例
目标类型	页面 / 组件 / 钩子函数 / 布局模块 / 样式块 / API 封装
输出格式	`.jsx` 、`.vue`、`.ts`、JSON 配置、Markdown 文档
是否复用	是否要求可复用性、模块封装、参数化设计

Prompt 句式模板：

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

Where：使用上下文/场景

项目	示例
页面类型	登录页 / 控制台首页 / 产品详情页 / 移动端表单
使用位置	卡片中的按钮 / 列表头部 / 页面侧边栏
依赖环境	与哪些第三方组件协作（如 Ant Design、Element UI）

Prompt 句式模板：

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

Why：背后逻辑/业务需求

项目	示例
业务背景	用户需要在订单详情页快速确认状态
UI 目的	提升操作引导性 / 降低错误概率 / 信息结构化显示
行为逻辑	条件渲染 / 状态切换 / 数据联动 / 动画反馈等

Prompt 句式模板：

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

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

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

维度	子项	示例
Props/Inputs	字段、类型、默认值	`status: 'active'
输出结构	HTML / JSX / Slots	`div.container > Card > Button`
交互行为	点击/悬停/输入后的行为	点击后显示弹窗并发送请求
接口绑定	请求 URL、参数格式	`POST /api/login` ，params:`{ username, password }`
样式说明	响应式、色调、布局规范	Tailwind 布局 + 浅色卡片 + 左图右文
返回格式	包含内容、是否注释、是否分文件	只返回代码块，含注释，无说明

Prompt 句式模板：

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

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

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

三、常见前端 Prompt 模版结构

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

请帮我生成一个前端组件，满足以下条件：
【组件框架】：React+TypeScript+ styled-components 【组件名称】：StatusButton【功能描述】：根据传入的状态值（active、pending、disabled）展示不同颜色和按钮文字 【Props定义】：-status:'active'|'pending'|'disabled'- onClick?) =>void
【样式需求】：颜色参考AntDesign的主色调，按钮带圆角，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 解析精度

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

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

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

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

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

方法：

步骤	功能
第1轮	生成组件骨架结构（接口、HTML 结构）
第2轮	插入行为逻辑（如 API 调用、事件处理）
第3轮	美化样式（按特定 UI 风格补全样式）
第4轮（可选）	添加注释与类型定义，提升可维护性

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

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

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

方法：

将常用 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。

✅ 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 编写，不仅能提升效率，也让前端工程师从“写代码”升级为“设计生产流程”。

前端 Prompt 编写规范指南

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

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

Who：角色与目标人群

Prompt 句式模板：

What：目标产物是什么

Prompt 句式模板：

Where：使用上下文/场景

Prompt 句式模板：

Why：背后逻辑/业务需求

Prompt 句式模板：

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

Prompt 句式模板：

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

三、常见前端 Prompt 模版结构

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

3.2 页面结构生成 Prompt 模板

3.3 前端样式设计类 Prompt

3.4 接口封装与调用（React）

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

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

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

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

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

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

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

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

推荐工具组合：

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

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

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