Course Map
练习进度 0/55
💡 Stage 0: 觉醒 (5)
Vibe Coding 是什么从 Coder 到 Commander — 你的角色变了Vibe Coding vs Spec Coding — 两种范式,两种活法Vibe Coding 工具全景图 — 选对工具少走弯路你的第一个 Vibe 项目 — 从需求到指令🧘 Stage 1: 心法 (9)
MVP 思维 — 别做完美产品,做能用的产品需求拆解 — 从模糊想法到 AI 能执行的任务PRD 驱动开发 — 写清楚再动手代码 Prompt 五要素 — 让 AI 写出能用的代码Prompt 迭代与追问 — 第一次一定不够好Vibe Coding 思维模型用 Cowork 找设计参考 + 生成 design.mdStudio用 AI 生图给 PPT 配图 — 同一套风格,不再东拼西凑StudioAI 生图 + 数据图表给 PDF 配图Studio🛠️ Stage 2: 工具精通 (12)
Cursor 入门 — Vibe Coding 的代名词Cursor 进阶 — 多文件编辑和 Agent 模式Claude Code 入门 — 终端里的 AI 程序员MCP 入门 — 让 AI 连接整个世界Claude Code Skills 和 Agent Teams — AI 能力复用Browser 工具 — 零安装的 AI 编程体验GitHub Copilot 和 Windsurf — IDE 选择题工具选型实战 — 没有绝对的最好,只有最适合用 Cowork 给你的科普 PPT 批量生成配图Studio用 ElevenLabs 给科普 PPT 配中英双语旁白Studio一稿多发实战 — 把 PPT 内容改成 3 个平台版本Studio用 Suno 生成 60s 科普视频 BGMStudio🏗️ Stage 3: Context Engineering (9)
Context Engineering 入门 — 让 AI 不再"失忆"CLAUDE.md 设计实战 — 让 AI 秒懂你的项目Cursor Project Rules 设计实战项目结构与 AI — 让你的项目 AI 友好Token 经济学 — 省钱和效率的平衡文档驱动开发 — AI 时代的新范式让 AI 把一段乱文本变成 JSON 表格Studio用 Claude 设计每天运行的 JSON 提取任务StudioObsidian + AI 第二大脑:设计一套可审核的笔记整理流程Studio🚀 Stage 4: 全栈实战 (13)
环境搭建 — 让 AI 帮你配环境AI 前端开发 — 从截图到 React 代码AI 后端开发 — 从 API 设计到实现数据库设计与 AI — Schema 到迁移安全与认证 — AI 生成的代码怎么不掉坑调试 AI 代码 — 读错误日志和修复 BugGit 工作流 — AI 怎么写 Commit 和 PR部署到上线 — AI 加速从开发到生产Code Review 和质量保证 — AI 写的代码咋审测试 TDD — 先写测试再让 AI 实现用 AI 写一个最小 Admin CMS(产品增删改查)Studio给 Landing Page 加联系表单 + 数据收集Studio用 Cowork 搭一个每日金融新闻聚合 AgentStudio Learning Guide
没有 design.md,AI 每次都在重新猜你想要什么
先讲个真实场景。
你在 Cowork 里说:"帮我做一个咖啡店的官网首页。"
AI 出了一版。粉色的,圆角的,挺可爱。你说:"不对,我想要更高级一点的感觉。" AI 改成了黑白极简。你说:"太冷了,我想要温暖一点。" AI 加了一点橘色。你说:"橘色太鲜艳了……"
折腾了半小时,你才发现——你想要的其实是那种独立精品咖啡店那种"日式工业风"的感觉:原木 + 哑光黑 + 一点奶油黄、Helvetica 那种干净字体、留白多、不要花哨的图标。
如果你一开始就把这些写下来给 AI,5 分钟就完事了。这份"一开始就写下来"的东西,就叫 design.md。
design.md 是什么
design.md 是一份纯文本的设计约定文档,告诉 AI:
- 我这个产品给谁用(目标用户)
- 调性是什么(高级 / 亲切 / 专业 / 活泼 / 极简 / 复古)
- 用什么颜色(主色、辅色、文字色)
- 用什么字体(标题字体、正文字体、是衬线还是无衬线)
- 布局风格(卡片式 / 杂志式 / 极简留白 / 信息密集)
- 组件风格(圆角多大、阴影怎么样、按钮长什么样)
- 哪些设计不要(比如"不要拟物化、不要 Glassmorphism、不要彩虹渐变")
一个真实的 design.md 长什么样
# CoffeeNote design.md
## 产品调性
独立精品咖啡店在线社区。给爱喝手冲、有点钱、有点品味、但讨厌网红打卡风的年轻白领。
关键词:克制、温暖、专业、不浮夸。
## 颜色
- 主色:#1A1A1A(哑光黑)
- 辅色:#F5E6D3(奶油黄)
- 强调色:#C97D5D(赤陶橙,只用在 CTA 按钮)
- 背景色:#FAF8F3(米白)
- 文字色:#2C2C2C(深灰)/ #6B6B6B(中灰)
## 字体
- 标题:Inter 700,字母间距 -0.02em
- 正文:Inter 400,行距 1.7
- 数字 / 价格:JetBrains Mono(区分一下,显得专业)
## 布局
- 留白多,section 之间 120px padding
- 卡片圆角 8px(不要 16px,太可爱)
- 阴影:4px 8px rgba(0,0,0,0.06)(要轻,几乎看不到)
- 网格:12 栏,最大宽度 1200px
## 不要做的
- 不要 Glassmorphism(毛玻璃)
- 不要彩虹渐变
- 不要表情包式 Emoji 图标,要用线性图标
- 不要"加入我们改变世界" 这种营销话术
这份 design.md 一旦写好,后面你做 PPT、做 Brochure、做网站雏形、做视频脚本,全部用同一份蓝图。所有产出就会是一套的,不会东一块西一块。
你不需要懂设计
你可能会想——"我又不是设计师,怎么知道字体用 Inter 还是 Roboto?"
不用担心。这节 Lab 就是教你借助 Cowork 帮你定下来这些东西。你只需要回答:
- 我做什么产品?
- 我喜欢哪些产品的感觉?
- 我不喜欢哪些产品的感觉?
Vibe Workspace
Live build context
为什么需要 design.md
同样让 AI 出一个落地页,有的人 5 分钟出一版能用的,有的人改 20 轮还是别扭——区别在于有没有一份 design.md
自动保存在此设备
用一段话把产品的调性、目标用户、行业讲清楚让 Cowork 帮你找 3 个真实可参考的对标产品从参考里提取出可复用的设计语言(颜色 / 字体 / 布局 / 组件风格)