SuperAPI AI 工具集

figma-shaders

设计与创作

查看项目

更新于 10-15 21:06

技能介绍

用途:该技能用于通过 Figma MCP 服务器创作账户库中的着色器。在每次调用 create_shader 或 update_shader 前必须加载;仅读取或应用已有着色器时不需要。

主要能力:着色器分两类——effect 对下方已渲染图层采样并做后处理(模糊、扭曲、发光、调色、像素化、半调等);fill 不依赖输入栅格直接生成像素(渐变、图案、噪点、纹理、程序化背景)。更新时不得静默切换类型,update_shader 传入的 kind 必须与现有着色器一致。

创建流程:先判断是 effect 还是 fill,视觉意图不明确时才询问;解析 planKey(复用用户提供的,否则调用 whoami,唯一可用则自动采用,多个差异明显时让用户选择);调用 create_shader 生成起始脚手架(非最终结果);用返回 id 调用 get_shader 并读取所有 source URI(客户端无法读取 MCP 资源时改用 includeSource: true);编写完整的 main.ts 替换;调用 update_shader 传入相同 kind、files 数组与具体 commitMessage,改名称/描述/动画能力时用 metadata。切勿在 create_shader 后停止。

更新流程:用 list_shaders 定位后调用 get_shader,以其 type 作为更新 kind;编辑前读取全部 source URI,视为当前事实来源;除非用户要求,保留现有控件与行为;files 中传完整 main.ts 而非 diff,空 files 仅用于纯元数据更新。

编写规则:写 main.ts 前先阅读 Shader source authoring,其中包含模块结构、WebGPU 生命周期、参数 schema、effect/fill 透明度规则与 WGSL 失败清单。动画元数据须与源码匹配:读取 frame.time、frame.deltaTime 或 frame.frame 时设 metadata.isAnimated: true;读取 frame.mousePosition 时设 metadata.usesMouse: true;移除最后一次使用后设回 false。动画优先用 frame.time(绝对毫秒时钟,可用 Number(frame.time) * 0.001 转秒)。为用户可能逐层调整的值暴露控件,硬编码实现细节;数值范围有界、默认值视觉可用。effect 需有意采样输入栅格,fill 不得假设存在输入栅格。update_shader 非错误即视为成功,返回 version 时记录。构建错误时按编译器输出做最小修正并重试一次,仍失败则上报错误。若工具报告动画或鼠标输入不可用,视为终止性能力限制,不得重试或绕过,可改为编写静态着色器,其属性可在 Motion 模式中打关键帧。

完成:报告着色器名称、类型、id 及返回的 version,简述新增控件或行为,并构造可点击链接打开新 Design 文件试用,使用精确 id 作为 try-tool-resource-content-id,按类型设置 try-tool-resource-type(effect 为 gen_effect,fill 为 gen_fill):https://www.figma.com/file/new?try-tool-resource-content-id=<id>&try-tool-resource-type=<gen_effect|gen_fill>&type=design&mode=design。随后询问是否改为在已有 Figma Design 文件中打开,若是则复用已提供的文件 URL 或向用户索取,并附加相同查询参数,切勿猜测文件 URL。URL 中类型占位符须替换为单一值,不含尖括号或竖线。

限制:仅适用于 Figma MCP 服务器环境;具体 planKey 可用性、账户库权限等细节资料未提供。