Appearance
进阶提示词技巧：让 AI 更好地为你工作
从入门到进阶
上一章我们学了提示词的基本结构。但在实际的 Vibe Coding 中，你会遇到更复杂的场景——项目越做越大、功能越来越多、AI 开始"忘记"之前说过的话……这一章我们来学习应对这些场景的进阶技巧。
技巧一：链式提示（Chain Prompting）
什么是链式提示？
不要试图用一个巨大的提示词完成所有事情。把复杂任务拆成多个步骤，一步一步来。
案例：做一个完整的个人作品集网站
❌ 一口气说完（容易出问题）：
text
帮我做一个个人作品集网站，要有首页、关于页、作品页、联系页，首页要有动画，作品页要有筛选功能，联系页要有表单验证，整体要暗色主题可切换亮色，要响应式设计……这样做的后果：AI 生成一大坨代码，到处有问题，想改不知道从哪改起。
✅ 链式提示（分步骤）：
第 1 步：
text
帮我做一个个人作品集网站的基础框架。先做导航栏和首页。导航栏包含 Logo 和四个链接：首页/关于/作品/联系。首页有一个 hero 区域，包含我的名字和一句话介绍。暗色主题。第 2 步：
text
现在给首页加上入场动画效果。名字从下往上淡入，介绍文字延迟 0.3 秒淡入。背景加一些缓慢移动的渐变光效。第 3 步：
text
现在添加作品展示部分。用网格布局展示 6 个作品卡片，每个有缩略图、标题和标签。顶部加标签筛选按钮（全部/网站/工具/设计）。第 4 步：
text
添加联系页面。一个简洁的联系表单，包含姓名、邮箱、消息内容。添加前端表单验证。💡 核心：每步都建立在上一步的基础上，AI 有完整的上下文，不容易跑偏。通常一个复杂项目用 4-7 轮对话完成最合适。
什么时候该拆步骤？
| 场景 | 建议 |
|---|---|
| 功能简单、一个组件 | 一步搞定 |
| 2-3 个功能、相互独立 | 可以一步，也可以拆 |
| 4+ 个功能、有交互依赖 | 必须拆 |
| 整个页面/应用 | 必须拆，按区域/模块 |
技巧二：Few-Shot 示例
什么是 Few-Shot？
给 AI 看几个例子，让它理解你想要的模式，然后照着做。这在需要保持统一风格时特别有用。
案例：生成统一风格的卡片组件
text
我需要你帮我生成一系列卡片组件。先看一下我想要的风格：
示例 1 - 博客文章卡片：
<div class="card">
<img src="thumbnail.jpg" class="card-img" />
<div class="card-body">
<span class="card-tag">技术</span>
<h3 class="card-title">文章标题</h3>
<p class="card-desc">文章描述...</p>
<span class="card-date">2025-03-01</span>
</div>
</div>
示例 2 - 项目卡片：
<div class="card">
<img src="project.jpg" class="card-img" />
<div class="card-body">
<span class="card-tag">前端</span>
<h3 class="card-title">项目名称</h3>
<p class="card-desc">项目描述...</p>
<div class="card-links">
<a href="#">预览</a>
<a href="#">源码</a>
</div>
</div>
</div>
请按照同样的 HTML 结构和 class 命名规范，帮我生成以下卡片：
1. 一个团队成员卡片（头像、名字、职位、简介、社交链接）
2. 一个产品功能卡片（图标、功能名、描述）
3. 一个用户评价卡片（头像、名字、评分星星、评价内容）这样 AI 就能理解你的命名规范、结构习惯和风格偏好，生成一致的代码。
什么时候该用 Few-Shot？
- 需要批量生成同类内容
- 要求代码风格统一
- AI 反复理解错你的意思（给它看例子比解释更快）
技巧三：上下文管理
问题：AI 忘了之前说什么
在长对话中，AI 可能会"忘记"之前的设定或已有的代码。这在做复杂项目时很常见。
解决方案一：定期重申关键信息
text
继续在之前的项目上工作。提醒一下：
- 我们用的是暗色主题，背景 #0f172a
- 主色调是蓝紫渐变
- 所有组件使用圆角 12px
- 命名规范是 BEM
现在请添加一个页脚区域……解决方案二：使用配置文件
在项目根目录创建 AGENTS.md（Codex）或 CLAUDE.md（Claude Code）或 .cursorrules（Cursor）：如果你主要用终端工具，可以结合 Codex 进阶使用技巧 和 Claude Code 进阶技巧 一起看。
text
# 项目说明
## 技术栈
- 纯 HTML + CSS + JavaScript
- 不使用任何框架
## 设计规范
- 暗色主题：背景 #0f172a，文字 #e2e8f0
- 主色调：#667eea → #764ba2 渐变
- 圆角：12px
- 字体：Inter / 系统默认
## 命名规范
- CSS 使用 BEM 命名法
- JavaScript 使用 camelCase
- 文件名使用 kebab-case
## 注意事项
- 所有页面需要响应式设计
- 优先考虑性能
- 代码加中文注释AI 会读取这个文件，每次对话都会自动遵守这些规范。这是管理上下文最好的方式。
解决方案三：粘贴当前代码
当你需要修改已有代码时，先把相关代码粘贴给 AI：
text
这是我当前的导航栏 CSS：
[粘贴代码]
请在这个基础上，添加滚动时背景变透明的效果。不要修改现有样式。技巧四：约束与负面提示
不仅说你要什么，还要说你不要什么
text
帮我做一个产品落地页。
要求：
- 使用现代简约设计
- 大量留白
- 使用系统字体
不要：
- 不要使用任何外部 CSS 框架（不要 Bootstrap、Tailwind）
- 不要使用 jQuery
- 不要使用渐变色背景
- 不要加任何动画效果（纯静态）
- 不要使用 <table> 布局💡 负面提示非常有用，尤其当 AI 总是喜欢用某种你不想要的方式时。比如你发现 AI 总是用 Tailwind，就直接说"不要用 Tailwind"。
常用的负面提示
| 你不想要的 | 提示词写法 |
|---|---|
| 不用框架 | "不要使用 React/Vue/Angular 等框架" |
| 不用 UI 库 | "不要使用 Bootstrap/Tailwind/Ant Design" |
| 不用 jQuery | "不要使用 jQuery，用原生 JS" |
| 不要动现有代码 | "不要修改已有的 xxx 部分" |
| 不要多文件 | "所有代码放在一个 HTML 文件中" |
| 不要英文注释 | "注释必须用中文" |
技巧五：角色专精
让 AI 成为特定领域的专家
不同的角色设定会影响输出质量和风格：
UI/设计角色（适合做界面）：
text
你是一位有 10 年经验的 UI 设计师，擅长极简主义设计和微交互。你特别注重排版、间距和颜色的和谐。生成的代码要体现设计感。前端工程角色（适合做功能）：
text
你是一位高级前端工程师，注重代码质量和性能优化。你写的代码语义化、可维护性强、有完整注释。不追求花哨，追求稳定可靠。全栈角色（适合做完整项目）：
text
你是一位全栈开发者，擅长用最简单的技术方案解决问题。你偏好原生 API 而非第三方库，代码简洁高效。💡 角色设定不是必须的，但在你对输出风格有明确期望时，加上角色设定能显著提升结果质量。
技巧六：迭代式精炼（从粗到细）
漏斗式优化策略
不要一开始就抠细节。先把大方向定下来，再逐层打磨：
第一轮：大方向
text
做一个[天气 App 页面](../实战案例/02-天气查询小工具完整开发实录)，显示当前天气和未来 5 天预报。第二轮：细化布局
text
把当前天气区域放大，占页面上半部分。5 天预报用横向滚动的小卡片展示。加一个搜索城市的输入框放在顶部。第三轮：调细节
text
当前温度数字用超大字号（72px），天气图标用 emoji。卡片之间间距改为 12px。搜索框加圆角和搜索图标。第四轮：微调
text
温度数字加粗。日期显示改为"周一""周二"的格式。搜索框 placeholder 写"输入城市名..."。这种方法非常高效——先定框架，再打磨细节。每轮对话的目标非常清晰。
技巧七：利用 Markdown 格式化提示词
AI 很擅长理解 Markdown 格式。善用标题、列表、代码块、表格来组织你的提示词，比写成一大段话清晰得多：
text
# 需求：个人博客首页
## 布局
- 顶部：导航栏（Logo + 导航链接 + 搜索）
- 主体：左侧文章列表（70%宽度）+ 右侧边栏（30%宽度）
- 底部：页脚
## 文章列表
每篇文章包含：
1. 标题（可点击）
2. 发布日期 + 分类标签
3. 摘要（最多 3 行）
4. "阅读更多"链接
## 侧边栏
- 作者简介卡片
- 热门文章 Top 5
- 标签云
## 设计参考
- 配色：类似 Medium 的清爽感觉
- 字体：正文用 16px，行高 1.8
- 卡片悬停效果：微微上浮 + 阴影加深实战练习
试着用今天学的技巧，完成以下练习：
练习 1：链式提示
用分步骤的方式（至少 3 步），让 AI 帮你做一个番茄钟应用。每一步只完成一个功能模块。
练习 2：Few-Shot
先给 AI 两个按钮样式的代码示例，然后让它按照同样的风格生成第三种按钮。
练习 3：负面提示
让 AI 做一个网页，在提示词中明确列出至少 3 个"不要什么"。
小结
| 技巧 | 适用场景 | 一句话关键 |
|---|---|---|
| 链式提示 | 复杂项目 | 分步骤推进，每步做一件事 |
| Few-Shot | 统一风格 | 先给示例，再让AI照做 |
| 上下文管理 | 长对话 | 用配置文件 + 定期重申 |
| 负面提示 | 避免不想要的 | 明确说"不要xxx" |
| 角色专精 | 专业输出 | 设定AI的专家身份 |
| 迭代精炼 | 细节优化 | 从粗到细，逐轮打磨 |
| Markdown 格式 | 复杂需求 | 用结构化格式组织提示词 |
最重要的一点：这些技巧不是互斥的，你可以组合使用。比如用"角色设定 + 链式提示 + 负面约束"来完成一个复杂项目。多实践，你会找到最适合自己的组合。