VIBE CODING · 60 分钟从魔法到工程
小时候想当魔法师，
长大后有了一根会写代码的魔杖
不用先学语法。60 分钟，从一句人话开始，做出一个能发给朋友的网站。
现场构建现场部署零基础可听今天就能复现
定义
vibe coding 不是「让 AI 写代码」
它是用自然语言描述意图，由 agent 完成实现；你负责判断它有没有价值，并定义「做完的样子」。
01先问价值为什么做、给谁解决什么问题。没有价值的功能，写出来也没人用。
02以验收为准能跑、能复现、能发给别人看，才算完成。
写代码的门槛降了，想清楚的门槛没降。
01 / 定义02 / 22
60 分钟 · 两条线
今天怎么走
主线 · 准备 → 需求 → 开发 → 部署
→
12–20
需求
skills.sh、grill-me、规格卡
→
20–48
开发
leader 派活，三个 worker 并行
→
副线 · 这一路顺带学到的
让 agent 主动理解需求
先别急着写，让它把输入、输出、失败问清楚。
多 agent 并行
先定契约，再让多个 worker 同时开工。
两条线同时走：手上在做事，脑子里在攒概念。做完一个，另一个也就记住了。
01 / 路线03 / 22
装备 01
先连接网络
浏览器用 Chrome，搜索别用百度，用必应（bing.com）；网络要能稳定打开 GitHub。
装备 01 · 浏览器
用必应（bing.com）搜「Chrome」，认准官网下载链接，装完设为默认浏览器。
01 / 装备04 / 22
装备 02
站在前人的肩膀上：开源与 Git
# 1. 打开 git-scm.com/downloads
# 2. 下载安装包，一路默认下一步
# 3. 打开终端，看到版本号就成功
git --version
# 4. 自报姓名（提交时会用到）
git config --global user.name "你的名字"
git config --global user.email "you@example.com"
装过 Homebrew / winget 的话：brew install git 或 winget install --id Git.Git -e
它是开源的通用搬运方式
GitHub 上绝大多数开源项目，都用 Git 打包和分发。装好它，你才能把别人做好的项目完整搬到自己电脑上。
不用从零造轮子。站在巨人的肩膀上改出自己的版本，这才是开源的日常。
装完只要看到版本号就行，不用理解分支、合并这些词。
01 / 装备05 / 22
科普
GitHub 是开源世界的入口
Git 装在你电脑上；GitHub 是全世界程序员放代码的地方，绝大多数开源项目都在这里。
用别人的
现成的框架、组件、工具，clone 下来就能改成自己的。
你的电脑commit → push →GitHub→ clone →另一台电脑 / 服务器
起点模板 · github.com/vitejs/vite · create-vite/template-react-ts
今天的项目不从零开始：先 clone 一个能跑的模板，再让 agent 在这个基础上改。
开源不是「抄」，是站在别人已经搭好的地基上，盖自己的房子。
01 / 科普06 / 22
Skill 市场
给 agent 装「专业插件」
skills.sh 是公开的技能市场：装一个 skill，等于给 agent 一本别人写好的操作手册。
# 在项目目录里执行
npx skills add mattpocock/skills --skill grill-me
npx skills add anthropics/skills --skill frontend-design
# 第三个：在 skills.sh 搜 qianwenai-deploy
# 按页面上的命令安装
今天装的三个
grill-me把模糊需求问清楚：给谁看、几条、什么算好。
frontend-design先定风格和配色，再写页面，避开 AI 紫渐变。
qianwenai-deploy一句话部署到阿里云，最后给你一个链接。
www.skills.sh装完一般不用重启会话以页面上的命令为准
你不用会写 skill，先用别人写好的；用顺了再自己写。
02 / 技能07 / 22
今天只用三个
需求、颜值、上线
grill-me
把模糊需求问清楚
它不写代码，只追问：给谁看、几条、什么算好、失败怎么办。
frontend-design
先定视觉，再写页面
强制先定风格、排版、配色，避免千篇一律的 AI 紫渐变。
qianwenai-deploy
一句话部署到阿里云
识别项目、询价、开机器、构建、探活，最后给你一个链接。
三个 skill 分别对应三件事：想清楚、做漂亮、送上线。
02 / 三个必装08 / 22
需求定稿
一张卡片，四行就够
目标每天早上 30 秒读完，知道今天该关注什么
输入当天中文科技资讯，AI / 产品 / 技术三类
输出不超过 10 条，每条一句事实、一句为什么值得看、一个原链接
验收手机能打开、没有重复、没有广告、每条链接可点
不做登录、数据库、评论、推送、历史归档
「不做」这一行最重要。它决定了你今天能不能按时收工。
02 / 规格10 / 22
Agent 团队
你是老板，leader 是项目经理
一个会话只是一个员工；一个团队是一个 leader 带多个并行 subagent。
你负责找价值、定意义和目标、为最终结果负责；leader 拆任务、派活、合并，worker 各改各的文件。
LEADER
Leader
拆任务、定契约、合并、汇报。
它不写业务代码。
WORKER A · 数据
搜索 → 筛选 → 摘要，产出固定的 JSON
WORKER B · 页面
按契约渲染卡片，加已读和复制
WORKER C · 质检
按清单挑错，只写复现步骤，不改代码
没有契约，三个 worker 会互相踩；契约定了就不许改。
02 / 团队11 / 22
frontend-design
第二步：定完风格，团队才好动手
没有 skill 的默认结果
紫色渐变 / 大圆角 / 居中大标题 —— 一眼 AI
指定方向之后
今日情报 · 10 月 24 日
编辑部纸感
米白底 · 墨黑字 · 砖红点缀
宋体标题 · 细线分隔 · 左对齐
语气：像报纸，不像 PPT
同一个需求，视觉方向不同，成品差一个档次
课件的配色，就是这套 skill 定出来的
风格定完，leader 把活派下去：接下来屏幕上出现的代码，都是三个 worker 并行写的。
02 / 颜值12 / 22
科普
这玩意到底跑在哪
部署之后，前端和后端跑在同一台 ECS 上；你只要知道卡住时该看哪一层。
02 / 科普13 / 22
开局提示词
整场只说这一段话
你是这个项目的 leader。
需求文档：@需求.md（grill-me 问出来的那一页）
目标：做一个每日科技情报简报，并部署上线。
先别写代码：
1. 输出 3 个任务，每个都写清楚输入、输出、验收标准
2. 定好 JSON 契约，之后不许改
3. 我确认后，再派给 worker 并行执行
4. 每完成一步，贴出验收证据，不要只说「已完成」
@ 文件上下文在 Trae 里输入 @ 就能挂文件：agent 读的是需求原文，不用你再复述一遍。
这段话里没有一行代码，但它决定了后面 20 分钟顺不顺。
02 / 提示词14 / 22
现场 20 分钟
屏幕上会发生什么
0–2拆解leader 给出 3 个任务和验收标准，你确认
2–9数据worker A 跑通搜索 → 筛选 → JSON，贴出条数
9–15页面worker B 按契约渲染，第一次看到成品
15–18合并leader 联调，修掉字段不一致
18–20质检worker C 找出 3 个必现问题
你在这 20 分钟里只做三件事：确认、验收、决定先修哪个。
03 / 现场15 / 22
质检
让质检 agent 挑错，你来判断值不值
只给质检 agent 这份清单，不给代码解释
搜索返回空，页面会不会一片空白
接口超时，会不会一直转圈
模型返回的不是 JSON，会不会白屏
同一条新闻，会不会出现两次
写代码的 agent 自己验收，
等于没验收。
它只会告诉你「已经完成」。
能复现的问题，才是问题。
你不是质检员。你要判断的是：这件事值不值得做、为什么做、做成什么样才算对。
这一步通常能抓出三个 bug，而且都是你自己看着顺眼时看不到的。
03 / 质检16 / 22
部署
上云：一句话，等一个链接
把这个项目部署到阿里云，给我一个可以访问的链接。
qianwenai-deploy课上真跑，链接当场打开。
03 / 上线17 / 22
复盘
这 60 分钟，你真正学到的是
01借助开源的力量GitHub 上找现成起点，clone 下来改成自己的
02让 AI 主动拷问你的需求先别急着写，让它把输入、输出、失败问清楚
03用 skill 借用别人的经验不用从零想，先装一个专业插件
04用 leader + worker 并行先定契约，再让多个 agent 同时干活
05用一句话把作品部署上线qianwenai-deploy：识别项目、询价、开机器、探活，最后给你一个链接
换一个题目，这五件事照样成立。这就是它能被带走的原因。
04 / 复盘19 / 22
进阶地图
vibe coding 只是第一层
工具 · 换更强的魔杖
Trae
Codex
Claude Code
DeepSeek Harness
方法 · 从会话到系统
Agent Teams
Harness / 编排
长程任务
多 agent 评审
能力 · 从文字到多模态
文生图 / 视频
语音与实时对话
3D 与空间内容
端到端工作流
建议路径：先把 DSH 跑起来 → 用 agent teams 做一个长任务 → 再接多模态。
越往上，越不缺会写代码的人，越缺能把问题定义清楚的人。
04 / 进阶20 / 22
魔法是真的。
但咒语要自己念清楚。
今天只是推开了门。vibe coding 是魔法世界的第一步，不是终点。
END22 / 22