Skip to main content
Glama
Sign In
protoflow

protoflow

by CharlesYe8848
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

描述需求，梳理思路，画出原型，整理数据，交付文档与演示。

配合 Claude Code、Cursor、Codex 等 AI 助手，用对话制作脑图与流程图、可交互原型、元素标注、PRD、 可导出 Excel 的结构化表格和幻灯片。内容改了，还能检查哪些引用和交付物需要更新。

ProtoFlow：购物车原型与元素标注

快速开始 · 示例 · 使用说明 · 反馈问题

快速开始

安装

需要 Node.js ≥ 22.12.0 和 Git。

git clone https://github.com/CharlesYe8848/protoflow.git
cd protoflow
npm ci

想先看效果？运行 npm run demo，打开终端输出的原型、PRD、上线公告或年终汇报幻灯片链接，无需连接 AI。

安装技能

仓库的 skills/ 下有三个标准 skill，都装到助手的技能目录：

skill

作用

protoflow

入口：让助手在"做可点击原型""做个数据表格"等请求中主动选择 ProtoFlow，并按交付物路由

protoflow-product-dev

产品研发流程：基于原型写 PRD、上线公告，截原型图、发布前检查、看文档是否落后于原型

protoflow-slides

幻灯片创作流程：内容策划、视觉设计、逐页检查，并支持表格、绘图、音视频与多格式导出

skill 负责场景选择和流程，下面的 protoflow 命令行工具（CLI）提供实际操作；两者都需要可用。

推荐用软链接安装（仓库更新后 skill 跟着更新）。Claude Code 用 ~/.claude/skills，Codex 用 ${CODEX_HOME:-$HOME/.codex}/skills；在本仓库根目录执行：

SKILLS_DIR="$HOME/.claude/skills"   # Codex：SKILLS_DIR="${CODEX_HOME:-$HOME/.codex}/skills"
mkdir -p "$SKILLS_DIR"
for s in protoflow protoflow-product-dev protoflow-slides; do
  if [ -e "$SKILLS_DIR/$s" ]; then echo "$s 已存在，请先比较内容，再决定是否替换。"
  else ln -s "$PWD/skills/$s" "$SKILLS_DIR/$s"; fi
done

也可以拷贝（cp -R）。拷贝后流程 skill 的脚本不在仓库里，会去 PATH 上找 protoflow 命令，或者用 环境变量 PROTOFLOW_CLI=/path/to/protoflow/bin/protoflow-cli.js 指定。安装后重新打开会话。技能不含 运行时，也不会自动安装依赖。

安装命令行工具

助手只通过 protoflow CLI 操作 ProtoFlow；当前不再提供 MCP 入口。在本仓库根目录执行一次：

npm link                  # 装一个全局的 protoflow 命令，指向这个仓库（仓库更新后命令跟着更新）
protoflow --selfcheck     # 输出工具数量即安装成功
protoflow --help          # 每个工具一行；protoflow help <工具> 看参数

不想装全局命令也可以直接用 node /path/to/protoflow/bin/protoflow-cli.js，在跟助手对话时告诉它仓库路径即可。 重新打开助手会话，确认 ProtoFlow 技能已加载。连接诊断见使用说明。

Related MCP server: MCP Figma

试着这样说

先梳理思路

做原型之前，先把会员体系的需求拆成一张脑图，再画一张下单流程图给我看。

打开链接看图，对着节点右键「标注」写意见，复制给 AI 就能接着改。

创建原型

做一个可点击演示的购物车结账原型：购物车页展示商品、数量和合计，支付页支持微信、支付宝和银行卡。做好后给我预览链接。

修改并整理文档

购物车为空时禁用「去支付」。给页面补上交互规则和异常状态标注，再生成一份带截图的 PRD。

检查后续变更

把商品单价改成 139 元，检查哪些标注和文档需要更新。

打开链接就能试用原型；修改后刷新即可查看。检查会提示需要更新的内容，你可以继续让 AI 核对标注、更新截图并保存新的文档版本。

