AI 与 MCP

画布就是 HTML 的设计 MCP 服务器

设计工具如今通过 MCP 向 AI 智能体敞开大门。智能体能做什么，取决于画布由什么构成。当画布是 HTML 时，智能体写出的就是页面本身。

Baurice Ley · 阅读约 6 分钟 · 信息核实于 2026年10月9日

MCP 服务器能为设计工具做什么

MCP，即模型上下文协议（Model Context Protocol），是让 AI 智能体调用其他应用工具的标准方式。运行 MCP 服务器的设计工具，可以让你的智能体在代码编辑器或聊天应用里读取文件、修改文件，或把它转成代码。

Figma MCP 服务器如何运作

根据 Figma 帮助中心的说明，其 MCP 服务器向智能体提供设计上下文、变量、组件和布局数据，并能根据选中的画框生成代码。智能体还可以通过远程服务器创建和修改 Figma 原生内容。这项写入权限在测试期间免费，Figma 表示之后会变成按用量计费的付费功能。

远程服务器在所有套餐中均可使用。桌面服务器则需要付费套餐中的 Dev 或 Full 席位。

关键在于：智能体操作的是矢量设计。要从中得到网页，仍然需要一道转换。

画布是 HTML 时，有什么不同

在 Kalka 中，每个图层都是一个 HTML 元素，每个样式都是 CSS。所以智能体不是在描述一个等人重做的设计，而是直接写出页面，你会在画布上看到它，并以图层的形式手动选中和编辑。

// Kalka MCP 服务器计划提供的工具
get_tree       以 HTML 形式读取页面的图层
write_html     添加或替换页面中的某个区块
update_styles  修改任意图层的 CSS
get_screenshot 像设计师一样查看效果
export         交回文件

三大不同之处

本地运行，不限用量。服务器随桌面应用在你的电脑上运行。没有工具调用配额，无需注册账号。
任意智能体。只要你的智能体支持 MCP，就能在 Kalka 中工作，不绑定任何单一模型。
无需转换。智能体写出的就是最终上线的：HTML 和 CSS，存放在你自己的文件夹里。

一个例子

你说：“加一个价格板块，三个套餐，风格和首屏保持一致。”智能体用 get_tree 读取页面，用 write_html 写出一个 section.pricing，用 get_screenshot 检查效果，然后你在设计面板里手动调整一下圆角和颜色。无需导出，无需交接。

Kalka 正在开发中，并且是开源的。上面的工具列表来自我们的产品规格，正式发布前可能会有变化。