Fanzy 产品工作台

最小例子:从零走完一次

用一个最小的练习需求「登录页底部加一行客服邮箱」,把工作台从环境检查到发布上线完整走一遍。每一步都写了:你说什么、AI 做什么、你检查什么、怎样算完成。照着做,大约 40 分钟。

阶段步骤你怎么完成操作手册(直接定位)需要你拍板
准备(首次使用逐项完成)0. 安装环境帮我运行 scripts/setup.sh 安装环境安装与终端提示密码 / 回车(出现时)
0.4 配置 GitHub 只读密钥找研发负责人获取只读 key,放进 git/keys/,让 AI 检查获取密钥 · 放入文件夹 · 仓库配置—
0.5 配置 Cloudflare 发布账号获取账号 ID、API Token,填写本机发布配置找账号 ID · 创建 Token · 填写配置—
1. 配置后重新自检帮我自检一下工作台自检与报错处理—
开始2. 发问卷,开新需求填写问卷并粘贴给 AI打开问卷界面 · 启动流程 · 基线分支操作✔ 版本号 + 基线
3. 澄清需求回答 AI 问题,核对做什么 / 不做什么澄清对话示例✔ 需求要点
做三件套4. 做 demo开始做 demo制作与修改 · 查看手机效果✔ demo 效果
5. 生成需求文档生成需求文档生成与修改 · 文档检查项✔ 需求文档
6. 生成并执行测试用例生成并执行测试用例执行测试 · 查看结果与录像✔ 测试结果
发布上线7. 发布发布这个版本发布与查看线上版本✔ 确认发布
8. 交给研发生成交付说明查找代码改动包—
收尾9. 改一处再发布(可选)告诉 AI 修改内容,确认后重新发布修改 demo · 覆盖发布✔ 重新发布

完整步骤大纲:从安装环境到发布上线

首次使用先完成安装、配置和自检;后面的需求流程按拍板节点确认。括号里是这一步结束时会产生的东西。

  1. 安装环境(首次使用需要)
    1. 用 Claude Code 或 Codex 打开工作台文件夹,说「帮我运行 scripts/setup.sh 安装环境」
    2. AI 先解释操作,再启动安装;你只在需要时允许控制终端、输入电脑密码或按回车,AI 继续跟进
    3. AI 自动自检,缺账号配置时继续下面两步;操作说明见 安装手册
  2. 配置 GitHub 只读密钥(解决“未配置只读 key / 仓库无法访问”)
    1. 找研发负责人,按 获取只读 key 完成生成与仓库授权
    2. 按 放置私钥 保存文件,再按 仓库配置 让 AI 核对密钥路径
  3. 配置 Cloudflare 发布账号(解决“accountId / apiToken 未填写”)
    1. 按 账号 ID 和 API Token 的操作界面说明获取参数
    2. 按 发布配置手册 填写本机配置;项目名要求见 项目名与站点地址
  4. 重新自检(确认配置有效,必需项全部通过)
    1. 说「帮我自检一下工作台」;报错时按 自检处理表 继续处理,通过后再开需求
  5. 填问卷(得到一段给 AI 的开工内容)
    1. 打开 新需求问卷,填标题、负责人、想做什么 3 个必填项
    2. 基线选「基于 FanzyWeb 最新版本」(默认 master);要用其他版本时,先问开发要分支名再填
    3. 其余能填就填:背景、目标、页面入口、流程、不做什么、特殊情况、素材、演示数据、验收方式
    4. 右侧实时生成给 AI 的内容,检查无误后点「复制给 AI」
  6. 发给 AI(AI 开始执行启动流程)
    1. 在 Claude Code 或 Codex 里粘贴问卷内容
    2. 本地图片、视频直接拖进对话框;问卷里写了本地路径的,AI 会按路径读取
    3. 发送
  7. 启动确认(创建版本包:prd/ demo/ testcases/ 三个文件夹)
    1. AI 自动做环境检查;有 ✘ 先按提示处理
    2. AI 给出版本号(如 v2026.10.31-login-support)和标题,你确认或修改
    3. AI 拉取所选基线代码,汇总「需求 / 版本包 / 基线」,你确认
  8. 澄清需求(需求要点清单)
    1. AI 把问卷里所有空着、模糊或矛盾的问题一次性列出,每题附选项与推荐项;你按编号回答,或统一说「全部按推荐」
    2. AI 整理出「做什么 / 不做什么 / 验收标准 / 演示数据」,你确认
  9. 做 demo(可在浏览器打开的 demo)
    1. 说「开始做 demo」,AI 改代码、准备模拟数据、补齐所有语言的文案并打包
    2. 打开 AI 给的本地链接查看效果,想调整就直接说
    3. 满意后说「确认」
  10. 生成需求文档(带标注截图的需求文档页面)
    1. 说「生成需求文档」,AI 截图、标功能序号、逐条写做什么 / 不做什么 / 验收标准
    2. 检查标注位置和每条边界,确认
  11. 生成并执行测试用例(可搜索、可播放录像的测试用例页面)
    1. 说「生成并执行测试用例」,AI 按验收标准写用例并逐条执行
    2. 全部通过就确认;有失败时决定修 demo 还是调整验收标准
  12. 发布上线(版本独立链接 + 工作台首页入口)
    1. 说「发布这个版本」,AI 检查三件套,告诉你要上线什么、上线后的链接
    2. 你说「确认」,AI 通过 API 上传这个版本,并刷新工作台首页
    3. 用手机打开首页,点开三个按钮检查;说「看看线上有哪些版本」核对
  13. 交给研发(一段可以直接发群的交付说明)
    1. 说「生成交付说明」,复制发到研发群

