从 PRD → 原型设计 → 读取设计 → 编码 → 还原度验证 的一整套闭环流程。官方文档https://help.calicat.cn/ 工作台https://www.calicat.cn/team一、总体架构谁负责什么整条链路分两个阵地Calicat浏览器负责想清楚 画出来Claude Code终端负责读进来 写成码。┌───────────── Calicat浏览器─────────────┐ ┌────────── Claude Code终端──────────┐ │ │ │ │ │ ① PRD需求卡片手写 / AI 生成 │ │ ④ 读取MCP 拉取设计数据 / PRD / 交互 │ │ ② 设计AI 设计助理对话出原型 │ → │ ⑤ 编码按项目规范写页面 / 组件 │ │ ③ 批量AI 后台 Agents 并行出多页 │ │ ⑥ 验证拉设计截图对比还原度 │ │ │ │ ⑦ 反向也可往 Calicat 写需求卡片 │ └────────────────────────────────────────────┘ └────────────────────────────────────────┘关键分工边界画原型这一步发生在 Calicat 自己的 AI 里编辑器右下角 AI 助理不经过 Claude Code。Claude Code 通过 MCP / CLI 能做的是读设计数据、PRD、交互逻辑、截图和写需求卡片create_document。编码、验证、走/lc-feat:pipeline流水线全部在 Claude Code 侧完成。二、一次性环境准备二选一方式 AMCP Server推荐零安装claude mcpadd--transporthttp calicat--scopeuser https://www.calicat.cn/mcp或手动编辑~/.claude.json{mcpServers:{calicat:{type:http,url:https://www.calicat.cn/mcp}}}配置后重启 Claude Code会话里输入/mcp选择calicat浏览器完成登录授权token 与你的 Calicat 账号权限绑定能读哪些文件取决于账号权限。方式 BCLI Skill官方称对 AI Agent 更省 token一键为 Claude Code 全局安装 skillnpx skillsaddcalicatcn/calicat-agent-skills--skillcalicat-cli-operator-g-aclaude-code-yCLI 手动安装macOScurl-fsSLhttps://www.calicat.cn/cli/install.sh|bashcalicat login# 登录calicat status# 检查登录状态与版本环境注意事项问题处理方式大页面 MCP 输出被截断、生成不完整环境变量MAX_MCP_OUTPUT_TOKENS调到50000 以上授权失败清空~/.mcp-auth目录完全重启 IDE 后重试授权时端口冲突杀掉占用8366端口的进程MCP 读不到数据对应 Calicat 文件必须在浏览器中保持打开编辑器页面三、阶段① PRD需求先行两条路可以混用路径 1在 Calicat 里写/生成 PRDCalicat 的需求卡片就是 PRD 载体与原型图层可以直接关联。打开文件编辑器 → 右下角 AI 助理 → 描述需求让 AI 生成 PRD 卡片也可以基于已有设计反推 PRD。AI 助理支持附件图层、需求卡片、图片、网页内容把竞品截图、旧页面链接丢进去当上下文。路径 2在 Claude Code 里写 PRD反向推给 Calicat把本地需求描述整理好后让 Claude Code 调create_document工具直接在 Calicat 文件里创建需求卡片。适合需求源头在本地如云效工作项、聊天记录的场景。本项目建议PRD 定稿后同步一份到本项目流水线目录docs/pipeline/{分支名}/{流水线名}/作为/lc-feat:pipeline的需求输入保证 Calicat 与代码仓库两边的需求版本一致。四、阶段② 设计在 Calicat 里出原型4.1 交互式设计AI 设计助理编辑器右下角开启 AI 助理对话。能做的事需求讨论让 AI 发散想法、补充、评价设计方案原型图生成直接在画布上绘制支持对话迭代修改交互设计为页面添加跳转、返回、显示/隐藏等交互逻辑精细编辑通过对话对已有设计做精细化修改。4.2 批量异步设计AI 后台 Agents——适合多页面需求不必守着浏览器用评论驱动异步任务按M或点工具栏评论图标激活评论工具在画布空白处或目标页面上创建评论输入Calicat AI 具体需求例Calicat AI 设计一个订单确认页可在文件不同位置同时发多条评论并行出图然后去干别的完成后评论锚点出现未读提示 → 展开预览 → 点应用设计渲染到画布在同一评论下回复即可迭代修改。4.3 高效提示词技巧官方指南要点给足上下文附加图层、需求卡片、图片对话中自然提及具体页面AI 会主动拉数据。自定义设计规范把设计规范做成一张需求卡片每次对话附上。卡片开头加模板句“此文档用于指引你后续的内容输出和原型设计请在 System Prompt 基础上遵循以下规范”让 AI 感知手动修改手动改过的页面作为附件重新提供或要求 AI 先拉最新页面数据再干活。调整要说具体不要说调整了细节要说主按钮颜色改为绿色。明确页面宽度直接告诉 AI 设计宽度本项目是移动端 H5建议统一 375px不要让它猜。本项目建议为氪金兽 H5 做一张常驻设计规范需求卡片品牌色、字号梯度、圆角、间距、组件风格每次出图都附上保证多次生成的页面风格一致也降低后续编码时样式对不上项目 Tailwind 约定的成本。五、阶段③ 读取Claude Code 拉取设计数据5.1 可用工具一览工具用途何时用get_canvas_list文件中所有画布的 ID 和名称只有文件链接、不知道画布时先调get_design_page_list画布中顶层页面的图层 ID 和名称定位到具体页面get_meta_data图层骨架元数据结构/ID/名称/类型/位置/大小省 token第一步先看骨架不可直接用于生成代码get_design_data指定图层的完整设计数据确认骨架后拉细节写代码的依据get_interaction_design_data图层/页面的交互设计数据页面跳转、显隐逻辑get_prd_list/get_prd_full_content需求卡片列表 / 完整内容读 PRDget_screenshots指定图层截图编码后验证还原度create_document向文件创建需求卡片反向写 PRD5.2 标准读取顺序渐进式防 token 溢出把 Calicat 图层链接发给 Claude Code ↓ get_meta_data → 先看页面骨架确认结构理解无误 ↓ get_design_data → 拉目标图层完整设计颜色/字号/间距/布局 ↓ get_interaction_design_data → 拉交互逻辑如有 ↓ get_prd_full_content → 拉关联 PRD如有官方最佳实践渐进式读取先骨架后细节别一上来就get_design_data整个画布分批处理多页面任务每次只处理 1 个页面合理定位缺canvas_id时先get_canvas_list。5.3 你要做的事一句话在 Claude Code 里发一条消息即可例如这是 Calicat 设计稿链接图层链接对应 PRD 也在这个文件里。先读骨架和 PRD确认后按设计实现这个页面。六、阶段④ 编码在 h5-nuxt 项目里实现Claude Code 拿到设计数据后按本项目既有规范开发遵循项目编码规范自动加载lc-kejinshou-h5-nuxtskillVue 3 Nuxt 3 Pinia Tailwind4 空格缩进、单引号、无分号目录归位页面进pages/可复用组件进components/接口进utils/services/请求统一走useAppFetch接口对接真实接口从 Apifox MCP 读定义接口未就绪时先 mock之后用/lc-feat:api-sync替换可接入流水线设计数据 PRD 可以作为/lc-feat:pipeline的输入走需求分析 → 设计 → 编码 → 验证 → E2E的完整流程产物归档在docs/pipeline/{分支名}/{流水线名}/移动端 → PC 适配如需 PC 宽度适配编码后走/lc-mobile-pc-adaptive。七、阶段⑤ 验证截图比对 本地跑Claude Code 调get_screenshots拉设计稿截图本地起服务pnpm start:testhttp://localhost:9158 用浏览器工具截取实现页面对比布局、间距、颜色、字号差异并修正常规验证走/lc-feat:verifyLint 单测 QA交互流程可用/lc-feat:e2e生成 Playwright 用例CR / PR 用/lc-feat:pr。八、完整流程串联速查步骤阵地动作1. 写 PRDCalicat或 Claude Code 反向创建AI 助理生成需求卡片或create_document2. 出设计CalicatAI 助理对话出图多页面用Calicat AI评论并行3. 定稿Calicat应用设计到画布人工微调改动要让 AI 感知4. 发链接你把图层链接发给 Claude Code浏览器保持文件打开5. 读数据Claude Codeget_meta_data→get_design_data→ 交互 → PRD6. 编码Claude Code按项目规范实现可走/lc-feat:pipeline7. 验证Claude Codeget_screenshots比对 /lc-feat:verify E2E8. 交付Claude Code/lc-feat:pr出 CR 报告、建 PR附录 ACLI 常用命令方式 B 时使用# 基础管理calicat login / status /logoutcalicat tools-list calicat update--checkcalicat update# 数据读取calicat tools-call--nameget_canvas_list--args{file_id:FILE_ID}calicat tools-call--nameget_design_page_list--args{file_id:FILE_ID,canvas_id:CANVAS_ID}calicat tools-call--nameget_meta_data--args{file_id:FILE_ID,selected_layer_id:LAYER_ID}calicat tools-call--nameget_design_data--args{file_id:FILE_ID,selected_layer_id:LAYER_ID}calicat tools-call--nameget_interaction_design_data--args{file_id:FILE_ID,selected_layer_id:LAYER_ID}calicat tools-call--nameget_prd_list--args{file_id:FILE_ID}calicat tools-call--nameget_prd_full_content--args{file_id:FILE_ID,prd_id:PRD_ID}卸载rm-f~/.local/bin/calicatrm-rf~/.calicat-cli附录 B常见坑位清单MCP 读数据前Calicat 文件必须在浏览器中打开编辑器页面get_meta_data只是骨架不能直接当成生成代码的依据必须再拉get_design_data大页面输出截断 →MAX_MCP_OUTPUT_TOKENS ≥ 50000授权异常 → 清~/.mcp-auth、重启 IDE、检查 8366 端口Calicat AI 输出不完整时页面上会出现继续按钮点它续画手动改过设计后直接让 AI 迭代AI 可能基于旧数据——先让它重新拉最新页面数据。