整理数据并导出 Excel

把这份季度销售数据整理成带汇总和样式的表格，给我预览，确认后导出 Excel。

制作绘图与幻灯片

先用流程图梳理新用户激活路径，再把关键结论和数据表做成一份评审幻灯片，导出 PDF。

也可以直接体验十页年终汇报示例，查看从年度结论、经营数据到下一年规划的完整叙事。

为什么用 ProtoFlow

原型改了以后，知道哪些标注、文档和已发布内容需要跟着改。

ProtoFlow 把原型、元素标注、截图和文档关联起来，让一次交付成为可以持续维护的工作流。

日常工作

ProtoFlow 怎么帮你

交互规则散在对话和文档里

标注绑定页面元素，点击说明即可定位

原型修改后，靠记忆核对文档

发起检查，发现待核对的标注、过期文档和待更新的已发布内容

多轮修改后，难以确认交付版本

保存画布、文档、表格、绘图和幻灯片的不可变版本与修改记录

换一个 AI 或新会话继续做

项目保存在本地文件夹，保留原型、标注和文档供继续编辑

适合需要持续修改原型、交付研发并同步业务团队的项目。发布到钉钉等平台需配合相应的 AI 助手工具，详见使用说明。

从原型到交付文档

同一个结账示例，可以整理成面向研发的 PRD，也可以从 PRD 生成面向业务用户的上线公告。

PRD：页面截图、交互规则、验收标准与修改记录。

PRD 预览：购物车与支付方式

上线公告：功能价值、操作说明与常见问题。

上线公告预览：购物车与多方式支付

体验完整示例 · 阅读 PRD 正文 · 阅读上线公告正文

分享成果

点击画布或文档右上角的「分享」，或直接告诉 AI：

把原型导出成一个可直接打开的 HTML 文件，再把 PRD 导出为 Markdown。

画布支持项目 ZIP 和单页 HTML；文档支持 Word、单页 HTML 和带图片的 Markdown 压缩包；表格支持 Excel；绘图支持单页 HTML 和源文件压缩包；幻灯片支持 PDF、MP4、单页 HTML 和源文件压缩包。 把导出的文件发给同事即可；本地预览链接仅在你的电脑上有效。

更多

MIT · v0.2.1 预览版

Available Tools

22 tools
build_docA

构建文档版本，两阶段。snapshot：读 docs//.build/captures.json（这个文档要截哪些画板的哪些状态），冻结引用到的画板进 .build/snapshot/，供 build_publish_pack 截图（只有用画布截图当上下文的类型才需要，如 PRD/上线公告）。finalize：doc.md 已手写好、（用截图流水线的话）截图已 seal——校验 引用是否都落地、算指纹、冻结成 versions//、按 note 自动重生成修改记录表重渲染 docs//preview.html（文档阅读页是冻结版本内容的产物，仍然落盘）、跑该类型的 checks。note 必填（一句话说清这次改了什么，进修改记录表；不写版本号）。纯 prose 改动可直接 finalize，复用已有 .build/ 产物。返回的 url（http://127.0.0.1）是打开方式，findings 里 error 级会在 record_publish 拦截发布

Inputs: mode (required), docId (required), projectId (required), dir, +3 more.

build_publish_packA

截图流水线三阶段（PRD/上线公告等用画布截图当上下文的类型的 sidecar）。previews：校验 docs//.build/captures.json 并渲染 .build/previews/.html，每个 capture 返回的 url（http://127.0.0.1）给浏览器工具打开、按 actions 操作后截图；capture：可选的自动化截图——无头浏览器（本机 Chrome，找不到才下载，不弹窗）按 actions 操作后按内容真实高度截图，写 .build/exported-images/.png；actions 表达不了的复杂交互可跳过这步手动截图放同一位置。seal：核对图片清单，把截图落进 docs//assets/.png + 写 .build/captures-manifest.json（doc.md 用 引用）

Inputs: mode (required), docId (required), projectId (required), dir.

