Промпт-инжиниринг
Промпт — единственный канал коммуникации между вами и ИИ. При одном и том же требовании разные промпты могут привести к 10x-разнице в качестве результата.
Пять элементов хорошего промпта:
| Элемент | Основной вопрос | Что произойдёт, если его нет |
|---|---|---|
| Цель | Что делать? | ИИ угадывает ваше намерение и может сбиться с пути |
| Ограничения | Каковы ограничения? | ИИ использует незнакомый вам стек технологий, и код невозможно интегрировать |
| Ввод | Какие данные он получает? | ИИ предполагает определённый формат входных данных, и происходит сбой во время выполнения |
| Вывод | Какой результат он выдаёт? | ИИ выдаёт код, но не инструкции по использованию, поэтому вы не знаете, как его запустить |
| Критерии приёмки | Что считается приемлемым? | ИИ завершает работу, но вы не знаете, действительно ли она выполнена |
Элемент 1: Цель - четко сформулируйте, что нужно сделать
Плохой стиль написания
Help me write a form.
Проблема: Какая форма? Вход? Регистрация? Поиск? Сколько полей?
Хороший стиль написания
Help me write a user registration form, including the following fields: username, email, password, confirm password.
Лучший стиль написания
帮我写一个用户注册表单，包含以下字段： - 用户名（文本框，3-20 个字符） - 邮箱（文本框，需验证格式） - 密码（密码框，至少 6 位，包含数字和字母） - 确认密码（密码框，需与密码一致）
Ключевая техника:Разбейте "что делать" на конкретные компоненты. ИИ понимает конкретные вещи гораздо лучше, чем расплывчатые концепции.
Элемент 2: Ограничения - Определите границы
Ограничения сообщают ИИ, что он не может делать и что должен использовать. Без ограничений ИИ будет свободно импровизировать, что приведет к коду, который невозможно интегрировать в ваш проект.
Распространенные типы ограничений
技术栈约束： - 使用 React 18 + TypeScript - 不引入第三方 UI 库（自己写 CSS） - 使用 Vite 作为构建工具 代码风格约束： - 使用函数组件和 Hooks，不用 Class 组件 - 每个文件不超过 150 行 - 所有 props 都要有 TypeScript 类型定义 输出约束： - 所有代码放在一个文件里 - 给出完整的 import 语句 - 关键逻辑加上注释
Чем больше ограничений вы задаёте, тем более управляемым становится вывод ИИ. Но не задавайте слишком много сразу — сначала задайте 3-5 ключевых ограничений, а затем добавляйте ещё, ориентируясь на результаты.
Элемент 3: Ввод — определите формат данных
Расскажите ИИ, как выглядят входные данные, и он сможет написать более точный код.
Плохой стиль написания
Write a function to handle user data.
Хороший стиль написания
写一个函数 formatUser(user)，接收一个用户对象：
{
name: string, // 用户名，例如 "张三"
age: number, // 年龄，例如 25
email: string, // 邮箱，例如 "[email protected]"
createdAt: string // 注册时间，ISO 格式，例如 "2026-06-28T10:00:00Z"
}
返回格式化的用户信息字符串。
Ключевой приём:прикрепляйте примеры значений к каждому полю. ИИ понимает примеры гораздо лучше, чем абстрактные описания типов.
Элемент 4: Вывод — укажите формат результата
Скажите ИИ, какую форму вывода вы ожидаете — код? объяснение? предложения по изменениям?
Распространённые форматы вывода
| Формат вывода | Сценарий применения | Пример промпта |
|---|---|---|
| Полный код | Новые функции, новые файлы | Дайте мне полный код, включая все импорты |
| Изменение кода | Измените существующий код | Выводите только изменённые части в формате diff |
| Объяснение | Понимание кода | Объясните построчно, что делает этот код |
| Предложения по решению | Архитектурные решения | Приведите два варианта реализации, сравните плюсы и минусы |
| Диагностика ошибок | Отладка | Проанализируйте причину этой ошибки и приведите шаги по исправлению |
Элемент 5: Критерии приёмки — определение завершённости
Критерии приёмки — это элемент, который легче всего упустить, но именно они определяют, можете ли вы судить о том, что задача завершена.
Пример хороших критериев приёмки
验收标准： - 用户名少于 3 个字符时，显示红色提示"用户名至少 3 个字符" - 密码少于 6 位时，显示红色提示"密码至少 6 位" - 两次密码不一致时，显示红色提示"两次密码不一致" - 所有字段为空时点击提交，每个字段下方显示对应的错误提示 - 所有字段正确填写后点击提交，控制台打印表单数据，不发送请求
Ключевой приём:Критерии приёмки должны быть конкретными в отношении «что подать на вход, что увидеть», используйте«Когда ..., должно ...»в качестве шаблона предложения.
Шаблон промпта
Ниже приведён шаблон промпта, который используется далее в этом курсе; вы можете использовать его напрямую:
## 目标 [一句话描述要做什么] ## 约束 - [技术栈限制] - [代码风格要求] - [输出格式要求] ## 输入 [输入数据的结构和示例] ## 输出 [期望的输出形式] ## 验收标准 - [具体可验证的标准 1] - [具体可验证的标准 2] - [具体可验证的标准 3]
Распространённые ошибки в промптах и их исправление
| Ошибка | Проблема | Исправить |
|---|---|---|
| Помоги мне создать интернет-магазин | Слишком расплывчато, ИИ не знает, с чего начать | Помоги мне создать страницу со списком товаров магазина, на которой отображаются изображения товаров, названия, цены, 3 товара в ряд |
| Реализуй это наилучшим способом | ИИ не знает, что означает "лучший" в вашем представлении | Используйте React.memo и useCallback для оптимизации производительности рендеринга |
| В этом коде есть проблема, помоги мне её исправить | Не сказано, где проблема | После нажатия кнопки удаления список не обновляется, а в консоли появляется ошибка "id is undefined", помоги мне это исправить |
| Добавьте возможность | Не сказано, в какой файл или в какое место это добавить | Добавь выпадающее меню с аватаром пользователя в правую часть панели навигации в src/components/Header.tsx |
Практика: сравнение трёх промптов для одного и того же требования
Требование: создатьсписок дел на сегодня.
Версия A: промпт из одного предложения
Help me make a todo list.
Вывод ИИ: это может быть простая HTML-страница, может использоваться React, может использоваться Vue, вы не знаете, что получите.
Версия B: промпт с добавленными ограничениями
帮我做一个待办列表，用 HTML + CSS + 原生 JavaScript， 可以添加和删除任务。
Вывод ИИ: рабочий список дел, но оформление может быть грубым, и он может не обрабатывать пустой ввод.
Версия C: полный промпт из пяти элементов
## 目标 做一个"今日待办"列表组件。 ## 约束 - 使用 HTML + CSS + 原生 JavaScript，单文件 - 不使用任何第三方库 - 移动端友好的响应式布局 ## 输入 - 用户在输入框中输入待办事项文字 - 用户点击"添加"按钮或按 Enter 键 ## 输出 - 一个完整的 HTML 文件，可以直接在浏览器打开 - 输入框在顶部，已添加的待办事项在下方列表显示 - 每个待办事项右侧有删除按钮 - 底部显示"共 X 项，已完成 Y 项" ## 验收标准 - 输入空内容点击添加时，显示提示"请输入待办事项" - 添加成功后，输入框清空 - 点击待办事项文字，切换完成/未完成状态（加删除线） - 点击删除按钮，该项消失 - 统计数据实时更新 - 刷新页面后数据保留（使用 localStorage）
Вывод ИИ: полнофункциональный список дел с сохранением данных, статистикой и обработкой ошибок.
Сравнивая выводы трёх версий, вы интуитивно почувствуете: потолок качества промпта — это потолок качества вывода ИИ.
Практическая итеративная разработка
Основной рабочий процесс Vibe Coding — это не однократная выдача промпта и получение идеального кода сразу, а скорее цикл:Дать промпт → Проверить → Обратная связь → Проверить снова.
Пять этапов итеративной разработки
Практический проект: создайте «Словарь терминов программирования»
Цель этого проекта — создать словарь терминов программирования с поиском, включающий названия терминов, объяснения и категории.
Следуйте пяти приведённым ниже раундам итераций и действительно выполняйте каждый раунд на практике.
Раунд 1: Заставьте это работать
Промпт：
做一个编程术语词典网页，要求： - 使用 HTML + CSS + 原生 JavaScript，单文件 - 显示一个术语列表，每条术语包含名称和简短解释 - 预置 10 个常见编程术语（HTML、CSS、JavaScript、API、变量、函数、循环、数组、对象、Git） - 顶部有一个搜索框，输入关键词可以过滤术语 - 深色背景，卡片式布局
Сохраните код, сгенерированный ИИ, какdict.html, и откройте его в браузере.
-
Проверка: Открывается ли страница? Отображаются ли все 10 терминов? Фильтрует ли поле поиска?
-
Обратная связь: Если поиск не работает, опишите ИИ конкретный симптом.
Цель Раунда 1 — не совершенство, а возможность запуска. Версия, которая запускается, но не идеальна, в 100 раз лучше версии, которая идеальна в воображении, но ещё не написана.
Раунд 2: Сделайте это удобным
Промпт：
在上一轮的代码基础上，做以下改进： 1. 每个术语卡片加上分类标签（如"前端"、"JavaScript"、"通用"等） 2. 搜索时同时匹配术语名称和分类标签 3. 搜索结果为空时，显示"没有找到相关术语"而不是空白 4. 添加一个"随机学习"按钮，点击后随机展示一个术语 5. 术语列表按字母顺序排列
Проверка: Отображаются ли метки категорий? Может ли поиск находить совпадения по категориям? Есть ли подсказка при пустых результатах? Работает ли кнопка случайного выбора?
Обратная связь: Проверяйте пункт за пунктом и сообщайте ИИ о пунктах, которые не выполнены.
Раунд 3: Исправление ошибок
В этом раунде следует активно искать ошибки.
Протестируйте следующие сценарии:
Введите специальные символы в поле поиска (например,<、>、/）。
Введите пробелы в поле поиска (пробелы в начале и в конце).
Быстро нажимайте кнопку случайного выбора несколько раз подряд.
Введите заглавные буквы в поле поиска (исходные данные могут быть в нижнем регистре).
Удалите все термины (если удаление поддерживается).
Для каждой найденной ошибки опишите её ИИ структурированным образом:
当我在搜索框中输入大写 "HTML" 时，没有匹配到任何结果。 预期：不区分大小写，输入 "html" 和 "HTML" 都能匹配到。 实际：只有输入小写 "html" 才能匹配。 请修复这个大小写敏感的问题。
Раунд 4: Доработка деталей
Промпт：
在上一轮代码基础上，优化以下细节： 1. 搜索时添加防抖（输入停止 300ms 后再搜索，避免频繁过滤） 2. 卡片 hover 时有一个微小的上浮动画 3. 搜索结果高亮匹配的关键词（用黄色背景标记） 4. 添加一个"已学 X 个"的计数器，点击术语卡片上的"已学"按钮 +1 5. 已学过的术语显示一个勾的标记 6. 用 localStorage 保存已学记录
Проверка: Плавная ли анимация? Правильна ли подсветка? Остаются ли изученные записи после обновления?
Раунд 5: добавление тестов и документации
Промпт：
在上一轮代码基础上： 1. 在代码顶部用注释写出功能说明和用法 2. 为搜索过滤函数写注释，说明它的输入、输出和逻辑 3. 如果代码中有复杂的逻辑，拆分成更小的函数，每个函数只做一件事 4. 在文件中添加数据来源说明（术语数据来自哪里）
Ключевые привычки при итерациях
Меняйте только одну вещь за раз
Если ИИ меняет много вещей сразу, а вы хотите изменить только одну, будьте конкретны:
Only fix the case issue in the search box, don't change any other code.
Запускайте проверку сразу после каждой итерации
Не откладывайте несколько изменений, чтобы проверить их вместе — запускайте проверку после каждого раунда изменений, чтобы убедиться, что не появилось новых проблем.
Сохраняйте версию каждого раунда
Фиксируйте результаты каждого раунда с помощью 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 "第五轮：添加注释和文档"
Так вы сможете в любой момент вернуться к любой версии, а также сравнить изменения в каждом раунде.
Другие расширенияGit — это страховка для Vibe Coding. Когда вы просите ИИ внести серьёзные изменения, сначала зафиксируйте текущую версию, а если что-то сломается, откатитесь назад.