Skip to content

Main Navigation 首页

欢迎来到基础版

0. 开始前：你会做出什么，怎么学，卡住怎么办

1. 第一个版本：2 小时做出你的个人主页 + 数字分身

2. 带回自己的工作台：从平台到本地

3. 做好第一印象：界面、风格与更有效的需求表达

4. 让主页更完整：内容、引导与基础存档

5. 让数字分身更像你：人设、回答与排错

6. 正式上线：部署、分享与第一轮真实反馈

基础篇（旧）

序-从想法到产品的100小时

01-环境搭建

03-从需求到文档

04-必须知道的开发知识

05-好看好用的界面

06-数据存在哪里

07-连接前后端

08-谁能访问我的数据

09-功能测试

10-公网访问

11-协作开发

12-无服务器自动部署

13-域名解析与接入

14-部署到服务器

15-SEO、分享与数据统计

16-用户反馈与产品迭代

核心概念与范式演进

基础技术与架构设计

工具链与开发框架

工程实施与质量保障

安全、合规与局限性

商业应用与行业趋势

README 全文（社区转载）

Day 1: 初识 OpenClaw

Day 2: 10 分钟搭建

Day 3: 给助手一个灵魂

Day 4: 接入数字生活

Day 5: 解锁技能树

Day 6: 让助手主动工作

Day 7: 进阶与未来

学习路线图

01. 斜杠命令

02. 记忆系统

03. 技能系统

06. 事件钩子

07. 插件系统

09. 高级功能

10. 命令行界面

实践案例篇

简体中文

简体中文

主题

Sidebar Navigation

OpenClaw 教程

Day 1 初识 OpenClaw

Day 2 10 分钟搭建你的助手

Day 3 给助手一个灵魂

Day 4 接入你的数字生活

Day 5 解锁技能树

Day 6 让助手主动工作

Day 7 进阶玩法与未来展望

OpenClaw 资源聚合

Vibe Coding 指南（社区原文）

README 全文（社区原文）

基础篇

第 0 章：开始前 —— 你会做出什么，怎么学，卡住怎么办

0.1 这本教程在教什么，以及你会做出什么

0.2 谁适合学，以及怎么学最有效

0.3 卡住时怎么办：基础版统一求助流程

0.4 本章小结：基础版学习地图

第 1 章：第一个版本 —— 2 小时做出你的个人主页 + 数字分身

1.1 为什么从这一章开始，以及先准备什么

1.2 用填空式模板写出第一版需求

1.3 在平台里生成你的第一个版本，并完成三轮微调

1.4 本章小结：第一轮验收与下一轮优化清单

第 2 章：带回自己的工作台 —— 从平台到本地

2.1 为什么要把项目带回本地，以及如何把它导出下来

2.2 用 AI IDE 打开它，并先认识最关键的几部分

2.3 完成一次最小修改，并学会 3 类高频提问

2.4 本章小结：你的本地工作台已经搭好

第 3 章：做好第一印象 —— 界面、风格与更有效的需求表达

3.1 为什么先改界面，以及先选一个清晰的风格方向

3.2 三个最值回票价的界面改动

3.3 用更清晰的话告诉 AI 你想怎么改，并兼顾好不好用

3.4 本章小结：你的首页已经像一个作品

第 4 章：让主页更完整 —— 内容、引导与基础存档

4.1 为什么先学“存档”，以及 Git 的最小闭环

4.2 从访客视角决定你要补什么内容

4.3 只添加 2 3 个最有价值的内容模块，并让数字分身更容易被使用

4.4 本章小结：主页更完整，也更可回退

第 5 章：让数字分身更像你 —— 人设、回答与排错

5.1 为什么“像你”比“更聪明”更重要，以及先用一句人话理解背后发生了什么

5.2 写第一版“数字分身说明书”，并用 1 3 组真实材料校准它

5.3 四类最常见问题，以及成本与安全的最小意识

5.4 本章小结：它已经能更稳地代表你

第 6 章：正式上线 —— 部署、分享与第一轮真实反馈

6.1 为什么把“上线”放在最后，以及上线前检查

