用途:把 Sketch 设计稿转换为项目代码,追求与设计稿 1:1 的视觉一致性,并尽量复用项目已有组件与设计令牌。
主要能力:通过 Sketch MCP 工具读取文档信息、图层树与截图;解析符号、覆盖项、堆栈与布局约束;导出图标、位图、Logo 等设计资产;按符号映射生成可复用组件;对 Web 项目可启动开发服务器并用浏览器截图与 Sketch 截图对比迭代。
使用方式:先确认 Sketch 已开启 MCP(设置 → 通用 → 允许 AI 工具与打开的文档交互),打开目标文档并选中目标画板或提供分享链接(https://sketch.com/s/<doc-uuid>/f/<frame-uuid>)。依次执行:确认 Sketch 上下文并截图;检查代码库;提取结构与令牌;规划组件映射;导出资产;实现代码;Web 项目运行并对比;其他平台按约定生成;最后验证并总结。必要时调用 get_guide 获取 mcp、use、troubleshooting 等指南。
适用场景:已有 Sketch 设计稿与可访问项目工作区的 Web、iOS、Android 等前端实现。
限制:MCP 不可用时须停止,不得凭记忆实现;需明确目标平台,模糊时应询问;资产须从精确图层导出,不得裁剪截图;未提供具体收费、价格与效果信息。