Figma Skills 是基于 markdown 的指令,用于指导 AI 设计代理在您特定环境中的行为。将它们视为可重复使用的自定义提示词——您只需编写一次,它们就会编码您团队的约定、组件规则和质量标准,使代理每次都能自动遵循这些标准。

任何人都可以编写技能。无需代码。无需插件开发。无需 API 集成。只需 markdown 文本来描述代理应该做什么以及如何做。技能是生成通用 UI 的代理与生成您团队 UI 的代理之间的区别。

关键要点

技能将设计代理从通用 AI 转变为您团队的 AI。没有技能,代理使用默认约定并猜测您的偏好。有了技能,它会自动遵循您的间距系统、组件命名规则、无障碍要求和品牌指南。花 30 分钟编写 3-4 个技能,可以在数周的代理使用中节省数小时的修正时间。

Figma Skill 由什么组成?

技能元素 作用 示例
名称(带 /)调用方式/create-settings-page
目的技能的作用(一句话)"按照我们的团队约定生成设置页面"
步骤代理遵循的有序指令"1. 为每个组使用节标题..."
约定代理必须遵循的规则"始终使用 8px 网格,绝不使用绝对定位"
组件使用哪些已发布的组件"为布尔设置使用 Toggle/Switch"
变量应用哪些设计令牌"为背景使用 color-surface-primary"
禁忌代理应避免的事项"每页绝不使用超过 3 个标题级别"

Figma 发布时提供了 9 个示例技能,涵盖:构建组件库、从简报生成新设计、生成无障碍规范、协调多代理工作流程以及将设计令牌与代码同步。在 figma.com/community/skills 探索它们。基础技能 /use-figma 为代理提供了对 Figma 结构工作方式的共同理解。团队在此基础上进行定制。

编写您的第一个技能(附示例)

从您最常重复的设计任务开始。如果您每周创建表单布局,请编写一个 /form-layout 技能。这里是一个完整的实际示例:

/form-layout 目的:生成符合我们设计系统约定的表单布局。 步骤: 1. 创建一个具有 24px 水平内边距和 32px 垂直内边距的框架 2. 使用我们的 Heading/H1 组件添加页面标题 3. 使用 Section/Header 组件将相关表单字段分组为节 4. 使用我们的组件库添加表单字段(见下面的规则) 5. 使用我们的 Button 组件在底部添加操作按钮 6. 为所有容器应用自动布局 组件规则: - 单行文本输入:使用 Input/Text - 多行文本:使用 Input/Textarea - 从选项中选择:使用 Select/Dropdown - 是/否切换:使用 Toggle/Switch(绝不为单个布尔值使用复选框) - 多选:使用 Checkbox/Group - 日期选择:使用 DatePicker/Default 间距规则: - 节内表单字段之间 16px - 节之间 32px - 24px 水平内边距 - 标签始终在输入框上方,绝不在旁边(使用 Body/Small 样式) - 当存在验证规则时,在输入框下方包含帮助文本 按钮规则: - 主要操作在底部右对齐 - 次要操作(取消/重置)在主要操作左侧,间距 16px - 按钮在水平自动布局容器中 - 移动端底部粘性栏 验证状态: - 错误:红色边框(#EF4444)+ 下方错误消息使用 Body/Small/Error - 成功:有效输入后内联绿色复选标记 - 始终显示错误文本——绝不仅仅改变边框颜色 禁忌: - 绝不使用占位符文本作为唯一标签 - 绝不在没有节分隔的情况下堆叠超过 8 个字段 - 绝不为少于 4 个选项使用下拉菜单(使用单选按钮) - 绝不在每个字段上都放置必填/可选指示器(标记少数)

这个技能准确告诉代理您的团队如何构建表单。没有它,代理使用 Figma 的默认约定。有了它,代理生成的每个表单都遵循您的特定标准——团队成员之间保持一致,项目之间保持一致。

📬 觉得这篇文章有价值?

每周一个可行的 AI 洞察。订阅即可获得免费提示词包。

免费订阅 →

技能与其他 AI 自定义指令的比较

技能在概念上类似于其他 AI 工具中的自定义指令系统:

工具 自定义指令 创建者 可分享?
Figma Skills指导设计代理的 Markdown 文件团队手动创建是(社区库)
ChatGPT 自定义指令塑造所有 ChatGPT 响应的文本用户手动创建否(仅个人)
Claude Code CLAUDE.md编码代理的项目级指令团队手动创建是(通过代码库)
Hermes Agent Skills自动生成的可重用任务模式从使用中自动创建是(技能库)

关键区别:Hermes Agent 从完成的任务中自动创建技能——在您工作时学习。Figma 需要手动创建技能——您明确地教授它。Hermes 的方法随使用而扩展;Figma 的方法给您更多控制但需要前期投资。两者都比不使用自定义指令的工具产生更好的 AI 输出。

所有这些系统的基本原理是相同的:AI 在明确了解您的偏好、约定和标准的情况下表现更好。无论您是在编写 Figma Skill、ChatGPT 自定义指令,还是 Claude CLAUDE.md 文件,ICCSSE 框架都能产生更好的指令。免费提示词优化器自动应用此结构——粘贴您的技能草稿,获得更清晰的版本。

每个设计团队需要的 4 个基本技能

1. /form-layout — 标准化团队的表单设计。(上面的示例。)

2. /page-layout — 定义您的页面结构约定:页眉位置、侧边栏宽度、内容最大宽度、页脚结构、导航模式、响应式断点。

3. /component-variant — 告诉代理如何创建与您现有系统匹配的新组件变体:命名约定、状态定义(默认、悬停、激活、禁用、错误)、尺寸比例(sm、md、lg)和文档要求。

4. /accessibility-check — 定义您的无障碍标准:WCAG 级别(AA vs AAA)、最小触摸目标尺寸、对比度、标题层次规则、必需的 ARIA 标签和屏幕阅读器注释格式。详情请参见我们的无障碍规范指南

📬 想要更多类似内容?

每周一个可行的 AI 洞察。订阅即可获得免费提示词包。

免费订阅 →

常见问题

我应该创建多少个技能?

从涵盖最常见设计任务的 3-4 个开始:表单技能、页面布局技能、组件变体技能和无障碍检查技能。这些涵盖了 80% 的日常设计工作。当您识别出代理处理不一致的重复模式时,添加更多技能。

技能可以调用其他技能吗?

是的——技能可以引用其他技能,创建链式工作流程。/new-feature 技能可以为输入部分调用 /form-layout,然后为合规审查调用 /accessibility-check。这使得从单次调用启用复杂的多步骤工作流程成为可能。

技能会消耗积分吗?

技能本身(markdown 指令)不消耗积分。技能触发的代理操作(生成设计、编辑组件)按正常费率消耗积分。编写良好的技能实际上可能通过在第一次尝试时产生更好的输出来节省积分——更少的迭代意味着更少的消耗积分的重新生成。

我可以与 Figma 社区分享技能吗?

是的——Figma 的社区技能库让您发布和浏览技能。这意味着您可以使用其他设计团队为常见模式(仪表板布局、入门流程、设置页面)编写的技能,无需从头开始编写。

技能存储在哪里?

技能与您的 Figma 组织或个人帐户关联。团队级技能对所有团队成员可用;个人技能仅对您可用。将最重要的技能存储在团队级别,这样所有设计师都能从相同的约定中受益。

披露:本文中的某些链接是联盟链接。我们只推荐我们亲自测试和经常使用的工具。请参阅我们的完整披露政策