6.2 把代码推到远程仓库，并用 EdgeOne Pages 完成部署

6.3 上线后自测，并收集第一轮真实反馈

6.4 基础版收束：你已经从“有想法”走到了“有作品”

附录

A. 常用提示词模板

B. 常见错误与“问 AI”流程

C. UI 速查卡

D. Git 最小操作卡

E. API Key、环境变量与基础安全

F. Vibe Coding 的能与不能

G. 进阶版跳转地图

H. 社区 Vibe Coding 资源

结语：给未来的你

下部预告：Vibe Coding 全栈实战教程

进阶版核心内容详解

进阶篇

5 分钟搭建云端开发环境

随时随地 AI 编程

第一章：环境搭建与代码运行基础

1.0 快速开始

1.1 代码格式演变

1.2 技术栈概念

1.3 浏览器与服务器基础

1.4 Terminal 终端入门

1.5 包管理与项目配置

1.6 模型与工具

1.7 创建项目

1.8 Localhost 与端口

第二章：AI 使用说明书

2.0 推荐配置

2.1 AI 编程的经济学

2.2 VibeCoding 工作流

2.3 MCP、插件与 Skills

2.4 项目规则配置

2.5 高效调试心法

第三章：产品思维与文档驱动

3.0 PRD 模板

3.1 想法验证实战

3.2 与 AI 确认需求

3.3 PRD 编写实战

3.4 从 PRD 到代码

第四章：你必须知道的开发基础

4.0 代码运行的三种状态

4.1 技术栈决策框架

4.2 从 PRD 到技术文档

4.3 如何读懂 AI 生成的代码

4.4 API 与 HTTP 基础

4.5 前后端分离概念

4.6 配置文件格式

4.7 API 集成实战

4.8 项目说明书结构

4.9 别再重复造轮子

第五章：界面(UI)与交互(UX)

5.1 AI 设计工具

5.2 组件库

5.3 动画与交互库

5.4 UI 风格与灵感

5.5 让页面更高级的效果

5.6 让 AI 记住你的设计规范

第六章：数据持久化与数据库

6.0 领取你的数据库

6.1 数据存储演进

6.2 数据库基础概念

6.3 如何操作数据库

6.4 数据库设计与优化

第七章：后端API开发

7.0 跑通你的第一个全栈应用

7.1 一个接口不够用了

7.2 当接口出了问题

7.3 让接口更好用

第八章：安全与用户认证

8.0 用户系统快速示例

8.1 密钥管理与环境变量

8.2 认证方式与方案选择

8.3 路由保护与权限控制

8.4 安全检查与问题排查

8.5 进阶安全防护

第九章：功能测试与自动化

9.1 为什么需要测试

9.2 API 测试与 E2E 测试

9.3 自动化工作流

第十章：Localhost 与公网访问

10.1 从 Localhost 到互联网

10.2 内网穿透：临时让朋友看看

第十一章：Git 版本控制与协作开发

11.1 为什么需要 Git

11.2 推上云端，开始协作

11.3 分支、PR 与团队工作流

第十二章：无服务器部署与 CI/CD 自动化

12.1 部署到 EdgeOne Pages

12.2 部署到类 Vercel 平台

12.3 CI/CD 与自动化

12.4 运维基础与成本优化

第十三章：域名、DNS 与网络接入

13.1 域名购买与 DNS 配置

13.2 备案与访问问题排查

第十四章：云服务器运维与项目部署

14.1 VPS 选购指南

14.2 VPS 初始化与安全配置

14.3.1 应用商店与 Docker 基础

14.3.2 部署 Next.js 应用

14.3.3 部署静态网站

14.3.4 部署前后端分离应用

14.4 配置域名与证书

14.5 其他好玩的应用

第十五章：SEO、分享与数据统计

15.1 Open Graph 与社交分享

15.2 SEO 全攻略

15.3 Umami 数据统计

15.4 法律合规

第十六章：用户反馈与产品迭代

16.1 面对真实用户

16.2 反馈分类与优先级

16.3 理解用户

16.4 迭代与成长

NEXT LEVEL

