edit-figma-design

编辑 Figma 设计

概述

此技能可根据自然语言描述，直接创建或更新 Figma 设计。它结合 Figma 库搜索和直接创建文件的功能，并且只在需要让设计更贴合产品或代码库时，才使用 Warp 更广泛的 Agent 能力。

何时使用此技能

当用户希望你：

• 根据文字描述，在 Figma 中设计新屏幕、流程、组件或模型图
• 根据文字反馈优化或扩展现有 Figma 文件
• 直接在 Figma 中创建初步线框图或更高保真度的设计
• 让 Figma 设计符合现有设计系统或产品术语

请勿在以下情况下使用此技能：

• 用户希望根据设计编写生产代码——使用 implement-design
• 用户希望将正在运行的网页或应用捕获到 Figma 中——使用 figma-generate-design
• 用户只想查看或提取现有 Figma 上下文——使用 pull-figma-content

前提条件

• Figma MCP 服务必须已连接且可访问。
  • 确认 search_design_system、create_new_file 和 use_figma 均可用。
• 收集继续操作所需的最少信息：
  • 要设计什么
  • 使用现有 Figma 文件还是创建新文件
  • 结果是否应符合现有设计系统或代码库
• 仅当用户提供的信息不足以开始时才提出澄清问题。问题应简短，并尽可能合并为一条消息。

必需工作流

按顺序执行以下步骤。请勿跳过。

步骤 1：确认这是 Figma 创建设计请求

如果用户实际要求的是实现，请停止并参考 implement-design。

如果用户希望将屏幕截图转换为 Figma，或进行网页捕获，请停止并参考 figma-generate-design。该技能适用于基于捕获的工作流；此技能适用于基于文本创建设计。

步骤 2：先确定目标文件

search_design_system 和 use_figma 都需要 fileKey，因此请先确定目标文件，再进行搜索或编辑。

如果用户提供了现有 Figma URL 或文件密钥：

• 提取并使用该 fileKey。
• 回复时复用用户提供的 URL。

如果用户想创建新文件：

1. 根据请求确定清晰的文件名。
2. 如果用户已提供 planKey，请使用该值。
3. 否则，调用 Figma MCP whoami 工具，查看已验证身份的 Figma 用户及可用计划。这不是 shell 的 whoami 命令。
4. 如果只有一个计划，请使用其 key。
5. 如果有多个计划，请询问用户要使用哪个团队或组织。
6. 调用 create_new_file(editorType="design", fileName=..., planKey=...)。
7. 保存返回的 fileKey 和 URL。首个可用草稿就绪后，分享该 URL。

步骤 3：仅在需要时收集适当的上下文

判断实际需要多少非 Figma 上下文。

仅使用 Figma MCP：用户想要探索性概念、线框图或模型图，且没有要求与代码库保持一致时。

有选择地使用 Warp Agent 上下文：用户希望设计符合现有产品或设计系统时：

• 如果存在 AGENTS.md 和／或 WARP.md，请阅读其中的项目规则
• 使用语义代码库搜索、grep 和文件读取，查找相关组件、产品术语、布局模式和设计令牌来源
• 仅当提示词直接依赖其他内容时，才使用其他 MCP 来源或网页搜索，例如依赖其他系统中的产品需求，或用户明确要求寻找灵感
• 此技能的常规工作流不包括编辑代码、运行 REPL 命令或使用计算机操作

步骤 4：开始创作前搜索设计系统

使用解析出的 fileKey 调用 search_design_system，然后再创建新组件或样式。

优先搜索可复用性最高的资源：

• 组件和组件集
• 变量和类似令牌的值
• 用于颜色、排版、间距或效果的样式

从用户的领域术语以及从项目规则或代码库搜索中发现的名称开始。

如有需要，可使用返回的库键缩小后续搜索范围，而不是立即扩大搜索范围。

优先复用并导入匹配项，而不是从头重建。

步骤 5：安全地准备 use_figma

首次调用 use_figma 前，规划编辑顺序，并遵循工具要求的 Plugin API 限制。

让创作计划循序渐进：

