# Figma AI 着色器：做可调色的流动渐变，检查遮罩和静态回退

把可调渐变Shader做成有速度、颗粒和颜色参数的视觉背景，同时留下不会播放的静态替代。

## 练习边界

本包没有调用收费平台或登录账号。官方图片仅作署名的教学功能示例；作者原生文件、合成声音和imagegen参考均按身份标明，不是目标平台实测结果。

## 七步操作

1. **准备背景目标**

   在Figma选中要放背景的Frame，写明柔和渐变、低颗粒和文字对比要求。练习包提供作者原生Shader参考与参数文件。

2. **打开Agent请求Shader**

   向Figma agent说明创建Shader，并要求暴露颜色、速度和颗粒参数。该功能处于开放测试，需当前账号可使用agent。

3. **把效果附着到图层**

   将生成效果放到目标Frame或图层，先使用低速与低颗粒值。观察背景有没有压住标题与按钮。

4. **逐个调整参数**

   一次只改速度或一种颜色，再对照静态截图。参数未暴露时要求agent补可调控制，不要每次把整段效果重生成。

5. **检查运行环境**

   在支持WebGPU的当前浏览器中预览。单页多个动态或交互Shader的播放存在官方限制，先只保留一个主要动态效果。

6. **准备静态替代**

   把合适时刻导出PNG，用在静态稿或不支持的环境。作者原生预览只说明目标效果，未替账号运行Figma agent。

7. **保存参数和预览**

   保留agent请求、参数值和静态图；换设备检查文字仍然清楚。交付时说明动态与静态分别使用的位置。

## 文件

- README.md
- asset-identity.json
- input.png
- official.png
- operation-plan.json
- parameters.json
- reference.png
- shader.html
- static-fallback.png

## 配图身份

- input.png：作者原生WebGL Shader实际静态画面，非Figma agent输出。
- official.png：Figma官方Shader效果与可编辑参数界面示例。
- reference.png：作者相同Shader在另一固定时间的真实渲染参考。

## 官方来源

- [Create shaders with the Figma agent](https://help.figma.com/hc/en-us/articles/41147702210071-Create-shaders-with-the-Figma-agent)