figma-generate-library

figma-generate-library skill の概要

figma-generate-library でできること

figma-generate-library は、コードベースを Figma 上の構造化されたライブラリへ変換するための Figma design system orchestration skill です。tokens、variables、component sets、theming、documentation を、手作業でゼロから作るのではなく、本番コードと揃った形で整えたいチーム向けに設計されています。

どんな人に向いているか

プロダクトデザイン、frontend engineering、design ops 向けに design system を新規構築したり、既存のものを更新したりするなら、figma-generate-library skill が適しています。単発の画面ラフを作る用途ではなく、既存のソースパターンから再利用可能な Figma library を作ることが目的のときに最も力を発揮します。

何が違うのか

この skill は順序と依存関係にかなり意図的です。単発のプロンプト応答ではなく、複数ステップの library build を案内する前提で作られています。Design Systems の作業では、tokens、variables、components、docs を順番を間違えず、検証ポイントを挟みながら生成しないと失敗しやすいため、この設計が重要です。

figma-generate-library skill の使い方

正しい companion skill をインストールして読み込む

figma-generate-library install では、OpenAI skills package 経由で skill を追加し、Figma の tool call を行う前に figma-use も一緒に読み込んでください。この skill は何をどの順番で作るかを決め、figma-use は各 use_figma ステップを正しく実行するための Plugin API 呼び出しルールを提供します。

ワークフローを左右する repo ファイルから読み始める

まず SKILL.md を読み、次に references/discovery-phase.md、references/token-creation.md、references/component-creation.md、references/documentation-creation.md を確認してください。repo に特別な命名ルールや復旧要件がある場合は、references/naming-conventions.md と references/error-recovery.md も見ておくべきです。これらのファイルが重要なのは、この skill が平坦な一発スクリプトではなく、段階的な実行、検証、クリーンアップを前提に組まれているからです。

雑な依頼を実行可能なプロンプトに整える

figma-generate-library usage で最もよい始め方は、範囲を絞った依頼にすることです。たとえば、「src/ui を元に、light/dark の token system と Button、Input、Card components を作り、既存の spacing と color scale に合わせてください」のように伝えるとよいでしょう。「design system をもっと良くして」のような曖昧な依頼は避けてください。framework、対象 surface、theme の範囲、generation / reconciliation / cleanup のどれを求めるのかを明示すると、この skill はよりよく動きます。

一発依頼ではなく段階的ワークフローで進める

実用的な figma-generate-library guide は、まず discovery、その次に token mapping、続いて component creation、documentation、最後に validation を依頼する流れです。これは repo の構成に沿っており、code と Figma の不一致が出たときの手戻りを減らします。discovery を飛ばすと、後で naming、variable scope、component dependencies を直すのに時間を失いやすくなります。

figma-generate-library skill の FAQ

figma-generate-library は Design Systems 専用ですか？

はい、これが主な適用領域です。figma-generate-library for Design Systems は、semantic tokens、variables、published components、補助的な documentation まで含む library architecture が必要なときに最も強みを発揮します。短時間のモック作成や、独立した marketing frame には向いていません。

Figma に詳しくなくても使えますか？

はい。ただし、source code と design intent は十分に把握していて、具体的な質問に答えられる必要があります。初心者でも figma-generate-library skill は使えますが、命名、variant structure、theming に関する判断は確認・レビューが必要で、完全自動でそのまま受け入れる前提ではありません。

通常のプロンプトと何が違いますか？

通常のプロンプトは、たいてい output を一つ求めるだけです。一方で figma-generate-library は build process に近く、段階的な作業、検証、修正を前提にしています。そのため、特に codebase が大きい場合や design system に複数の mode と依存関係がある場合に、library creation の信頼性が高くなります。

使わないほうがよいのはどんなときですか？

数枚の ad hoc frame だけが必要な場合、codebase に安定した UI patterns がない場合、あるいは複数ステップの変更をレビューして承認できない場合は使わないでください。そのようなケースでは、より単純なプロンプトや小さめの Figma タスクのほうが速く、リスクも低いです。

figma-generate-library skill を改善する方法

事前に十分な source material を渡す

figma-generate-library skill は、実際に対応付けできる design inputs を渡すほど精度が上がります。たとえば component の source path、token file、theme 名、既存の naming rule などです。「src/tokens、Button.tsx、Card.tsx を使い、light と dark を維持し、ds- プレフィックスを残してください」のような依頼は、漠然とした library refresh の依頼よりずっと実行可能です。

何を最優先で満たしたいかを明示する

出力をチームで使える状態にするために何が重要かを伝えてください。たとえば、コードの命名と一致していること、variant の増えすぎを抑えること、code connect を支援すること、handoff のための foundation documentation を整えること、などです。そうすると、見た目の完成度だけを最適化するのではなく、優先順位に沿って tradeoff を判断しやすくなります。

よくある失敗パターンに注意する

主なリスクは、作り込みすぎること、依存順を飛ばすこと、semantic tokens と component-level の詳細を混ぜてしまうことです。最初の結果が広すぎると感じたら、scope を狭める、foundations と components を分ける、あるいは生成を続ける前に discovery をやり直すよう依頼してください。

作り直しではなく、検証しながら反復する

最初の出力のあとで、「token convention に合わせて rename して」「冗長な variants をまとめて」「spacing と color semantics の documentation を追加して」のように、狙いを絞った変更を依頼するのが効果的です。この skill は状態を保ちながら前の判断を引き継ぐ構成なので、毎回最初からやり直すよりも、検証ベースで調整するほうがうまくいきます。