1. 创建页面和框架结构
2. 建立布局和主要版块
3. 复用或导入设计系统资源
4. 应用变量、样式和排版
5. 添加内容并完善细节
6. 根据文件当前内容进行有针对性的修改

步骤 6：通过多个小步骤使用 use_figma 编辑设计

使用多次小型 use_figma 调用，而不是编写一个庞大的脚本。

适合划分步骤的任务：

• 创建页面和顶层框架
• 布置页眉、侧边栏、主视觉区或内容区域
• 导入或放置一组可复用组件
• 绑定颜色、文本样式或间距变量
• 更新特定版块的文案、状态或对齐方式

每个步骤完成后，都要检查结果；确认上一步成功后再继续。

创建类似组件的内容时，优先使用步骤 4 中发现的已导入库资源。

步骤 7：交付设计并提供后续选项

首个可用草稿准备就绪后：

• 如果有 Figma URL，请返回该链接
• 概述你创建或更新的内容
• 询问用户是否希望在 Figma 中进行修改

如果用户要求将已批准的设计实现为代码，请停止使用此技能并查阅 implement-design。

Warp Agent 使用指南

利用 Warp 的广泛能力减少手动提示，而不是增加不必要的工作。

此技能中 Warp Agent 功能的适用场景：

• 在代码库中查找现有组件名称或设计令牌
• 阅读会约束布局、命名或品牌规范的项目规则
• 仅在用户明确依赖其他已连接系统时，从中获取产品需求

此技能通常不需要：

• shell 命令或 REPL 访问
• 代码编辑
• 计算机操作验证
• 没有明确用户需求的广泛网络搜索

示例

示例 1：根据产品描述创建新文件

用户说：“在 Figma 中为我们的桌面应用设计一个账单概览界面。使用现有设计系统并创建一个新文件。”

操作：

1. 确认这是 Figma 创作，而不是代码实现。
2. 如有需要，调用 whoami 确定目标位置，然后调用 create_new_file。
3. 阅读 AGENTS.md 或 WARP.md；如果需要了解账单相关术语和现有组件，则搜索代码库。
4. 使用与账单相关的查询调用 search_design_system。
5. 通过多个小步骤使用 use_figma 构建界面。
6. 返回新建的 Figma 文件 URL，并询问用户是否希望修改。

示例 2：更新现有 Figma 文件

用户说：“在这个 Figma 文件中添加一份引导清单：https://figma.com/design/FILEKEY/Product?node-id=1-2”

操作：

1. 从现有 URL 中提取 fileKey。
2. 创建任何新内容前，先搜索设计系统中的清单、卡片、徽章和进度相关资源。
3. 通过多次渐进式 use_figma 调用添加新版块。
4. 返回相同的 Figma URL，并概述所做的更改。

示例 3：纯探索性概念

用户说：“在 Figma 中创建一个健身训练规划器移动端初稿。暂时不需要与我的代码库保持一致。”

操作：

1. 如有需要，创建一个新文件。
2. 跳过代码库搜索和项目规则检查。
3. 仅使用 search_design_system 来复用相关的 Figma 库资源。
4. 直接在 Figma 中通过小步调用 use_figma 来构建概念。
5. 分享文件链接，并询问接下来要改进什么。

常见问题及应对方式

问题：用户没有说明要使用现有文件还是新文件

直接询问一个能确定目标文件的问题。在获得 fileKey 之前，不要启动 search_design_system 或 use_figma。

问题：create_new_file 有多个可用的 Figma 计划

询问用户要使用哪个团队或组织。不要猜测。

问题：用户希望设计符合现有产品规范，但请求内容很模糊

先阅读项目规则。然后使用有针对性的代码库搜索，仅收集与所请求界面相关的组件和规范。

问题：用户同时要求提供 Figma 设计和实现

仅当用户的请求主要是要在 Figma 中创作时，才先创建或更新 Figma 设计。如果请求主要是关于实现，请改为参考 implement-design。设计获批后，可以在单独步骤中继续实现。

问题：use_figma 失败，或脚本变得很长

将任务拆分成多个较小的 use_figma 调用。优先先搭建结构，再添加样式，最后进行有针对性的修改。

其他资源

• Figma MCP 服务文档
• Figma MCP 服务工具和提示词