创见博客
Prompt是什么
七崽爱吃小饼干2026/03/05阅读 0

一、最通俗的定义

Prompt = 你发给 AI 的「指令 + 要求 + 上下文」 就是你打字告诉 AI 要做什么、怎么做、按什么标准做的那段文字。

你可以把 AI 当成： 一个什么都懂、但特别听话、但完全不会猜你心思的实习生

  • 你说的越清楚 → 他做的越准
  • 你说的模糊 → 他随便做
  • 你不说标准 → 他按自己的习惯做

Prompt 就是你给这个实习生发的「工作任务单」。

二、举个最直观的前端例子

坏 Prompt（模糊，AI 会乱写）

写个登录页面

AI 会随便给你：

  • 可能是 Vue，可能是 React
  • 可能没 TS，可能没样式
  • 可能没验证，没适配，没注释
  • 完全不符合你的项目

好 Prompt（清晰，AI 精准输出）

用 React18 + TypeScript + TailwindCSS 写一个移动端响应式登录表单，
包含手机号、密码字段，前端校验，错误提示，按钮禁用状态，
代码要符合 ESLint 规范，带注释，可直接复制使用。

这一整段，就是高质量 Prompt。

三、Prompt 的核心作用

  1. 控制 AI 输出的质量（规范、严谨、无错误）
  2. 减少沟通成本（不用反复修改、反复解释）
  3. 避免 AI 幻觉（不让它瞎编代码）
  4. 让 AI 完全贴合你的项目（技术栈、风格、规范）

没有好 Prompt = AI 辅助效率低 有好 Prompt = AI 变成你的专属高级前端

四、一个优质 Prompt 的 4 个核心结构

1. 角色（你是谁）

你是资深前端工程师

2. 任务（做什么）

开发一个登录组件

3. 详细要求（怎么做）

技术栈：React18 + TS + Tailwind
必须包含：校验、响应式、异常处理、注释
禁止：原生DOM、冗余代码

4. 输出格式（要什么结果）

输出完整可运行代码 + 使用示例

五、在 Claude Code 里，Prompt 分两种

1. 系统 Prompt（一次性设置）

  • 写在配置里
  • 告诉 AI 永久规则
  • 比如：只用 TS、必须严谨、禁止幻觉

2. 对话 Prompt（每次开发用）

  • 你每次输入的需求
  • 比如：写组件、改BUG、重构

前端开发 万能Prompt模板

1. 系统级万能Prompt（一次性配置，最重要）

直接放进 Claude Code 系统提示词，AI 永久遵守规则：

你是专业资深前端工程师，只输出生产环境可用的严谨代码。
必须遵循：
1. 使用项目指定技术栈（React18/Vue3 + TS + Tailwind/ CSS Modules）
2. 完整类型定义、异常处理、空值判断、注释规范
3. 响应式、移动端适配、无硬编码、无冗余逻辑
4. 禁止幻觉、禁止伪代码、禁止未实现API
5. 自动遵循ESLint + Prettier格式
6. 输出结构清晰、可直接复制运行

2. 开发组件万能Prompt

请开发一个【组件名称】组件： • 技术栈：React18 + TypeScript + TailwindCSS • 包含：Props类型、默认值、异常处理、loading/空状态 • 样式：响应式、移动端友好、无硬编码 • 代码：可直接运行、带注释、符合规范 • 输出：完整代码 + 使用示例


---

### 3. 写页面万能Prompt

请开发【页面名称】页面： • 技术栈：React18 + TypeScript + TailwindCSS • 结构：头部、内容区、业务模块、底部 • 状态：加载、错误、空数据 • 交互：按钮、表单、跳转、校验 • 输出：完整代码 + 路由说明 + 注意事项


---

### 4. 修复BUG万能Prompt

我遇到BUG： 【问题描述】 【报错信息/截图描述】 【代码片段】 请帮我：

  1. 定位根因
  2. 给出最小可复现demo
  3. 输出修复后完整代码
  4. 给出避免方案

---

### 5.代码重构/优化万能Prompt

请对以下代码做生产级优化： 【粘贴代码】 优化要求： • 提取重复逻辑 • 补全TS类型 • 修复潜在BUG • 提升性能（防抖/节流/懒加载） • 符合ESLint规范 • 输出：优化后代码 + 变更说明


---

### 6. 写接口/工具函数万能Prompt

请编写【工具函数/接口请求】工具函数： • 语言：TypeScript • 功能：【功能描述】 • 包含：入参类型、出参类型、异常捕获 • 输出：完整代码 + 使用示例 + 注释


---

### 7.样式/动画万能Prompt

请实现【效果名称】样式： • 使用：TailwindCSS / CSS Modules • 要求：响应式、过渡动画、无闪烁、兼容性好 • 适配：移动端 + PC端 • 输出：完整样式代码 + 结构代码


---

### 8. 生成Git提交信息万能Prompt

根据以下变更，生成符合Angular规范的Git Commit： 【修改内容】 输出格式：type(scope): description



## 总结
- **Prompt = 你给 AI 的工作指令**
- **越具体、越清晰、越规范，输出越精准**
- **前端开发必须用标准化 Prompt，才能让 AI 工作流高效严谨**
评论
0/100