从一句需求、一张截图,到带页面、变量和交互的原生 .rp。
用 RP/1 写设计,用 MCP / CLI 生成,打开 Axure 接着改。
看原型 · 开始使用 · 理解 RP/1 · 能力与边界 · English
先看一个完整的 App
「做一个好看的观鸟手机应用,带 iPhone 17 Pro 外壳,设计你自己定。」
栖羽 / QIYU:自然绿、暖白与鸟类实拍,串起探索、拍照识鸟演示、鸟种详情、观鸟地点和个人手记。9 页原型,能填地点、写观察、收藏鸟种、切换图鉴,保存后回到手记查看。
文字、卡片、按钮、输入和地图示意保留为独立元件;照片是嵌入图片。识别、路线与统计使用演示数据。图片署名与案例说明。
再看 40 秒的工作流
https://github.com/user-attachments/assets/39c37462-3956-48b8-b495-fe90d2ab9431
以「知序」考研复习 App 展示需求、页面和可编辑原型之间的关系。影片依据原型规格制作,属于流程动画。下载 1080p / 60fps 视频 · 制作说明。
设计有源码,就能接着生长
zee-rp 的核心是一份叫 RP/1 的原型源码。页面、布局、数据与事件写在一起,生成后仍然能回到源码改稿,也能在 Axure 里调整。
rp/1 target=9 name="下一次相遇" domain=mobile theme=mobile-hifi
page #home name="发现" device=iphone-17-pro
phone-shell #shell title="去自然里,遇见飞羽。" gap=16
card #bird [fillxhug] title="今天,认识一只翠鸟" body="从水边的一抹蓝绿,开始你的观鸟手记。" actionText="记下这次遇见" goto="notes"
page #notes name="手记" device=iphone-17-pro
phone-shell #shell title="我的第一篇手记" gap=16
input #note [fillx44] value="今天在水边遇见了它。"
button #back [fillx44] "返回发现" goto="home"
把它保存成 birding.rp1,通过 MCP 一次生成原生工程:
{
"source": "/absolute/path/birding.rp1",
"output": "/absolute/path/birding.rp"
}
生成结果同时包含 .rp、源码基线、全页预览、状态拼图与检查报告。[fillxhug] 表示宽度铺满、高度按内容测量。RP/1 手册 · 完整示例 · MCP 用法。
手里有截图,也能开始
重建会输出可编辑布局和对比图。图片无法透露的业务逻辑需要另行定义。截图重建流程。
把它接到你的 Agent
本机需要 Node.js 18+、Python 3.10+;生成原生工程还需要 Axure 和自己保存的 RP9 单页空白工程。截图 OCR 使用 macOS Vision 与 Swift。
git clone https://github.com/LilZeeCN/zee-rp.git
cd zee-rp
python3 -m venv .venv
source .venv/bin/activate
python -m pip install -r requirements.txt
npm ci
在 MCP 客户端中添加服务,并把下面三处路径换成自己的绝对路径:
{
"mcpServers": {
"zee-rp": {
"command": "node",
"args": ["/absolute/path/zee-rp/bin/mcp.mjs"],
"env": {
"PATH": "/absolute/path/zee-rp/.venv/bin:/usr/local/bin:/usr/bin:/bin",
"AXURE_BLANK_TEMPLATE_RP9": "/absolute/path/my-rp9-blank.rp"
}
}
}
}
PATH 需要包含安装了图片依赖的 Python;如果 Node 不在默认路径,也将 command 换成 Node 的绝对路径。Agent 的创作入口是 SKILL.md。
接好之后,可以直接提出一份完整需求:
帮我做一个观鸟 App,包含探索、鸟种详情、地点和手记;生成可编辑的 .rp,并检查实际跳转和保存后的回显。
export AXURE_BLANK_TEMPLATE_RP9=/absolute/path/my-rp9-blank.rp
node scripts/proto.mjs check --spec examples/rp-language/counter.json
node scripts/proto.mjs generate --spec examples/rp-language/counter.json --out-dir outputs/counter --out-rp outputs/counter/counter.rp
node bin/axure.mjs rp-read outputs/counter/counter.rp --json
使用新输出文件名,保留原稿。底层命令见命令表。
交付到哪一步,就验证到哪一步
一个 .rp 能被解析、能在 Axure 打开、能在浏览器点击、能保存后重开,是四件分别需要证据的事。zee-rp 会保留相应检查结果;strictAudit 的通过只说明本次编译的布局与样式门禁通过。
当前原生生成目标为 RP9;RP9 / RP11 的读写工具按版本处理。近期宿主行为证据来自特定 macOS + Axure RP9 样本。完整能力范围 · 验证记录。
视觉创作还有明确边界:RP/1 暂无 fontFamily,离线字体与宿主回退可能不同;图片圆角、阴影和渐变通过嵌入位图呈现。状态高度、导航样式、字体替代流程和静态预览规则见视觉创作说明。
继续往下看
npm test
npm run test:language
npm run test:polish
源码和原创示例采用 MIT。案例中第三方照片的许可与署名单列。项目由 LilZee 独立开发,与 Axure 无隶属关系;模板、官方元件库、字体和运行时由使用者本机提供。