Créer et mettre à jour des shaders Figma
Chargez cette skill avant chaque appel create_shader ou update_shader. Elle couvre l'authoring de shaders de la library de compte via le serveur Figma MCP. La lecture ou l'application d'un shader existant ne nécessite pas cette skill.
Les shaders ont deux types :
effectéchantillonne et transforme la couche rendue en dessous. Utilisez-le pour le flou, la distorsion, la lueur, l'étalonnage des couleurs, la pixellisation, la trame ou autre post-traitement.fillgénère des pixels sans raster d'entrée. Utilisez-le pour les dégradés, les motifs, le bruit, les textures et les arrière-plans procéduraux.
Ne changez pas silencieusement de type lors d'une mise à jour. Le kind passé à update_shader doit correspondre au shader existant.
Flux de création
- Décidez si la demande est un effect ou un fill. Posez la question uniquement si l'intention visuelle ne résout pas la distinction.
- Résolvez
planKey. Réutilisez celui fourni par l'utilisateur ; sinon appelezwhoami. Utilisez automatiquement le seul plan éligible, ou demandez à l'utilisateur de choisir quand plusieurs plans matériellement différents sont disponibles. - Appelez
create_shaderune seule fois avec un nom concis, une description, lekindsélectionné etplanKey. Cela crée un scaffold de démarrage, pas le shader final demandé. - Appelez
get_shaderavec l'idretourné, puis lisez chaque URI source. Si le client ne peut pas lire les ressources MCP, appelezget_shaderavecincludeSource: trueà la place. Cela établit les imports runtime et le contrat de métadonnées fixe du scaffold. - Rédigez le remplacement complet
main.tspour le résultat demandé. - Appelez
update_shaderavec l'idretourné, le mêmekind,files: [{ path: "main.ts", content: "..." }], et uncommitMessagespécifique. Utilisezmetadataquand vous modifiez le nom ou la description.
N'arrêtez jamais après create_shader : le scaffold de démarrage est seulement un point de départ structurel.
Flux de mise à jour
- Identifiez le shader avec
list_shaders, puis appelezget_shader. Utilisez sontype(effectoufill) comme kind de mise à jour requis. - Lisez chaque URI source retourné par
get_shaderavant de modifier. Si le client ne peut pas lire les ressources MCP, appelez-le avecincludeSource: true. Traitez ces fichiers comme la source de vérité actuelle. - Conservez les contrôles et le comportement existants sauf si l'utilisateur demande de les modifier.
- Appelez
update_shaderavec lemain.tsde remplacement complet dans le tableaufiles, pas un diff ou un fragment partiel. Un tableaufilesvide est valide uniquement pour une mise à jour de métadonnées uniquement.
Règles d'authoring
- Avant d'écrire le remplacement
main.ts, lisez Shader source authoring. Il contient la forme de module requise, le cycle de vie WebGPU, les schémas de paramètres supportés, les règles alpha effect/fill, et la checklist des défaillances WGSL. - Les shaders rédigés via ces outils MCP doivent être statiques.
update_shaderremplace seulementmain.ts; il ne peut pas changer lefeatures.jsondu scaffold, où les capacités d'animation et de souris restent désactivées. Ne lisez pas les entrées temps ou souris et ne prétendez pas qu'elles sont supportées. Si l'utilisateur demande une animation, construisez le shader statique uniquement après avoir expliqué que ses propriétés exposées peuvent à la place être animées en keyframe en mode Motion. - Exposez des contrôles pour les valeurs que les utilisateurs sont susceptibles d'ajuster par couche ; codez en dur les détails d'implémentation.
- Gardez les plages numériques délimitées et les valeurs par défaut visuellement utiles.
- Pour les effects, échantillonnez le raster d'entrée intentionnellement. Pour les fills, ne supposez pas qu'un raster d'entrée existe.
- Traitez un résultat non-erreur de
update_shadercomme un succès. Enregistrez la version retournée si présente ; une réponse réussie peut l'omettre. - Sur une erreur de compilation, utilisez la sortie du compilateur retournée pour faire la correction source minimale et réessayez une seule fois. Si cela échoue toujours, signalez l'erreur au lieu de réécrire le shader à plusieurs reprises.
Achèvement
Signalez le nom, le type et l'id du shader, ainsi que la version retournée si présente. Identifiez brièvement les contrôles ou le comportement qui ont été ajoutés.