关于 figma-apply-effects
用于在 Figma 节点上应用、移除、设置样式、绑定和审查效果的技能。它会检查高级效果的运行时兼容性,并通过回读验证更改。
主要功能
- 01应用或移除节点效果
- 02应用现有 Effect Style
- 03将支持的字段绑定到变量
- 04审查效果与兼容性
- 05将视觉意图转换为效果
适用场景
- 01为选定节点添加辉光效果
- 02应用现有 Effect Style
- 03检查高级效果是否受支持
- 04将阴影或模糊字段绑定到变量
MCP 相关
使用 Figma MCP 工作流,在调用 `use_figma` 前先调用 `figma:figma-use`。它会检查高级效果的 MCP 兼容性,并通过回读节点元数据验证更改。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ sergekostenchuk/ ui-ux-agent-skill-system --skill figma-apply-effects安装后在 Claude Code 中输入/figma-apply-effects确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlassets/effects-report-template.mdevals/evals.jsonreferences/effect-compatibility.md详细介绍
Figma 效果应用
将此技能用于 Figma 效果。它取代了过时的规则(即 Figma 仅支持四种效果类型)。当前 Figma Plugin 类型定义包含阴影、模糊、噪点、纹理和玻璃效果系列,但 MCP/客户端的支持可能落后于类型定义,因此高级效果受运行时门控。
模式
apply:向选中的节点添加一个或多个效果。remove:移除所有效果或选定的效果系列。style:应用现有的效果样式。bind:将受支持的效果字段绑定到变量。audit:检查当前效果和兼容性。recipe:将光晕、玻璃拟态、柔和立体感、粗粝感或纹理等视觉描述转换为效果对象。
必需工作流
- 确认目标节点、视觉意图、是替换还是追加效果,以及隐私范围。
- 在调用任何
use_figma之前,先调用figma:figma-use。 - 首先读取所选节点的元数据:
effects、fills、样式 ID、变量绑定和当前不透明度。 - 如果用户要求使用现有效果样式,先搜索/选择该样式;如果有,则应用该样式。
- 如果需要原始效果,请使用 references/effect-compatibility.md 选择效果系列。
- 对于
BACKGROUND_BLUR,检查节点是否具有可见且 alpha 小于1的填充;否则模糊效果在视觉上会被隐藏。 - 对于光晕,请使用
DROP_SHADOW配方:明亮的颜色、offset: { x: 0, y: 0 }、较大的半径,以及低至中等 alpha。 - 对于变量,只绑定受支持的字段。阴影效果支持
color、radius、spread、offsetX和offsetY;模糊效果支持radius;在 Figma Plugin 类型定义中,噪点、纹理和玻璃效果目前不支持变量绑定。 - 将返回的绑定效果对象写回节点的
effects数组。 - 重新读取元数据,并报告确切的效果、绑定、跳过的字段和视觉注意事项。
效果系列
当运行时提供标准 Figma 效果时,以下核心系列有保证:
DROP_SHADOWINNER_SHADOWLAYER_BLURBACKGROUND_BLUR
仅在确认运行时/工具兼容后使用以下扩展系列:
NOISETEXTUREGLASS- 模糊效果中的渐进式模糊变体。
安全与证据
- 在回读显示
node.effects或已应用的样式 ID 发生变化之前,不要声称已应用效果。 - 除非用户要求替换,否则不要覆盖现有效果。
- 不要声称不受支持的扩展效果系列已绑定变量。
- 如果 MCP 无法表达高级效果,请报告需要在 Figma 中手动执行的步骤,或改用核心效果近似实现。
验证与评估
- 验证回读结果:
node.effects、样式 ID,以及可用时的绑定变量。 - 确认
BACKGROUND_BLUR存在半透明填充路径,否则说明效果可能不可见的原因。 - 使用
evals/evals.json测试追加光晕、玻璃模糊半径绑定,以及不受支持的扩展效果变量绑定。
输出格式
使用 assets/effects-report-template.md。
资源
- 阅读 references/effect-compatibility.md,了解效果字段和绑定支持情况。
- 当前 MCP 能力不确定时,请阅读
$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md。
评论
支持 Markdown