实践案例篇

TalkCoach：AI 对话训练平台

Lab 1：配置你的 AI 开发环境

Lab 2：从想法到 PRD

Lab 3：构建训练界面

Lab 4：设计数据库 Schema

Pset 1：数据层实现

Pset 2：API 与 AI 对话引擎

Pset 3：认证与安全

Lab 5：为 API 写测试

Lab 6：部署上线

开源 AI 画布：我的 Vibecoding 实践历程

🎨 Vibecoding 案例分享：零代码打造 AI 绘本生成器

全栈实战：AI 简历优化 SaaS (AI Resume Polish)

全栈开发：21天养成思考习惯的小游戏

我的一点点 Vibe 的编程经验分享——从执行者到决策者

优质文章篇

核心概念与范式演进

260307 智能体工程

250615 Coding Agents 入门指南

250800 我们在 FAANG 是怎么做 Vibe Coding 的

250731 规范是新的源代码

260307 工厂模型：Coding Agents 如何改变软件工程

260307 Vibe Coding 不是低质量工作的借口

260307 Vibe Coding：革命还是鲁莽放纵？

260307 什么是 AI Agent？为什么它们很重要？

250201 关于 Vibe Coding 你需要知道的一切

260307 如何成为世界级的智能体工程师

基础技术与架构设计

260307 用文件系统和 Bash 构建智能体

250800 揭秘 Claude Code 的工作原理

260307 MCP：它是什么，以及为什么重要

251112 多智能体系统如何支撑 AI 原生工程

250318 理解 AI 的「五层蛋糕」架构

260307 自我改进的编码智能体

260307 测试「Bash 就够了」假设：SQL vs Bash 智能体对比实验

工具链与开发框架

260307 AGENTS.md vs Skills：被动上下文为何胜过主动检索

260307 AI 驱动的原型开发：v0、Bolt 和 Lovable 对比

Anthropic 官方：Claude 101 与学院课程索引

260307 Claude Code Swarms：多智能体协作开发

Claude Skills 完整构建指南

260307 如何为 AI 智能体写出优秀的规范

260307 我们删掉了智能体 80% 的工具

260307 为什么我在 AI 工程中使用 Cline

工程实施与质量保障

250800 AI 代码审查的实施与最佳实践

260307 AI 写代码更快，你的工作是证明它能用

260307 在AI时代避免技能退化

260307 超越70%：最大化AI辅助编程中人类30%的价值

260307 如何为 AI Coding Agents 编写高质量规范

260307 GenAI 时代领导高效工程团队

260307 我在2026年的LLM编码工作流

260114 React 最佳实践：Vercel 十年性能优化经验总结

260307 停止为 AGENTS.md 使用 /init

260307 Vercel 如何构建 Coding Agents 的 AEO 追踪系统

260307 使用 AI Gateway 生成视频

260307 你的 AI Coding Agents 需要一个管理者

安全、合规与局限性

250501 AI 代理已经到来，威胁也随之而来

260307 智能体架构中的安全边界

商业应用与行业趋势

260307 OpenEvidence 如何打造让医生信得过的医疗 AI

260307 用 AI 智能体扩展社区，同时保持人性化

260307 软件工程的未来两年

基础篇（旧）

写在最前面

找到你的位置

第 1 章：觉醒 —— 为什么现在是编程最好的时代

1.1 编程已死，编程永生：从 Coder 到 Commander

1.1.1 2025 年，编程世界发生了什么

1.1.2 从 Coder 到 Commander 的角色转变

1.2 破除迷信：不懂英文、数学不好也能写代码吗？

1.2.1 迷信一：编程需要数学很好

1.2.2 迷信二：要先学好英文

1.2.3 迷信三：需要懂很多技术名词

1.2.4 迷信四：Vibe Coding 只是玩具

1.2.5 迷信五：AI 会抢走程序员的工作

1.2.6 迷信六：AI生成的代码总是完美的

1.3 工具初探：AI 编程工具选型指南

1.3.1 AI 编程工具全景图（2025 年版）

1.3.2 所有工具的共同能力

