Framesmith 1.7——为AI代理提供UI完成质量门控工具

Framesmith 1.7 是一个开源的 MCP（Model Context Protocol）服务器，旨在为 AI 编程代理提供一个可视化的 UI 画布。通过 Framesmith，开发者可以在编写任何框架代码之前，先草拟 UI 设计、在浏览器中预览，并与 AI 代理达成设计共识。这一工具特别适合那些希望将 UI 设计流程融入 AI 辅助开发工作流的团队。

Framesmith 的核心组件包括一个画布查看器、一个质量评估面板以及一个设计系统面板。查看器允许用户以多种断点模式预览画布，支持并排对比、检查底层 JSON 结构以及归档或删除画布。质量评估面板会显示一个 0 到 100 的评分，按类别列出问题，并标注哪些问题可以自动修复。点击任何问题都会在实时预览中高亮对应的节点，方便定位。设计系统面板则展示画布的有效设计令牌，包括颜色、字体、间距和圆角，并标明每个令牌的来源层级（工作区、项目或画布），以便查看自定义与继承的关系。

安装 Framesmith 非常简单，无需克隆仓库或构建项目。用户只需通过 npx 命令即可在 MCP 客户端中注册 Framesmith。支持 Claude Code、Codex、Cursor、Windsurf、VS Code（配合 MCP 扩展）以及其他兼容 MCP 的客户端。所有操作都通过标准 stdio MCP 接口完成。如果需要从源代码构建用于开发，可以克隆 GitHub 仓库并运行 npm install 和 npm run build。

Framesmith 提供了一系列工具，帮助 AI 代理管理画布、工作区和项目。其中，init 工具用于初始化绑定当前仓库，确保画布以 JSON 格式存储在 .framesmith/ 目录下。canvas_create 工具用于创建新画布，并返回一个多样化信号，提示代理避免重复布局。canvas_list、canvas_move、canvas_archive 等工具用于管理画布的生命周期。viewer_url 工具返回查看器的 URL 以及每个画布的独立链接，方便分享。此外，还有 workspace_create、project_create、canvas_bind 等工具用于更高级的容器管理。

Framesmith 的工作流程强调“先设计后编码”。AI 代理通过 MCP 工具调用创建画布，用户在查看器中审查设计，然后代理根据反馈修改画布，直到设计满意后才开始编写代码。这种流程可以显著减少重复工作，提高 UI 开发效率。

总的来说，Framesmith 1.7 是一个强大的工具，它将可视化 UI 设计引入 AI 辅助编程，通过质量门控和设计系统集成，帮助团队更快地交付高质量的界面。