Prompt Engineering
Prompt is the only communication channel between you and AI. With the same requirement, different Prompts can lead to a 10x difference in output quality.
The five elements of a good Prompt:
| Element | Core question | What happens if missing |
|---|---|---|
| Goal | What to do? | AI guesses your intent and may go off track |
| Constraints | What are the limitations? | AI uses a tech stack you don't know, and the code can't be integrated |
| Input | What data does it receive? | AI assumes an input format, and it fails at runtime |
| Output | What result does it produce? | AI gives code but not usage instructions, so you don't know how to run it |
| Acceptance criteria | What counts as acceptable? | AI finishes but you don't know whether it's actually done |
Element 1: Goal - Clearly state what to do
Bad writing style
Help me write a form.
Problem: What form? Login? Registration? Search? How many fields?
Good writing style
Help me write a user registration form, including the following fields: username, email, password, confirm password.
Better writing style
帮我写一个用户注册表单，包含以下字段： - 用户名（文本框，3-20 个字符） - 邮箱（文本框，需验证格式） - 密码（密码框，至少 6 位，包含数字和字母） - 确认密码（密码框，需与密码一致）
Key technique:Break down the "what to do" into specific components. AI understands concrete things far better than vague concepts.
Element 2: Constraints - Define the boundaries
Constraints tell AI what it cannot do and what it must use. Without constraints, AI will improvise freely, causing code that cannot be integrated into your project.
Common constraint types
技术栈约束： - 使用 React 18 + TypeScript - 不引入第三方 UI 库（自己写 CSS） - 使用 Vite 作为构建工具 代码风格约束： - 使用函数组件和 Hooks，不用 Class 组件 - 每个文件不超过 150 行 - 所有 props 都要有 TypeScript 类型定义 输出约束： - 所有代码放在一个文件里 - 给出完整的 import 语句 - 关键逻辑加上注释
The more constraints you write, the more controllable AI's output is. But don't write too many at once - first write 3-5 core constraints, then add more based on the results.
Element 3: Input - Define the data format
Tell AI what the input data looks like, and it can write more accurate code.
Bad writing style
Write a function to handle user data.
Good writing style
写一个函数 formatUser(user)，接收一个用户对象：
{
name: string, // 用户名，例如 "张三"
age: number, // 年龄，例如 25
email: string, // 邮箱，例如 "zhangsan@example.com"
createdAt: string // 注册时间，ISO 格式，例如 "2026-06-28T10:00:00Z"
}
返回格式化的用户信息字符串。
Key technique:Attach example values to each field. AI understands examples far better than abstract type descriptions.
Element 4: Output - Specify the result format
Tell AI the output form you expect - code? explanation? modification suggestions?
Common output formats
| Output format | Applicable scenario | Prompt example |
|---|---|---|
| Complete code | New features, new files | Give me the complete code, including all imports |
| Code modification | Modify existing code | Output only the modified parts, in diff format |
| Explanation | Understand code | Explain line by line what this code does |
| Solution suggestions | Architecture decisions | Give two implementation options, compare pros and cons |
| Error troubleshooting | Debugging | Analyze the cause of this error and provide fixing steps |
Element 5: Acceptance Criteria - Define completion
Acceptance criteria are the most easily overlooked element, but they determine whether you can judge that the task is complete.
Example of good acceptance criteria
验收标准： - 用户名少于 3 个字符时，显示红色提示"用户名至少 3 个字符" - 密码少于 6 位时，显示红色提示"密码至少 6 位" - 两次密码不一致时，显示红色提示"两次密码不一致" - 所有字段为空时点击提交，每个字段下方显示对应的错误提示 - 所有字段正确填写后点击提交，控制台打印表单数据，不发送请求
Key technique:Acceptance criteria should be specific to "what to input, what to see", use"When ..., should ..."sentence pattern.
Prompt Template
The following is the Prompt template used later in this course; you can use it directly:
## 目标 [一句话描述要做什么] ## 约束 - [技术栈限制] - [代码风格要求] - [输出格式要求] ## 输入 [输入数据的结构和示例] ## 输出 [期望的输出形式] ## 验收标准 - [具体可验证的标准 1] - [具体可验证的标准 2] - [具体可验证的标准 3]
Common Prompt errors and fixes
| Error | Problem | Fix |
|---|---|---|
| Help me build an online store | Too vague, AI doesn't know where to start | Help me build the product list page of the store, showing product images, names, prices, 3 products per row |
| Implement it in the best way | AI doesn't know what "best" means in your mind | Use React.memo and useCallback to optimize rendering performance |
| There's a problem with this code, help me fix it | Didn't say where the problem is | After clicking the delete button, the list doesn't update, and the console reports an error "id is undefined", help me fix it |
| Add a feature | Didn't say which file or what location to add it to | Add a user avatar dropdown menu to the right side of the navigation bar in src/components/Header.tsx |
Hands-on: Three Prompts for the same requirement, compared
Requirement: build aToday's to-dolist.
Version A: One-sentence Prompt
Help me make a todo list.
AI output: It might be a simple HTML page, it might use React, it might use Vue, you don't know what you'll get.
Version B: Prompt with constraints added
帮我做一个待办列表，用 HTML + CSS + 原生 JavaScript， 可以添加和删除任务。
AI output: A usable to-do list, but the styling may be crude, and it may not handle empty input.
Version C: Complete five-element Prompt
## 目标 做一个"今日待办"列表组件。 ## 约束 - 使用 HTML + CSS + 原生 JavaScript，单文件 - 不使用任何第三方库 - 移动端友好的响应式布局 ## 输入 - 用户在输入框中输入待办事项文字 - 用户点击"添加"按钮或按 Enter 键 ## 输出 - 一个完整的 HTML 文件，可以直接在浏览器打开 - 输入框在顶部，已添加的待办事项在下方列表显示 - 每个待办事项右侧有删除按钮 - 底部显示"共 X 项，已完成 Y 项" ## 验收标准 - 输入空内容点击添加时，显示提示"请输入待办事项" - 添加成功后，输入框清空 - 点击待办事项文字，切换完成/未完成状态（加删除线） - 点击删除按钮，该项消失 - 统计数据实时更新 - 刷新页面后数据保留（使用 localStorage）
AI output: A fully functional to-do list with data persistence, statistics, and error handling.
Comparing the outputs of the three versions, you will intuitively feel: the quality ceiling of the Prompt is the quality ceiling of AI's output.
Hands-on iterative development
The core workflow of Vibe Coding is not giving the Prompt once and getting perfect code at once, but ratherGive Prompt → Verify → Feedback → Verify againcycle.
The five stages of iterative development
Hands-on project: Build a "Programming Terminology Dictionary"
This project is to build a searchable programming terminology dictionary, including term names, explanations, and categories.
Follow the five rounds of iteration below, and actually practice each round.
Round 1: Make it run
Prompt：
做一个编程术语词典网页，要求： - 使用 HTML + CSS + 原生 JavaScript，单文件 - 显示一个术语列表，每条术语包含名称和简短解释 - 预置 10 个常见编程术语（HTML、CSS、JavaScript、API、变量、函数、循环、数组、对象、Git） - 顶部有一个搜索框，输入关键词可以过滤术语 - 深色背景，卡片式布局
Save the code generated by AI asdict.html, and open it in the browser.
-
Verification: Can the page open? Are all 10 terms displayed? Does the search box filter?
-
Feedback: If search doesn't work, describe the specific symptom to AI.
The goal of Round 1 is not perfection, but being able to run. A version that runs but isn't perfect is 100 times better than a version that is perfect in imagination but hasn't been written yet.
Round 2: Make it usable
Prompt：
在上一轮的代码基础上，做以下改进： 1. 每个术语卡片加上分类标签（如"前端"、"JavaScript"、"通用"等） 2. 搜索时同时匹配术语名称和分类标签 3. 搜索结果为空时，显示"没有找到相关术语"而不是空白 4. 添加一个"随机学习"按钮，点击后随机展示一个术语 5. 术语列表按字母顺序排列
Verification: Are category labels displayed? Can search match categories? Is there a prompt for empty results? Does the random button work?
Feedback: Check item by item, and tell AI about the items that aren't satisfied.
Round 3: Fix bugs
In this round, you should actively look for bugs.
Test the following scenarios:
Enter special characters in the search box (e.g.<、>、/）。
Enter spaces in the search box (leading and trailing spaces).
Click the random button rapidly in succession.
Enter uppercase letters in the search box (the original data may be lowercase).
Delete all terms (if deletion is supported).
For each bug found, describe it to the AI in a structured way:
当我在搜索框中输入大写 "HTML" 时，没有匹配到任何结果。 预期：不区分大小写，输入 "html" 和 "HTML" 都能匹配到。 实际：只有输入小写 "html" 才能匹配。 请修复这个大小写敏感的问题。
Round 4: Polish details
Prompt：
在上一轮代码基础上，优化以下细节： 1. 搜索时添加防抖（输入停止 300ms 后再搜索，避免频繁过滤） 2. 卡片 hover 时有一个微小的上浮动画 3. 搜索结果高亮匹配的关键词（用黄色背景标记） 4. 添加一个"已学 X 个"的计数器，点击术语卡片上的"已学"按钮 +1 5. 已学过的术语显示一个勾的标记 6. 用 localStorage 保存已学记录
Verification: Is the animation smooth? Is the highlighting correct? Do the learned records still exist after refreshing?
Round 5: Add tests and documentation
Prompt：
在上一轮代码基础上： 1. 在代码顶部用注释写出功能说明和用法 2. 为搜索过滤函数写注释，说明它的输入、输出和逻辑 3. 如果代码中有复杂的逻辑，拆分成更小的函数，每个函数只做一件事 4. 在文件中添加数据来源说明（术语数据来自哪里）
Key habits during iteration
Change only one thing at a time
If the AI changes many things at once but you only want to change one, be specific:
Only fix the case issue in the search box, don't change any other code.
Run verification immediately after each iteration
Don't save up several changes to verify together — run it after each round of changes to ensure no new problems are introduced.
Keep a version of each round
Commit the results of each round with Git:
git add dict.html && git commit -m "第一轮：基本功能能跑" git add dict.html && git commit -m "第二轮：添加分类和随机功能" git add dict.html && git commit -m "第三轮：修复大小写和特殊字符 bug" git add dict.html && git commit -m "第四轮：添加动画和已学记录" git add dict.html && git commit -m "第五轮：添加注释和文档"
This way you can return to any version at any time, and also compare the changes in each round.
Other extensionsGit is the safety net for Vibe Coding. When you ask the AI to make major changes, commit the current version first, and roll back if things break.