Framesmith 1.8：让 AI 编码智能体先出设计稿再写代码

Framesmith 1.8 是一个面向 AI 编码智能体的开源 MCP（Model Context Protocol）服务器，目标是把「先出设计、再写代码」这条工作流交给智能体自己跑完。它给智能体提供可视化画布、经过筛选的设计模式库，以及一套上线前的质量门槛，用户在浏览器里审阅的是一份真实可用的设计稿，而不是占位文本与渐变色块堆出来的「AI 味」界面。

核心思路：把设计评审前置

作者观察到，AI 智能体在无人约束时倾向于输出带有明显套路痕迹的 UI：千篇一律的间距、缺失的图标、默认紫色渐变、读起来像占位符的文案。Framesmith 的对策是在编码之前先把设计「立住」，再交给智能体去实现：

• 从经过验证的模式起步，而非白纸。内置 11 个页面原型（仪表盘、登录、定价、设置、新手引导等），每个原型都回归测试到质量分 > 95 且零套路痕迹，智能体在此基础上做适配。
• 调用真实的 UI 元素库。图标使用 Lucide 与 Material Symbols，字体按名称解析，表单控件（开关 / 复选框 / 单选 / 下拉）均为真实组件，不使用 Unicode 符号或省略号伪造。
• 自评后再交付。canvas_evaluate 在 6 个工艺维度加上「套路检测器」上打分，输出 READY / NOT READY 指令；智能体必须处理完所有告警与套路点才能把设计呈现给用户。
• 设计结果归用户所有。画布以开放 JSON 形式落到仓库，没有私有格式锁定，并支持从已发布的 HTML 反向导入，保持设计与实现同步。

能力概览

工具覆盖渲染、模式库、质量与品味、设计系统、原语、代码导入、查看器等几个层面。渲染链路为「场景图（内存 JSON 树）→ HTML/CSS 内联样式 → Puppeteer（无头 Chromium 截图）」，支持响应式断点、渐变、阴影、模糊、毛玻璃、SVG 路径与动画。模式库除 11 个页面原型外，还附带 5 个组件脚手架，并提供分类轴与「多样化信号」避免连续画布风格雷同。

质量与品味部分包含三块：canvas_evaluate（6 个工艺类别 + 套路检测 + READY / NOT READY 指令）、canvas_autofix（机械修复）、可选的视觉模型评分与 canvas_revise。设计系统采用分层 token（workspace ▸ project ▸ canvas）、样式预设与 DESIGN.md 导入。

代码侧提供 canvas_import_html / canvas_import_url 两个工具，完成 token 映射与结构重建，并附带 canvas_sync_from_url 做漂移检测。

浏览器查看器与协作

通过 npx -p framesmith framesmith-viewer 启动独立浏览器查看器（默认 3001 端口），可以浏览画布详情、跨断点对比、检查底层 JSON、归档或删除。详情视图右侧的质量检查器会显示 canvas_evaluate 的 0–100 总分、6 个类别的条形图与问题清单，每个问题都带有类别、套路徽标、严重程度与建议，可自动修复的会标记为 auto-fixable，点击后能在预览中定位到对应节点。

协作反馈走「点选即评论」模式：开启 Comment 后点击画布任意元素即可留下评论，弹出框中的面包屑会从精确元素向上回溯到卡片、区块或整页；Feedback 标签页汇总未解决的评论、解决记录与智能体的回复，未关闭的反馈会像未解决的质量问题一样阻塞智能体的交付。评论持久化在画布的 metadata.feedback 字段中，可随仓库做 git diff，并通过 MCP 的 get_feedback 工具供智能体读取。

生态与许可

项目以 MIT 协议开源，产物为普通 HTML/CSS，画布状态以开放 JSON 形式保存在用户仓库内，理论上兼容任何支持 MCP 的客户端（如 Claude Desktop、各类编码助手）。整体定位是把「设计评审」这件事从产品经理或设计师的手里，部分转移到 AI 智能体自身的自检闭环中，从而减少用户反复打回「重做一版」的次数。