Практический проект по Vibe Coding
В этой главе мы полностью продемонстрируемVibe Codingвесь процесс — не закапываясь с головой в код, а описывая требования на естественном языке и позволяя ИИ выполнять работу.
Конечная цель — создать настоящее, полезное веб-приложение, не написав ни единой строки кода.
Сначала поймите: что такое Vibe Coding?
Название «Vibe Coding» происходит из твита соучредителя OpenAI Андрея Карпаты.
Что он имел в виду:Вы погружаетесь в «вайб» продукта, забываете о деталях кода, просто описываете, что хотите, а ИИ реализует это за вас.
В чём разница с вашим текущим способом программирования?
| Традиционное программирование | Vibe Coding |
|---|---|
| Запоминать синтаксис и API, искать документацию | Описывать замысел на естественном языке, ИИ генерирует код |
| Писать вручную строка за строкой, отлаживать самостоятельно | Итерировать в многоходовых диалогах, ИИ пишет + ИИ дорабатывает |
| Сначала спроектировать всё целиком, затем писать строка за строкой | Работать и корректировать по ходу общения, вносить изменения на ходу |
| Когда сталкиваетесь с багом, искать и думать самостоятельно | Кинуть сообщение об ошибке прямо ИИ и дать ему исправить |
| Ваша роль —Исполнитель | Ваша роль —Дизайнер |
Основной рабочий ритм Vibe Coding
Весь процесс разработки следует простому циклу из трёх шагов:
| Шаг | Что вы делаете | Что делает ИИ |
|---|---|---|
| 1. Планирование | Опишите требования и цели | Анализирует требования, предлагает технические решения |
| 2. Выполнение | Подтвердите план, задайте ограничения | Генерирует код, изменяет файлы |
| 3. Проверка | Запустите проверку, проверьте результаты | Исправьте ошибки, скорректируйте вывод |
После каждого шага проверяйте его; как только он пройдёт, переходите к следующему циклу.
Это главный секрет Vibe Coding—Не вываливайте все свои требования на ИИ сразу; вместо этого двигайтесь маленькими шагами, подтверждая направление на каждом шаге.
Подготовка окружения
Вам нужны всего три вещи, и все они бесплатны.
1. Редактор VS Code
Ссылка для скачивания:https://code.visualstudio.com
Руководство по VS Code:https://www.example.com/vscode/vscode-tutorial.htmlVS Code поддерживает Windows / macOS / Linux и полностью бесплатен.
2. GitHub Copilot (встроен в VS Code, установка не требуется)
В последней версии VS Code GitHub Copilot встроен,Не нужно устанавливать расширения。
Нам нужно сделать только одну вещь:
- Откройте VS Code и нажмите назначок аккаунта
- выберитеSign in with GitHub, и войдите в свою учетную запись GitHub
- После входа Copilot активируется автоматически
Если у вас нет учетной записи GitHub, сначала перейдите наgithub.comи зарегистрируйте её бесплатно.
Когда вы откроете редактор, вы увидите пункт Copilot — просто войдите в свою учетную запись GitHub, не нужно устанавливать расширения из магазина.
Нажмите на маленький значок в правом верхнем углу, чтобы открыть окно чата Copilot:
3. Node.js
Ссылка для скачивания:https://nodejs.org
Учебник по Node.js:https://www.example.com/nodejs/nodejs-tutorial.html
Выберите версию LTS, после установки откройте терминал, чтобы проверить:
node -v # 应显示 v20.x.x 或更高 npm -v # 应显示 10.x.x 或更高
Познакомьтесь с некоторыми сочетаниями клавиш
Эти два сочетания клавиш вы будете использовать чаще всего:
| Горячая клавиша | Функция | Когда использовать |
|---|---|---|
| Ctrl+I（Mac: Cmd+I） | Встроенный чат | Выделите блок кода, и ИИ объяснит или изменит его |
| Ctrl+Shift+I（Mac: Cmd+Shift+I） | Панель чата | Длинные диалоги, связанные с разработкой новой функции |
| Вкладка | Принять автодополнение | ИИ показывает серую подсказку; нажмите Tab, чтобы принять |
| Esc | Отклонить автодополнение | Если подсказка ИИ неверна, нажмите Esc, чтобы проигнорировать |
Начало проекта: что мы создаём?
Теперь мы собираемся создать полноценноеприложение для управления задачами。
Список возможностей
- Создание, редактирование и удаление задач
- У задач есть три состояния: К выполнению, В работе, Готово
- У приоритета три уровня: Высокий (красный), Средний (жёлтый), Низкий (зелёный)
- Канбан-представление: перетаскивайте задачи между тремя колонками, чтобы изменить статус
- Тёмная тема: переключение в один клик
- Данные автоматически сохраняются в браузере (не теряются при обновлении)
- Работает и на мобильных устройствах (адаптивная вёрстка)
Выбор технологий
| Для чего | Что использовать | Почему стоит выбрать |
|---|---|---|
| Фронтенд-фреймворк | Vue 3 | Легко изучать, активное сообщество, много китайских ресурсов |
| Инструмент сборки | Vite | Быстрый запуск, официально рекомендуется Vue |
| Стилизация | Tailwind CSS | Не нужно писать CSS-файлы; классы стилей прямо в HTML |
| Хранение данных | localStorage | Встроено в браузер, бэкенд-сервер не нужен |
| Имя проекта | vibe-coding-example | Название нашего практического проекта |
Беседа в раунде 1: создание скелета
Теперь мы начинаем настоящее Vibe Coding —не сообщая ИИ все требования сразу, а двигаясь шаг за шагом.
Шаг 1: Создайте проект
Откройте терминал и создайте проект:
npm create vite@latest vibe-coding-example -- --template vue
Откройте новый терминал, войдите в проект, затем, следуя tailwindcss, используйте командуcode ., чтобы открыть проект в VS Code:
cd vibe-coding-example npm install npm install -D tailwindcss @tailwindcss/vite code .
Теперь VS Code открыл проект. НажмитеCtrl+Shift+I(Mac: Cmd+Shift+I), чтобы открыть панель Copilot Chat. В правом верхнем углу также есть кнопка переключения панели:
Шаг 2: Первый диалог
Введите в панели чата следующее — это просто описание того, что вы хотите, на естественном языке:
我在开发一个任务管理 Web App，项目名 vibe-coding-example. 技术栈：Vue 3 + Vite + Tailwind CSS. 请帮我搭建项目骨架，创建以下文件： 1. src/types/task.ts — 定义 Task 类型 字段：id, title, description, status, priority, dueDate, createdAt status 可选值：'todo' | 'in-progress' | 'done' priority 可选值：'low' | 'medium' | 'high' 2. src/App.vue — 应用主页面 - 顶部导航栏（标题"Vibe Coding Example"） - 中间显示任务列表区域 要求： - 使用 Vue 3 script setup 语法 - 使用 Tailwind CSS 做样式 - 界面简洁干净，主色调用 indigo（靛蓝色） - 现在先用假数据展示，后面再接真实功能
ИИ будет выводить код по частям и изменять код файла. НажмитеAccept, чтобы он автоматически записал в файл.
Когда он запросит выполнить команду, вам просто нужно нажать Allow:
Шаг 3: Проверка
После того как ИИ закончит писать код, он подскажет нам, что мы можем запустить его в терминале:
npm run dev
Нажмите кнопку Open Terminal в правом верхнем углу, затем выполните команду в терминале:
Откройте http://localhost:5173 в браузере. Если вы видите страницу, значит, первый шаг выполнен успешно.
Результат выглядит так:
Это первый раунд Plan → Execute → Verify. Вы описали цель, ИИ выполнил её, а вы проверили результат. Каждый следующий раунд следует этому ритму.
Застряли на коде, который не понимаете?
Vibe Coding не требует, чтобы вы понимали каждую строку кода. Но если вам попадётся фрагмент кода, который вы совсем не понимаете, выделите его и нажмитеCtrl+I, а затем введите:
Explain in plain Chinese what this code does.
ИИ объяснит это на понятном вам языке.
Диалог 2-го раунда: реализуйте список задач и форму
Каркас работает. Теперь давайте реализуем настоящие возможности.
Шаг 1: компонент карточки задачи
Продолжайте вводить текст в панели чата:
创建 src/components/TaskCard.vue 组件： 功能： - 展示单个任务的信息：标题、描述、优先级标签、截止日期 - 优先级用颜色区分：high 红色、medium 黄色、low 绿色（左边框即可） - 点击左侧复选框标记任务为完成（标题加删除线） - 右上角有删除按钮（× 图标） - 鼠标悬停时卡片微微放大（hover:scale-[1.02]） Props 接收：task（Task 类型） Emit 事件：toggle（切换完成状态）、delete（删除任务）
После генерации ИИ сохраните точки записи файлов, разрешите точки выполнения команд и итоговый результат:
Затем создайте контейнер списка задач:
创建 src/components/TaskList.vue 组件： 功能： - 接收任务列表，用 TaskCard 展示每一项 - 任务按创建时间倒序排列（最新的在上面） - 顶部有状态筛选按钮：全部 / 待办 / 进行中 / 完成 - 没有任务时显示空状态提示："还没有任务，点击下方按钮创建第一个吧"
Шаг 2: Создайте форму задачи
创建 src/components/TaskModal.vue 组件： 功能： - 点击"+ 新建任务"按钮打开弹窗 - 表单字段：标题（必填）、描述（选填）、优先级（下拉选择） - 标题为空时显示红色错误提示"标题不能为空" - 点击弹窗外的灰色遮罩关闭弹窗 - 按 ESC 键关闭弹窗 - 提交后用 emit 把新任务传给父组件 使用 v-model 绑定表单数据 使用 Teleport 把弹窗渲染到 body 下
Шаг 3: Объедините компоненты
Теперь обновите App.vue, чтобы объединить TaskList и TaskModal:
更新 src/App.vue： - 引入 TaskList 和 TaskModal 组件 - 使用 reactive 管理 tasks 数组（先用示例数据） - 实现 addTask 函数：接收 TaskModal 提交的数据，添加到 tasks 数组 - 实现 toggleTask 和 deleteTask 函数 - TaskModal 的显示/隐藏用 ref(false) 控制 示例数据包含 2 条任务，让页面看起来不空
Шаг 4: Проверка
Проверьте вручную в браузере: создайте задачу → установите флажок, чтобы отметить её выполненной → удалите задачу. Когда все функции будут работать правильно, переходите к следующему раунду.
Раунд 3. Диалог: Сохранение данных
Теперь, если вы обновите страницу, задачи исчезнут. Нам нужно сохранить данные в localStorage браузера.
Расскажите ИИ о своих требованиях
现在任务数据只存在内存里，刷新就没了。请把数据持久化到 localStorage： 1. 创建 src/utils/storage.ts： - saveTasks(tasks): 把任务数组存为 JSON - loadTasks(): 读取并解析 JSON，读取出错时返回空数组 - 存储键名：vibe-coding-example-tasks 2. 更新 src/stores/taskStore.ts： - 用 Vue reactive 管理状态 - 初始化时从 localStorage 加载数据 - 使用 watch 自动监听变化并保存（deep: true） - 导出 addTask、updateTask、deleteTask 函数 - 首次使用时如果没有数据，自动创建 3 条示例任务 3. 更新 App.vue，改为从 taskStore 获取数据和方法
Проверьте
# 在浏览器中： 1. 添加几条任务 2. 刷新页面 → 任务还在！ 3. 按 F12 打开开发者工具 → Application → Local Storage 4. 找到 vibe-coding-example-tasks，查看存储的 JSON 数据
Если данные пропали, вставьте сообщения об ошибках из консоли F12 в ИИ и дайте ему их исправить.
Раунд 4. Диалог: Канбан-представление
Описание требований
我想添加一个看板视图（Kanban），文件：src/components/KanbanBoard.vue 功能： - 三列：待办 | 进行中 | 已完成 - 任务卡片显示在对应状态的列中 - 卡片可以拖拽到其他列（用 HTML5 原生拖拽 API） - 拖入新列时自动更新任务的 status - 在 App.vue 顶部加两个 Tab 按钮："列表"和"看板" - 切换时保持数据一致 注意：不需要引入任何拖拽库，用原生的 dragstart、dragover、drop 事件即可。
После генерации ИИ проверьте: перетащите карточку из 'To Do' в 'In Progress' и убедитесь, что статус задачи обновлён.
Раунд 5. Диалог: Тёмная тема и мобильная адаптация
Тёмный режим
添加深色模式：创建 src/components/ThemeToggle.vue 功能： - 点击按钮切换亮色/深色模式 - 在 html 标签上添加/移除 dark class - 用 localStorage 记住用户选择（键名：vibe-coding-example-theme） - 首次访问时跟随系统设置（prefers-color-scheme） - 按钮放在导航栏右侧 同时给所有组件添加 dark: 前缀的深色样式。
Мобильная адаптация
适配手机屏幕（375px 宽）： - 看板三列在手机上改成竖向单列布局 - 任务模态框在手机上改成从底部滑出的样式 - 所有按钮的点击区域不小于 44px - 表单输入框字号不小于 16px（防止 iOS 自动缩放） - 导航栏在手机上用汉堡菜单 使用 Tailwind 的响应式类：sm: md: lg:
Проверьте: нажмите F12 в браузере, переключитесь в мобильный режим (375px) и проверьте каждую страницу по очереди.
Что делать, если вы столкнулись с багом: универсальный шаблон отладки
Это «аптечка первой помощи» Vibe Coding — при любой ошибке используйте этот шаблон напрямую:
I've encountered a problem, help me fix it: [Error Message] Paste the complete error from the terminal or browser console here. [What I Want to Achieve] Describe what you expect to happen. [What I've Already Tried] List the operations you've tried but that didn't solve the problem.
ИИ автоматически определит проблему по сообщению об ошибке и предложит исправление. Вам не нужно самостоятельно анализировать причину.
Попросите ИИ проверить ваш код
После завершения крупной функции введите это в чат:
请审查我当前项目的代码，重点检查： 1. 有没有安全风险 2. 有没有性能问题 3. 错误处理是否完整 4. 有没有可以简化的地方
ИИ перечислит проблемы и рекомендации по исправлению по пунктам. Это под силу только опытным разработчикам — но с ИИ вы тоже сможете.
Развёртывание и публикация
Проект готов; последний шаг — опубликовать его в интернете, чтобы любой мог получить к нему доступ.
Отправьте на GitHub
$ git init $ git add . $ git commit -m "feat: vibe-coding-example 任务管理应用" # 在 github.com 创建同名仓库后： $ git remote add origin https://github.com/你的用户名/vibe-coding-example.git $ git push -u origin main
Разверните на Vercel
- Посетитеvercel.com, войдите с вашей учетной записью GitHub
- Нажмите Add New Project и выберите репозиторий vibe-coding-example
- Выберите Vite в поле Framework, затем сразу нажмите Deploy
- Подождите 1-2 минуты, чтобы получить ваш домен xxxx.vercel.app
Отправьте ссылку друзьям, и они смогут пользоваться вашим приложением.
Итоги по Vibe Coding
Формула написания хороших промптов
Хороший промпт =Цель + Ограничения + Контекст
| Не рекомендуется | Рекомендуется |
|---|---|
| Помоги мне составить список задач | Создай компонент TaskList.vue. Функциональность: отображение списка задач с заголовком, статусом и метками приоритета. Используй Tailwind CSS, данные передаются через props. Не подключай сторонние UI-библиотеки. |
Ритм итераций
每次对话 → 只做一个功能 每次修改 → 立刻在浏览器里验证 每个功能完成 → 立刻 git commit 每天结束 → push 到 GitHub
Не накапливай множество изменений и не тестируй их все сразу — это только создаёт проблемы самому себе.
Не перекладывай это на ИИ
- Принимать код, совсем не глядя на него — хотя бы знай, какие файлы были изменены
- Когда ИИ говорит «в этом коде есть риски безопасности», относись к этому серьёзно
- Не тестировать вручную каждую функцию перед выпуском