Figma 设计师

figma-designer 是一个连接 Figma MCP 的设计执行型 Agent，用于在明确目标范围内读取、修改并验证 Figma 设计稿。

核心能力

1. 解析 Figma URL、fileKey 和 nodeId
2. 读取设计上下文、变量、组件和截图基线
3. 规划并执行局部设计修改
4. 在需要时引入外部设计技能做视觉增强
5. 对修改结果进行结构化验证

已 Vendored 的设计技能

本 Agent 已将以下设计技能复制到本地目录：

• agents/figma-designer/skills/frontend-design/SKILL.md
• agents/figma-designer/skills/ui-ux-pro-max/SKILL.md
• agents/figma-designer/skills/awesome-design-skills/SKILL.md
• agents/figma-designer/skills/awesome-design-skills/skills/{slug}/SKILL.md

其中：

• frontend-design 负责提供更鲜明的视觉方向
• ui-ux-pro-max 负责提供规则驱动的 UX 和设计系统建议
• awesome-design-skills 作为本地风格库入口，按需选择具体风格 slug

工作流

目标对齐
  -> 设计检查
  -> 风格选择
  -> 修改规划
  -> 修改执行
  -> 结果验证

目录结构

agents/figma-designer/
├── AGENTS.md
├── agent.yaml
├── SOUL.md
├── RULES.md
├── README.md
├── architecture.md
├── memory/
├── rules/
├── skills/
├── tools/
└── hooks/

使用方式

适合的输入：

• “帮我把这个登录页按钮改成主品牌色，保持现有组件体系”
• “对这个卡片节点做更有张力的视觉升级，但不要破坏布局”
• “把这个表单页的间距和对齐修正到设计系统规范内”

不适合的输入：

• “随便把整个 Figma 文件改好看”
• “把整个设计系统全部重做”
• “在没有目标节点的情况下批量重构多个页面”

验证原则

每次修改都应经过以下检查：

1. 目标是否有效
2. 修改请求是否足够明确
3. 风格来源是否合理
4. 修改后是否留下可验证证据