1.3.3 按你的情况选择

1.3.4 本教程的工具策略

1.4 Vibe vs Spec：AI 编程的两种方式

1.4.1 什么是 Vibe Coding

1.4.2 什么是 Spec Coding（规范驱动开发）

1.4.3 如何选择和切换

1.4.4 Context 管理技巧

1.5 Hello World：你的第一个 3 分钟 AI 网页

1.5.1 目标与准备

1.5.2 Step by Step 操作

1.5.3 恭喜你！你已经完成了什么

1.5.4 常见问题 FAQ

第 2 章：心法 —— 像产品经理一样思考

2.1 思维升级：从"我想做一个App"到"我要解决一个问题"

2.1.1 JTBD理论：从功能思维到任务思维

2.1.2 JTBD实践应用：四场景分析与练习

2.1.3 JTBD进阶技巧：深度理解与应用方法

2.2 逆向思维：先想清楚什么会让项目失败

2.2.1 逆向思维基础：从Carl Jacobi到Charlie Munger

2.2.2 Pre mortem失败模式分析：Vibe Coding项目避坑指南

2.2.3 Pre mortem实战指南：操作步骤与工具模板

2.3 减法思维：MVP不是「最小功能」，而是「最小可验证价值」

2.3.1 MVP基础：从概念到深层含义

2.3.2 真实案例对比：成功与失败的分水岭

2.3.3 功能策略：砍掉功能的艺术与不做清单

2.3.4 实践指南：减法思维的完整应用流程

2.4 故事思维：把用户当作故事的主角

2.4.2 产品即故事：用叙事结构思考需求

2.4.3 三维用户画像：让用户从纸面上站起来

2.4.4 用户旅程地图：把故事可视化

2.4.5 用故事思维写 Prompt：让 AI 真正理解你

2.4.6 实战练习：为你的项目应用故事思维

2.4.7 本节核心要点

2.5 灵魂三问：开发前必须回答的问题

2.5.2 问题一：用户是谁？

2.5.3 问题二：痛点在哪？

2.5.4 问题三：为什么选你？

2.5.5 灵魂三问自检清单

2.5.6 实战案例：四种场景的灵魂三问

2.5.7 本节核心要点

2.6 场景应用：这些思维工具不只是用来「做产品」的

2.6.1 核心洞见：一套思维，多种场景

2.6.2 数据分析场景：让 AI 做出有价值的分析

2.6.3 自动化脚本场景：识别值得自动化的任务

2.6.4 个人工具场景：警惕过度设计的陷阱

2.6.5 家人工具场景：站在他们的角度设计

2.6.6 本节总结：场景化思维速查表

2.7 问题发现：如何找到值得解决的问题

2.7.2 问题就在你身边，只是你没注意

2.7.3 "烦恼日记"法：系统性发现问题

2.7.4 什么样的问题适合用 Vibe Coding 解决

2.7.5 给不同人群的问题发现建议

2.7.6 实战练习：问题发现工作坊

2.7.7 本节核心要点

2.8 本章总结：产品经理的思维工具箱

2.8.2 开发前检查清单

2.8.3 从心法到技法

附录：心法篇补充材料

A. 思维模型速查表

B. 扩展案例库

C. 常见误区诊断清单

D. 深度参考资源

第 3 章：技法 —— 与 AI 对话的艺术

3.1 提示词工程基础：Context is King

3.1.1 什么是提示词工程

3.1.2 Context is King：上下文为王

3.1.3 初学者最常犯的五个错误

3.2 结构化提示词框架

3.2.1 为什么需要框架

3.2.2 S.C.A.F.F. 框架（推荐框架）

3.2.3 Role → Goal → Constraints 框架（简化版）

3.2.4 万能提示词模板

3.2.5 框架选择指南

3.3 进阶提示技巧

3.3.1 Zero shot Prompting：直接提问的艺术

3.3.2 Few shot Prompting：用示例教会 AI

3.3.3 Chain of Thought：让 AI "想一想"再回答

3.3.4 Tree of Thoughts：探索多条推理路径

3.3.5 Self Critique：让 AI 自我检查