下面用练习需求把每一步的真实对话演示一遍。

这是一次真实操作:会真的建一个版本、真的发布到线上。练习版本的标题会带「练习」二字,发布后放着即可,不影响别的需求。

0. 安装与配置(第一次用才需要)

0.1 打开工作台,让 AI 安装

  1. 拿到工作台文件夹,用 Claude Code 或 Codex 打开它。不知道怎么打开时,查看 快速入门 · 用 AI 打开工作台。
  2. 复制下面的话发给 AI,不需要自己输入安装命令。
你帮我运行 scripts/setup.sh 安装环境
AI(示例)我先检查是否已有安装在运行,避免重复启动。 接下来安装 Homebrew、Git、Node、pnpm、工作台依赖和测试浏览器,已有工具会复用。 如果需要管理员密码,我会打开你能操作的终端,并继续跟进到最后的自检。

Homebrew 用来安装和管理开发工具;配套的测试浏览器供 AI 自动截图、测试和录屏使用,会单独存放,不影响你平时使用的 Chrome。

0.2 需要你操作时,看这三种提示

你看到什么你怎么做之后谁继续
系统询问是否允许 AI 控制「终端」选择「允许」。这只授权打开终端,不代表安装完成。AI 启动安装并检查进展
终端出现 Password:在终端输入电脑开机密码,按回车。输入时不显示字符,是正常现象。安装程序继续;AI 检查是否还有提示
终端出现 Press RETURN/ENTER to continue按一次回车。安装程序继续下载和安装;AI 跟进结果
密码只在终端输入,不要发到 AI 对话里。上述提示不一定都会出现;没有提示时不用额外操作。

AI 做什么:安装过程中检查同一个窗口或安装进度,告诉你当前在装什么。下载慢或失败时,由 AI 检查原因;不会要求你再问「下一步怎么做」才继续。你说「已经允许了」时,AI 会核实实际进度,不会直接当成成功。

0.3 等自动自检,分清安装结果

AI 告诉你的结果接下来怎么办
安装及自检全部通过可以进入下面第 2 步;这次刚得到的自检结果可以沿用。
工具、依赖和测试浏览器已安装,但缺 GitHub / Cloudflare 配置继续下面 0.4 补配置,不用反复运行安装。
安装失败,停在某一步AI 说明具体原因并处理或安全重试;不能把失败说成完成。
AI(缺配置时的示例)环境工具和依赖已安装完成,自动自检还有两项待补: · GitHub:需要只读 key,才能访问仓库。 · Cloudflare:需要账号 ID 和 API Token,才能发布。 安装已结束,终端可以关闭。下面继续补配置。

0.4 配置 GitHub 只读密钥

已有默认密钥时可直接使用:如果 git/github_readonly 存在,且当前没有有效的密钥配置,AI 会先问「是否使用 ifanzy-web 的默认配置只读认证?」。回复「使用默认只读认证」后,AI 更新本机认证配置并自检,无需重新生成密钥;未同意时配置不变。只有连接检查通过,才代表认证可用。
  1. 向研发负责人索取 github_readonly,由负责人按 生成密钥与仓库授权说明 完成只读授权。
  2. 按 把私钥放进工作台:访达 → 工作台文件夹 → git → keys,放入没有 .pub 扩展名的 github_readonly。
  3. 对 AI 说「只读密钥已放好,请按现有文件配置 GitHub 只读访问并自检」,由 AI 按 仓库地址、默认分支与密钥路径 核对本机配置。不要把密钥内容发到聊天里。

