- 理解生成式插件、着色器和技能的核心概念与区别
- 掌握创建和发布自定义技能与插件的工作流程
- 学会使用 Weave 工具将复杂创意流程产品化
- 了解如何将 AI 工具融入团队协作，提升整体设计质量
背景：从提示到可组合的 AI 创作系统
在 Figma 中，与 AI 协作的早期体验可能仅限于简单的文本提示。然而，最新的更新将设计协作提升到了新的层次。现在，设计师可以创建和分享生成式插件、着色器和技能，将这些 AI 能力转化为可复用、可组合的创作工具。
这不仅仅是关于速度，更是关于控制力和表达力。通过自定义工具，你可以让 AI 助手理解你的设计语言、遵循你的工作流程，并产出真正符合你风格和意图的结果。这意味着 AI 从执行者变成了一个能够理解上下文、具备特定“技能”的合作伙伴。
三大工具的核心区别 生成式插件和着色器是代码驱动的视觉工具，可以直接在画布上操作图层，创造动态效果。而技能则是基于文本的指令集，用于引导 AI 助手执行特定的设计任务或审查流程。Weave 工具则更进一步，将复杂的多步骤 AI 工作流封装成简单易用的界面。
- 生成式插件和着色器：基于 WebGPU 的 GPU 程序，可实时操控像素，创造视觉效果。
- 技能：纯文本的 Markdown 文件，包含有序指令，用于扩展 AI 助手的能力。
- Weave 工具：将复杂的多模型 AI 工作流（如图像生成、编辑、3D 渲染）打包成可发布的工具。
准备：开始前你需要什么
要开始创建和分享你的 AI 工具，你需要确保拥有正确的软件版本和访问权限。以下是根据资料列出的必要条件。
软件与账号：你需要一个 Figma 账号。创建和运行生成式插件、着色器以及技能，主要发生在 Figma Design 环境中。对于 Weave 工具，你需要一个付费的 Weave 计划来发布工具，而任何拥有完整 Figma 席位（full Figma seat）的用户都可以在 Figma Design 中运行已发布的 Weave 工具。
重要提示：运行 Weave 工具将消耗 Figma AI 积分（一旦该功能全面可用）。关于具体的价格、版本号和积分消耗细节，请务必以 Figma 官方的最新说明为准。
- Figma 账号（用于技能、插件、着色器）
- 付费 Weave 计划（用于发布 Weave 工具）
- 完整 Figma 席位（用于运行社区中的 Weave 工具）
1创建与发布你的第一个技能
技能是将你的设计专长和流程封装起来，让 AI 助手能够复现的关键。它本质上是一个 Markdown 文件，包含了一系列步骤清晰的指令。
创建技能：在 Figma 中，你可以直接要求 AI 助手（agent）根据你的指引创建一个技能。例如，你可以提供一个设计框架作为参考，或者口述一系列具体的步骤和准则。助手会草拟出技能内容，你可以预览并直接在聊天中测试它。
迭代与精炼：创建后，你可以继续迭代：编辑步骤、更改格式、征求建议，或者直接打开 Markdown 编辑器进行手动修改。目标是让技能清晰、可靠，能够稳定地产出符合你标准的结果。
- 提供清晰、有序的指令作为技能基础。
- 用设计框架或具体案例作为参考，让 AI 更好理解上下文。
- 测试技能时，关注其输出的一致性和准确性。
Ask the agent: "Create a skill that audits all images in this file for exportability and creates a report frame on the canvas."2探索与构建生成式插件与着色器
生成式插件和着色器提供了更底层的视觉创作能力。着色器是强大的 GPU 程序，可以实时弯曲和改变像素，作为填充或效果应用于图层。
从提示开始：现在，你可以通过向 AI 助手描述效果来生成着色器。例如，描述一个“流体置换”或“布料模拟”效果。AI 不仅会生成着色器代码，还会创建动态的控制手柄（canvas handles），让你可以实时调整参数，这是简单提示无法做到的。
组合性与代码访问：着色器具有组合性，一个着色器的输出可以作为下一个的输入。更重要的是，你可以查看和下载你创建的任何着色器或插件背后的代码，并在第三方代理中直接编辑。这为深度定制打开了大门。
Prompt to agent: "Apply a cloth simulation shader with mouse interaction and physics to this layer."Prompt to agent: "Create a 3D object with a 2D post-processing fluid displacement shader effect."/shader-starter 这样的现有技能，可以帮助你用更少的细节描述来提示着色器，快速上手。3利用 Weave 工具封装复杂创意流程
Weave 工具代表了更高阶的 AI 应用：将涉及多个步骤、可能调用不同AI模型的复杂创意工作流，打包成一个简单易用的工具。
构建思维：构建 Weave 工具的关键在于定义清晰的输入、处理步骤和输出。资料建议，在写第一个提示词之前，先明确“这个工具到底是为谁而建？”。这决定了工具的界面、功能和灵活性。
设计健壮的输入：你需要设计一个能够处理各种输入（干净的和杂乱的）而不崩溃的系统。使用下拉菜单和预制选项可以为用户提供词汇表，同时保护你的后台逻辑。在用户请求和生成模型之间加入一个 LLM 翻译层，可以将创意意图转化为模型能理解的内容。
- 明确目标用户：是为自己、为特定职业（如建筑师），还是为大众？
- 结构化工作流：使用 LLM 帮助规划节点结构和编写提示词。
- 严格测试：将工具交给未参与构建的人，观察他们在没有说明的情况下如何使用，并修复发现的问题。
案例分析：社区中的优秀实践
学习他人已经发布的优秀技能和 Weave 工具，是快速掌握这些能力的最佳方式。以下是来自 Figma Community 的几个典型案例，展示了如何将专业知识转化为可共享的 AI 工具。
技能案例：自动组件文档化 由 Mauro Berteri 创建的技能，可以将一个组件或组件集自动转换为画布上准备就绪的文档框架。它节省了以往需要数小时的手动文档工作，让设计师能专注于创造性工作。该技能封装了经过多年验证的最佳交付结构，并且产出物 100% 可在 Figma 画布上直接编辑。
Weave 工具案例：从情绪板到室内渲染 Mallory Dean 创建的 “Interior Design Moodboard to Render” 工具，解决了从灵感收集到最终效果可视化的最后一步。用户上传室内设计情绪板，工具便能读取其中的颜色、材质、家具和灯光，生成具有凝聚力的照片级 3D 房间渲染图。Mallory 的构建秘诀是依赖 LLM 来协助规划工作流节点结构和编写提示词，并在构建过程中持续将结果反馈给 LLM 以指导修订。
技能案例：查漏补缺 Jakub Krehel 创建了一个技能，赋予 AI 助手他自己的“界面工艺规则手册”——涵盖排版、布局、可访问性、动效和产品文案的具体标准。这个技能捕捉了那些容易被忽略或并非显而易见的细节和最佳实践，帮助将设计从“良好”推向“卓越”。
| 工具名称 | 类型 | 创建者 | 核心价值 |
|---|---|---|---|
| 自动组件文档化 | 技能 | Mauro Berteri | 将重复性文档工作自动化，保证交付结构一致性 |
| Interior Design Moodboard to Render | Weave 工具 | Mallory Dean | 将 2D 灵感快速转化为 3D 可视化，降低渲染门槛 |
| 界面工艺审查 | 技能 | Jakub Krehel | 将资深设计师的细节标准编码，用于质量提升 |
| Physical Architectural Model Maker | Weave 工具 | Yordan Vakarelov | 从参考照片生成建筑模型，简化复杂流程 |
团队协作与领导力视角
将 AI 工具从个人玩具转变为团队生产力引擎，需要领导层的推动和正确的文化。资料[3]和[4]汇集了来自 OpenAI、Expedia、Atlassian 等公司领导者的见解。
超越速度，关注方向与质量：领导者需要设定明确的期望：使用 AI 不仅是为了更快地交付，更是为了探索更多方向、在定稿前处理好边界情况、并打磨那些让产品独具特色的细节。如果只追求速度而交付粗制滥造的作品，那将毫无价值。
建立信任与透明度：对于代理型（Agentic）产品，信任是首要任务（p0）。当 AI 展示其工作过程并引用来源时，用户更可能信任它。产品团队应从一开始就构建这种透明度和沟通机制。
创造学习与实验的空间：个体的 AI 熟练度是有限的。要推动全团队采用，领导者需要让学习和实验成为一种共享实践。这包括：创建同伴主导的培训空间、将 AI 引入现有工作流、鼓励分享尝试（包括失败的实验），以及领导者亲自上手展示进行中的工作。
- 为团队创造“玩耍”和试错的时间，这是探索 AI 潜力的关键。
- 早期定义治理检查点：明确哪些日常工作 AI 可以自主处理，哪些必须有人类参与（如涉及敏感信息时）。
- 不要等待“完美”：一旦达到基本的信任标准，就应允许团队发布产品，并通过真实使用来学习和改进。
进阶技巧与避坑指南
在熟练使用基础功能后，以下进阶技巧可以帮助你构建更强大、更可靠的工具。
技能的复用与组合：许多技能也可以与 Figma 的 MCP 服务器配合，在第三方代理中使用。你可以在 Figma 的 GitHub 仓库中找到专门为 MCP 服务器设计的技能。这意味着你可以在更广泛的开发环境中调用你的设计工作流。
着色器的动态与交互性：AI 助手现在可以将运动和交互性构建到你所描述的任何效果中。这意味着你可以创建响应鼠标位置、时间或其他输入的动态着色器，为原型设计增添生命力。
Weave 工具的健壮性设计：构建一个能处理各种输入并返回一致输出的工具，依赖于后台多个步骤的稳健设计。发布工具意味着你为所有使用者做出了这些设计决策。务必进行严格测试，模拟你不在场时用户可能的各种操作。
- 利用 MCP 服务器，将设计决策带入代码编写环境，确保最终构建物与设计稿匹配。
- 在 Weave 工具中使用 LLM 作为“翻译层”，理解用户创意意图并转化为模型指令。
- 发布前，将工具交给完全不了解背景的人进行“零解释”测试，观察并修复卡点。
总结：在画布上与 AI 共同构建
Figma 的生成式插件、着色器、技能和 Weave 工具，共同描绘了一个新的设计工作图景：在画布上与 AI 协作，在设计和代码之间流畅切换，并与社区共同构建。
学习的核心不在于记住每个菜单项，而在于思维的转变：从向 AI 发出一次性请求，转变为构建可复用、可分享、可组合的创作系统。无论是将你的设计审查清单变成一个技能，还是将你的特效制作流程打包成一个 Weave 工具，你都在扩展整个设计生态的能力。
现在就开始行动吧。从尝试社区中已有的优秀工具开始，理解其构造；然后着手创建你的第一个技能，解决一个你日常工作中重复的小问题；最终，当你有一个复杂的创意流程时，考虑用 Weave 将其产品化。在这个过程中，分享你的作品，学习他人的经验，共同提升我们使用 AI 进行设计的标准。
要点速览
- Figma AI 工具的核心进化是从提示到可定制、可分享的智能体（技能、插件、着色器、Weave 工具）。
- 创建有效的技能关键在于提供清晰、有序、具体的文本指令，并基于实际设计框架或流程。
- 着色器和插件提供了代码级的视觉控制能力，支持动态交互与组合，并可导出代码进行深度编辑。
- Weave 工具用于封装复杂的多步骤 AI 工作流，构建时应明确目标用户、设计健壮的输入处理并严格测试。
- 团队成功应用 AI 需要领导层推动，建立信任、鼓励实验，并关注质量与方向而非单纯追求速度。
- 通过 Figma Community 分享和复用工具，能极大加速个人与团队的学习曲线，并丰富整个设计生态。
