实战案例库

01案例一 · 宠物零食售卖前端页面

目标：从零做一个可发布到网上的前端网页。先跑通"本地建文件夹 → 计划模式 → 预览 → Git → 发布"的完整链路，熟悉任务窗口、计划模式和 Review Pane。这个案例来自原书，建议一步步跟着做。

1. 本地创建文件夹：命名为 Pet treats，选好这个文件夹作为工作目录。
2. 开启计划模式：让 Codex 先生成初步项目计划，你检查没问题后，直接让它执行。
3. 打开 index.html 预览：看 Codex 生成的页面效果。
4. 创建 Git 仓库：用 Git 做代码管理，方便后续更新和维护。
5. 优化细节：直接在页面上用注释告诉 Codex 要改哪里（例如"这里按钮颜色太亮，改成更克制的深蓝色"），它按注释微调。
6. 增加新功能：比如新增"热销榜"板块、展示月销量。
7. 检查无误后推送更新代码：每加完一个功能点就检查一次 diff，再提交。
8. 上传到 GitHub 仓库：新建仓库 → 复制仓库链接 → 让 Codex 把代码上传上去。
9. 通过 GitHub Pages 发布：在仓库 Settings 里找到 Pages，选好分支后点 Save，等几分钟就会生成一条访问链接，别人也能打开你的网页。

请帮我做一个简单网页，要求：
1. 黑色背景
2. 页面中间显示大字 Hello, Codex
3. 字体白色
4. 页面整体水平和垂直居中
5. 只使用 HTML 和 CSS

跑通后，再把它升级为真正的产品介绍页：明确产品定位与首屏、加 CTA 按钮、保证移动端可用。改完在 Review Pane 里逐行检查，不满意就在对应位置留评论。

02案例二 · 增加功能与优化页面

在已有页面上加功能、优化视觉与交互，同时不动核心逻辑。严格走"拆需求 → 计划模式确认范围 → 只改相关文件 → 检查 diff → Git 提交"。

1. 新建用户登录 / 注册页面：用户购买时需要填写地址信息，所以需要一个个人账号来保存这些信息。
2. 创建宠物分类与食品分类：先建不同宠物分类，再在每个分类下做食品细分。
3. 依旧先开计划模式：让 AI 复述它是否理解了你的需求，确认范围再动手。
4. 用注释功能优化细节：在页面上圈选或注释要调整的地方。
5. 购物车确认地址：选择食品加入购物车、点击购买时，提示用户确认地址。
6. 提交到 Git 保存代码。

03案例三 · 宠物零食管理后台

做商品 / 订单管理后台，涉及路由、数据展示、表单校验。建议后台与官网分成不同项目 / 仓库，边界更清楚。

1. 先使用计划模式：让 Codex 给出后台的页面结构和路由方案。
2. 检查效果：实现后逐页看是否符合预期。
3. 提交到 Git 保存代码。

请帮我搭建一个宠物零食管理后台（前端 Demo，用 React + Vite）：
1. 商品列表页：展示名称、价格、库存、状态
2. 新增/编辑商品表单：带必填校验
3. 订单列表页：可按状态筛选
要求：先给我页面结构和路由方案，我确认后再实现；
不要接入真实数据库和支付逻辑。

04案例四 · 品牌招商 PPT

用 Codex 安装社区 PPT Skill，再生成招商演示文稿：先出大纲，再生成完整 PPT，统一品牌色与版式。

1. 安装 PPT Skill：把 GitHub 上对应的 Skill 地址直接发给 Codex，让它安装。
2. 调出 Skill：在输入框输入 / 调出已安装 Skill，选中 PPT 那个。
3. 检查最终结果：Codex 生成一份完整的招商 PPT，成品可在内置浏览器预览。

请帮我安装这个 Skill：https://github.com/op7418/guizang-ppt-skill
安装完成后，告诉我它的用途、依赖要求，以及应该如何调用。

请使用刚刚安装的 PPT Skill，根据"宠物零食品牌招商"这个主题生成一份
适合分享的演示稿。先告诉我还缺哪些关键信息。

05案例五 · 品牌宣传视频

生成品牌宣传短片的脚本与分镜，配合视频生成插件（HyperFrames / Remotion）完成物料。

1. 安装视频插件：桌面 App 左侧"插件和技能"搜 HyperFrames 安装（也有对应 Skill，二选一）。
2. 计划生成视频：先让 Codex 出脚本和分镜方案。
3. 效果预览：看生成的画面是否符合预期。
4. 成品产出：返回本地视频文件地址，点击可查看。