chain_statusA

计算整条链的过期清单，按严重度排序：broken（元素/引用丢失）> unvalidated（源码外部修改未校验）> review（标注待核对）> drifted（PRD 版本落后）> lagging（渠道文档落后）。每项含 reason 与 suggestedAction

Inputs: projectId (required), dir.

create_docA

在 docs/ 下新建一个文档：docs//（doc.md 工作草稿 + doc.json）。kind 是文档类型（doc-kinds// 目录，如 prd、release-note；未知类型报错并列出可用的）。docId（= 目录名）默认 = kind 名（docs/prd/、docs/release-note/），一个项目一种类型一篇是常态；同类型要多篇时才显式传 docId（可含中文）。title 是这篇文档的主题一句话——不带项目名、不带「PRD」之类类型字样、不带版本号（项目上下文由所在项目给，类型和版本号画布菜单单独展示）；传了会直接填进 doc.md 的一级标题和 doc.json.title，省得建完再手改，不影响目录名。from 记来源（如 from:"prd" 基于 prd 文档 head 版本、from:"prd@3" 指定版本），写进 doc.json.origin，之后上游出新版本 chain_status 会提示。doc.md 按该类型的 template.md 起草——起草完写正文，再 build_doc(mode:"finalize", note:"…") 定第一个版本

Inputs: kind (required), projectId (required), dir, from, +2 more.

create_projectA

创建新项目：在工作目录下建一个以项目名 slug 命名的自包含文件夹（同名冲突自动加序号），并写入 AGENTS.md/CLAUDE.md 供任何 agent 冷启动接手。返回项目 id（即文件夹名）

Inputs: name (required), dir.

deleteA

按 id 删除页面（pg_ 前缀，级联删画板）或画板（ab_ 前缀）。若目标被某文档版本的截图引用，返回中带 warning。刷新已打开的画布标签即可看到移除结果

Inputs: targetId (required), projectId (required), dir.

export_canvasA

把整张画布导出成一个文件，写到 outDir 下（文件名自动取项目名）。format="zip"（默认）导出目录树（index.html + lib/ + pages/.../preview.html，标注定位/高亮在纯 file:// 下会静默失效，其它都正常）；format="html" 导出单个自包含 .html（所有画板、库都内联，双击即看，无跨源限制，但画板越多文件越大）。渲染逻辑跟实时预览（render_canvas）完全一样——只是渲一次落盘/拼字符串，不是另一套。跟画布页面右上角「导出」按钮菜单走的是同一份逻辑，区别是按钮触发浏览器下载、这个工具直接写到你指定的目录

Inputs: outDir (required), projectId (required), dir, format.

export_docA

把一篇文档的当前（head）版本导出成一个文件，写到 outDir 下（文件名自动取文档标题）。format="zip"（默认）导出目录树（preview.html + lib/ + assets/，不带历史版本、不带版本切换）；format="html" 导出单个自包含 .html（marked/mermaid、图片全内联，双击即看）；format="markdown" 导出单个 .md（图片内联成 data URI，不依赖 assets/ 目录，可直接粘贴/导入钉钉文档等其它工具）。不需要 protoflow 的预览服务。跟文档阅读页右上角「导出」按钮菜单同一份逻辑，区别是按钮触发浏览器下载、这个工具直接写到你指定的目录

Inputs: docId (required), outDir (required), projectId (required), dir, +1 more.

get_annotationsA

返回这块画板的标注：md（annotations.md 全文，一篇 markdown）、refs（annotations.refs.json，{ 元素id: { interactionPath:[...] } }）、elementIds（当前源码里的元素 id 清单，md 里 名 引用的 id 要从这里选）、elementHints（{ 元素id: 一句它在界面上大概是什么 }，从源码静态提取，用来给 chip 起人话显示名——只是线索、可能不准、别原样当显示名粘进去；取不到线索的 id 不在这个表里）、sourceHash、validatedHash（md 上次核对于哪版源码）、brokenRefs（md 里引用但源码已没有的元素 id）

