什么是 RPML?
深入了解 RPML(快速原型标记语言)——OriginAI 采用的静态 UI 规格语言,帮助编码 Agent 精准对齐界面、状态与交互规则,而非直接生成运行代码。
RPML(Rapid Prototype Markup Language,快速原型标记语言)是一种专为界面规格化设计的声明式 UI 描述语言。一个标准的 .rpml 文件对应一个具体的业务页面或独立功能区域:它通过人类与编码 Agent 均能无歧义解析的标记语法,完整涵盖页面布局结构、全生命周期的交互状态、细粒度角色权限变体、加载中(Loading)/ 空数据(Empty)/ 错误校验(Error)等全部分支逻辑。
它并不是即将直接部署上线的前端代码,也不是粗糙的可点击原型。RPML 的核心哲学是**“以空间换时间”**——将原本需要动态操作才能触发的各类分支状态,结构化并排呈现在带有精准锚点批注的统一布局定义中,评审者无需再反复询问“如果遇到异常情况界面该如何呈现”。
OriginAI 中的核心规格资产均采用 RPML 进行描述。你在工作台中调优规格,发布为不可变的 Release 快照,而 Claude Code、Cursor 或 Codex 则借助 originai CLI 或 MCP 协议精准解析该快照并据此实施代码。
为什么抛弃截图与传统 PRD 文档
静态截图无法表达动态状态流转;传统 PRD 容易快速腐化脱节,往往也无法详尽列举空状态数据、特定管理员可见的操作项或二次确认交互流。常规的规格驱动开发工具通常倾向于用 Markdown 列表说明*“下一步要做什么”,却无法确切定义“当规则触发时界面到底长什么样”*。
RPML 正是为此而生的严谨产品契约:
- 每个功能页面或业务区域维护独立的
.rpml文件,根标签为<page>。 - 采用
<view>组织界面快照,统一使用语义化的 RPML 原语组件(如button、table、navigator等),杜绝滥用无语义的裸div或input。 - 借助编号锚点(
data-pin)与对应的<annotation>批注系统,将业务规则与对应的界面区域就近绑定。 - 使用结构化的
<enum>与<enum-item>明确声明条件分支,避免将关键状态逻辑淹没在松散的自然语言段落中。
在现代浏览器中解析并实时渲染此类规格文件的底层运行时是开源包 @21stware/rpui。OriginAI Web 工作台采用完全同源的渲染规范。在本地开发环境中,你亦可直接执行 npx @21stware/rpui serve . 对包含 .rpml 的本地目录进行热重载预览。
OriginAI 中的 RPML 全生命周期
- 编写与生成:在 Web 工作台中通过提示词智能生成或手动编写
.rpml规格文件(在项目首次发布前,外部编码 Agent 亦可通过originai write-document直接写入)。 - 离线校验:执行
npx originai validate --content "…"即可在本地快速验证语义与结构合规性,完全无需身份令牌或网络请求。 - 版本发布:通过发布 Release 锁定当前整个规格文件树。编码 Agent 将严格对齐该不可变版本实施代码,绝不会受到后续工作区动态草稿的干扰。
- 受控演进:完成首次发布后,外部 Agent 发起的新增或修改将自动转化为变更请求(Change Request),由人类在工作台中逐一审阅确认。
关于复杂多页面系统如何合理组织文件结构(遵循“全局 README 在先,具体页面路由在后”的原则),参见文件体系与全局 README。
概念边界辨析
- RPML 不是编码 Agent 的替代品:Claude Code、Cursor 等专注于生成可运行的工程源码;而 RPML 则明确告知它们每一个屏幕“符合验收标准时应当呈现的确切状态”。
- RPML 并非 GitHub Spec Kit:Spec Kit 专注于规范“规格 → 计划 → 任务 → 编码”的工程推进流程;而 RPML 是这些任务在前端交互上必须精准落地的可视化事实契约。参见 OriginAI 与 GitHub Spec Kit 辨析。
- RPML 具有确定语义:它不是泛指任意模糊的“快速原型标记”,而是专指由 OriginAI 与
@21stware/rpui所定义并提供完整渲染器支撑的规范标准。
相关内容
- 什么是 OriginAI?
- OriginAI 与 GitHub Spec Kit 辨析
- 文件体系与全局 README
- OriginAI CLI 命令行参考(涵盖
validate、write-document、get-diff等操作)