请为宠物零食品牌写一条 30 秒宣传短片脚本，
包含：分镜编号、画面描述、旁白文案、时长。
风格温暖治愈，突出天然健康卖点，结尾出现品牌 slogan。

06案例六 · 图片生成（GPT Image）

结合 GPT Image 图片生成能力，为品牌产出主视觉、产品图、Banner。要点：把主体、风格、构图、配色、比例写清楚，再逐步用 Annotations（圈选局部）微调。

生成一张宠物零食产品主视觉：
主体：一袋牛皮纸质感的天然狗零食，放在原木桌面
风格：温暖、清新、高级感，柔和自然光
配色：暖橙 + 米白，背景虚化
比例：3:2，适合做官网首屏 Banner

07案例七 · 学术论文与效率场景

知识库还覆盖学术科研与工作效率场景：文献综述整理、论文结构润色、数据分析与图表、日报周报生成等。用 Work 模式上传资料，让它拆解目标、产出结构化结果。

我上传了一批文献 PDF，请帮我：
1. 按主题聚类，整理成一张文献综述表（作者/年份/方法/结论/局限）
2. 提炼研究空白，给出 3 个可能的研究切入点
3. 标注不确定或需要人工核实的地方，不要编造引用

R0可迁移案例库 · 基础准备：Skill 三种安装方式

方式一（推荐新手）：让 Codex 自动装

请帮我安装这个 Skill：https://github.com/op7418/guizang-ppt-skill
安装完成后，告诉我它的用途、依赖要求，以及应该如何调用。

skill-installer 默认安装到 ~/.codex/skills，装完通常需重启 Codex。

方式二：手动放置目录

git clone https://github.com/op7418/guizang-ppt-skill.git
cp -r guizang-ppt-skill ~/.agents/skills/

方式三：社区一键工具

npx install-agent-skill jojogh/industry-bottleneck-hunter

验证装好没有

1. 重启 Codex；
2. 输入框敲 / 打开 Skills 菜单，确认新 Skill 在列表；
3. 显式调用：提示词写 $skill-name 跑一个小任务；
4. 看不到时检查：目录是否多套一层（正确结构 skills/<skill-name>/SKILL.md）、SKILL.md 里 name 是否与父目录名一致。

R1可迁移案例库 · 内容生产：PPT / 绘图 / 浏览器 / 视频

R1-1 · PPT Skill（一句话生成演示稿）

安装见 R0。安装后调用：

请使用刚刚安装的 PPT Skill，根据"AI 编程工具入门"这个主题生成一份
适合分享的演示稿。先告诉我还缺哪些关键信息。

若默认产物为 HTML 演示稿，可在 Codex 内置浏览器直接打开预览。验证：装的是否为指定 Skill、是否说明依赖与调用方式、结果是否符合能力边界。

R1-2 · Draw.io MCP（AI 自动绘制架构图）

官方仓库 https://github.com/jgraph/drawio-mcp。两种接法：① 在设置里添加 MCP（手动填配置）；② 更简单——把 Draw.io MCP 的 GitHub 仓库链接直接丢给 Codex，让它帮你装，装完补一句"安装之后，请确保我可以直接使用"。

R1-3 · Playwright MCP（让 AI 操控浏览器）

codex mcp add playwright npx @playwright/mcp@latest

进入 Codex 用 /mcp 确认安装成功。执行中需手动放行"填搜索框 / 填文本 / 打开网页"等权限。

请打开浏览器，到百度搜索"什么是 MCP"，选择两篇优质内容阅读，
并整理成一个 markdown 文件保存在当前目录。

R1-4 · HyperFrames（用代码生成动画视频）

HyperFrames 与同为"代码化视频"的 Remotion 常被放在一起对比：Remotion 用 React 写视频，HyperFrames 用 HTML / CSS / JS 做视频。如果你要做网页转视频、文档转视频这类轻量视频，HyperFrames 上手更轻松。

安装：打开 Codex 桌面 App 左侧"插件和技能"，搜索 HyperFrames 安装即可（它也有对应的 Skill，插件和 Skill 两种形式都能用，挑顺手的装）。

使用：直接把内容（比如一本书的文稿）丢给它，让它据此制作视频。完成后会返回本地文件地址，点一下就能跳转查看。仔细看会发现，它其实是先生成若干张 JPEG，再把图片组装成视频。

