docs: 新增 4 篇文章并更新教程体系
新增文章： - CBTI 程序员人格测试项目实战（Cursor） - AI 开源项目学习网站项目实战（Codex + GPT-5.5） - AI 提肛助手项目实战（Claude Code + DeepSeek V4） - GitHub Copilot Coding Agent 云端自动开发实战 内容更新： - 概念大全：扩充 RAG 进阶方案和 Harness Engineering 核心模块 - AI 编程技术：补充 16 种 RAG 实现方案分层概览和选型建议 - 命令行工具：新增 CC Switch 切换第三方模型章节 - 工具大全：支线新增 Copilot Coding Agent 引用 - 项目实战导读：新增 3 个原创项目提及 - 五大核心心法：引用 Harness Engineering 概念 - 模型选择指南/成本控制：补充小米 MiMo 选项 - 程序员成长大法、作者页面更新 Made-with: Cursor
This commit is contained in:
liyupi
@@ -126,6 +126,7 @@
|
|||||||
工具实战板块主要讲解特定工具的使用方法和实战案例，可以根据需要选择性学习。
|
工具实战板块主要讲解特定工具的使用方法和实战案例，可以根据需要选择性学习。
|
||||||
|
|
||||||
- **VSCode + GitHub Copilot 实战**：从安装到实战的完整教程，涵盖 Agent 模式、MCP 管理、Skills 技能包、自定义智能体等核心特性
|
- **VSCode + GitHub Copilot 实战**：从安装到实战的完整教程，涵盖 Agent 模式、MCP 管理、Skills 技能包、自定义智能体等核心特性
|
||||||
|
- **GitHub Copilot Coding Agent 实战**：全程云端、不开 IDE，用 GitHub 网页版打造 AI 智能体，体验从开发到部署、代码审查、Issue 处理的全流程
|
||||||
- **规范驱动开发**：Spec-kit、OpenSpec 的详细使用教程
|
- **规范驱动开发**：Spec-kit、OpenSpec 的详细使用教程
|
||||||
- **AI 技能库**：Agent Skills、Superpowers 的安装和进阶用法
|
- **AI 技能库**：Agent Skills、Superpowers 的安装和进阶用法
|
||||||
- **命令行工具实测**：OpenCode、Gemini CLI、TRAE SOLO 等工具的实战评测
|
- **命令行工具实测**：OpenCode、Gemini CLI、TRAE SOLO 等工具的实战评测
|
||||||
|
|||||||
@@ -161,6 +161,7 @@ Gemini 的价格和获取方式：
|
|||||||
- 月之暗面 Kimi 在很早之前就支持超长上下文能力（200 万字），在国产模型中独树一帜。特别适合处理大型项目的代码，可以一次性处理 500 个文件。
|
- 月之暗面 Kimi 在很早之前就支持超长上下文能力（200 万字），在国产模型中独树一帜。特别适合处理大型项目的代码，可以一次性处理 500 个文件。
|
||||||
- 腾讯混元 CodeBuddy 能够和腾讯云服务深度集成，原生对接 3000+ 云 API，有等保三级安全认证，适合企业使用，而且价格便宜。
|
- 腾讯混元 CodeBuddy 能够和腾讯云服务深度集成，原生对接 3000+ 云 API，有等保三级安全认证，适合企业使用，而且价格便宜。
|
||||||
- 百度文心一言有免费额度，而且和百度的生态（比如百度秒哒平台）深度集成，适合创意类小项目需要快速商业化的场景。
|
- 百度文心一言有免费额度，而且和百度的生态（比如百度秒哒平台）深度集成，适合创意类小项目需要快速商业化的场景。
|
||||||
|
- 小米 MiMo 也是值得关注的新选手。旗舰版 MiMo-V2.5-Pro 采用万亿参数 MoE 架构，支持 100 万 tokens 超长上下文，官方主打 Agent 编程能力和 token 效率。你可以通过 CC Switch 等工具便捷地切换到 MiMo 模型使用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,8 @@
|
|||||||
|
|
||||||
命令行工具没有花哨的界面，只有简洁的文字交互。但正是这种极简，让它们拥有了极致的效率和灵活性。
|
命令行工具没有花哨的界面，只有简洁的文字交互。但正是这种极简，让它们拥有了极致的效率和灵活性。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
这篇文章，我会重点介绍 Claude Code 这个最火的命令行 AI 编程工具，并分享更多值得关注的命令行 AI 编程工具。
|
这篇文章，我会重点介绍 Claude Code 这个最火的命令行 AI 编程工具，并分享更多值得关注的命令行 AI 编程工具。
|
||||||
|
|
||||||
|
|
||||||
@@ -108,10 +110,14 @@ Skills 的核心价值在于：人提供专业知识和方法论，AI 提供智
|
|||||||
|
|
||||||
让我用一个实际例子来演示 Claude Code 的使用流程。
|
让我用一个实际例子来演示 Claude Code 的使用流程。
|
||||||
|
|
||||||
1）首先一行命令安装 Claude Code：
|
0）首先确保你的电脑有 Node.js 环境和 npm 软件依赖安装工具，没有的话，直接到 [Node 官网](https://nodejs.org/en/download) 下载傻瓜式安装包就好：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
1）打开终端，输入一行命令安装 Claude Code：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl -fsSL https://claude.ai/install.sh | bash
|
npm install -g @anthropic-ai/claude-code
|
||||||
```
|
```
|
||||||
|
|
||||||
2）然后执行 `claude` 命令打开程序，默认是需要登录 Claude 账号的，而且 Claude Code 对中国地区有访问限制，直接访问 Anthropic 官网或使用 Claude 的 API 可能会被屏蔽，真狗！
|
2）然后执行 `claude` 命令打开程序，默认是需要登录 Claude 账号的，而且 Claude Code 对中国地区有访问限制，直接访问 Anthropic 官网或使用 Claude 的 API 可能会被屏蔽，真狗！
|
||||||
@@ -187,6 +193,30 @@ curl -fsSL https://claude.ai/install.sh | bash
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 切换第三方模型
|
||||||
|
|
||||||
|
Claude Code 虽然默认使用 Anthropic 的 Claude 模型，但它是支持切换第三方模型的。很多国产大模型（如 DeepSeek）都提供了兼容 OpenAI 格式的 API，可以直接对接 Claude Code 使用。
|
||||||
|
|
||||||
|
推荐使用开源工具 **CC Switch** 来可视化管理 Claude Code 的模型配置。它内置了 50 多个供应商预设，一键切换不同的模型供应商，不用自己手动改配置文件。
|
||||||
|
|
||||||
|
> 开源指路：https://github.com/farion1231/cc-switch
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
以切换 DeepSeek V4 为例，操作步骤如下：
|
||||||
|
|
||||||
|
1. 安装 CC Switch（Mac 用户可通过 Homebrew 安装）
|
||||||
|
2. 运行软件，添加 DeepSeek 供应商
|
||||||
|
3. 填写从 DeepSeek 开放平台获取的 API Key
|
||||||
|
4. 设置主模型为 DeepSeek-V4-Pro（Agent 能力和复杂推理更强）
|
||||||
|
5. 保存并启用，重新进入 Claude Code 即可使用
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
通过 CC Switch，你还可以在 DeepSeek、小米 MiMo 等多个国产模型之间自由切换，按需选择最合适的模型。关于用 Claude Code + DeepSeek V4 开发完整项目的实战经验，可以阅读本教程项目实战板块「鱼皮的原创项目」中的《Claude Code - AI 提肛助手项目实战》。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 三、其他值得关注的命令行工具
|
## 三、其他值得关注的命令行工具
|
||||||
|
|
||||||
除了 Claude Code，还有一些其他的命令行工具也值得了解。
|
除了 Claude Code，还有一些其他的命令行工具也值得了解。
|
||||||
|
|||||||
@@ -0,0 +1,619 @@
|
|||||||
|
# GitHub Copilot 云端 AI 自动开发实战
|
||||||
|
|
||||||
|
本文介绍如何利用 GitHub Copilot Coding Agent 在云端自动完成从需求分析到全栈开发、测试、部署上线、代码审查、Issue 处理、定时任务的全流程。全程不需要打开 IDE，在 GitHub 网页版即可完成。
|
||||||
|
|
||||||
|
大家好，我是程序员鱼皮。
|
||||||
|
|
||||||
|
前两天，我受邀参加了微软 AI Tour 大会，还在会上做了一场演讲。
|
||||||
|
|
||||||
|
主题是「带你看 GitHub Copilot 的另一面：智能体装机，不只在 IDE」。这名字是大会方包装的，说实话我自己看着都一头雾水。。。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
简单来说就是：**手把手教大家如何用 GitHub + Copilot，打造属于自己的 AI 智能体。**
|
||||||
|
|
||||||
|
真没想到有这么多人来听分享，看来大家对这个选题确实很感兴趣。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这篇文章就是演讲的完整文字版，希望能给大家一些启发和帮助。
|
||||||
|
|
||||||
|
⭐️ 视频版：https://bilibili.com/video/BV1aFoyBnE4D
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 背景和思考
|
||||||
|
|
||||||
|
最近「一人公司」和「龙虾」的概念特别火，很多人都在玩 AI 智能体，比如 OpenClaw 养虾、Hermes Agent 养马什么的。
|
||||||
|
|
||||||
|
现在的 AI 智能体不只是聊天，能持续干活、越用越懂你、随处使用。
|
||||||
|
|
||||||
|
但是，你有没有想过，扒开所有花哨的包装，**一个 AI 智能体的本质到底是什么？**
|
||||||
|
|
||||||
|
我觉得是四样东西：**角色、记忆、技能、工作空间**。
|
||||||
|
|
||||||
|
没有工作空间，角色无处定义、记忆无处存储、技能无处挂载。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
除了自己的电脑之外，还有其他的工作空间吗？
|
||||||
|
|
||||||
|
作为一名开源作者，我本能地想到 GitHub 这个全球最大的代码托管平台，它的仓库天然就是 **持久化的文件空间**；而 GitHub Copilot 又提供了强大的 AI 代理执行能力，还支持网页版使用。
|
||||||
|
|
||||||
|
那干脆把 GitHub 仓库当成养 AI 智能体的「个人电脑」，不就可以了么？
|
||||||
|
|
||||||
|
所以下面我要手把手教大家：**怎么用 GitHub 打造一只你自己的 AI 小龙虾。**
|
||||||
|
|
||||||
|
我把它称为「给虾」：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
接下来我会一步步演示，如何利用 GitHub 搭建一个超级智能体，不需要打开 IDE，也能完成从需求分析到全栈开发、测试、文档生成、部署上线、SEO 优化、代码审查、自动处理 Issues、定时任务的全流程。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 1、初始化 Agent
|
||||||
|
|
||||||
|
打开 GitHub 网页版，你会发现 GitHub Copilot 的对话入口随处可见，已经融入到 GitHub 的各个角落了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我们先新建一个叫 `github-claw` 的仓库，作为 AI 智能体的工作空间。
|
||||||
|
|
||||||
|
创建仓库时就可以填入初始化的提示词，这其实就是我们给这只 AI 小龙虾注入灵魂的过程。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在开始之前，建议先从右上角进入 GitHub Copilot 的设置，开启联网搜索功能，这样 AI 能获取更新的信息。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后我们填入初始化 Agent 的提示词。这段提示词定义了龙虾的角色、行为规则和记忆机制：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
你是这个仓库中长期驻留的个人 AI 助手与主要代理，像 OpenClaw 一样，不只是回答问题，还要持续做事、积累记忆、维护角色，并让这个仓库逐渐成为可长期演化的个人 AI 空间。
|
||||||
|
|
||||||
|
请先参考 OpenClaw 官方文档，理解它作为 "能做事的个人 AI 助手" 的定位，以及角色、记忆、技能和工作空间的思路：https://docs.openclaw.ai
|
||||||
|
|
||||||
|
然后把这个仓库初始化为适合 GitHub Copilot 网页版长期使用的个人 AI 工作空间，让我以后在新的 Copilot 对话里，也能继续沿用同一个角色、记忆和工作方式。
|
||||||
|
|
||||||
|
请先创建并提交一个简洁、可长期复用的 AGENTS.md，在里面定义：
|
||||||
|
- 你是谁
|
||||||
|
- 你如何在这个仓库中工作
|
||||||
|
- 你如何管理任务与记忆
|
||||||
|
- 你每次完成任务后要做的收尾动作
|
||||||
|
|
||||||
|
要求：
|
||||||
|
- 把仓库当作持久化的文件与记忆空间，可保存任何有用文件
|
||||||
|
- 用文件作为记忆的真实来源，不把重要信息只留在当前对话里
|
||||||
|
- 将长期记忆与每日/临时记录区分开
|
||||||
|
- 规则简洁、实用、可扩展，不要过度设计
|
||||||
|
|
||||||
|
如果确有必要，可以补充最少量的 MEMORY.md、memory/ 或 SOUL.md，但请保持轻量，并以 AGENTS.md 为核心。
|
||||||
|
```
|
||||||
|
|
||||||
|
可以看到，Copilot 自动初始化了一个工作空间，还自动集成了 GitHub 的 MCP 工具：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
任务完成后，它会自动创建一个 PR。我们人工检查一下，没问题就合并。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
对了，如果你发现有「网络连接失败」的提示，是因为 Copilot coding agent 默认有防火墙限制。需要到仓库设置里关闭防火墙：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Agent 初始化完成后，你可以跟它打个招呼，它会通过文档获取到记忆：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 2、开发上线网站
|
||||||
|
|
||||||
|
Agent 初始化好了，接下来让它干活。
|
||||||
|
|
||||||
|
让它帮我的开源 AI 知识库项目 `ai-guide` 开发一个高颜值的导航官网，提示词如下：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请为我开源的 AI 知识库项目（ai-guide）开发并部署一个高颜值的导航官网，突出项目介绍、精选内容、路线图、更新日志、增长趋势等，吸引更多人关注我的开源仓库。必须使用 UI-UX-PRO-MAX 技能全面优化前端界面，完成后直接给出可上线访问的地址。必须自主完成任务
|
||||||
|
```
|
||||||
|
|
||||||
|
在仓库的 Agents 面板中，可以直接发起新的对话任务。
|
||||||
|
|
||||||
|
Copilot 会通过 GitHub MCP 获取我的开源项目信息，然后自动开始开发网站：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
生成代码后，它还会自动执行代码检查，发现问题就自主修复：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
接着它会自动创建 GitHub Actions 工作流，利用 GitHub Pages 完成静态网站的部署：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
合并 PR 后，还需要进入仓库设置里的 GitHub Pages，选择「从工作流部署」（注意仓库必须是公开的）：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后手动触发一次工作流，后续每次推送代码都会自动触发部署：
|
||||||
|
|
||||||
|
> 注意检查 workflow 里的分支名配置，要和你仓库的默认分支一致（比如 `master` 还是 `main`）。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
成功部署后，页面就可以正常访问了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 3、使用技能
|
||||||
|
|
||||||
|
不过你可能注意到了，虽然我在提示词里提到了要用 `UI-UX-PRO-MAX` 技能，但 AI 并没有真正安装它。
|
||||||
|
|
||||||
|
当我命令它用技能时，它反而自己造了一个，这就不对了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
所以我们需要新开一个对话，通过提示词教会 AI 如何正确发现、安装和使用技能：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请优化当前仓库的工作流与 AGENTS.md，让这个仓库中的主要 AI 代理具备稳定的技能发现、安装和使用机制。
|
||||||
|
|
||||||
|
明确约定如下：
|
||||||
|
- 项目级技能统一保存在 .agents/skills/
|
||||||
|
- 每个技能使用独立目录，例如 .agents/skills/<skill-name>/
|
||||||
|
- 技能的主入口文件为 SKILL.md
|
||||||
|
- 如果技能包含脚本、模板或资源文件，也与 SKILL.md 放在同一技能目录下
|
||||||
|
|
||||||
|
请在 AGENTS.md 中加入简洁、可执行的规则，使代理在后续工作中遵循以下流程：
|
||||||
|
1. 接到任务后，先检查本地 .agents/skills/ 中是否已有可复用技能
|
||||||
|
2. 如果本地没有合适技能，再自动到 GitHub 开源仓库和 Skills.sh 搜索相关技能
|
||||||
|
3. 优先选择来源清晰、结构规范、说明完整、风险较低的技能
|
||||||
|
4. 安装技能时，将其保存到 .agents/skills/<skill-name>/
|
||||||
|
5. 安装后更新必要说明，使后续对话能够直接复用这些技能
|
||||||
|
6. 如果找不到合适技能，再自行完成任务，但优先沉淀成可复用技能
|
||||||
|
7. 避免重复安装相同技能，并尽量保持技能目录整洁、命名清晰、可维护
|
||||||
|
```
|
||||||
|
|
||||||
|
AI 顺利完成了任务，制定了技能标准：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
搞定了技能规范，接下来让 AI 正确安装并使用 `UI-UX-PRO-MAX` 技能来优化网站：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
帮我废弃掉原来错误的 UI-UX-PRO-MAX 技能，安装正确的 UI-UX-PRO-MAX 技能，并利用这个技能优化之前的 ai-guide 导航网站
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这次成功了！AI 智能体从 GitHub 上正确复制了技能目录，并用技能优化了网站的 UI：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
页面移除了多余的 Emoji，看起来更专业了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
更重要的是，它还更新了 `AGENTS.md` 工作流、记忆和任务文件，实现了 AI 智能体的进化，之后它就能自己发现和使用技能了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 4、文档生成
|
||||||
|
|
||||||
|
文档是开源项目的牌面，我们让 AI 帮忙生成一份图文并茂的项目介绍文档 README.md。
|
||||||
|
|
||||||
|
这里有个小技巧，先人工挑选一个靠谱的 AI 生图技能，然后到 [鱼皮 AI 导航](https://ai.codefather.cn/) 上找一个你喜欢的绘图风格提示词模板，一起提供给 AI 参考。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
给 AI 的提示词：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请先阅读当前仓库中的 ai-guide 导航网站，并为它生成一份高质量的 README.md 项目介绍文档，同时配套生成几张帮助理解和宣传网站的动漫风格图片，保存并在 README 中引用。
|
||||||
|
|
||||||
|
请先安装并使用这个 AI 生图技能：npx skills add https://github.com/inferen-sh/skills --skill ai-image-generation。我可以提供 Gemini NanoBanana 的 API Key，请安全使用，不要写入仓库。
|
||||||
|
|
||||||
|
AI 生图的风格参考下面的提示词模板：@已经复制的模板
|
||||||
|
```
|
||||||
|
|
||||||
|
AI 完成任务后会请求一个生图 API Key，我们到 Google AI Studio 上获取后发给 AI。它会注重安全性，仅临时使用这个密钥：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
AI 智能体成功调用技能，生成了图文并茂的文档：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
不过这次它误改了网站首页的文件。没关系，通过 PR 我们发现了这个问题，不合并就行，再让 AI 自主修复。
|
||||||
|
|
||||||
|
这里也提醒大家：**虽然 AI 写代码能力很强了，但代码审查依然很重要。**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 5、SEO 优化
|
||||||
|
|
||||||
|
开源项目上线后，想把它推广出去，需要做好 SEO 搜索引擎优化，让用户能在搜索引擎上搜索到你的网站。
|
||||||
|
|
||||||
|
我们用一个专业的 SEO 技能来优化网站：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请先阅读当前仓库中的 ai-guide 导航网站，并对它进行一轮高质量的 SEO 优化，直接完善站点的标题、描述、结构化信息、页面语义、链接结构和可索引性。
|
||||||
|
|
||||||
|
做法上，请先安装并使用这个 SEO 技能：npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit，然后把优化结果直接落实到项目代码中。
|
||||||
|
```
|
||||||
|
|
||||||
|
GitHub Copilot 整合了 Claude 等多个模型，可以直接在云端启动不同的 AI 来完成任务：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
直接在网页端爽用 Claude 模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
很快 AI 就完成了 SEO 优化，网站更容易被搜索引擎收录了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
效果如图，网页上增加了一堆搜索关键词：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
可以看出，我们的 AI 智能体已经能够熟练运用各种技能了。之后你再新开一个对话，就可以直接使用已经安装好的技能，把 GitHub 当成安全隔离的「电脑空间」来用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 6、开发前后端全栈项目
|
||||||
|
|
||||||
|
既然 GitHub 提供了完整的工作空间，那也可以用来开发包含后端的全栈项目。
|
||||||
|
|
||||||
|
比如输入下面的提示词，让 AI 帮我开发个《多媒体处理平台》：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
在当前仓库内新开发一个完整可运行的《多媒体处理平台》前后端项目：
|
||||||
|
- 前端使用 Vue 实现多页面，支持图片、音频和视频的压缩与格式转换
|
||||||
|
- 后端使用 Python + SQLite + FFmpeg 等
|
||||||
|
|
||||||
|
请自主完成项目的前后端开发、联调、依赖配置、示例数据、必要文档和本地运行方式，并主动进行测试验证，确保图片、音频和视频的压缩与格式转换流程都能实际可用。
|
||||||
|
|
||||||
|
除非确实必要，否则不要中途停下来向我确认，直接持续推进到可运行状态。
|
||||||
|
```
|
||||||
|
|
||||||
|
AI 会自己完成环境安装、前后端开发、自动化测试、文档生成，全流程一条龙：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注意，这些全部都是在云端执行的。哪怕你把网页、网络甚至电脑都关了，也不影响它继续工作。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 7、测试验证
|
||||||
|
|
||||||
|
涉及后端的项目还是得好好测试一下。有 2 种方式可以访问和测试。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 本地接管测试
|
||||||
|
|
||||||
|
开发完成后，你可以在 AI 工作的对话框中点击「Open in VS Code」，或者用 Copilot CLI 在本地接管项目：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
VS Code 接管项目后，会自动克隆仓库到本地并打开。
|
||||||
|
|
||||||
|
然后你可以让 AI 帮你运行项目：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
帮我运行这个项目的前后端
|
||||||
|
```
|
||||||
|
|
||||||
|
它会自动创建 Python 虚拟环境，关键步骤会找你确认（比如安装依赖和执行命令），非常安全：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后人工打开浏览器测试，有问题再让 AI 修复就好：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 在线运行测试
|
||||||
|
|
||||||
|
如果不想开本地 IDE，还可以用 GitHub Codespaces。
|
||||||
|
|
||||||
|
Codespaces 是 GitHub 提供的云端开发环境，可以在浏览器里直接编辑代码、运行项目，体验和本地 VS Code 几乎一样。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
需要先让 AI 帮忙创建 Codespaces 所需的配置，这样创建环境后就会自动完成初始化并运行项目：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请继续为这个项目补全 GitHub Codespaces 开发环境配置，创建 .devcontainer/ 相关文件，使其适配这个前后端项目，并确保在创建 Codespace 后能够自动安装前后端依赖、安装 FFmpeg、初始化必要环境、自动启动 Vue 前端与 Python 后端，并正确转发访问端口。
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
AI 创建了所需的配置文件：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后在 GitHub 上创建 Codespace：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
创建完成后，正常情况下可以直接访问前端和后端（注意前端请求后端的地址可能需要调整）：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
如果访问不了，也可以进入 Codespace 的终端手动执行启动脚本（注意脚本的执行路径要正确）：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
你看，这个操作界面是不是和本地的 VS Code 一样？而且还能直接在网页版里使用 Copilot。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 8、代码审查
|
||||||
|
|
||||||
|
代码审查是保障代码质量的关键环节。GitHub Copilot 提供了自动和手动两种审查方式。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 自动代码审查
|
||||||
|
|
||||||
|
Copilot coding agent 开发的代码，本身就会自动执行一轮代码审查：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
同时还会自动执行安全检测：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
此外，你还可以在仓库设置中开启对所有 PR 的自动审查。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
把 Copilot 当成你的「同事」就好，只要把它加为 Reviewer，就会自动触发审查：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
审查结果还支持快捷修复，你可以根据它的建议直接采纳修改，一键提交。也可以通过自定义指令来调整审查的侧重点：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 手动代码审查
|
||||||
|
|
||||||
|
把 GitHub Copilot 当成你的同事，只要在 PR 中把它设置为 Reviewers，就会触发代码审查：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
你也可以在 PR 的评论里直接 `@copilot`，比如让它把端口号恢复成原样。
|
||||||
|
|
||||||
|
这种方式更适合让 Copilot 根据审查意见直接改代码、修复 Bug：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 9、处理 Issues
|
||||||
|
|
||||||
|
维护开源项目的过程中，肯定少不了处理用户提的 Issues（问题），这也是很花时间的事情，可以让 AI 智能体自动完成。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 手动处理 Issues
|
||||||
|
|
||||||
|
GitHub Copilot 官方支持让 Copilot coding agent 接手 Issue、自动创建 PR 并修复。
|
||||||
|
|
||||||
|
操作很简单，进入一个 Issue，把它分配给 Copilot 就行：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Copilot 会自动创建一个 PR：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
同时创建一个工作会话来分析和修复这个 Issue：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 自动回复 Issues + 自动修复 Bug
|
||||||
|
|
||||||
|
还可以让 AI 全自动帮我们回复 Issues 并修复 Bug。
|
||||||
|
|
||||||
|
利用 GitHub Actions 的自动化能力，我们只需要补一个「自动派单」的工作流就行。
|
||||||
|
|
||||||
|
给 AI 一段提示词：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
为当前仓库创建一套 Issue 自动化处理工作流：当有新的 Issue 创建时，先自动回复一条简洁的确认与补充信息提示；如果该 Issue 被识别为 bug（比如带有 bug 标签或满足明确的 bug 条件），则自动将该 Issue 分配给 GitHub Copilot coding agent 处理，并让 Copilot 后续自动开 PR 修复。
|
||||||
|
|
||||||
|
请直接完成所需的 GitHub Actions 工作流、必要配置和说明，优先采用简洁、稳定的实现方式。
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
不过需要注意的是，自动生成的脚本可能会有问题，比如只回复了却没有真正分配给 Copilot 去修复：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这时候可以再让 AI 根据官方文档修复。核心要注意几点：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请修复当前仓库中 Issue 自动化工作流的 Copilot 分配逻辑。现在工作流虽然会自动评论"已分配给 Copilot"，但实际上并没有真正成功分配。
|
||||||
|
|
||||||
|
请参考 GitHub 官方对 Copilot coding agent 的 Issue API 分配方式，改成正确可用的实现：使用正确的 Copilot assignee copilot-swe-agent[bot]、必要的 agent_assignment 参数，并且只有在真实确认分配成功后才发表评论；如果分配失败，也要给出明确、真实的失败提示，不要误报成功。
|
||||||
|
|
||||||
|
另外，请顺手优化这个工作流的结构：opened 事件只负责自动回复，labeled + bug 事件只负责分配给 Copilot，保证整体逻辑更清晰稳定。
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
而且这里需要用户级别的 Personal Access Token（PAT），不能用默认的 GITHUB_TOKEN。
|
||||||
|
|
||||||
|
先到 GitHub 申请 PAT，开通相应的仓库权限：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后把密钥存放到仓库的 Secrets 中，在工作流脚本中通过 `secrets.COPILOT_ASSIGN_TOKEN` 引用：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
引用 token 的示例代码如下：
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- name: Assign issue to Copilot coding agent
|
||||||
|
uses: actions/github-script@v7
|
||||||
|
with:
|
||||||
|
github-token: ${{ secrets.COPILOT_ASSIGN_TOKEN }}
|
||||||
|
script: |
|
||||||
|
```
|
||||||
|
|
||||||
|
然后我只要提一个打了 `bug` 标签的 Issue，就会触发 GitHub Actions，自动把 Bug 分配给 AI 处理：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 10、定时任务
|
||||||
|
|
||||||
|
OpenClaw 的一大亮点是可以执行定时任务，那咱们的 “给虾” 也要有！
|
||||||
|
|
||||||
|
但是 GitHub 仓库不是一台常驻运行的电脑，怎么做定时任务呢？
|
||||||
|
|
||||||
|
我有个主意，利用 GitHub Actions 的 `schedule` 触发器，就能给 AI 智能体补上「定时触发」的能力。
|
||||||
|
|
||||||
|
比如让它每天自动推送最新的 AI 科技热点：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
为当前仓库创建一个可长期使用的定时任务工作流，利用 GitHub Actions 模拟 OpenClaw 风格的定时触发能力。
|
||||||
|
|
||||||
|
目标：每天北京时间中午 13 点，自动收集并总结本周最新的 AI 科技热点，并以 "推送日报" 的形式发送给我。
|
||||||
|
|
||||||
|
优先采用简单稳定的实现方式：默认先推送到 GitHub Issue；如果仓库中已有邮箱等其他 webhook 配置，也可以优先复用。
|
||||||
|
```
|
||||||
|
|
||||||
|
当然，你还可以选择对接更多第三方渠道，比如邮件、Telegram 等：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
任务完成，创建了定时触发的 GitHub 工作流：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
之后，每天会自动生成一份 AI 科技日报：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注意，GitHub Actions 的 schedule 定时触发会有延迟，官方文档也说明了在高负载时段（尤其是每小时开头）可能延迟甚至丢弃任务，所以不适合对执行时间要求精准的场景。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 11、封装 AI 智能体
|
||||||
|
|
||||||
|
到这里，我们的 AI 小龙虾已经养得很肥了。它有了角色、记忆、技能、自动化流水线。不妨把它封装起来，分享给别人用。
|
||||||
|
|
||||||
|
于是，我给 Copilot 这段提示词，让它帮我封装成一个 Agent Skill：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
请把当前仓库里已经实现的所有 "把 GitHub Copilot 变成小龙虾" 的能力，系统化封装成一个可复用的 agent skill，名称为 github-claw，并放到仓库的 skills/github-claw/ 目录下。
|
||||||
|
|
||||||
|
在开始之前，请先参考 anthropics/skills 仓库中的 skill-creator 结构与规范，按规范创建完整技能文件，而不是只写一个简单的 SKILL.md：
|
||||||
|
https://github.com/anthropics/skills/tree/main/skills/skill-creator
|
||||||
|
|
||||||
|
这个 github-claw skill 的目标是：让其他用户只要安装这个技能，就能尽可能快速地把 GitHub Copilot 仓库工作流变成一个 OpenClaw 风格的小龙虾系统，具备并串联以下能力：
|
||||||
|
- 角色与人格
|
||||||
|
- 文件化记忆与长期上下文
|
||||||
|
- 技能发现、安装与管理
|
||||||
|
- 定时任务 / GitHub Actions 自动化
|
||||||
|
- Issue 自动回复与自动分配给 Copilot
|
||||||
|
- PR 审查与自动化工作流
|
||||||
|
- 编码开发、部署、网站生成与项目推进
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
封装好的 `github-claw` 技能被单独放到了一个干净的分支：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这样一来，以后任何人只要新建一个 GitHub 仓库，安装上这个技能，就能立刻拥有一只自己的 AI 小龙虾了。
|
||||||
|
|
||||||
|
> GitHub Claw 项目开源：https://github.com/liyupi/github-claw
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
至此，我们全程没有打开 IDE，利用 GitHub 网页版就打造了自己的 AI 智能体。
|
||||||
|
|
||||||
|
你可以让它帮你完成从需求分析到全栈开发、测试、文档、部署上线、SEO 优化、代码审查、Issue 自动处理、定时任务的全流程。
|
||||||
|
|
||||||
|
而且因为 GitHub Copilot 深度融合在网页端，以上所有任务都可以通过手机打开 GitHub 网页或 GitHub Mobile App 完成，随时随地使用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Copilot 的优势在于：
|
||||||
|
|
||||||
|
1）全程云端执行：Copilot coding agent 在 GitHub Actions 支持的临时环境中独立工作，非常安全。你可以关掉网页甚至关机，AI 会继续干活。
|
||||||
|
|
||||||
|
2）端到端交付能力：GitHub Copilot 能够贯穿整个开发生命周期，从写代码到 PR 审查到部署，全部在 GitHub 生态内闭环完成。
|
||||||
|
|
||||||
|
3）多模型灵活选择：GitHub 提供了多个模型供选择，可以根据不同任务类型适配最合适的模型，节省成本。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## GitHub Copilot 更多能力
|
||||||
|
|
||||||
|
除了今天演示的核心流程，GitHub Copilot 还有很多值得探索的能力：
|
||||||
|
|
||||||
|
1）Coding Agent MCP 配置：在仓库设置中可以配置 Copilot 的权限、工具和 MCP Server（比如接入 Context7、Firecrawl 等 MCP），扩展 Copilot 的外部数据获取和操作能力。
|
||||||
|
|
||||||
|
2）GitHub 内置 Memory：Copilot 可以自动存储它在仓库工作中推断出的有用信息，形成持久化的仓库级记忆。后续它在这个仓库里工作时会自动调用这些记忆，效果越用越好。目前处于 Public Preview 阶段。
|
||||||
|
|
||||||
|
3）Copilot Spaces：一种上下文共享空间，你可以把代码、文档、设计稿等多种资源聚合到一个 Space 里，让 Copilot 在回答和工作时始终基于正确的上下文，适合团队协作场景。
|
||||||
|
|
||||||
|
4）GitHub Spark：通过自然语言描述你的想法，Spark 可以秒出全栈 Web 应用原型，支持实时预览和一键部署到 Azure，不需要写代码。还可以从 Spark 创建 GitHub 仓库，双向同步。
|
||||||
|
|
||||||
|
5）GitHub Copilot CLI：这是一个独立的命令行 AI 工具，可以阅读代码、编辑文件、执行命令、创建 PR，还能把任务委派给专门的 Agent。支持远程会话恢复，在任何终端上都能接着干。
|
||||||
|
|
||||||
|
除了前面主要展示的 Copilot 网页端，桌面端的 GitHub Copilot（VS Code 等 IDE 插件版本）也非常好用，能灵活切换多个大模型，还集成了网络搜索等各种主流工具，支持 MCP 和 Skills，平时我也经常用它带大家开发完整项目。
|
||||||
|
|
||||||
|
比如我的 AI 热点监控工具项目，就是完全利用 GitHub Copilot 在 IDE 中开发出来的。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
如果你想系统学习 GitHub Copilot 的使用方法，可以阅读本教程编程工具板块中的《AI IDE 插件》和同板块「工具实战」中的《VSCode + GitHub Copilot：微软全家桶的 AI 编程实战》。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 推荐资源
|
||||||
|
|
||||||
|
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||||
|
|
||||||
|
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||||
|
|
||||||
|
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||||
|
|
||||||
|
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||||
|
|
||||||
|
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||||
|
|
||||||
@@ -65,6 +65,8 @@
|
|||||||
|
|
||||||
对于想深入学习的同学，可以在完成基础项目后，继续学习《企业项目开发流程》，了解真实的商业项目是如何开发的。或者学习 [鱼皮的原创项目实战教程](https://www.codefather.cn/post/1797431216467001345)，跟着保姆级视频和图文教程做出完整的企业级项目。比如 [AI 万能视频下载总结器](https://www.codefather.cn/course/2027618983506640897)（基于 Cursor，含 Stripe 支付和 SEO/GEO 优化）、[AI 热点监控工具](https://www.codefather.cn/course/2026625439052627970)（基于 GitHub Copilot）和 [GitHub 文档翻译工具](https://www.codefather.cn/course/2014303010343092226)（基于 Cursor）都是很好的 Vibe Coding 实战项目，代码完全开源，零基础也能跟着做出来。
|
对于想深入学习的同学，可以在完成基础项目后，继续学习《企业项目开发流程》，了解真实的商业项目是如何开发的。或者学习 [鱼皮的原创项目实战教程](https://www.codefather.cn/post/1797431216467001345)，跟着保姆级视频和图文教程做出完整的企业级项目。比如 [AI 万能视频下载总结器](https://www.codefather.cn/course/2027618983506640897)（基于 Cursor，含 Stripe 支付和 SEO/GEO 优化）、[AI 热点监控工具](https://www.codefather.cn/course/2026625439052627970)（基于 GitHub Copilot）和 [GitHub 文档翻译工具](https://www.codefather.cn/course/2014303010343092226)（基于 Cursor）都是很好的 Vibe Coding 实战项目，代码完全开源，零基础也能跟着做出来。
|
||||||
|
|
||||||
|
此外，还有用 Cursor 开发的《程序员人格测试 CBTI》（纯前端创意应用）、用 Codex + GPT-5.5 开发的《AI 开源项目学习网站》（全栈 AI 应用）、用 Claude Code + DeepSeek V4 开发的《AI 提肛助手》（前端 AI 应用）等更多有趣的实战项目，涵盖不同的 AI 编程工具和项目类型。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 四、学完这个板块，你能收获什么？
|
## 四、学完这个板块，你能收获什么？
|
||||||
|
|||||||
@@ -0,0 +1,197 @@
|
|||||||
|
# AI 创意应用 - 程序员人格测试 CBTI 项目
|
||||||
|
|
||||||
|
本项目是一个程序员专属的人格测试网站 CBTI（Coder Behavior Type Indicator），用 30 道编程相关的趣味题目测出你的编程人格类型。全程使用 Cursor + Claude 进行 Vibe Coding，1 小时内完成开发上线。
|
||||||
|
|
||||||
|
在线体验：https://cbti.codefather.cn
|
||||||
|
|
||||||
|
项目代码免费开源：https://github.com/liyupi/cbti-test
|
||||||
|
|
||||||
|
大家好，我是程序员鱼皮。
|
||||||
|
|
||||||
|
大家应该听说过 MBTI 人格测试吧？
|
||||||
|
|
||||||
|
没想到，这几天，有个模仿 MBTI 测试的网站突然火了，叫做「SBTI」。
|
||||||
|
|
||||||
|
也是用 30 道选择题来测试出你的人格类型，只不过，结果会更抽象……
|
||||||
|
|
||||||
|
比如我测试出来自己是「握草人」，可能是我还不够抽象？这个人格的解读我都读不懂……
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我看完就想：握草？这个网站为啥能火啊？现在用 AI 编程做这种测试小网站还不简单？要不我也来一个？
|
||||||
|
|
||||||
|
说干就干，于是我花了 1 个小时，用 AI 编程做出了程序员专属的 **CBTI（Coder Behavior Type Indicator）程序员行为类型测试**。
|
||||||
|
|
||||||
|
👉🏻 在线体验：https://cbti.codefather.cn
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
用 30 道题测出你的编程人格，而且代码完全开源。
|
||||||
|
|
||||||
|
👉🏻 开源地址：https://github.com/liyupi/cbti-test
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## CBTI 是什么？
|
||||||
|
|
||||||
|
首先郑重声明，CBTI 是一个有科学依据的正经测试，不是抽象整活的！
|
||||||
|
|
||||||
|
我让 AI 深度分析了 MBTI 和 SBTI 的题库、计分逻辑，还有 MBTI 16personalities 的人格体系，在这个基础上设计了 CBTI 的维度模型。整套测试覆盖代码质量、Bug 处理、团队协作、技术驱动、AI 态度这 5 大方向，一共 15 个维度。
|
||||||
|
|
||||||
|
随便给大家看几道题目感受一下：
|
||||||
|
|
||||||
|
1）产品说「先上，后面优化」，你心想？
|
||||||
|
|
||||||
|
- 后面是哪辈子？行吧先糊上去
|
||||||
|
- 写个 TODO，虽然大概率会变成遗书
|
||||||
|
- 写技术方案，排进迭代里
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
2）周五 5:59 群里弹消息，线上炸了。你？
|
||||||
|
|
||||||
|
- 假装没看到，手机静音，人已消失
|
||||||
|
- 先看看严重不严重
|
||||||
|
- 秒回 “我看看”，打开监控面板
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
而且现在 AI 编程也很火嘛，我也与时俱进加了相关的题。比如 Cursor/Copilot 到期了公司不报销，你？
|
||||||
|
|
||||||
|
- 到期就到期，手写也不是不行
|
||||||
|
- 找找免费替代品
|
||||||
|
- 秒续！求求再给我点 tokens！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我自己测出来是 HACK 野生黑客，座右铭是「又不是不能用.jpg」。个人觉得还挺准，毕竟在 AI 编程时代，我搞过很多 Vibe Coding 的小项目，确实是百无禁忌、能跑就行，做完一个就去搞下一个。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
测试结果共有 28 种人格，命名全是跟编程相关的，比如什么 SUDO 万能管理员、NULL 空指针、CTRL-C 复制粘贴工程师、996 卷王之王、404 隐身人、VIBE 氛围程序员等等。另外还设计了一个隐藏人格 ☕ JAVA 咖啡因驱动开发者，能触发的朋友应该是有点儿东西的……
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 完整开发过程
|
||||||
|
|
||||||
|
这个项目我只花了 1 个小时左右就上线了，全程 Vibe Coding，用 Cursor + Claude 完成。
|
||||||
|
|
||||||
|
没有用什么复杂的方法论，也不需要什么 Harness Engineering，就是不断跟 AI 对话、提需求、给反馈。
|
||||||
|
|
||||||
|
下面分享一下关键流程。
|
||||||
|
|
||||||
|
**1、分析参考项目，提取产品精髓**
|
||||||
|
|
||||||
|
给 AI 的初始提示词很重要。我先在网上找到了一份 SBTI 的完整题库和计分逻辑报告，连同 SBTI 官网、MBTI 16personalities 官网一起丢给 AI，让它深度分析这些测试的人格体系、计分方式和传播机制。
|
||||||
|
|
||||||
|
并且给 CBTI 定了方向：面向编程，要有科学依据和实用价值，同时具备抽象整活和流量传播属性。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后 AI 就直接完成了初始网站的开发和测试：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**2、内容反复迭代**
|
||||||
|
|
||||||
|
AI 初版生成的人格代码都差不多，看着毫无辨识度，于是我让它全网搜索程序员相关的热梗，一遍遍重做人格体系。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这个阶段来来回回改了很多版，最后我把人格从最初十几种扩展到了 27 种，引入了 AI 编程这个新维度，题目内容也从正经八百改成了口语化、有共鸣的风格。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**3、UI 设计优化**
|
||||||
|
|
||||||
|
一开始 AI 生成的主页像个 B 端管理后台，又丑又复杂。
|
||||||
|
|
||||||
|
我直接跟它说主页尽量简洁，一句 Slogan 再加一个「开始测试」按钮就够了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
配色换成橙色系，再用 frontend-design 这个 Agent Skill 来优化整体视觉效果。答题页面也加了答题卡、进度条、快速跳题这些交互细节。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**4、人格图片制作**
|
||||||
|
|
||||||
|
如果是以前，网站图片素材的制作绝对要花大把的时间。
|
||||||
|
|
||||||
|
但现在利用 AI，这件事可以在几分钟内完成。
|
||||||
|
|
||||||
|
我让 AI 参考 MBTI 官方网站那种低多边形风格的人物形象，生成给 Nano Banana 这个 AI 绘图工具使用的提示词。
|
||||||
|
|
||||||
|
注意，这里有个小技巧，我不是让 AI 分别给 28 个角色都生成一段提示词，那样又费时又烧钱。而是分为 2 批，每批 14 个人物放在 **同一张图片** 里生成。这样只需要使用 2 段提示词，生成 2 张图就够了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
效果还不错吧：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后让 AI 自己去理解这张完整的图片，写 Python 脚本来切割图片、压缩调整尺寸、移除空白背景等等，最后得到了 28 个角色图片。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**5、更多功能完善**
|
||||||
|
|
||||||
|
确保题目内容和网站功能正常运行后，我还优化了很多网站的细节，加了分享文案、Canvas 渲染的分享海报、五维雷达图、隐藏人格彩蛋这些功能。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
由于网站本身功能并不复杂，每个功能我都是无脑让 AI 生成，所以过程中也遇到了一些问题，比如分享海报一开始字太小、二维码没生成、后来又太大，调了好几轮才满意。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**6、部署上线和验证**
|
||||||
|
|
||||||
|
由于网站不依赖后端，所以部署上线操作无比简单。
|
||||||
|
|
||||||
|
我用了 EdgeOne Pages 这个 MCP，只需要跟 AI 对话，AI 会自动执行 Next.js 框架的 build 命令把代码导出为静态的 HTML 网页，然后部署网页到腾讯云 EdgeOne Pages 服务，1 分钟就完成了部署上线。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
可以在腾讯云 EdgeOne Pages 控制台查看到已上线的项目，还可以自定义域名：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上线之后，我再让 AI 自主跑了一遍所有流程，确认上线后的功能也能正常使用，并且 30 道题能覆盖全部 28 种人格。
|
||||||
|
|
||||||
|
大功告成！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 写在最后
|
||||||
|
|
||||||
|
这个项目技术上其实没什么难度，就是一个纯前端静态网站，没有后端、没有数据库，核心算法也就是算分然后做向量距离匹配。
|
||||||
|
|
||||||
|
现在有了 AI 编程，这种小项目真的人人都能做，1 个小时就能从一个想法变成一个可以分享给朋友的网站。如果你也有有趣的创意想法，不妨动手试试，说不定下一个爆款就是你做的呢！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 推荐资源
|
||||||
|
|
||||||
|
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||||
|
|
||||||
|
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||||
|
|
||||||
|
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||||
|
|
||||||
|
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||||
|
|
||||||
|
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||||
@@ -0,0 +1,482 @@
|
|||||||
|
# Claude Code - AI 提肛助手项目实战
|
||||||
|
|
||||||
|
本项目是一个 AI 驱动的提肛运动助手网站，提供科学的分级训练课程、动画引导、语音播报，还支持摄像头姿态检测和 AI 纠正建议。全程使用 Claude Code + DeepSeek V4 开发。
|
||||||
|
|
||||||
|
大家好，我是程序员鱼皮。
|
||||||
|
|
||||||
|
唉，久坐不动可以说是程序员的通病。像我天天忙的要死，根本没时间运动，但又不甘心让身体就这样退化，怎么办呢？
|
||||||
|
|
||||||
|
于是，我通过询问 AI，了解到了「提肛运动」。通过增强盆底肌肉力量、促进局部血液循环，有效预防痔疮、改善大小便失禁，并提升肛门及相关盆腔器官的健康功能。
|
||||||
|
|
||||||
|
关键是这玩意随时随地都能做，太适合我了！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
但我自己是个「运动白痴」，所以想到能不能通过 AI 编程，开发个「提肛助手」，帮助大家科学地进行盆底肌训练，傻子也能练对。
|
||||||
|
|
||||||
|
安排！
|
||||||
|
|
||||||
|
下面我将全程用 Claude Code + DeepSeek V4 来开发一个完整项目，从安装配置到开发测试，手把手带你走一遍。看完这篇，你能学会 Claude Code 的保姆级使用方法，感受 DeepSeek V4 的实际编程能力，还能 get 到不少 AI 编程的实用技巧。
|
||||||
|
|
||||||
|
点个收藏，咱们开始~
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 需求分析
|
||||||
|
|
||||||
|
这个项目叫「提肛助手」tgang-helper，核心功能其实不复杂。
|
||||||
|
|
||||||
|
1）提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。
|
||||||
|
|
||||||
|
2）训练过程中要有动画引导节奏，包括呼吸圈动画和人体姿势示范动画，让用户一看就知道该怎么做。
|
||||||
|
|
||||||
|
3）同时通过浏览器语音合成实时播报指令，让用户闭着眼睛也能跟练。
|
||||||
|
|
||||||
|
4）还有一个亮点功能，就是支持开启摄像头进行体位校正。实时检测你的站姿、坐姿是否正确，比如有没有驼背、耸肩、身体歪斜，当检测到姿势问题时，让 AI 提供个性化的纠正建议。
|
||||||
|
|
||||||
|
5）查看训练打卡日历和统计图表。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 方案设计
|
||||||
|
|
||||||
|
如果你完全没有任何技术基础，可以让 AI 帮你完成方案设计。
|
||||||
|
|
||||||
|
但这里为了节省时间和 tokens，我直接告诉 AI 怎么做。
|
||||||
|
|
||||||
|
虽然要做姿态检测功能，但是这个项目几乎是 **纯前端** 就能搞定！不需要复杂的后端。
|
||||||
|
|
||||||
|
技术栈上，我选择 Next.js + TypeScript，姿态检测用 MediaPipe Pose（纯前端运行），AI 对话通过 Next.js 的 API Route 代理调用 DeepSeek V4 模型，动画用 CSS 动画 + Framer Motion。
|
||||||
|
|
||||||
|
为什么不用 Python 后端？
|
||||||
|
|
||||||
|
因为这个项目唯一需要服务端的地方就是代理一下 AI 接口调用，使用 Next.js 的 API Route 完全能搞定，没必要拆成前后端分离，越简单越好。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 环境准备
|
||||||
|
|
||||||
|
### 安装 Claude Code
|
||||||
|
|
||||||
|
先简单介绍一下 Claude Code。它是 Anthropic 推出的 AI 编程工具，直接在终端里运行，你跟它聊天描述需求，它就能自主分析项目、写代码、跑命令、修 Bug，全程自主执行。
|
||||||
|
|
||||||
|
除了基础的代码生成，还能使用工具和 Skills 技能包、连接 MCP 外部服务、用 Plugins 插件扩展能力，甚至搞多智能体协作，扩展性很强。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装 Claude Code 很简单。
|
||||||
|
|
||||||
|
首先确保你的电脑有 Node.js 环境和 npm 软件依赖安装工具，没有的话，直接到 [Node 官网](https://nodejs.org/en/download) 下载傻瓜式安装包就好：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
无论使用什么操作系统，都可以通过 npm，一行命令来安装 Claude Code：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g @anthropic-ai/claude-code
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装完成后，输入 `claude` 命令进入对话界面，首次需要登录才能正常使用：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
但估计很多同学没有 Anthropic 的国外订阅账号，所以我们要切换为国产模型。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 切换模型
|
||||||
|
|
||||||
|
Claude Code 本身是支持切换模型的，你可以通过「修改环境变量」或「编辑配置文件」来对接其他大模型的 API。
|
||||||
|
|
||||||
|
一般你使用哪家的大模型 API，直接看对应的官方文档，就能找到接入方法。
|
||||||
|
|
||||||
|
比如 [DeepSeek 的 API 文档](https://api-docs.deepseek.com/zh-cn/guides/coding_agents) 里就有现成的接入方法：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
不过我更推荐用一个开源工具 **CC Switch**，能够可视化地管理 Claude Code、Codex、Gemini CLI 等 AI 编程工具的配置，一键切换不同的模型供应商。内置了 50 多个供应商预设，不用自己手动改配置文件。
|
||||||
|
|
||||||
|
> 开源指路：https://github.com/farion1231/cc-switch
|
||||||
|
|
||||||
|
按照官方中文文档，根据操作系统选择对应的安装方式：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Mac 用户可以通过命令行安装：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
brew tap farion1231/ccswitch
|
||||||
|
brew install --cask cc-switch
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装完成后，运行软件进入主界面，添加模型供应商：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
选择 DeepSeek：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
填写 API Key，需要从 [DeepSeek 开放平台](https://platform.deepseek.com) 获取。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我这里把主模型设置为 DeepSeek-V4-Pro，相比 DeepSeek-V4-Flash 模型，Agent 能力和复杂推理更强。
|
||||||
|
|
||||||
|
然后点右下角保存：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
可以在上图中看到 Claude Code 的 JSON 配置文件，其实 CC Switch 就是帮你可视化地修改各 AI 工具的配置文件，省去手动编辑 JSON 的麻烦。
|
||||||
|
|
||||||
|
最后，启用 DeepSeek 模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后重新进入 Claude Code，随便输入一句话，AI 能给出回复，说明切换模型成功：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 安装扩展
|
||||||
|
|
||||||
|
Claude Code 默认就有读写文件、跑终端命令、搜索代码这些基础能力，但要做好一个完整项目，光靠这些还不够。
|
||||||
|
|
||||||
|
我们需要下面 3 个扩展：
|
||||||
|
|
||||||
|
1. Frontend Design：前端美化技能，让生成的页面更有设计感
|
||||||
|
2. Firecrawl：联网搜索和网页抓取，让 AI 能获取最新的技术信息
|
||||||
|
3. Context7：查询最新的技术文档和 API 用法，减少 AI 瞎编的情况
|
||||||
|
|
||||||
|
下面来依次安装。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 1、安装 Frontend Design
|
||||||
|
|
||||||
|
Frontend Design 是 Anthropic 官方的前端美化技能，可以让 AI 生成的页面更有设计感。
|
||||||
|
|
||||||
|
在 Claude Code 中，先通过 `/plugin` 命令添加官方技能市场，相当于装了个技能商店：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
/plugin marketplace add anthropics/skills
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
输入 `/plugins`，在 Discover 菜单栏中，选中 `example-skills` 并按回车，安装官方的示例技能合集：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
输入 `/reload-plugins` 重载一下插件：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
输入 `/skills` 查看已安装的技能，可以看到 `frontend-design` 已经就位了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
之后在对话框中输入 `/frontend-design` 就能主动触发这个技能，让 AI 美化前端页面。同时还自动装上了 `webapp-testing` 自动化测试技能，后面也用得上。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 2、安装 Firecrawl
|
||||||
|
|
||||||
|
Firecrawl 是联网搜索和网页抓取工具，让 AI 开发前先搜索最新技术信息。
|
||||||
|
|
||||||
|
安装方式很简单，打开终端，输入一行命令：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx -y firecrawl-cli@latest init --all --browser
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
执行后，会自动打开浏览器，要在弹出的页面中点击授权：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装完成后，会自动注册 12 个 Firecrawl 相关技能：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在 Claude Code 的技能管理中，就能看到新添加的 Firecrawl 相关技能了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 3、安装 Context7
|
||||||
|
|
||||||
|
Context7 是一个技术文档查询工具，让 AI 能获取到各种框架和库的最新官方文档，避免用过时的 API 写代码。
|
||||||
|
|
||||||
|
先在终端输入一行命令来安装：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx ctx7@latest setup
|
||||||
|
```
|
||||||
|
|
||||||
|
它会问是安装 MCP 服务还是 CLI + Skills，这里我选择 CLI + Skills。你会发现，现在越来越多工具已经从 MCP 转向 CLI + Skills 的方式了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
同样在弹出的网页中授权，不用自己获取和输入 API Key，太方便了！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后选择要给哪个 AI 编程工具安装，我选择为 Claude Code 安装：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装成功后，可以在技能管理中看到 `find-docs` 技能：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
当然，你也可以选择安装 MCP Server 的方式：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装后，在 Claude Code 中输入 `/mcp` 命令，就能看到安装好的 MCP 了，比自己手动配置方便太多了！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
至此，环境准备完成！下次开发项目时，就不用再重复准备了~
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 开发编码
|
||||||
|
|
||||||
|
新建一个 `tgang-helper` 项目文件夹，在终端中用 `cd` 进入该目录，然后输入 `claude` 命令打开 Claude Code：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后输入提示词。这里分享一下我实际用的完整提示词，给大家参考：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## 角色
|
||||||
|
|
||||||
|
你是一个前端全栈工程师，擅长 Next.js + TypeScript 开发。
|
||||||
|
|
||||||
|
## 任务
|
||||||
|
|
||||||
|
开发一个叫 tgang-helper 提肛助手的 Web 应用，帮助用户科学地练习盆底肌训练（提肛 / 凯格尔运动），傻子也能练对。
|
||||||
|
|
||||||
|
提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。训练过程中通过动画引导节奏，包括呼吸圈动画（收缩时缩小、放松时扩大）和人体姿势示范动画（用 SVG 或 Lottie 展示每个动作的正确体位和发力部位），让用户一看就知道该怎么做。同时使用浏览器语音合成（Web Speech API）实时播报指令，让用户闭着眼睛也能跟练。
|
||||||
|
|
||||||
|
支持开启摄像头进行体位校正，使用 MediaPipe Pose 在浏览器端实时检测用户的站姿 / 坐姿是否正确（如驼背、耸肩、身体歪斜），所有检测纯本地运行，摄像头画面不上传服务器。当检测到持续的姿势问题时，将姿势数据（非图像）发送给 DeepSeek V4 模型，获取个性化的纠正建议并语音播报。
|
||||||
|
|
||||||
|
训练记录保存在本地 localStorage，展示打卡日历和简单的统计图表。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- 框架：Next.js + TypeScript
|
||||||
|
- 姿态检测：MediaPipe Pose（纯前端）
|
||||||
|
- AI 对话：通过 Next.js API Route 代理调用 DeepSeek V4 模型（兼容 OpenAI SDK 格式）
|
||||||
|
- 动画：CSS 动画 + Framer Motion
|
||||||
|
|
||||||
|
## 要求
|
||||||
|
|
||||||
|
1. 页面美观专业，使用 frontend-design 技能美化页面，配色健康积极
|
||||||
|
2. 开发前，先通过 Firecrawl 联网搜索 MediaPipe Pose 浏览器端用法，通过 Context7 查询最新技术文档和用法
|
||||||
|
3. 必须生成完整可运行的代码，每步完成后必须自主测试验证
|
||||||
|
```
|
||||||
|
|
||||||
|
简单解读一下这段提示词的几个要点：
|
||||||
|
|
||||||
|
- **角色定义** 放在最前面，让 AI 进入前端全栈工程师的状态
|
||||||
|
- **任务描述** 用自然语言把需求讲清楚
|
||||||
|
- **技术栈** 只列关键选型，让 AI 自己决定实现细节
|
||||||
|
- 最后两条要求是关键，让 AI 先查文档再写代码，避免瞎编写法；让 AI 开发完后自主测试，减少翻车
|
||||||
|
|
||||||
|
给 AI 发送提示词前，我按 Shift + Tab 进入了自动接受编辑模式，AI 创建、修改、删除文件和执行命令都不用我逐一确认了，更省事儿。但是有一定风险，大家按需使用：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
把上述提示词发送给 AI，接下来就是漫长的等待了。
|
||||||
|
|
||||||
|
AI 开始自主开发，先搜索技术文档，然后规划项目结构，创建文件，写代码。
|
||||||
|
|
||||||
|
过程中 AI 可能需要确认工具调用，比如它想通过 Context7 获取最新的 MediaPipe 技术文档，可以选择「Yes, and don't ask again」，以后就不用反复确认了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
过了 20 多分钟，AI 自主完成了开发，还自动运行了项目：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后 AI 用 `webapp-testing` 技能，编写了自动化测试脚本，自动打开浏览器测试应用：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
经过 31 分钟后，任务终于完成了，比我上次用 GPT-5.5 开发同量级的项目慢了差不多 2 倍。这期间我不仅做了 1 组提肛，还吃了个饭。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
从 AI 的总结可以看到，它实现了完整的功能，包括 7 套训练课程、呼吸圈动画、SVG 人体图、语音指导、姿态检测、AI 建议、训练记录和统计图表，一把梭全给整上了。
|
||||||
|
|
||||||
|
输入 `/context` 可以查看当前上下文使用情况，已经用了 9.4 万 tokens，占总容量的 47%：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
你可能会好奇，DeepSeek V4 官方说支持 100 万 tokens 上下文，为什么 Claude Code 里显示上限才 200K？
|
||||||
|
|
||||||
|
应该是 Claude Code 本身对上下文窗口有限制，跟模型的上限是两回事。所以建议大家定期看看上下文占用情况，占满之后 AI 可能会「断片失忆」开始乱改代码。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 测试验证
|
||||||
|
|
||||||
|
接下来测试验证。由于项目用到了 DeepSeek V4 的 AI 功能，先让 AI 帮我创建一个环境变量配置文件：
|
||||||
|
|
||||||
|
```
|
||||||
|
帮我创建 .env.local 文件
|
||||||
|
```
|
||||||
|
|
||||||
|
AI 很快创建好了，还贴心地检查了 `.gitignore`，确认 `.env` 文件不会被提交到 Git：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
打开 `.env.local` 文件，填上从 DeepSeek 开放平台获取的 API Key：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后在浏览器中打开页面。
|
||||||
|
|
||||||
|
你别说，这个风格我挺喜欢的，很简洁清爽，配色也是健康积极的风格。就是那个 Logo 我没太看明白，求大家给我解释一下。。。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我先选男性、入门难度，打开语音指导和摄像头姿态检测。
|
||||||
|
|
||||||
|
好家伙，入门课程还不止一种，有「盆底激活」和「日常快速·3 分钟唤醒」两个选项。先从男性入门开始吧：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
进入训练界面，有一个火柴人动画引导我的姿势。还有一个呼吸动画，可以让我跟随节奏操作，收紧、放松交替进行：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
打开摄像头后，MediaPipe Pose 会实时检测我的姿态，发现问题就把姿势数据发给 DeepSeek 模型。这里有个小技巧，姿态纠正这种简单的建议不需要用 Pro 模型，用 V4-Flash 响应更快、成本更低。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
比如它发现我的身体是歪的，就给出了纠正建议，比如「身体歪斜会影响发力，请先摆正骨盆。想象头顶有根线轻轻上提，让脊柱自然直立」，也是让我体验了一把健身房私教。。。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我试着调整了一下姿势，它马上又给了新的反馈，说「试着双脚踩实地面，骨盆摆正。轻轻收紧盆底肌，保持脊柱中立」：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
到了持续收缩环节，它又提醒我放松肩膀，说「肩膀放松下沉，想象肩胛骨滑向后腰。轻轻呼气，感受盆底自然上提」。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
测试过程中，我又做了几组提肛。这已经不是 Vibe Coding 了，我管这叫 **TGang Coding**，边提肛边编程，身体工作两不误，岂不美哉？
|
||||||
|
|
||||||
|
现在的我，已经可以挑战「男性进阶·力量强化」了，10 分钟 7 组动作。AI 在这个模式下也能准确检测到身体歪斜和重心不稳的问题：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
完成训练后，可以在训练记录页面看到打卡热力图和统计数据，坚持就是胜利！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
说实话，一段提示词就让 AI 一把梭出了整个项目，核心功能基本可用，DeepSeek V4 的效果还是不错的。
|
||||||
|
|
||||||
|
不过实际跑起来还是有一些小 Bug，比如呼吸动画的收紧放松节奏跟实际训练动作对不上，快速收缩模式下动画一直显示「收紧」不切换到「放松」，还有 AI 姿态建议的调用时机没控制好，导致频繁请求。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这些都是在测试过程中逐步发现的。上面演示的效果，其实是我又跟 AI 对话了 10 轮左右、修复了这些问题之后的结果：
|
||||||
|
|
||||||
|
这里分享一个我自己的经验。测试的时候，影响核心功能的问题要立刻修复，比如动画节奏不对这种，直接跟 AI 描述现象让它改。
|
||||||
|
|
||||||
|
不影响核心功能的问题，比如只是觉得界面某个地方不够好看，建议先记下来，等核心流程跑通之后再集中处理。
|
||||||
|
|
||||||
|
另外，过程中一定要随时关注上下文的容量。我修完这几轮 Bug 后，上下文已经涨到了 62%：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上下文一旦快满了，AI 就可能忘记之前改过什么，甚至写出跟之前矛盾的代码。
|
||||||
|
|
||||||
|
遇到这种情况，建议先让 AI 把当前项目信息和进度沉淀成文档（比如写进 CLAUDE.md），然后开一个新会话继续开发，既节省 tokens 又不会丢失重要上下文。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 我的感受
|
||||||
|
|
||||||
|
最后聊聊这次 Claude Code + DeepSeek V4 实战做项目的真实感受。
|
||||||
|
|
||||||
|
先说说 DeepSeek V4 的实际表现。**一段提示词一把梭出完整项目 + 核心功能可用**，仿佛让我感受到了曾经 Opus 带给我的惊喜。
|
||||||
|
|
||||||
|
前端虽然没什么特别惊艳的创新，但布局基本正确，配色也不拉胯。不过前面也提到了，在逻辑细节上还是有些不足，需要人工介入几轮才能调好。而且 DeepSeek V4 在代码生成速度上略慢一些，31 分钟才跑完核心功能。
|
||||||
|
|
||||||
|
除了效果外，再看看大家关注的 **成本**。
|
||||||
|
|
||||||
|
做完这个项目，到底花了多少钱呢？
|
||||||
|
|
||||||
|
先在 Claude Code 中用 `/usage` 命令看看 tokens 消耗情况：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Claude Code 统计显示，这次开发总花费 18.13 美元，消耗了几十万 tokens。
|
||||||
|
|
||||||
|
还可以进入 Stats 趋势分析，看看自己的使用习惯：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
什么，这么个项目竟然花了 100 多元？！
|
||||||
|
|
||||||
|
Claude Code 自带的费用统计可能不太准确，建议直接到 DeepSeek 开放平台看实际消耗。
|
||||||
|
|
||||||
|
我一看，几百次请求，竟然消耗了 2500 多万 tokens！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
实际一看，只花了 **5.44 元**，舒服了~
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这么多 tokens 里绝大部分是输入缓存命中的。因为 Claude Code 每次跟模型对话时，会把之前的上下文一起发过去，但如果内容跟上次一样，DeepSeek 会命中缓存，缓存价格只有正常输入的几分之一。
|
||||||
|
|
||||||
|
这就是为什么虽然 tokens 用量看起来很吓人，但实际花费很低。
|
||||||
|
|
||||||
|
**5 块钱开发了一个带 AI 能力的完整项目**，我觉得性价比还是挺高的，你觉得呢？
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 写在最后
|
||||||
|
|
||||||
|
5 块钱开发了一个带 AI 能力的完整项目，性价比确实很高。
|
||||||
|
|
||||||
|
这个项目让我们看到了 Claude Code + 国产大模型的组合潜力。虽然过程中需要人工介入修几轮 Bug，但核心功能一把梭就能跑通，对于个人开发者来说已经非常够用了。
|
||||||
|
|
||||||
|
如果你也想用 Claude Code 来开发项目，可以阅读本教程编程工具板块中的《AI 命令行编程工具》，了解 Claude Code 的详细使用方法和模型切换技巧。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 推荐资源
|
||||||
|
|
||||||
|
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||||
|
|
||||||
|
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||||
|
|
||||||
|
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||||
|
|
||||||
|
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||||
|
|
||||||
|
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||||
@@ -0,0 +1,406 @@
|
|||||||
|
# Codex - AI 开源项目学习网站项目实战
|
||||||
|
|
||||||
|
本项目是一个 AI 驱动的开源项目学习助手，用户输入 GitHub 仓库地址，系统自动分析源码并生成通俗易懂的分析报告，还支持针对源码的交互式问答。全程使用 Codex + GPT-5.5 开发，后端对接 DeepSeek V4 API。
|
||||||
|
|
||||||
|
大家好，我是程序员鱼皮。
|
||||||
|
|
||||||
|
最近 AI 圈儿也太闹腾了，4 月 23 号 OpenAI 发布了 GPT-5.5，紧接着第二天 DeepSeek 就放出了 V4，两个重磅模型前后脚上线。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
光看跑分没什么意思，模型好不好用，还得拿真实项目来检验。
|
||||||
|
|
||||||
|
正好 OpenAI 的 Codex 桌面端这段时间更新很猛，已经从一个纯 AI 编程工具进化成了支持 Computer Use、插件市场、内置浏览器的「超级 App」。
|
||||||
|
|
||||||
|
所以这篇文章，我全程用 Codex + GPT-5.5 来开发一个完整的全栈项目，后端对接 DeepSeek V4 的 API 实现 AI 能力。
|
||||||
|
|
||||||
|
看完这期，你能学会 Codex 的使用方法、感受新模型的实际能力、掌握 AI 编程的实用技巧，可谓一举三得。
|
||||||
|
|
||||||
|
点个收藏，咱们开始~
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 需求分析
|
||||||
|
|
||||||
|
这次要做的项目叫「项目学习助手」（project-helper），核心需求很简单：
|
||||||
|
|
||||||
|
用户输入一个 GitHub 仓库地址，系统自动克隆项目并分析源码，生成一份通俗易懂的完整分析报告。报告涵盖项目概述、技术栈、目录结构、核心模块、数据流、设计模式、阅读建议等，真正做到「傻子也能懂」。分析过程实时推送进度，已经分析过的项目自动缓存，不用重复分析。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
另外，用户还可以针对源码进行交互式问答，AI 会自主搜索代码、读取文件来回答问题，支持流式输出。
|
||||||
|
|
||||||
|
这样一来，你可以快速学会任何开源项目，哪怕面对几万行代码的仓库，也完全不虚。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 方案设计
|
||||||
|
|
||||||
|
如果你完全没有任何技术基础，可以让 AI 帮你完成方案设计。
|
||||||
|
|
||||||
|
但这里为了节省时间和 tokens，我直接告诉 AI 怎么做。
|
||||||
|
|
||||||
|
项目采用前后端分离架构：
|
||||||
|
|
||||||
|
- 后端用 Python FastAPI + LangChain + SQLite
|
||||||
|
- 前端用 Vue 框架
|
||||||
|
- AI 能力对接 DeepSeek V4 的 API
|
||||||
|
|
||||||
|
AI 分析和 AI 问答能力的实现还是有点小技巧的，如果一个代码仓库有几万行，难道要全部扔给 AI 自己去分析么？
|
||||||
|
|
||||||
|
我的思路是， 采用 AI 工具调用（Tool Use）的方式，给 AI 提供读取文件、搜索代码、获取仓库结构等工具，剩下的交给 AI 自己判断该看哪些文件、该怎么组织答案。这也是 DeepSeek V4 专门优化过的 Agentic 场景。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 环境准备
|
||||||
|
|
||||||
|
### Codex 配置
|
||||||
|
|
||||||
|
打开 Codex，首先确认模型列表里有 GPT-5.5。如果看不到，大概率是账号的问题，可能需要开通更高级的会员，我这里用的是 Plus 会员。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
可以看到界面上已经有了 GPT-5.5 模型选项，还支持调节智能程度（低 / 中 / 高 / 超高），我选择「高」。
|
||||||
|
|
||||||
|
左下角进入设置，把工作模式切换为「用于编程」，这样 AI 的回复会更专业、更适合开发场景：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 安装 AI 扩展
|
||||||
|
|
||||||
|
Codex 的 AI 扩展主要包括三类：
|
||||||
|
|
||||||
|
- MCP 服务，用于连接外部工具连接
|
||||||
|
- Agent Skills 技能包，让 AI 学会特定的专业技能
|
||||||
|
- Plugins 插件，给 AI 增加更多能力
|
||||||
|
|
||||||
|
官方自带了一些内置的插件和技能，比如 Computer Use、Browser Use、PDF 处理、演示文稿编辑等：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
不过这次项目需要的几个扩展，Codex 默认没有，得自己安装。
|
||||||
|
|
||||||
|
我们需要下面 3 个扩展：
|
||||||
|
|
||||||
|
1. Firecrawl：联网搜索和网页抓取，让 AI 能获取最新的技术信息
|
||||||
|
2. Context7：查询最新的技术文档和 API 用法，减少 AI 瞎编的情况
|
||||||
|
3. UI UX Pro Max：前端美化技能，让生成的页面更有设计感
|
||||||
|
|
||||||
|
你可以在 Codex 设置里手动添加 MCP 服务：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
但是，要手动填写一堆参数，真特么麻烦啊！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
虽然也可以直接编辑 `~/.codex/config.toml` 配置文件来添加 MCP 服务，但还是很麻烦。
|
||||||
|
|
||||||
|
这点上 Codex 的体验不如 Copilot 和 Cursor 的可视化安装，Copilot 甚至直接把 MCP 集成到了 VSCode 扩展市场里，一键搜索安装就行。
|
||||||
|
|
||||||
|
好在我们可以换一种方式，用每个 AI 服务提供的命令来快速安装。
|
||||||
|
|
||||||
|
#### 1、安装 Firecrawl
|
||||||
|
|
||||||
|
Firecrawl 是一个联网搜索和网页抓取工具，能让 AI 在开发前先搜索最新的技术信息和文档。我们的项目需要它来查询 DeepSeek V4 的最新 API 用法。
|
||||||
|
|
||||||
|
打开终端，输入下列命令：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx -y firecrawl-cli@latest init --all --browser
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
执行后，会自动打开浏览器，要在弹出的页面中点击授权：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装完成后，会自动注册 12 个相关技能：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在 Codex 的技能管理中，就能看到新添加的 Firecrawl 相关技能了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 2、安装 Context7
|
||||||
|
|
||||||
|
Context7 是一个技术文档查询工具，让 AI 能获取到各种框架和库的最新官方文档，避免用过时的 API 写代码。
|
||||||
|
|
||||||
|
先在终端输入一行命令来安装：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx ctx7@latest setup
|
||||||
|
```
|
||||||
|
|
||||||
|
它会问是安装 MCP 服务还是 CLI + Skills，这里我选择 CLI + Skills。你会发现，现在越来越多工具已经从 MCP 转向 CLI + Skills 的方式了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
同样在弹出的网页中授权，不用自己获取和输入 API Key，太方便了！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后选择要给哪个 AI 编程工具安装，我选择为 Codex 安装：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装成功：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在 Codex 中确认已安装的技能：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
当然，你也可以选择安装 MCP Server 的方式：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装后，在 Codex 的 MCP 服务器设置里，就能看到 Context7 MCP 了，这不比自己手动填参数方便多了？
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 3、安装 UI UX Pro Max
|
||||||
|
|
||||||
|
这是一个前端美化技能包，能让 AI 生成的页面更有设计感，不会有一大堆的 Emoji。
|
||||||
|
|
||||||
|
输入一行命令：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
uipro init
|
||||||
|
```
|
||||||
|
|
||||||
|
选择为 Codex 安装技能：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装成功：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在 Codex 的技能管理中，能看到新技能：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
至此，环境准备完成！下次开发项目时，就不用再重复准备了~
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 开发
|
||||||
|
|
||||||
|
新建一个 `project-helper` 项目文件夹，在 Codex 中打开：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
然后输入提示词。这里分享一下我实际用的提示词，给大家参考：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## 角色
|
||||||
|
|
||||||
|
你是一个全栈工程师，擅长 Python + FastAPI + LangChain 开发。
|
||||||
|
|
||||||
|
## 任务
|
||||||
|
|
||||||
|
开发一个叫 project-helper（项目学习助手）的 Web 应用，帮助用户快速读懂任意开源项目的源码，傻子也能懂。
|
||||||
|
|
||||||
|
用户输入一个 GitHub 仓库地址，系统自动克隆项目并分析源码，生成一份通俗易懂的完整分析报告，涵盖项目概述、技术栈、目录结构、核心模块、数据流、设计模式、阅读建议等。分析过程实时推送进度，已分析过的项目自动缓存，无需重复分析。
|
||||||
|
|
||||||
|
用户还可以针对源码进行交互式问答，给 Agent 提供读取文件、搜索代码等工具，让 AI 自主查找代码来回答问题，支持流式输出。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- 后端：Python FastAPI + LangChain + SQLite + 对接 DeepSeek V4 模型
|
||||||
|
- 前端：Vue，前后端分离
|
||||||
|
|
||||||
|
## 要求
|
||||||
|
|
||||||
|
1. 页面需要阅读舒适，具有科技感，代码块有语法高亮，使用 UI UX Pro Max 技能美化页面
|
||||||
|
2. 开发前，先通过 Firecrawl 联网搜索信息，通过 Context7 查询最新技术文档和用法
|
||||||
|
3. 必须生成完整可运行的代码，每步完成后必须自主测试验证
|
||||||
|
```
|
||||||
|
|
||||||
|
简单解读一下这段提示词的几个要点：
|
||||||
|
|
||||||
|
- **角色定义** 放在最前面，让 AI 进入全栈工程师的状态
|
||||||
|
- **任务描述** 用自然语言把需求讲清楚
|
||||||
|
- **技术栈** 只列关键选型，让 AI 自己决定具体实现方案
|
||||||
|
- 最后两条要求是关键，让 AI 先查文档再写代码，避免瞎编写法；让 AI 开发完后自主测试，减少翻车
|
||||||
|
|
||||||
|
模型我选择 GPT-5.5，智能程度选「高」，权限给完全访问（主要图个省事儿）：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注意，如果你想让 AI 测试得更完整，可以先获取好 DeepSeek 的 API Key 并直接写在提示词里。否则没有 API Key，AI 是没法完成大模型调用测试的。
|
||||||
|
|
||||||
|
把上述提示词发送给 AI，接下来就是漫长的等待了。
|
||||||
|
|
||||||
|
我这次等了 9 分钟，这期间一直在做提肛，有了 AI 编程后运动量也拉上来了~
|
||||||
|
|
||||||
|
AI 生成了完整的前端和后端项目代码，还自动写好了项目文档：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
点击右上角可以查看生成的所有代码文件，总共 19 个文件、1644 行代码：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
点击右上角查看项目概览，可以看到进度、生成结果、信息来源等。
|
||||||
|
|
||||||
|
注意看「来源」那栏，我们提供的 3 个技能 AI 都用上了。Firecrawl 用来搜索信息，UI UX Pro Max 用来美化页面，Context7 用来查文档：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
感兴趣的同学可以看下 AI 生成的核心代码。比如问答模块利用 LangChain 实现了一个能调用 `read_file`（读取文件）、`grep_code`（搜索代码）、`repo_map`（获取仓库结构）这 3 个工具的 Agent，AI 会自主决定调用哪些工具来回答用户的问题。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 测试验证
|
||||||
|
|
||||||
|
接下来需要获取 DeepSeek 的 API Key，进入 [DeepSeek 开放平台](https://platform.deepseek.com)，创建 API Key，记得不要泄露哦！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
大家在使用某个 AI 大模型时，记得要关注一下价格。比如目前 DeepSeek 的 V4-Flash 百万 tokens 输入只要 1 元、输出 2 元；V4-Pro 输入 3 元、输出 6 元（限时 2.5 折优惠到 5 月 5 号）。缓存命中的话更便宜，V4-Flash 输入低至 0.02 元/百万 tokens。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
但是 DeepSeek 目前还没有 Coding Plan，不太建议拿它来 AI 编程，估计消耗的 tokens 会让很多同学吃不消。但是用它来做 AI 应用的大脑非常合适，性价比很高。
|
||||||
|
|
||||||
|
根据 AI 给出的指引，在 Codex 中打开终端，设置环境变量，把 API Key 改为你自己的：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
export DEEPSEEK_API_KEY=你的_key
|
||||||
|
export DEEPSEEK_MODEL=deepseek-v4-pro
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
不过这种 `export` 方式是临时的，终端一关就没了。
|
||||||
|
|
||||||
|
更好的做法是让 AI 搞一个环境变量配置文件，我们手动填写就行。
|
||||||
|
|
||||||
|
AI 很快完成了任务，新增了 `.env` 和 `.env.example` 环境变量文件：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注意，如果你的项目要开源，一定记得在 `.gitignore` 中忽略 `.env` 文件，防止 API Key 泄露到 GitHub 上。
|
||||||
|
|
||||||
|
然后直接在编辑器中打开 `.env` 文件，把 API Key 填进去：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
配置完环境变量后，让 AI 重启项目：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
接下来人工测试一下。打开网页，输入一个 GitHub 仓库地址，比如我之前带大家开发的 [AI 零代码应用生成平台](https://github.com/liyupi/yu-ai-code-mother)：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
虽然页面的布局和风格中规中矩，但功能是完全正常的。DeepSeek V4 生成的分析结果还挺靠谱的，包含了项目概述、技术栈分析：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
还有核心模块详解、数据流分析、新手阅读建议等等，内容是准确的，生成速度也比较快：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
再来测试下源码问答功能，问它：项目用了哪些设计模式？
|
||||||
|
|
||||||
|
AI 调用了工具自己去翻代码，很快就列举出来了，包括门面模式、策略模式等，每个模式都标注了对应的源码文件路径：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
核心功能测试没问题。但如果项目要正式上线，还要测试一堆边界条件，比如仓库不存在怎么办？网络断了会不会崩？缓存命中的逻辑对不对？
|
||||||
|
|
||||||
|
一个个手动测太麻烦了，干脆直接让 AI 帮忙。
|
||||||
|
|
||||||
|
Codex 内置了 Browser Use 插件，输入 `@Browser Use` 使用插件，让 AI 自主测试：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
自主测试所有功能，出了问题自动修复，确保所有功能正常可用
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
可以看到 AI 在 Codex 内部打开了一个浏览器，它会自己点击页面、输入仓库地址、查看分析结果、测试问答功能，全程自主操作。这期间我又做了一会儿提肛，提麻了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
等了大概 9 分钟，AI 完成了端到端的自主测试，还修复了好几个它自己发现的 Bug：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
至此项目就开发完了，是不是很简单？
|
||||||
|
|
||||||
|
你还可以继续让 AI 优化前端布局、给报告中增加 Mermaid 流程图、支持导出报告文件等等，发挥想象力自由扩展吧~
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 我的感受
|
||||||
|
|
||||||
|
最后聊聊我用 Codex、GPT-5.5 和 DeepSeek V4 的真实感受。
|
||||||
|
|
||||||
|
先说 Codex，Codex 的界面主打一个简洁，第一眼看上去甚至不像 AI 编程工具，更像个 AI 聊天助手。但功能其实比较完整，比如 MCP 和 Skills 扩展、插件市场、自动化、Git 集成、Browser Use、Computer Use，AI 编程所需的工程能力基本都具备了。
|
||||||
|
|
||||||
|
不过缺点也很明显。默认可用的模型有限，不像 Cursor 和 Copilot 原生就整合了 Claude、GPT、Gemini 各种模型随便切。易用性也差了一些，从 MCP 配置那里大家应该已经感受到了。Copilot 可以直接在扩展市场一键搜索安装 MCP，Cursor 也支持可视化编辑 JSON 配置，Codex 这边还得自己折腾命令行或者手写 TOML。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
再说说 GPT-5.5 模型。有一说一，我测了几个全栈项目，并没有明显感受到 GPT-5.5 和 Claude Opus 模型的差距。只要提示词到位，基本都能一把梭全栈项目的前端和后端，而且核心业务流程大概率一次性跑通。前端表现嘛，中规中矩，虽然实现了响应式，但 UI 没有特别惊艳的地方。。。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
再看看 GPT-5.5 的成本。以开发前面这个项目为例，共消耗了 13 万 tokens，上下文用了 50%。Codex 桌面端目前上下文容量是 258K，开发简单的全栈项目没问题，但复杂工程项目可能会有压力。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我目前开的是 GPT Plus 会员，一个月 20 刀（150 元左右），每 5 小时和每周有限额。做完这个项目，5 小时的额度基本就用完了，不算扩展功能的话，1 周差不多能做 5 个完整项目。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
最后说说 DeepSeek V4。
|
||||||
|
|
||||||
|
我们团队之前的业务有接入 DeepSeek V3，也在带大家做的项目中用过 V3。这次把 V4 接到业务里，生成速度还是挺快的，效果比 V3 提升明显，尤其是对代码的理解和分析能力。而且有了 100 万 tokens 的超长上下文支持，让我们可以做更重的 AI 应用，比如深度研究、复杂项目源码的全局分析等等。
|
||||||
|
|
||||||
|
看一下实际的 API 消耗，测试过程中用了 27 次请求，消耗了 5 万多 tokens，花费 0.15 元。按正常用户使用量算，一天 1000 次请求大约消耗 5.5 元，性价比很高。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
总的来说，后续我不太会继续用 Codex 来做日常 AI 编程，做复杂项目时会选择 GPT-5.5 或 Claude Opus 模型，但开发 AI 应用时会优先对接 DeepSeek V4 的 API，便宜好用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 写在最后
|
||||||
|
|
||||||
|
这个项目从需求到上线，全程用 Codex + GPT-5.5 完成开发，后端对接 DeepSeek V4 的 API，整个过程不到 20 分钟。
|
||||||
|
|
||||||
|
虽然 Codex 在 MCP 配置体验上还不如 Cursor 和 Copilot 方便，但功能完整度已经很不错了。更重要的是，这个项目让我们看到了用不同 AI 编程工具开发全栈项目的可能性。如果你想了解更多 AI 编程工具的使用方法和对比，可以阅读本教程编程工具板块的相关文章。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 推荐资源
|
||||||
|
|
||||||
|
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||||
|
|
||||||
|
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||||
|
|
||||||
|
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||||
|
|
||||||
|
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||||
|
|
||||||
|
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||||
@@ -433,6 +433,10 @@ AI 可能会问你：
|
|||||||
|
|
||||||
这些心法看起来简单，但要真正掌握需要不断练习。建议你在下一个项目中，有意识地应用这些心法，看看效果如何。
|
这些心法看起来简单，但要真正掌握需要不断练习。建议你在下一个项目中，有意识地应用这些心法，看看效果如何。
|
||||||
|
|
||||||
|
其实，这些心法的本质都是在强调同一件事 —— 你才是工程的主导者，AI 只是你手中的工具。这种理念在业界被称为 Harness Engineering 驾驭工程，关于它的完整定义和核心模块，可以阅读本教程的《Vibe Coding 概念大全》深入了解。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
记住，Vibe Coding 不只是让 AI 写代码，更重要的是你如何引导 AI，如何管理整个开发过程。掌握了这些心法，你就能从一个 "会用 AI" 的人，变成一个 "用好 AI" 的人。
|
记住，Vibe Coding 不只是让 AI 写代码，更重要的是你如何引导 AI，如何管理整个开发过程。掌握了这些心法，你就能从一个 "会用 AI" 的人，变成一个 "用好 AI" 的人。
|
||||||
|
|
||||||
下一篇文章，我会讲解如何和 AI 进行高效对话，也就是 “对话工程” 的技巧。
|
下一篇文章，我会讲解如何和 AI 进行高效对话，也就是 “对话工程” 的技巧。
|
||||||
|
|||||||
@@ -104,6 +104,8 @@
|
|||||||
|
|
||||||
合理搭配使用，能省下不少钱。就像你不会让公司的 CTO 去打印文件一样，要让合适的人做合适的事。
|
合理搭配使用，能省下不少钱。就像你不会让公司的 CTO 去打印文件一样，要让合适的人做合适的事。
|
||||||
|
|
||||||
|
另外，小米 MiMo 也是一个值得关注的低成本选项，它主打 token 效率高，同样的任务消耗更少。你可以通过 CC Switch 等工具切换到 MiMo 模型，进一步降低 AI 编程成本。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 使用本地模型
|
### 使用本地模型
|
||||||
|
|||||||
@@ -167,6 +167,22 @@ AI 云服务就是其他企业为我们部署了 AI 大模型，通过 API 接
|
|||||||
|
|
||||||
关于 RAG 能学的知识可太多了，比如主流的向量数据库 Milvus 和 PGVector、文档的抽取 / 转换 / 加载、索引的构建、查询策略的优化等等。**这也是 AI 企业面试的重点！**
|
关于 RAG 能学的知识可太多了，比如主流的向量数据库 Milvus 和 PGVector、文档的抽取 / 转换 / 加载、索引的构建、查询策略的优化等等。**这也是 AI 企业面试的重点！**
|
||||||
|
|
||||||
|
目前主流的 RAG 方案已经演化出十几种变体，按照复杂度可以分为几个层次：
|
||||||
|
|
||||||
|
- 基础方案：Naive RAG（标准的切块→向量检索→生成流程）、Multi-Query RAG（多种问法分别检索再合并）
|
||||||
|
- 检索优化：Hybrid Search（混合向量搜索和关键词搜索）、Reranking（精排模型过滤噪声）、语义分块（按语义边界切分文档）
|
||||||
|
- 反思纠错：Corrective RAG（检索后质检，搜不到就回退 Web 搜索）、Self-RAG（生成时自我审视是否有文档支撑）
|
||||||
|
- 结构化增强：GraphRAG（知识图谱支持跨文档推理）、Text-to-SQL RAG（自然语言翻译成 SQL 查数据库）
|
||||||
|
- 智能体驱动：Agentic RAG（AI Agent 自主决策检索策略）、Multi-Agent RAG（多个专职 Agent 协作）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
对于初学者，建议从 Naive RAG 开始，发现哪个环节不够好，再针对性引入进阶方案。生产环境推荐 Hybrid Search + Reranking 作为基础配置。如果数据源多且复杂，可以考虑 Agentic RAG。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
主流的 RAG 开发工具和框架包括 LangChain / LangGraph、LlamaIndex、以及一体化平台 Dify 和 RAGFlow 等，感兴趣的同学可以进一步了解。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,9 @@
|
|||||||
|
|
||||||
我自己也是坚持这么做的。哪怕说我现在开公司了，我反而会读更多的文章，因为我现在不仅要了解行业趋势、了解技术，我还要了解产品、了解项目管理，甚至要了解怎么招人。
|
我自己也是坚持这么做的。哪怕说我现在开公司了，我反而会读更多的文章，因为我现在不仅要了解行业趋势、了解技术，我还要了解产品、了解项目管理，甚至要了解怎么招人。
|
||||||
|
|
||||||
有同学问看哪里的文章？最推荐的是 **大厂的技术博客**。我关注了一大堆的技术团队，当然这些分享的内容可能会比较硬核。还有科技资讯类、经验分享、编程趋势、技术干货，我自己的号基本上什么都分享。
|
有同学问看哪里的文章？最推荐的是 **海外的科技平台** 和 **大厂的技术博客**。我关注了一大堆的技术团队，这些分享的内容可能会比较硬核。
|
||||||
|
|
||||||
|
也推荐大家关注我自己的公众号「程序员鱼皮」，我在上面持续分享各种 AI 科技资讯、AI 和编程技术干货、经验分享等等，帮助所有对 AI 和编程感兴趣的朋友不错过值得学习的知识。
|
||||||
|
|
||||||
像今年我们还打造了完全免费的 AI 交流圈，大家可以没事儿来刷一刷：https://ai.codefather.cn
|
像今年我们还打造了完全免费的 AI 交流圈，大家可以没事儿来刷一刷：https://ai.codefather.cn
|
||||||
|
|
||||||
@@ -143,6 +145,7 @@
|
|||||||
|
|
||||||
最理想的情况下，当你换了一台电脑的时候，你能够很快地把你常用的工具在你的新电脑上完成安装，这就发挥了工具库的意义。
|
最理想的情况下，当你换了一台电脑的时候，你能够很快地把你常用的工具在你的新电脑上完成安装，这就发挥了工具库的意义。
|
||||||
|
|
||||||
|
现在 AI 技术那么成熟，可以利用 AI 工具来整理上面说的这些，洒洒水的事儿~
|
||||||
|
|
||||||
|
|
||||||
## 五、分享
|
## 五、分享
|
||||||
|
|||||||
@@ -335,18 +335,28 @@ Harness Engineering（驾驭工程）是 2026 年兴起的 AI 工程新范式，
|
|||||||
|
|
||||||
Harness 这个词本意是 “马具”，就像缰绳和马鞍用来引导强大但难以预测的马匹一样，Harness Engineering 就是围绕 AI 编程智能体搭建的整套 “运行环境”，确保 AI 能按照你的预期工作。
|
Harness 这个词本意是 “马具”，就像缰绳和马鞍用来引导强大但难以预测的马匹一样，Harness Engineering 就是围绕 AI 编程智能体搭建的整套 “运行环境”，确保 AI 能按照你的预期工作。
|
||||||
|
|
||||||
Harness Engineering 包含三大核心支柱：
|
|
||||||
|
|
||||||
1. 上下文工程：确保 AI 在正确的时间获得正确的信息，包括代码库文档、架构规范、AGENTS.md 文件、测试结果等
|
|
||||||
2. 架构约束：通过代码规范检查器、自动化测试等机制，强制规定 AI 必须遵守的规则，明确的边界能让 AI 更快地收敛到正确的解决方案
|
|
||||||
3. 熵管理：定期清理 AI 生成代码中积累的问题，比如过时文档、命名偏差、死代码等
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
为什么这个概念越来越重要呢？
|
为什么这个概念越来越重要呢？
|
||||||
|
|
||||||
因为在 AI 编程时代，**模型本身已经是通用商品，真正的竞争力在于你围绕模型搭建的工程体系**。同一个大模型，在不同的 Harness 环境下，代码质量可能天差地别。程序员的角色正在从 “自己写代码” 转变为 “设计让 AI 可靠写代码的系统”。
|
因为在 AI 编程时代，**模型本身已经是通用商品，真正的竞争力在于你围绕模型搭建的工程体系**。同一个大模型，在不同的 Harness 环境下，代码质量可能天差地别。程序员的角色正在从 “自己写代码” 转变为 “设计让 AI 可靠写代码的系统”。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
从发展路径来看，Harness Engineering 是在提示词工程和上下文工程基础上的进一步演进。提示词工程关注「怎么给 AI 下指令」，上下文工程关注「怎么给 AI 提供信息」，而 Harness Engineering 关注的是「怎么让 AI 持续靠谱地干完一整件事」，三者是层层包含的关系。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Harness 的核心模块包括：
|
||||||
|
|
||||||
|
- 上下文架构（让 AI 了解项目背景和规矩）
|
||||||
|
- 执行能力（给 AI 装上工具和 MCP）
|
||||||
|
- 任务编排（Plan Mode、SubAgents 并行执行等）
|
||||||
|
- 反馈机制（Linter、自动化测试、Browser Use）
|
||||||
|
- 架构护栏（防止代码越改越乱）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -943,12 +953,33 @@ RAG（Retrieval-Augmented Generation 检索增强生成）是一种让 AI 能够
|
|||||||
|
|
||||||
普通的 AI 只能依赖训练时学到的知识，而这些知识可能已经过时了。RAG 能让 AI 在回答问题时，先从你的文档、代码库、知识库中检索相关信息，然后基于这些信息生成回答。
|
普通的 AI 只能依赖训练时学到的知识，而这些知识可能已经过时了。RAG 能让 AI 在回答问题时，先从你的文档、代码库、知识库中检索相关信息，然后基于这些信息生成回答。
|
||||||
|
|
||||||
这对于 Vibe Coding 特别有用，因为 AI 可以参考你项目中的已有代码，生成风格一致的新代码。
|
|
||||||
|
|
||||||
|
这对于企业中的 Vibe Coding 特别有用，因为 AI 可以参考你项目中的已有代码，生成风格一致的新代码。
|
||||||
|
|
||||||
RAG 检索增强生成的工作流程如下图所示，做 AI 应用开发的程序员朋友们可以深入了解一下：
|
RAG 检索增强生成的工作流程如下图所示，做 AI 应用开发的程序员朋友们可以深入了解一下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在实际工程中，RAG 已经演化出了很多进阶方案。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
比如：
|
||||||
|
|
||||||
|
- Multi-Query RAG，用多种问法分别检索再合并结果。
|
||||||
|
- HyDE，让 AI 先生成一段假答案再用假答案的向量去检索。
|
||||||
|
- Hybrid Search，混合向量搜索和关键词搜索再融合排序。
|
||||||
|
- Reranking，在检索后用精排模型重新打分过滤噪声。
|
||||||
|
- GraphRAG，把文档变成知识图谱来支持跨文档多跳推理。
|
||||||
|
- Agentic RAG，给 Agent 配备一组检索工具，让它来自动调度，根据问题自主决定每一步该怎么做。
|
||||||
|
|
||||||
|
还有很多，不同的方案适用于不同场景，可以根据实际需求组合使用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
对 RAG 感兴趣的程序员朋友，可以阅读本教程编程学习板块的《AI 编程技术入门指南》，里面有更详细的 RAG 实现方案和选型建议。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Agentic RAG 智能体检索增强生成
|
### Agentic RAG 智能体检索增强生成
|
||||||
|
|||||||
@@ -4,11 +4,11 @@
|
|||||||
|
|
||||||
98 年，前腾讯全栈工程师，担任腾讯云开发高级布道师、新人导师、曾获腾讯内云开发竞赛冠军。
|
98 年，前腾讯全栈工程师，担任腾讯云开发高级布道师、新人导师、曾获腾讯内云开发竞赛冠军。
|
||||||
|
|
||||||
现科技公司 [鱼鸢网络](https://yuyuanweb.feishu.cn/wiki/A9rGw0oLCilbqSk2XMPcTOv2nSs) CEO，全网 150 万+ 粉丝编程知识博主，2 万人付费编程学习社群 [【编程导航】](https://yuyuanweb.feishu.cn/wiki/VC1qwmX9diCBK3kidyec74vFnde) 的创始人，用户 10 万+ 编程学习网站创始人。
|
现科技公司 [鱼鸢网络](https://yuyuanweb.feishu.cn/wiki/A9rGw0oLCilbqSk2XMPcTOv2nSs) CEO，全网 200 万+ 粉丝编程知识博主，数万人付费编程学习社群 [【编程导航】](https://yuyuanweb.feishu.cn/wiki/VC1qwmX9diCBK3kidyec74vFnde) 的创始人，用户 10 万+ 编程学习网站创始人。
|
||||||
|
|
||||||
热爱分享编程知识，善于把 Java 后端、前端、项目讲得通俗易懂。
|
热爱分享编程知识，善于把 Java 后端、前端、项目讲得通俗易懂。
|
||||||
|
|
||||||
爱做项目，编程 7 年间，有 30+ 丰富的网站和独立项目开发经验，GitHub 中国区前 20。
|
爱做项目，编程 8 年间，有 30+ 丰富的网站和独立项目开发经验，GitHub 中国区前 4。
|
||||||
|
|
||||||
热爱写作，累积创作近千万字，大学曾出版区块链书籍。
|
热爱写作，累积创作近千万字，大学曾出版区块链书籍。
|
||||||
|
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
### 公众号程序员鱼皮
|
### 公众号程序员鱼皮
|
||||||
|
|
||||||
关注者 40 万+，鱼皮原创博客，编程学习经验、技术干货、项目设计思路、大厂求职面经、个人成长经历、免费编程学习资料分享，帮你少走弯路进大厂：
|
关注者 50 万+，鱼皮原创博客，编程学习经验、技术干货、项目设计思路、大厂求职面经、个人成长经历、免费编程学习资料分享，帮你少走弯路进大厂：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user