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
海报要的图,跟 BP 要的图,是两种东西
很多人做 PDF 配图的时候搞错了一件事:他们以为"配图 = 找一张好看的图放进去"。错。
PDF 分两大类(这节是 P3 的核心区分):
视觉型 PDF —— 海报、单页传单、活动 KV。读者 3 秒钟做决定:扫一眼,要么停下,要么划走。这种 PDF 的配图叫主视觉,它本身就是内容,比文字还重要。
文档型 PDF —— BP、简历、提案、白皮书。读者要花 5 分钟读完。这种 PDF 的配图叫信息图,它的作用是把一段长文字浓缩成一张图,让人秒懂。
| 视觉型(海报) | 文档型(BP/提案) | |
|---|---|---|
| 配图角色 | 主角 | 配角 |
| 数量 | 1 张主视觉 + 0-2 张点缀 | 5-15 张数据图 + 流程图 |
| 性质 | 情绪 / 氛围 / 画面感 | 数据 / 结构 / 逻辑 |
| 工具 | AI 生图(gpt-image-2 / Flux) | Mermaid(流程图)/ ECharts(数据图) |
| 例子 | 楼盘日落渲染图、招聘海报背景 | 市场规模柱状图、项目流程图 |
楼盘海报 vs 楼盘 BP,要的图完全不一样
举个例子让你秒懂。同样是"南山悦府"这个楼盘:
楼盘海报要什么图?要一张日落时分主楼外立面渲染图,玻璃幕墙反光、远处一棵树、暖色调。这张图本身就是在卖"高端、宁静、宜居"这种感觉。你不会在海报上放一张"客户来源占比饼图"——那是反着来的。
楼盘 BP要什么图?要 "周边 3 公里学校/医院/地铁分布图"、"3 年价格走势折线图"、"目标客群画像饼图"。这些图都很丑,但它们在"用数据说服投资人"。你不会在 BP 里放一张"日落主视觉图"——投资人不会因为图好看就给你钱。
所以这节课产出的是两类不同的配图:
- 海报主视觉 —— 用 AI 生图工具出,要求印刷级(300DPI、CMYK 友好色彩)
- 文档信息图 —— 用 Mermaid 画流程图、用 ECharts 出数据图,要的是"准确" 不是"好看"
300DPI 是什么?为什么海报必须 300DPI?
DPI = Dots Per Inch,每英寸多少个点。
- 屏幕显示:72 DPI 就够,反正屏幕本身分辨率就那么高
- 印刷输出:必须 300 DPI,不然印出来糊成一坨
- 屏幕看(72 DPI):图片需要 595 × 842 像素
- 印刷出(300 DPI):图片需要 2480 × 3508 像素
AI 生图工具的尺寸怎么选?
- gpt-image-2 / DALL·E 3:直接出 1024×1024 或 1024×1792,不够印刷。需要后期用 Topaz Gigapixel / Upscayl 放大到 2480×3508
- Midjourney v6:写参数 --ar 2:3 --quality 2 能出 2048×3072,接近印刷尺寸,再放大一次到 2480×3508 就够
- Flux Pro:原生支持 2048+ 输出,相对省事
CMYK 友好色彩是什么?
屏幕用 RGB(红绿蓝光)显示,印刷用 CMYK(青品黄黑墨水)。两套色彩系统能表达的颜色范围不一样——RGB 比 CMYK 广。
什么颜色 RGB 能显示但 CMYK 印不出来?特别鲜艳的荧光色——荧光绿、荧光蓝、纯电光紫。你在屏幕上看着特别亮的颜色,印出来会"暗一档",因为 CMYK 印不出那个亮度。
给 AI 写 Prompt 时怎么避坑:
- ❌ 不要写 "neon pink", "electric blue", "fluorescent green"
- ✅ 写 "muted dusty pink", "navy blue", "earth green", "warm beige", "matte tones"
Vibe Workspace
Live build context
配图也分两种:主视觉 vs 信息图
不同 PDF 要的图完全不同。海报要"漂亮的图",BP 要"说事的图"。先认清这件事,后面才不会浪费时间。
自动保存在此设备
分清"视觉型 PDF 主视觉图"和"文档型 PDF 数据/流程图"两类配图,不混着做用 AI 生图工具(gpt-image-2 / Flux)写出能跑出印刷级海报主视觉的 Prompt(300DPI / CMYK 友好色彩)用 Mermaid 画一个能嵌进 BP/提案的流程图,不需要 Photoshop