MOI Skill：让 AI Agent 自己长出可视化工作台

Skill超级捕获手 技术创作者 2026-09-03 13 阅读

MOI Skill：让 AI Agent 自己长出可视化工作台

MOI 是一个开源的”AI 生成式 UI 工作台”——不是人给 AI 设计界面，而是让 AI Agent 自己动手构建服务于任务的 UI 界面。它将 AI 从”对话机器人”升级为真正的”协作开发者”：Agent 可以实时修改界面外观、生成数据面板、搭建任务追踪视图，甚至把整个 CRM 或知识库做进一个可拖拽的 Web 应用里。本质上，MOI 是对”AI 副驾”范式的一次激进升级——从”你说我做”走向”你做，我看，随时改”。2026 年 3 月上线 GitHub，9 月 2 日登上 trending-claude-skills 榜单，是近期 Agent Skills 生态中值得关注的新选手。

功能与原则

MOI 的核心能力是让 AI Agent 拥有动态构建 UI 的能力。Agent 不再只输出文字，而是通过一个本地 CLI 实时更新 Web UI——组件、数据、样式全部由 Agent 自行生成并热更新到浏览器。工作台具备四大模块：

  • Workspace：Agent 的工作目录，存放它生成的所有代码和数据
  • Theme：Agent 可动态修改界面字体、配色、主题变量
  • Scratchpad：共享画布，AI 和人一起画图、写注释、做头脑风暴
  • Widgets & Views：可拖拽的小组件和独立页面，构建 CRM、任务追踪、第二大脑等复杂应用

设计原则是文件系统即真相（filesystem as source of truth）——所有 UI 组件和视图状态都以代码形式保存在工作区，可版本控制、可审查、可复用。Agent 每次构建或修改 UI 都实时推送到浏览器，无需重启。

认可度

MOI 目前处于早期增长阶段，GitHub 社区规模较小但活跃：

  • GitHub Stars：截至 2026-09-02 约 139 颗（trending-claude-skills 实时榜单收录）
  • GitHub Forks：约 1 个
  • npm 下载：活跃更新中，Elastic 2.0 协议
  • 技能包：内置 3 个 SKILL.md（moi-workspace、publish-next、agent-browser）
  • 社群热度：登上 2026-09-02 trending-claude-skills 榜单；Skilld.dev 在 2026 年 9 月趋势盘点中被推荐

相比 10 万星级的超级 Skill，MOI 的体量很小，但它的”AI 构建 UI”方向是 Skill 生态中少见的创新路线。

链接

  • GitHub：https://github.com/molefrog/moi

原作者

  • GitHub Username：molefrog
  • 简介：个人独立开发者，专注 AI Agent 工具链和生成式 UI 方向，同时维护 agent-browser 等多个 Skill 项目

介绍

MOI 的灵感来自于一个根本性问题：当前的 AI Agent 再强大，输出形式也只是终端里的文字——用户拿到的是信息，不是可操作的应用。MOI 试图打破这个天花板。它的思路是：不给 Agent 预置 UI，而是让 Agent 自己决定需要什么界面，然后在运行时生成出来。

技术实现上，MOI 由两部分组成：moi-computer（本地 Web 服务器 + CLI）和 moi Skill 包（包含 3 个 SKILL.md）。用户安装后，本地启动一个 13337 端口的 Web 服务，Agent 通过 CLI 命令实时更新界面。界面本身是动态的 React 风格组件，Agent 写什么，浏览器里就出现什么。

这个范式带来的变化是：过去”人提出需求 → AI 执行 → 人使用结果”，变成了”人提出需求 → AI 构建工具 → 人和 AI 共同使用工具”。Agent 不仅是执行者，也是工具的创造者。

特点

  • Agent 构建 UI，而非预置 UI：Agent 根据任务需要动态生成界面组件，而非从固定模板中选择
  • 实时热更新：Agent 调用 CLI 更新文件，Web UI 在浏览器里即时刷新，无需页面刷新
  • 多 Agent 框架兼容：支持 Claude Code、Codex、OpenClaw、Hermes，一个 Skill 装入任何兼容框架
  • 文件系统即真相：所有生成的 UI 代码保存在本地工作区，可 Git 追踪、可 Code Review
  • 自带 Skills：包含 moi-workspace（核心工作台）、publish-next（发布到 npm）、agent-browser（浏览器自动化）三个技能包
  • 本地优先，不上传数据：所有 UI 构建在本地完成，隐私安全，Agent 掌控数据流

使用方法

安装步骤（前提：已安装 Bun 1.3+）：

# 全局安装 moi-computer
bun i -g moi-computer

# 启动 Web UI
moi start   # 访问 http://localhost:13337

# 连接 Agent（以 Claude Code 为例）
# 在 Claude Code 中粘贴：
Set up the moi workspace for this project. Fetch https://moi.computer/INSTALL.md, and follow the steps.

基本调用：Agent 启动后，直接通过自然语言让它构建 UI，例如：

Agent：给我做一个显示当前项目任务列表的面板，带截止日期和优先级颜色

Agent 会调用 moi CLI 生成相应的 Widget，浏览器里实时出现可交互的任务看板。

支持的其他 Agent 连接方式：

# OpenClaw
moi openclaw init
# Hermes
moi hermes init
# Codex
moi init --harness=codex

使用场景与人群

适用场景：

  • 需要 AI Agent 构建可视化看板、数据面板、仪表盘
  • 希望 AI 能实时生成并修改工作界面，而不是每次都重新描述需求
  • 构建内部工具、运营看板、CRM 原型——想用 AI 快速搭出一个可用的 Web 应用
  • 需要 AI 在执行任务时”留痕”：所有生成的界面都是可审查的代码

目标用户：

  • 使用 Claude Code、Codex、OpenClaw、Hermes 的开发者
  • 希望 AI Agent 从”对话输出”进化为”构建工具”的效率极客
  • 需要快速原型化内部工具的独立开发者或小团队

输入与输出案例

案例 1：构建任务追踪面板

输入（用户）：
帮我做一个 GitHub Issues 追踪面板，显示 open 状态的 issues，指派给人、显示标签和更新时间

输出（Agent 生成）：
浏览器里出现一个实时面板，包含：
- 标题栏：显示 open issues 总数
- 卡片列表：每个 issue 一张卡片，显示 title、assignee 头像、labels（彩色标签）、updated 时间
- 右上角：筛选按钮（按标签、按 assignee）
- 所有卡片代码保存在 ~/.claude/workspace/.moi/widgets/issues-tracker/

案例 2：共享头脑风暴画布

输入（用户）：
在 scratchpad 里画一个产品功能架构图，帮我标注三个核心模块和它们之间的关系

输出（Agent 生成）：
浏览器 scratchpad 区域出现一个 Mermaid 流程图，三个节点分别标注
"用户认证模块"、"数据处理管道"、"通知系统"，节点间连接线显示数据流向
右侧有一个实时编辑框，Agent 和人都可以继续往画布上添加内容

GitHub: https://github.com/molefrog/moi

评论区

0 条评论

登录后可评论。

Skill超级捕获手 13 阅读