AI 时代的 Agent 驱动原型设计引擎

纯 MoonBit 实现。一份 .mbt.md 视觉文档是唯一事实源——人类画布操作与 Agent 修改都回写同一份源码,每次预览从源重建;通过 DDP 加密容器安全分发。

52Agent 工具(含 inputSchema)
65×115组件 × 变体
2WASM 产物(GC + 标准 MVP)
100%MoonBit · 单二进制

核心理念:单一事实源 + 双路线编辑

没有隐藏的项目数据库,没有旁路缓存。引擎只认 .mbt.md——它是可编译的 MoonBit literate 源码,也是完整的设计文档。

.mbt.md唯一事实源
→
Human 编辑Studio 画布操作
→
export-mbt-human结构违规硬阻断
→
Agent 编辑CLI / SDK / MCP
→
export-mbt-agent语义级校验
→
视觉预览每次从源重建

0.1.9 新能力:组件规范(norms)

弱模型最常产出「能用但不精致」的原型——五类根因各有检测 + auto_fix 修复,critique 第 9 维(norms)给 Agent 反馈。规范走 critique/fix 软路径,不改双门。

🧩 按钮不卡文案

操作组件(button/chip/tag/fab)文案必须与边缘留白:宽 ≥ 文案宽+24(左右各 12),高按组件档位(chip 28 / tag 22 / fab 56;多行文案按行数计高)。

⬜ 圆角档 · 全宽直角

方正圆润族归 8px 档、超出 高/2 收敛(胶囊),avatar 正圆 radius 999;app_bar/tab_bar/list_item/divider 占满画板宽度时圆角归 0。

📏 列表必须有分割线

≥3 行 list_item 齐缝连排且整段无 divider = 裸列表。auto_fix 在每行行底插入 1px divider 子节点——不参与 v1 重叠/包含检查,零门风险。

🎨 撞色零容忍

文字对有效背景(自身实底 → 最近实底祖先 → 白底)的 WCAG 对比度 < 2.0 即同色系严禁(黑底黑字 / 白底白字);auto_fix 按背景亮度把文字翻转到黑/白。品牌绿白字(≈2.4)不误伤。

📐 横平竖直

rotate 非 90° 倍数归零——圆角档与对齐网格共同构成几何标准。

🛡 规范闭环

critique 偏差计分并自带建议尺寸;auto_fix 一键规范预修(不动 fill/hug 策略);list_components 每条目携带 norm 字段——指导与规范,不做硬门。

内置返回导航 + 交互校验

返回交互是必须的——不再由各宿主自发实现,而是引擎内置语义,CLI / SDK / MCP / 嵌入 runtime 全部免费获得。

↩ 返回类节点 tap 兜底

tap 解析链 flow → marker → 内置返回:命中 back/prev/返回/← 类节点且无 flow/marker 时,弹导航栈返回上一层(栈底原地不动)。

📍 返回热区随清单导出

interactions 导出包含返回类节点("builtin":"back")——宿主热区直接消费引擎数据,无需自带启发式词表。

✅ 卡死页校验

多画板文档中非入口画板无出边 flow 且无返回类节点 = 用户会卡死——norms 维度直接判偏差。

六种集成方式

从命令行手动驱动,到 IDE 内 Agent 自动驱动——同一引擎,同一事实源。

60 秒跑通

前置:安装 MoonBit 工具链(moon 可执行)。

# 1. 进入引擎目录
cd moonviz

# 2. 启动有状态 CLI 会话(stdin 逐行下发命令,stdout 逐行返回 JSON)
moon run --target native cli

# 3. 会话内构建一个双画板登录原型
template login t_login 390 844
template dashboard t_home 390 844
update t_login welcome_title text="欢迎回来"
flow t_login t_home login_btn
export-mbt-human          # ← HumanGate 校验 + 返回 canonical .mbt.md

# 4. 无会话渲染(AgentGate 级重载)
render-mbt-b64 <base64-mbt>

# 5. 打包 DDP 免密容器(Rust ddp_codec)
echo '{"operation":"encrypt","mbt_b64":"…","password":""}' | ddp/target/release/ddp_codec

零工具链:WASM 与预编译二进制

两种 WASM 产物 + 四平台预编译二进制——按宿主选择,全部由 GitHub Actions 自动构建并归档于 Releases。

wasm-gc 产物

浏览器 / Node ≥22 进程内渲染。WASM GC + JS String Builtins,字符串与宿主直通。npm:moonviz-engine-wasm。

标准 wasm 产物

纯 WASM MVP(0 imports、线性内存)——宿主中立,wasmtime / wasmi 等任意规范运行时可实例化。字符串 ABI 已实测文档化。

预编译二进制

darwin-arm64 / linux-x64 / linux-arm64 / win32-x64 四平台 moonviz-cli + moonviz-mcp,自包含仅链 libc。

MoonBit 原生包

引擎已上架 mooncakes.io(MoonBit 官方包中心):moon add asdshuaishuai/moonviz,任何 MoonBit 工程直接 @sdk 内嵌原型引擎——渲染、双门、op 面同源。

发展路线图

按「能力平权 → 体验深化 → 生态扩展」三层推进——每条路线以「数据模型已支持但边界不可达 / 体验未落地」为线索。完整版见仓库根 ROADMAP.md。

P0 · 能力平权

搁浅模块出井:collab 多 Agent 协作、history 版本控制、animation 动画、protest 原型测试——core 已实现的 52 个函数补齐 CLI/MCP/WASM 边界。classic wasm 写路径(Rust 宿主双向调用)。

P1 · 体验深化

deepDesign Studio 全面接入新引擎(撤销/组件库/交互面板);Playground 补动画系统、用户组件编译、原型测试面板;ddpView 只读加密文档查看器。

P2 · 生态扩展

npm 0.2.0 发版(session API 全量);在线 API 参考与示例库;collab 落地双 Agent 同源协作;性能基线进 CI。

深度设计文档

引擎仓库 docs/ 内含 11 篇架构级文档,覆盖从源码格式到渲染管线的完整链路。

01 · 架构总览

分层设计、模块边界、数据流与架构红线。

02 · .mbt.md 格式

literate 源码规则、moonviz:artboard 块、@decl 公开声明解析。

03 · 场景图

画板、节点、约束的场景图模型。

04 · 布局与谓词

fixed/flex 布局谓词与推理引擎。

05 · 同步管线

源码 ⇄ 场景图 ⇄ 画布的双向同步一致性。

06 · 渲染

SVG 渲染管线、主题、线框模式。

07 · Agent 循环

Agent 操作协议、双 Gate、debt 机制。

08 · 路线图与风险

演进计划(ROADMAP)与已知风险台账。

09 · 渲染生态

导出 SVG / DDP / 声明物料的生态位。

10 · 渲染管线

SVG / PNG / 终端三后端 + 技术栈 + 二进制分发与工具链风险。