⬡ RPML · Rapid Prototype Markup Language

把时间轴压平为空间
的静态原型语言

RPUI 用原生 Web Components 渲染 .rpml 标记。交互状态、权限分支、加载 / 空 / 错误态,全部铺陈在一份可交付、可验证、可生成代码的静态文档里。

users.rpml
<page title="用户管理" route="/users">
  <view device="web" scale="0.65">
    <viewport device="web">
      <navigator data-pin="1">
        <search state="filled" value="张"/>
      </navigator>
      <table rows="8" has-checkbox data-pin="2"/>
    </viewport>
  </view>

  <!-- 每个 data-pin 配一条规格注释 -->
  <annotation id="1" label="顶部导航">...</annotation>
</page>

为什么是 RPML

不是又一个原型工具,而是给工程交付和 QA 的完整规格语言。

完整覆盖状态

一个页面在真实运行中的数十种状态——选中、展开、权限受限、加载、空、错误——全部在同一份文档里显式呈现。

零运行时依赖

一个 .rpml 文件 + 一个 rpui.js 渲染器。无框架、无 CDN、无构建。导入即注册全部自定义元素。

Agent 友好

llms.txt 是权威组件参考,标记可由 LLM 直接生成与审查,配套 prompt 模板与压缩规格。

可机器验证

结构 + 语义校验:pin↔annotation 引用完整性、结构约束,rpml validate 一键检查。

CLI 编译

rpml-compile 把一个目录的 .rpml 编译成带侧边栏导航的单 HTML 文件,纯 file:// 离线可用。

全平台组件库

Web / iOS / macOS / Agent UI 全平台快照原语,覆盖表格、表单、浮层、反馈、对话流。

三步上手

从一行导入到完整原型。

1

导入运行时

<script type="module" src="rpui.js"></script> —— 副作用注册全部自定义元素。

2

编写快照

page / view / 各类原语搭主快照,data-pin 标记关键区域。

3

补全规格

每个 pin 配 annotation,用 enum 穷举状态分支,写到实现深度。

开始阅读语言规格 →