3.3.6 技巧选择指南：什么情况用什么技巧

3.4 编写你的第一份 PRD

3.4.1 什么是 PRD，为什么 Vibe Coding 需要它

3.4.2 从第二章成果到 PRD：整合你的思考

3.4.3 适合初学者的 PRD 模板（精简版）

3.4.4 用优先级引导 AI 分阶段开发

3.4.5 PRD 实战：从想法到文档

3.5 迭代对话的艺术

3.5.1 为什么一次提问往往不够

3.5.2 迭代对话的基本模式

3.5.3 有效反馈的艺术

3.5.4 上下文管理：让 AI 记住你说过的话

3.5.5 知道何时开始新对话

3.6 当 AI 不听话时

3.6.1 AI 常见的"不听话"表现

3.6.2 诊断问题：AI 错在哪里

3.6.3 修正策略：怎么让 AI 改对

3.6.4 兜底策略：当 AI 真的搞不定

3.6.5 预防胜于治疗：减少"不听话"的概率

3.7 本章总结与实战演练

3.7.1 本章核心要点回顾

3.7.2 第二章 + 第三章：完整工作流

3.7.3 提示词速查清单

3.7.4 实战演练：综合练习

3.7.5 从本章到下一章

附录：常用 Prompt 模板库

A.1 项目创建类模板

A.2 代码修改类模板

A.3 问题解决类模板

A.4 文档生成类模板

第 4 章：实战 —— 从 0 到 1 开发个人工具

4.1 开始之前：整合你的准备工作

4.1.1 回顾第二章成果：小李的待办清单

4.1.2 准备你的 AI IDE

4.1.3 工具准备与环境检查

4.1.4 本节检查清单

4.2 第一轮：搭建页面框架

4.2.1 用第三章框架写第一个 Prompt

4.2.2 生成静态页面

4.2.3 调整样式与布局

4.2.4 阶段性成果检查

4.2.5 完整 Prompt 对话记录

4.3 第二轮：实现核心功能

4.3.1 功能一：添加任务

4.3.2 功能二：删除任务

4.3.3 功能三：标记完成

4.3.4 迭代优化的艺术

4.3.5 阶段性成果检查

4.4 第三轮：让数据活起来

4.4.1 为什么需要数据存储

4.4.2 使用本地存储（localStorage）

4.4.3 测试数据持久化

4.4.4 完整功能验证与阶段回顾

4.5 Debug 实战：当 AI 代码报错时

4.5.1 常见错误类型速查

4.5.2 用 AI 帮你修 AI 的代码

4.5.3 真实案例复盘

4.5.4 Debug 心法总结

4.6 收尾与回顾

4.6.1 完整项目展示

4.6.2 从 0 到 1 的完整历程回顾

4.6.3 你学到了什么

4.6.4 下一步可以做什么

第 5 章：精进 —— 从「能用」到「好用」

5.1 后悔药：代码改崩了怎么办

5.1.1 一个真实的噩梦场景

5.1.2 零门槛方案：AI IDE 自带历史功能

5.1.3 手动版本管理

5.1.4 进阶方案：GitHub Desktop 入门

5.1.5 GitHub Desktop 实操

5.1.6 版本管理最佳实践

5.2 见世面：把网页发到互联网上

5.2.1 为什么要部署上线

5.2.2 部署平台选择指南

5.2.3 Zeabur 部署实战（大陆首选）

5.2.4 Vercel 部署实战

5.2.5 部署后的实用操作

5.2.6 大陆访问解决方案（可选）

5.2.7 其他部署选择

5.2.8 部署常见问题

5.2.9 本节检查清单

5.3 护城河：AI 时代的安全意识

5.3.0 2025年安全现状：触目惊心的数字

5.3.1 为什么这一节很重要

5.3.2 绝对禁区：永远不要告诉 AI

5.3.3 代码中的安全隐患

5.3.4 初学者安全检查清单

5.3.5 AI 推荐的库安全吗（Slopsquatting）

5.3.6 永远审查代码

5.3.7 本节要点总结

5.4 再进化：项目的持续迭代与优化

