做产品原型不知道用什么工具好？Figma 太沉重，Axure 要装客户端，墨刀虽然是 Web 的但付费功能一堆。有没有更轻的方法——给张截图就能出手机端 HTML 原型？
还真有。mobile-prototype-drawing 是一个 Codex Agent Skill，上传一张手机截图就能给你生成静态 HTML 原型，或者你列几条业务规则，它直接给你生成一套完整的手机端 H5 页面。
是什么
这是一个给 OpenAI Codex 用的 Agent Skill（技能包），GitHub 仓库名 liyangxu219318-bot/mobile-prototype-drawing，2026 年 6 月底上线，MIT 协议。
它的核心能力就两件事：
① 截图还原——你给我一张手机页面的截图，我照着布局、比例、颜色层次给你还原成一个静态 HTML 原型。视觉上八九不离十。
② 业务规则生成原型——你说「我需要一个审批流程：首页展示客户信息和待办入口，点击进入问卷列表，填写时先弹出外部链接确认」，它直接给你生成一个能交互的 H5 原型。
生成的产物就是一个 index.html，手机端比例的纯静态页面。多页面用 Hash 路由串联（#home、#list、#detail），不需要任何服务器。
怎么用
装起来很简单：
git clone https://github.com/liyangxu219318-bot/mobile-prototype-drawing.git \
~/.codex/skills/mobile-prototype-drawing
重启 Codex 后，直接跟它说「用 $mobile-prototype-drawing 根据这张截图做一个手机端静态 HTML 原型」就行了。
也支持纯文字描述的业务规则输入：
使用 $mobile-prototype-drawing，根据以下业务规则生成一个手机端审批原型：
1. 首页展示客户信息和待办入口
2. 点击入口进入问卷列表
3. 点击填写时先弹出外部链接确认
4. 确认后进入第三方表单页面
你甚至可以要求它生成「业务串联图」——就是那种橙色直角连线、标注每个按钮跳转关系的流程图，放在 preview-screenshots/ 目录下。
有意思的功能
这个 Skill 的 README 和 SKILL.md 加起来写了 5000 多字，规则之详细在 Agent Skills 里算是第一梯队。聊几个我觉得挺亮的设计：
评审工具（Review Assistant）。原型做好后，可以一键开启「交互提醒」——页面上所有真实可交互的元素（链接、输入框、按钮、下拉菜单）都会被高亮标记出来，方便产品和设计评审。
水滴标注（Waterdrop Annotations）。在评审模式下，可以在原型上任意位置「滴」一个水滴，输入备注。水滴坐标按百分比存储，页面缩放也不会跑偏。备注存 localStorage，刷新页面还在。
弹窗友善。弹窗打开时，交互标注会自动只标记弹窗内的交互点，不会去圈后面的背景层。关闭弹窗后标注恢复正常。
互斥状态单独画图。如果你的业务有「首次签到」和「已签到」两种互斥状态，它会分别生成各自的业务流程图，不会搅在一个图里。
橙色直角连接线。流程图统一用橙色正交线，从触发按钮的边缘接出，标签放在留白区不遮挡原型内容。这个细节让我觉得作者是真做过评审的。
槽点也不少
首先，这个项目目前只有 4 个 Stars。刚上线两周，基本没人用。代码量也很小（仓库只有 18KB），说到底就是一个超详细的 Skill 描述 + 几行配置，并没有真正意义上的「代码」。它的价值全在那个 SKILL.md 里写的规则集上。
其次，它只支持 Codex。如果你用 Claude Code 或者 Cursor，这个 Skill 装不上。不过规则本身是通用的，把 rules 文件抄到其他平台也没毛病。
还有，拦截交互的模式描述得有点啰嗦了。用了一段话讲 pointerdown/pointerup/pointercancel 在 capture phase 做什么，这种实现细节写在 SKILL.md 里其实挺容易让 LLM 搞混的。
跟同类怎么比
类似的截图→代码工具有不少。tldraw 能把手绘 UI 转成代码，v0.dev、Claude Artifacts 也能生成前端页面。但 mobile-prototype-drawing 的定位不太一样，它不是要生成生产代码，而是要生成可供评审的移动端原型。
所以它的规则偏向「评审友好」：手机比例画布、Hash 路由单文件、交互标注、水滴评注、业务串联图。这些是 Figma/Sketch/墨刀做的事情，但它用纯静态 HTML 做到了，而且不要钱。
GitHub：https://github.com/liyangxu219318-bot/mobile-prototype-drawing
安装：git clone 到 ~/.codex/skills/
标签：#手机端原型 #MobilePrototype #Codex #AgentSkill #H5原型 #产品原型 #截图转原型
关注我，每期分享一个帮你省事的强大工具 🛠️