figma-shaders

Figma シェーダーの作成と更新

create_shader または update_shader を呼び出す前に、毎回このスキルを読み込んでください。Figma MCP サーバーを通じた、アカウントライブラリのシェーダー作成について説明します。既存のシェーダーを読み取ったり適用したりする場合、このスキルは不要です。

シェーダーには、次の 2 種類があります。

• effect は、その下にあるレンダリング済みレイヤーをサンプリングして変換します。ぼかし、歪み、グロー、カラーグレーディング、ピクセル化、ハーフトーン、その他のポストプロセスに使用します。
• fill は、入力ラスターデータなしでピクセルを生成します。グラデーション、パターン、ノイズ、テクスチャ、プロシージャルな背景に使用します。

更新時に、種類を黙って切り替えてはいけません。update_shader に渡す kind は、既存のシェーダーと一致している必要があります。

作成ワークフロー

1. リクエストがエフェクトか塗りつぶしかを判断します。視覚的な意図から区別できない場合に限り、質問してください。
2. planKey を解決します。ユーザーから指定された値があれば再利用し、なければ whoami を呼び出します。選択可能なプランが 1 つだけなら自動的に使用し、実質的に異なるプランが複数ある場合は、ユーザーに選択を求めます。
3. 簡潔な名前、説明、選択した kind、および planKey を指定して、create_shader を 1 回呼び出します。これは最終的なシェーダーではなく、スタータースキャフォールドを作成します。
4. 返された id を指定して get_shader を呼び出し、すべてのソース URI を読み取ります。クライアントが MCP リソースを読み取れない場合は、代わりに includeSource: true を指定して get_shader を呼び出します。これにより、ランタイムのインポートとスキャフォールドの固定メタデータ契約を確認できます。
5. リクエストされた結果を実現する、完全な置き換え用 main.ts を作成します。
6. 返された id、同じ kind、files: [{ path: "main.ts", content: "..." }]、および具体的な commitMessage を指定して update_shader を呼び出します。名前、説明、アニメーション機能を変更する場合は metadata を使用します。ソースが時間関連のフレーム入力を読み取る場合は metadata.isAnimated: true を設定し、frame.mousePosition を読み取る場合は metadata.usesMouse: true を設定します。

create_shader の呼び出し後に作業を終えてはいけません。スタータースキャフォールドは構造上の出発点にすぎません。

更新ワークフロー

1. list_shaders でシェーダーを特定し、その後 get_shader を呼び出します。更新に必要な kind として、そのシェーダーの type（effect または fill）を使用します。
2. 編集前に、get_shader が返すすべてのソース URI を読み取ります。クライアントが MCP リソースを読み取れない場合は、includeSource: true を指定して呼び出します。それらのファイルを現在のソースオブトゥルースとして扱います。
3. ユーザーから変更を求められない限り、既存のコントロールと動作を維持します。
4. files 配列には、差分や一部のコード片ではなく、完全な置き換え用 main.ts を指定して update_shader を呼び出します。files が空でもよいのは、メタデータのみを更新する場合に限ります。

作成ルール

• main.tsを置き換える前に、シェーダーソースの作成を読んでください。必要なモジュール構成、WebGPU のライフサイクル、サポートされるパラメータースキーマ、エフェクト／塗りつぶしのアルファルール、WGSL の失敗時チェックリストが記載されています。
• アニメーションのメタデータをソースに合わせてください。main.tsがframe.time、frame.deltaTime、またはframe.frameを読み取る場合は、metadata.isAnimated: trueを設定し、frame.mousePositionを読み取る場合は、metadata.usesMouse: trueを設定してください。こうした参照を最後に削除した場合は、対応する値をfalseに設定してください。update_shaderは、features.jsonを直接置き換えられない場合でも、これらのメタデータフィールドを固定のfeatures.jsonマニフェストに適用します。
• アニメーションには、フレームがスキップされても結果が変わらないよう、frame.timeを優先してください。これは絶対時刻をミリ秒で表す時計です。必要に応じて、Number(frame.time) * 0.001で秒に変換してください。
• ユーザーがレイヤーごとに調整しそうな値はコントロールとして公開し、実装の詳細はハードコードしてください。
• 数値の範囲を制限し、デフォルト値は視覚的に有用なものにしてください。
• エフェクトでは、入力ラスターを意図的にサンプリングしてください。塗りつぶしでは、入力ラスターが存在することを前提にしないでください。
• エラー以外のupdate_shaderの結果は成功として扱ってください。返された場合はバージョンを記録してください。成功応答にバージョンが含まれない場合もあります。
• ビルドエラーが発生した場合は、返されたコンパイラー出力を使ってソースを最小限修正し、1 回だけ再試行してください。それでも失敗する場合は、シェーダーを繰り返し書き換えるのではなく、エラーを提示してください。
• アニメーションまたはマウス入力を利用できないとツールが報告した場合は、これを終端の機能制限として扱ってください。再試行したり回避を試みたりしないでください。代わりに、Motion モードで公開プロパティをキーフレーム化できる静的シェーダーの作成を提案してください。

完了

シェーダーの名前、種類、ID、および返された場合はバージョンを報告してください。追加したコントロールや動作を簡潔に説明してください。未公開のシェーダーをすぐに試せる新しい Design ファイルを開く、クリック可能な URL を作成して含めてください。try-tool-resource-content-idには正確なシェーダー ID を指定します。try-tool-resource-typeはシェーダーの種類に応じて設定します。エフェクトの場合はgen_effect、塗りつぶしの場合は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 を尋ねてから、同じtry-tool-resource-content-idと解決済みのtry-tool-resource-typeクエリパラメーターをその URL に追加してください。ファイル URL を推測してはいけません。

型のプレースホルダーは正確に 1 つの値に置き換えてください。返される URL に山括弧や縦棒を含めないでください。