5.4.1 你的项目不是一次性的

5.4.2 收集反馈

5.4.3 功能扩展

5.4.4 代码优化

5.4.5 从项目到作品集

5.5 知边界：Vibe Coding 的能与不能

5.5.1 Vibe Coding 能做什么

5.5.2 Vibe Coding 的局限性

5.5.3 什么信号告诉你需要学更多

5.5.4 正确的心态

5.5.5 进阶版预告

5.6 启程前：本章总结与进阶预告

5.6.1 本章核心要点回顾

5.6.2 基础版完整学习路径

5.6.3 你现在能做什么

5.6.4 进入进阶版的准备

5.6.5 结语

结语：给未来的你

下部预告：Vibe Coding 全栈实战教程

进阶版核心内容详解

附录

A. Prompt 速查清单

B.1 JavaScript 错误

B.2 CSS/样式问题

B.3 交互问题

B.4 工具问题

C.1 AI 编程相关

C.2 开发相关

C.3 技术相关

D.1 对话式 AI 对比

D.2 IDE 集成式对比

D.3 专用 AI IDE 对比

D.4 部署平台对比

E.1 个人工具类（10 个）

E.2 效率工具类（10 个）

E.3 内容创作类（10 个）

E.4 数据可视化类（10 个）

Claude How To Master Claude Code in a Weekend

01 slash commands

Slash Commands

commit

Documentation Refactor

API Documentation Generator

Code Optimization

Pull Request Preparation Checklist

Commit and Push Everything

Setup CI/CD Pipeline

Expand Unit Tests

02 memory

Memory Guide

API Module Standards

My Development Preferences

Project Configuration

03 skills

Agent Skills Guide

blog draft

SKILL

templates

[Blog Post Title]

Blog Post Outline: [Title]

brand voice

Brand Voice Skill

Brand Voice Tone Examples

claude md

Project Name

code review

Code Review Skill

templates

Code Review Finding Template

Code Review Checklist

doc generator

API Documentation Generator Skill

refactor

Code Refactoring Skill

references

Code Smells Catalog

Refactoring Catalog

templates

Refactoring Plan Template

04 subagents

Subagents Complete Reference Guide

Clean Code Reviewer Agent

Code Reviewer Agent

Data Scientist Agent

Debugger Agent

Documentation Writer Agent

Implementation Agent

Secure Code Reviewer

Test Engineer Agent

05 mcp

MCP (Model Context Protocol)

06 hooks

Hooks

07 plugins

Claude Code Plugins

devops automation

DevOps Automation Plugin

agents

Alert Analyzer

Deployment Specialist

Incident Commander

commands

Deploy Application

Incident Response

Rollback Deployment

System Status Check

documentation

Documentation Plugin

agents

API Documenter

Code Commentator

Example Generator

commands

API Documentation Generator

README Generator

Documentation Sync

Documentation Validation

templates

ADR [Number]: [Title]

[METHOD] /api/v1/[endpoint]

Function: functionName

pr review

PR Review Plugin

agents

Performance Analyzer

Security Reviewer

Test Checker

commands

Security Check

Test Coverage Check

PR Review

08 checkpoints

Checkpoints and Rewind

Checkpoint Examples

09 advanced features

Advanced Features

Planning Mode Examples

10 cli

CLI Reference

Claude Code Feature Catalog

📚 Claude Code Learning Roadmap

Master Claude Code in a Weekend

Complete Guide to Claude Concepts

Clean Code Rules for AI Code Generation

Claude How To Master Claude Code in a Weekend

resources

Claude How To Design System

Quick Start Brand Assets

Claude How To Brand Assets

部署指南

页面导航

Code Commentator

Improves code documentation:

JSDoc/docstring comments
Inline explanations
Parameter descriptions
Return type documentation
Usage examples

Pager

上一篇API Documenter

下一篇Example Generator

Alpha内测提示：当前为早期内部构建版本，部分章节仍在完善中，也可能存在问题，欢迎在下方评论区留言。

反馈与建议：发现内容有误或想补充？欢迎在下方评论区留言。