小程序工作室：AI 生成即运行的可视化工作台

1. 引言

在 AI 编程浪潮中，「对话即产物」正成为新的范式。小程序工作室 是 ZorvAI 内「AI 生成即可运行」的可视化小程序工作台，核心是 MiniAppFramework ：把 LLM 产出的 HTML/JS 在应用内渲染容器中沙箱运行，支持同目录资源（图片自动转 data URI）、私有 app:// 协议、对话框内联预览与独立面板编辑。用户/AI 可在面板新建、编辑、运行小程序，无需打包上架。

项目已开源，欢迎 Star & Fork：https://github.com/Quor-a/ZorvAI

它把「写代码」变成「对话即产物」：AI 生成 → 安全化写入 studio 目录 → 面板/对话框内联渲染 → 运行/分享，形成低门槛的可编程能力面，是 ZorvAI 工具生态的轻量扩展通道。

2. 核心特性

内联渲染：HTML/JS 跑在应用内 WebView/内联容器，免安装、即写即跑。
资源自包含 ：同目录图片在预览时转 data URI，与面板内 app:// 渲染一致，避免路径错位。
安全写入 ：工程名/路径做安全化，防止 .. 越界写入 studio 目录外。
双入口：对话框内联预览 + 独立小程序面板编辑，互相打通。

3. 分层技术构架

#mermaid-svg-uRa9vfvt1I0L01XJ{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-uRa9vfvt1I0L01XJ .error-icon{fill:#552222;}#mermaid-svg-uRa9vfvt1I0L01XJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uRa9vfvt1I0L01XJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uRa9vfvt1I0L01XJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uRa9vfvt1I0L01XJ .marker.cross{stroke:#333333;}#mermaid-svg-uRa9vfvt1I0L01XJ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uRa9vfvt1I0L01XJ p{margin:0;}#mermaid-svg-uRa9vfvt1I0L01XJ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ .cluster-label text{fill:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ .cluster-label span{color:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ .cluster-label span p{background-color:transparent;}#mermaid-svg-uRa9vfvt1I0L01XJ .label text,#mermaid-svg-uRa9vfvt1I0L01XJ span{fill:#333;color:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ .node rect,#mermaid-svg-uRa9vfvt1I0L01XJ .node circle,#mermaid-svg-uRa9vfvt1I0L01XJ .node ellipse,#mermaid-svg-uRa9vfvt1I0L01XJ .node polygon,#mermaid-svg-uRa9vfvt1I0L01XJ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uRa9vfvt1I0L01XJ .rough-node .label text,#mermaid-svg-uRa9vfvt1I0L01XJ .node .label text,#mermaid-svg-uRa9vfvt1I0L01XJ .image-shape .label,#mermaid-svg-uRa9vfvt1I0L01XJ .icon-shape .label{text-anchor:middle;}#mermaid-svg-uRa9vfvt1I0L01XJ .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-uRa9vfvt1I0L01XJ .rough-node .label,#mermaid-svg-uRa9vfvt1I0L01XJ .node .label,#mermaid-svg-uRa9vfvt1I0L01XJ .image-shape .label,#mermaid-svg-uRa9vfvt1I0L01XJ .icon-shape .label{text-align:center;}#mermaid-svg-uRa9vfvt1I0L01XJ .node.clickable{cursor:pointer;}#mermaid-svg-uRa9vfvt1I0L01XJ .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-uRa9vfvt1I0L01XJ .arrowheadPath{fill:#333333;}#mermaid-svg-uRa9vfvt1I0L01XJ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-uRa9vfvt1I0L01XJ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-uRa9vfvt1I0L01XJ .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-uRa9vfvt1I0L01XJ .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-uRa9vfvt1I0L01XJ .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-uRa9vfvt1I0L01XJ .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-uRa9vfvt1I0L01XJ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-uRa9vfvt1I0L01XJ .cluster text{fill:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ .cluster span{color:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-uRa9vfvt1I0L01XJ .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-uRa9vfvt1I0L01XJ rect.text{fill:none;stroke-width:0;}#mermaid-svg-uRa9vfvt1I0L01XJ .icon-shape,#mermaid-svg-uRa9vfvt1I0L01XJ .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-uRa9vfvt1I0L01XJ .icon-shape p,#mermaid-svg-uRa9vfvt1I0L01XJ .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-uRa9vfvt1I0L01XJ .icon-shape .label rect,#mermaid-svg-uRa9vfvt1I0L01XJ .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-uRa9vfvt1I0L01XJ .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-uRa9vfvt1I0L01XJ .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-uRa9vfvt1I0L01XJ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 引擎层
WebView / 内联渲染内核
JS 执行沙箱
存储层
小程序工程目录
同目录资源 / 配置元数据
生成层
AI 代码生成 HTML/JS
安全化校验防越界
writeFlow 工程写入
编辑层
小程序面板新建/编辑/删除
run 对话框预览
模板示例 / 快照状态
运行层
MiniAppFramework Runtime
app:// 协议解析
资源解析 data URI / 生命周期
集成层
对话框内联渲染
工具中心小程序面板
节点编辑器联动 / 分享导出

4. 核心组件

组件	职责	说明
MiniAppFramework	小程序运行内核	内联渲染 HTML/JS、沙箱隔离
小程序面板	可视化编辑/管理入口	新建示例、编辑、删除、运行
run 对话框预览	对话框内联运行	同目录图片转 data URI，与 app:// 一致
app:// 协议	私有资源寻址	面板内资源定位，与预览同源
writeFlow	工程写入	工程名/路径防 `..` 越界

5. 关键流程

发起：用户在小程序面板「新建示例」或对话框请求 → AI 生成 HTML/JS
校验：对工程名/路径做安全化，防止越界写入 studio 目录外
写入：writeFlow 落盘到 studio 工程目录（含同目录资源）
渲染：MiniAppFramework 内联渲染；预览时同目录图片转 data URI，app:// 资源定位一致
运行/分享：面板或对话框内运行，支持导出/分享

6. 与系统其它模块的关系

终端 4.0：小程序可调用本地命令
技能 Skills：AI 生成逻辑复用技能工作流
MCP：小程序内唤起连接器动作
语音服务：语音驱动小程序交互
节点编辑器：可视化编排对接小程序

7. 总结

小程序工作室以「AI 生成即运行」为核心，通过 MiniAppFramework 将 LLM 产出的 HTML/JS 安全地渲染在应用内，配合资源自包含、安全写入与双入口设计，让开发者与普通用户都能以对话方式快速构建、运行和分享小程序，是 ZorvAI 工具生态中极具想象力的轻量扩展通道。

如果你对这个项目感兴趣，欢迎前往 https://github.com/Quor-a/ZorvAI 查看源码、参与共建。