完成标志:自检报告 GitHub 仓库可以访问。失败时查看 GitHub 常见问题,不能仅凭文件已放好就判断成功。

0.5 配置 Cloudflare 发布账号

  1. 已有账号可直接继续;没有时按 Cloudflare 账号 注册或向管理员索取。
  2. 按 账号 ID:对应后台界面与复制方法 获取 accountId。
  3. 按 API Token:创建入口与权限设置 获取 apiToken。
  4. 按 发布手册 · 一次性配置 把这两个参数填入本机 deploy/cloudflare.json;填写位置也可查看 快速入门 · 放 key、填参数。项目名按 项目名与站点地址 核对,首次发布会自动建项目。
  5. 填好后说「发布配置已填好,帮我自检一下工作台」。校验只检查配置,不会发布。

完成标志:自检报告 Cloudflare 配置有效。权限或 Token 报错时查看 发布常见报错,处理后再自检。

只读 key 和 API Token 属于密钥,不要粘贴到聊天里、截图外传或放进需求页面。请按指南保存在本机配置位置。

完成标志:安装任务已结束,AI 明确报告自检通过。只有文件存在不代表配置有效;检查未通过时先处理,再进入新需求流程。

1. 环境检查

操作手册:自检与报错处理(直接跳到对应章节)。

你帮我自检一下工作台
AI准备检查结果: ✔ Node / pnpm / git 正常 ✔ GitHub 仓库可以访问(只读) ✔ 推送已锁定,不会误提交代码 ✔ Cloudflare Token 有效(项目 fanzy-product 尚未创建,首次发布时自动创建) ✔ Claude / Codex 规范已同步 ✔ 磁盘剩余 120GB 全部通过,可以开始需求。

你检查:必需检查项全部通过。没有历史需求时,可能提示代码尚未克隆,AI 会在开始需求时处理;发现未完成需求时,先按 AI 提示决定继续还是新建。有 ✘ 怎么办:AI 会说明原因并给出链接,按 配置获取指南 · 自检 处理后,再说一次「帮我自检一下工作台」。刚在第 0 步自检通过且环境没有变化,可以沿用结果。

2. 发问卷,开新需求

操作手册:新需求启动流程(直接跳到对应章节)。

打开 新需求问卷,只填下面几项(其余空着),点「复制给 AI」,粘贴发送:

需求标题:练习:登录页客服邮箱
负责人:(你的名字)
想做什么:手机 H5 登录页最下方加一行小字「Need help? support@fanzy.example」,未登录的访客都能看到,点邮箱可以复制
基线:基于 FanzyWeb 最新版本(默认 master)
这次明确不做的:不做真实发邮件、不改登录逻辑
你会怎么检查做对了:登录页底部能看到这行字;点邮箱后提示已复制
AI收到问卷。环境检查已通过 ✔ 建议版本信息: · 标题:练习:登录页客服邮箱 · 版本号:v2026.10.31-login-support · 基线:FanzyWeb 最新版本 master(今天 10:12 更新) 可以吗?
你可以
AI需求:练习:登录页客服邮箱 版本包:v2026.10.31-login-support 基线:master @ 704fd7f 已创建:prd / demo / testcases 三个版本包,问卷已存为 prd/v2026.10.31-login-support/intake.md 确认启动吗?
你确认

你检查:版本号和基线分支是你想要的。完成标志:打开版本首页(本地预览),能看到「练习:登录页客服邮箱」这一行,状态是「启动确认」。

3. 澄清需求

本步骤的待确认问题会一次性整理,不需要每回答一项就等待下一个问题;已确认的内容不重复询问,只有新依赖或矛盾才补问。

操作手册:需求澄清对话示例(直接跳到对应章节)。

AI开始做之前确认几个边界: 1. 创作者身份的登录页也显示吗? 2. 点邮箱是「复制」还是「打开邮件应用」? (文案会按项目支持的全部语言生成)
你1 都显示;2 复制
AI需求要点清单: 做什么:① 登录页底部显示客服邮箱一行字(粉丝、创作者都显示)② 点邮箱复制到剪贴板,并提示 Copied 不做什么:不发邮件、不改登录逻辑、不做客服入口页 验收标准:底部可见;点击后剪贴板内容为邮箱、出现提示;各语言文案正确 演示数据:邮箱地址用 support@fanzy.example(本地模拟) 确认吗?
你确认

完成标志:AI 说「已记录,进入 demo」。

4. 做 demo

操作手册:查看 demo 与手机效果(直接跳到对应章节)。

