用途:在 Sketch 中按参考重建或打磨 UI 设计,追求与参考的视觉一致,而非结构相似。逆向流程为 sketch-design-to-code。
主要能力:从 URL、截图或代码提取保真规格(区域顺序、逐字文案、颜色、字体、宽度、素材来源);检查并复用文档与库中的符号、样式;用 Stacks 构建结构化布局;导入图片/SVG 素材;逐区域截图对比,逐步修正差异;最后按完成标准验证并交接。
使用方式:需 Sketch 运行且启用 MCP(设置 → 通用 → 允许 AI 工具与打开的文档交互),有目标文档与明确参考。先调用 get_guide 获取 mcp、use、layout 等主题指南,用 get_document_info 解析文档,先只读探查(get_layer_tree_summary、get_design_assets、get_libraries)再改动。小幅可逆地执行 run_code,一次脚本只做一件事,按“页面框架 → 顶层区域 → Stack 设置 → 子元素批次”由外向内构建,每个批次后 get_screenshot 对比参考锚点截图并修正。
适用场景:整页或单 Frame 复刻、明暗模式、指定目标宽度、按现有文档复用符号与样式。
限制:MCP 不可用时需停止并查 troubleshooting,不得凭记忆猜布局;不得编造布局、文案、颜色、间距或素材;改用 layer.index 和 child.parent 重排与改父级,禁止 parent.layers 批量赋值;复杂图形须导出/导入或使用图片覆盖,不用基础形状近似;仅在与参考对齐的完成标准通过后才算完成。