R2可迁移案例库 · 知识库与设计

R2-1 · Obsidian × Codex（知识库自动配图）

入口：Obsidian 的 Terminal 社区插件内直接运行 codex。已订阅 Codex / ChatGPT Plus 后可直接调用 gpt-image-2，无需单独 API Key。

codex
# 然后自然语言：根据当前文章正文生成一张配图并插入到合适位置

R2-2 · 飞书 CLI × Codex（一句话处理飞书数据）

帮我装一下所有的东西：https://github.com/larksuite/cli/blob/main/README.zh.md

按 Codex 引导去飞书开放平台建应用，回传 App ID / App Secret，点它给的跳转链接在浏览器手动授权。之后让 Codex 列举可访问内容、按提示使用。

R2-3 · LLM Wiki × Codex（在 Obsidian 搭 AI 知识库）

用 Karpathy 三层架构（原始资料层 / Wiki 层 / Schema 层）在 Obsidian 搭"会积累"的第二大脑。

你现在是我的 LLM Wiki Agent。
把下面这份 idea 文件原样落地，作为我完整的第二大脑，一步一步地执行，
创建拥有完整规则的系统。落地过程严格参考以下 GitHub 仓库的内容：
https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f

配套：浏览器装 Obsidian Web Clipper，目标文件夹设为 raw/。迭代流程：Clipper 抓文章进 raw/ → Codex 拆分 + 更新交叉引用。

R2-4 · Figma MCP（读懂设计稿）

入口：Codex 桌面 App → 插件市场 → 搜 Figma → 安装（非命令行），再浏览器 OAuth 授权。新建对话用 @Figma 描述需求。

@Figma 生成一个包含基本操作步骤的用户登录流程图
@Figma 设计一张产品功能架构图（高保真 UI）

R2-5 · Notion MCP（打通知识空间）

入口：Codex 插件市场 → 搜 Notion → 安装 → 浏览器授权工作空间。用 @Notion 读取 / 总结 / 写入。

@Notion 读取我工作空间里昨天更新的内容并总结
@Notion 把上面这段总结写入我的 Notion 工作空间

R3可迁移案例库 · 发布与工程

R3-1 · DKFile（网页一键发布到公网）

让不懂部署的用户，用 Codex 生成的 HTML 通过 DKFile 直接获得公网链接。注册 https://dkfile.net（免费额度足够）。

帮我设计一个 Obsidian 新手使用教程的 HTML 网页，
设计完成后使用 DKFile API（Key: xxx）自动上传并返回公网链接。

R3-2 · 云服务器远程定位并修复 Bug

用 --remote + SSH 隧道，本地不克隆代码，直接让 AI 在远端容器里读代码、改 Bug、跑测试（Alpha 阶段）。

codex app-server --listen ws://0.0.0.0:9001

ssh -N -L 9001:127.0.0.1:9001 root@你的服务器IP
curl -i http://127.0.0.1:9001/healthz   # 返回 200 即通畅

codex --remote ws://127.0.0.1:9001

find and fix the bug in container_health.py, then run pytest to verify

R3-3 · GitHub Actions CI 失败自动修复

CI 一挂，工作流自动触发 Codex 读代码、找问题、改好、开 PR，人只需最后审一眼点 Merge。

name: Codex Auto-Fix on Failure
on:
  workflow_run:
    workflows: ["CI"]
    types: [completed]
permissions:
  contents: write
  pull-requests: write
jobs:
  auto-fix:
    if: ${{ github.event.workflow_run.conclusion == 'failure' }}
    runs-on: ubuntu-latest
    env:
      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
      FAILED_WORKFLOW_NAME: ${{ github.event.workflow_run.name }}
      FAILED_RUN_URL: ${{ github.event.workflow_run.html_url }}
      FAILED_HEAD_BRANCH: ${{ github.event.workflow_run.head_branch }}
      FAILED_HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
    steps:
      - name: Checkout Failing Ref
        uses: actions/checkout@v4
        with:
          ref: ${{ env.FAILED_HEAD_SHA }}
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Run Codex
        uses: openai/codex-action@main
        with:
          openai-api-key: ${{ secrets.OPENAI_API_KEY }}
          prompt: "这是一个 Node.js 项目，使用 Jest 做测试。请读取仓库代码，运行测试套件，找到导致测试失败的最小改动范围，修复它，然后停止。不要修改与失败无关的代码。"
          sandbox: workspace-write
      - name: Verify tests pass
        run: npm test --silent
      - name: Create Pull Request
        if: success()
        uses: peter-evans/create-pull-request@v6
        with:
          commit-message: "fix: Codex 自动修复失败的测试"
          branch: codex/auto-fix-${{ github.event.workflow_run.run_id }}
          base: ${{ env.FAILED_HEAD_BRANCH }}
          title: "🤖 Codex 自动修复 CI 失败"
          body: |
            Codex 检测到 CI 失败，自动生成了这个修复 PR。
            失败的工作流：${{ env.FAILED_WORKFLOW_NAME }}
            失败记录链接：${{ env.FAILED_RUN_URL }}
            请检查改动内容，确认无误后合并。