Inputs: projectId (required), artboardId (required), dir.

get_doc_kindA

返回某文档类型的起始模板（template.md）+ 撰写规范（writing.md）+ 元数据（label、contextSource）。写这类文档前先调一次。未知类型时错误信息里列出全部可用类型

Inputs: kind (required), projectId (required), dir.

get_guideA

按主题返回策略文档全文。topic 即 guides/ 下文件名（不含 .md），未知主题时错误信息中列出全部可用主题。文档类型专属的模板/规范用 get_doc_kind，不在这里

Inputs: topic (required).

get_projectB

返回项目树（页面/画板层级、画板 sourcePath 绝对路径，可用文件工具直接读）与链路健康摘要（各严重级别发现项计数）

Inputs: projectId (required), dir.

import_projectA

从外部已有的 protoflow 项目目录（project.json + pages/ 布局）导入到工作目录。只读源目录，补登指纹基线、补写 AGENTS.md/CLAUDE.md；目标目录已有同 id 项目时报错

Inputs: sourceDir (required), dir.

list_projectsB

列出工作目录中所有项目（id 与名称）；id 即项目文件夹名

Inputs: dir.

record_publishA

登记一次渠道发布到当前文档 head 版本（channel/channelDocId/url），同渠道重复发布追加历史。文档未 finalize 时报错。发布前会跑该类型的 checks——任何 error 级 finding（如未闭环的开放问题标记）默认拦截并列出清单；确需带着发布传 acknowledgeFindings:true 跳过

Inputs: docId (required), channel (required), projectId (required), channelDocId (required), +3 more.

render_canvasA

打开整站画布：确保本地预览服务在跑，返回它的 http://127.0.0.1 url（浏览器工具打不开 file://，别拿路径自己拼）。画布把项目所有页面和画板汇进一份自包含文档——左侧侧边栏切页面（文档内显隐、无跳转），每页独立的可缩放可平移画布（滚轮平移，Ctrl/Cmd+滚轮或触控板捏合缩放，拖拽平移，一键适应窗口），画板按各自 canvasWidth 真实像素宽度显示、高度随内容自撑。画布是项目 source.jsx / annotations / 结构的实时投影：加删/改名页面画板、改源码、改标注、git 撤回后，刷新已打开的画布标签即最新，不写盘、不需要重复调用本工具

Inputs: projectId (required), dir.

render_previewA

确认某画板可以在整站画布里观察：校验它已有源码，确保本地预览服务在跑，返回整站画布的 http://127.0.0.1 url（不是画板单独地址——画布能看到项目全部内容，悬浮这块画板点右上角新标签图标即可单独打开它）。画布/画板 preview 是 source.jsx + annotations.md + 项目结构的实时投影：改了源文件（含通用 agent 直接改、编辑器 Undo、git checkout）刷新浏览器即最新，不写盘、不需要重复调用。曾用于生成落盘 preview.html——现在不再落盘

Inputs: projectId (required), artboardId (required), dir.

reorder_artboardsA

调整一个页面下画板在画布里的显示顺序（新建画板默认追加到末尾，用这个工具调整）。artboardIds 必须是该页面现有画板 id 的完整顺序（一个全排列，不能少画板也不能带别的页面的画板 id）——先用 loadProjectTree/get_project 之类的读操作看一眼现有顺序，再整体给出目标顺序。刷新已打开的画布标签即可看到新顺序

Inputs: pageId (required), projectId (required), artboardIds (required), dir.

save_artboard_sourceA

写画板 JSX 源码。source（全量）与 edits（补丁 [{oldText,newText}]，oldText 须唯一匹配）二选一。Babel 编译校验失败不落盘。成功返回 sourceHash 与 idAudit（消失的元素 id 及 annotations.md 里对它们的断链引用）。画板 preview 和整站画布都是 source.jsx 的实时投影：刷新已打开的画布标签即最新，无需重新调用 render_preview / render_canvas

