design-extractor は何をしますか？
An AI Agent Skill for Claude Code that automatically extracts design systems from codebases. Generates a single, ready-to-run Figma script that reconstructs tokens, components, and frames with 1:1 accuracy.
概要
このスキルは、Claude Code上で動作し、指定されたコードベースからデザインシステムを自動抽出します。抽出された情報は、Figmaでそのまま実行可能な1つのスクリプトに変換され、トークン、コンポーネント、フレームが元のコードと1:1の精度で再現されます。
主な機能
- デザイントークンの抽出: カラーパレット、タイポグラフィ設定、スペーシング、シャドウなどをコードから抽出。
- コンポーネントの再現: 抽出したコンポーネントをFigmaのコンポーネントとして定義。
- フレームの生成: ページレイアウトや画面構造をFigmaフレームとして生成。
- 即時実行可能なスクリプト: 生成されたFigmaスクリプトは、Figma Plugin APIまたはREST APIを使用して即座に実行可能。
対応プラットフォーム
- Claude Code
使用方法
- このスキルをClaude Codeにインストールします。
- 解析したいコードベースのパスを指定します。
- スキルが自動的にコードベースをスキャンし、デザインシステムの情報を抽出します。
- 生成されたFigmaスクリプトファイルが出力されます。
- スクリプトをFigma上で実行すると、デザインシステムが再現されます。
設定
特に追加の設定は不要です。ただし、FigmaのAPIキーやプラグイン設定が必要な場合があります。詳細はスキルのドキュメントを参照してください。
注意事項
- 抽出の精度はコードベースの構造やスタイル定義の書き方に依存します。
- 複雑なCSSやJavaScriptの動的スタイルは、完全に抽出できない場合があります。
- 生成されたスクリプトはFigmaの最新APIに準拠していますが、Figmaのアップデートにより動作が変わる可能性があります。
ライセンス
このスキルはオープンソースで提供されています。詳細はリポジトリのLICENSEファイルを参照してください。