R4可迁移案例库 · 移动与个性化

R4-1 · 安卓手机远程操控桌面任务

手机 ChatGPT App 扫码配对桌面 Codex，在手机上查看 / 管理桌面任务，并可选择性开启 Computer Use。详见 PART 03「移动端协同」一节（6 项准备 + MFA + 授权三开关）。重点：两端同一 ChatGPT 账号、同一 WiFi；Computer Use 不懂勿开。

R4-2 · Hatch Pet（一张照片生成专属桌面宠物）

对话框输入 / → 选「Hatch Pet」→ 上传照片，生成萌系 / Q 版 / 像素等风格可动画宠物。生成通常 1–3 分钟，宠物包路径 ~/.codex/pet。

/Hatch Pet 帮我根据上传的照片生成一个萌系 Q 版的宠物。

R5可迁移案例库 · 医学与分析

R5-1 · 临床文献综述（PICO + 证据表）

把医学问题拆成 PICO、生成可追溯证据表、强制分离"事实 / 推断 / 建议"。严禁编造 PMID/DOI、替诊断、传未脱敏病历。

请只读取 question.md。
任务：
1. 把这个医学研究问题拆成 PICO。
2. 标出哪些信息还不明确。
3. 不要给临床建议。
4. 输出到 question.md 的 "PICO draft" 小节。

请读取 question.md 和 papers/ 目录下的 Markdown 笔记。
任务：
1. 生成 evidence-table.md。
2. 每篇文献一行。
3. 列：研究类型、样本、干预、对照、主要结局、关键结果、局限性、PMID/DOI。
4. 如果 PMID/DOI 缺失，写"待补充"，不要编造。
5. 把事实、推断和写作建议分开。

R5-2 · 产业链瓶颈猎手（五维框架）

把"行业咽喉点在哪里"变成可复现的五阶段工作流，用五维评分找出"隐形冠军"。

npx install-agent-skill jojogh/industry-bottleneck-hunter

请使用 industry-bottleneck-hunter 的分析框架，对「半导体设备」行业进行五阶段分析：
1. 行业选择：拆分上中下游子行业，聚焦上升期赛道；
2. 价值链分解：画出核心价值链和主要参与者；
3. 瓶颈扫描：从集中度、技术壁垒、替代难度、产能弹性、价值捕获五维度评分；
4. 隐形冠军发现：找出瓶颈环节中的隐形冠军企业；
5. 综合报告：输出结构化分析结果和投资/战略建议。

A附录 · 第三方模型接入（CC Switch + DeepSeek）

什么是 CC Switch

它不是 Claude Code 本体，也不是 Codex 本体，而是一个第三方开源桌面工具，用来统一管理不同 Agent 工具。以前你要手动改 Claude Code、Codex、Gemini CLI 的配置文件；现在 CC Switch 给你做成一个可视化面板，一键切换。它最核心的用途有 3 个：

如果你需要在多个 Agent 工具和模型之间切换，CC Switch 可以作为一个进阶选项。官网：https://ccswitch.io/zh/（点击下载后往下滑找到对应版本）。

以 DeepSeek 为例接入

1. 进入 DeepSeek 官网，创建 API Key；
2. 打开 CC Switch，点击"添加模型"；
3. 把刚创建的 API Key 粘贴进来；
4. 开启本地路由映射，进入设置，将路由全部打开；
5. 点击"启用"；
6. 如果 CC Switch 的路由、模型服务和 Codex 侧配置都兼容，这时再打开 Codex，就可以通过这套非官方路由使用 DeepSeek 等第三方模型。