Inputs: projectId (required), artboardId (required), dir, edits, +1 more.

upsert_artboardA

无 id 在页面下创建画板，有 id 更新名称/描述。可选 canvasWidth（画布中该画板的真实像素宽度，即 Figma 式 Frame 宽度，默认 1440；移动端画板可传 375/414 等）。返回画板 id。画布实时投影项目结构——刷新已打开的画布标签即可看到新/改名画板，无需重新调用 render_canvas

Inputs: name (required), pageId (required), projectId (required), id, +3 more.

upsert_pageA

无 id 创建页面，有 id 改名。返回页面 id。画布是项目结构的实时投影——已打开的画布标签刷新一下，新/改名页面就出现在左侧侧边栏，无需重新调用 render_canvas

Inputs: name (required), projectId (required), id, dir.

write_annotationsA

写这块画板的标注。md（annotations.md 全文）与 edits（补丁 [{oldText,newText}]）二选一，跟 save_artboard_source 一个套路。md 是一篇 markdown，写法像一节 spec：分区用 ## 标题、一条说明用 ### 标题；正文里想让读者点击定位到某元素就写内联链接 显示名——显示名要用人话（这东西在界面上是什么、可见文字或角色，如「折叠按钮」「候选人卡片列表」），别拿元素 id / class 名 / 内部代号当显示名；#el/元素id 里的 id 才从 elementIds 照抄。顺序 = 文档顺序、分组 = 标题，没有 groupId / order / revision。可选 refs：{ 元素id: { interactionPath:[{type:'click'或'hover',selector,index?}] } }，仅当某个被引用的元素要交互之后才在 DOM 里时才需要。md 里 名 引用了当前源码没有的元素 id → REF_NOT_FOUND，整个拒绝。成功自动把 meta.annotationsValidatedHash 盖成当前源码指纹。标注是 annotations.md 的实时投影——刷新已打开的画布标签即最新

Inputs: projectId (required), artboardId (required), md, dir, +2 more.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

    TDQS

    A3.8/5.0

    Scored across 22 tools

    Disambiguation3/5

    Most tools are clearly distinct, but render_preview and render_canvas are near-identical in behavior (both return the whole-canvas URL), and the generic `delete` tool is ambiguous without a resource prefix. This creates real misselection risk for agents.

    Naming Consistency4/5

    The vast majority follow verb_noun (upsert_page, list_projects, create_doc, export_canvas), but `delete` and `chain_status` break the pattern. The inconsistent outliers are minor, so the set is still predictable overall.

    Tool Count3/5

    22 tools falls into the heavy range (16–25) and the surfaced redundancy between render_preview and render_canvas could be trimmed. However, the breadth is mostly justified by the project/page/artboard/docs workflow.

    Completeness4/5

    Core lifecycle coverage is strong: projects can be listed/get/created/imported, pages/artboards can be upserted/deleted/reordered, source and annotations are writable, and docs can be built and published. Minor gaps remain: no dedicated get_source or get_doc tool (relying on file tools), and no project deletion or doc read utility.

    Maintenance

    ActivitySlowing
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • MCP Figma

      YelowFlash09
      A
      license
      Not graded
      quality
      D
      maintenance
      Enables AI assistants to read and modify Figma designs programmatically, supporting design analysis, element creation, text replacement, annotations, auto-layout configuration, and prototype visualization through natural language commands.
      2,097 npm
      MIT

    • maketa-mcp

      demdas
      A
      license
      Not graded
      quality
      C
      maintenance
      Enables AI assistants to build and edit app-screen mockups and clickable prototypes by reading and writing structured scene models, including screen creation, node manipulation, and branching from code-based screens.
      MIT

    • figma-mcp

      ChimbuezeDavid
      A
      license
      B
      quality
      A
      maintenance
      Enables AI-driven UI/UX design and prototyping in Figma by letting agents generate AutoLayout screens, modify canvas elements, and wire interactive prototype flows through natural language.
      47
      MIT