你开始做 demo
AI已完成并打包。预览:http://127.0.0.1:4300/demo/v2026.10.31-login-support/dist/login 改动:登录页加了客服邮箱行;文案已按项目支持的全部语言补齐(英文、简体、繁体、日文、韩文);邮箱是本地模拟数据。请在浏览器打开看看效果。

你检查:打开链接,拉到最底部看到那行字;点邮箱看到 Copied 提示;想调整就直接说,例如「字再小一点,颜色淡一点」。

你可以,就这样

完成标志:AI 记录「demo 已确认」。

5. 生成需求文档

操作手册:文档内容与检查项(直接跳到对应章节)。

你生成需求文档
AI已截图并标注 2 个功能点,生成需求文档:http://127.0.0.1:4300/prd/v2026.10.31-login-support/ 内容:背景、目标、标注截图、逐条「做什么 / 不做什么 / 验收标准」、本期不做、模拟数据说明。

你检查:截图上的 ①② 位置对不对;每条的「不做什么」是否和你想的一致。完成标志:你说「确认」。

6. 生成并执行测试用例

操作手册:结果页、失败原因和录像(直接跳到对应章节)。

你生成并执行测试用例
AI按验收标准写了 3 条用例,全部通过 ✔ TC-01 底部显示客服邮箱 · TC-02 点击复制并提示 · TC-03 切换语言后文案正确 每条都能播放执行录像:http://127.0.0.1:4300/testcases/v2026.10.31-login-support/

你检查:点开任意一条用例,播放录像,看操作过程是否符合预期;用搜索框搜「复制」能找到 TC-02。完成标志:全部通过,你说「确认」。有失败时 AI 会问你是修 demo 还是改验收标准。

7. 发布上线

每次发布都检查默认「登录页新人福利提示」模板,线上缺失才补发;已存在不重传。发布核验通过后,AI 必须列出首页、demo、需求文档、测试报告/录像的四个完整网址。详见 模板检查及完整路径交付格式。

操作手册:发布与查看线上版本(直接跳到对应章节)。

你发布这个版本
AI发布前检查:三件套齐全,测试 3/3 通过 ✔ 本次只上传这一个版本,其他版本不动。 上线后的链接:https://v20261031-login-support.fanzy-product.pages.dev 确认发布吗?
你确认
AI已发布 ✔(首次发布,已自动创建 Cloudflare 项目 fanzy-product) · 需求文档 https://v20261031-login-support.fanzy-product.pages.dev/prd/v2026.10.31-login-support/ · demo https://v20261031-login-support.fanzy-product.pages.dev/demo/v2026.10.31-login-support/dist/login · 测试用例 https://v20261031-login-support.fanzy-product.pages.dev/testcases/v2026.10.31-login-support/ 工作台首页 https://fanzy-product.pages.dev/ 已加上这个版本的入口。

你检查:

  1. 用手机打开工作台首页,找到「练习:登录页客服邮箱」,三个按钮都能打开
  2. 在 demo 页面里刷新一次,页面正常(不是 404)
  3. 对 AI 说「看看线上有哪些版本」,列表里有这个版本

完成标志:以上 3 项都正常。全程不需要打开 Cloudflare 后台。

8. 交给研发

操作手册:查找代码改动包及文件清单(直接跳到对应章节)。

你生成交付说明
AI【需求】练习:登录页客服邮箱(v2026.10.31-login-support) 需求文档 / demo / 测试用例:(三个线上链接) 基线:master @ 704fd7f 改动文件:src/views/sign/index.vue、src/i18n 下全部语言文案、src/demo-mock/login-support.ts(新增,模拟数据) 代码改动包 source.patch 在工作台本地,需要可以单独发给研发。

完成标志:把这段文字复制发到研发群。代码不需要你提交,研发会按正式规范重新实现。

9. 改一处再发布(可选,体验覆盖更新)

操作手册:再次发布与查看线上版本(直接跳到对应章节)。

你文案改成「Questions? support@fanzy.example」,然后重新发布
AI已修改 demo → 重新截图 → 需求文档记录变更 → 测试 3/3 通过。 重新发布会覆盖 v20261031-login-support 原来的链接,地址不变,其他版本不受影响。确认吗?
你确认
AI已覆盖更新,原链接刷新即可看到新文案。

走完之后

你已经会了

  • 自检环境
  • 用问卷开需求、确认版本和分支
  • 确认要点、demo、文档、测试
  • 发布一个版本、覆盖更新、查看线上
  • 生成交付说明给研发

接下来

  • 真实需求:先填 新需求问卷,把截图、视频、文档一起拖给 AI
  • 中途关掉了:说「继续上次的需求」
  • 更完整的例子和规则:使用规范