figma-catalogue

figma-catalogue

Figma、デザインからコードへのワークフロー、デザイントークン、公式プラットフォームスイートのドメインナビゲーターです。 デザインツールとコードをつなぐスキルをユーザーが求めているときに有効化してください。

→ 全ドメインを網羅したカタログについては、design-catalogue を使用してください。

使用するタイミング

次のような場合に有効化してください。

• Figmaからコード、またはコードからFigmaへのワークフローについて質問されたとき
• デザイントークンの管理や抽出が必要なとき
• デザインシステムを使いたいとき
• 公式スキルスイート（Anthropic、Vercel、Expo、Figma）について質問されたとき

Figmaとデザインからコードへの変換

スキル	最適な用途
figma-official-skills	7つの公式 Figma スキル：実装、生成、ライブラリ、コード連携
openai-skills	OpenAI の9つのスキル：Figma、フロントエンド、スライド、imagegen
google-stitch-skills	6つの Stitch スキル：design-md、react-components、shadcn、loop
extract-design-md	Stitch の出力を DESIGN.md 形式に抽出
claude2figma	トークン準拠を徹底する4つのスキル：色／フォント／余白 → Figma 変数
work-with-design-systems	検査（WCAG 監査）＋構築（変数バインディングを使う6段階）のデュアルモード
figma-variables-tokens-generator	アンケート → W3C トークン ZIP ＋インポート用 Figma プラグイン
figma-skill	Figma API ＋コミュニティリソース → デザイントークン → 7つのフレームワーク
extract-design-system	あらゆる公開ウェブサイトからトークンをリバースエンジニアリング → tokens.json ＋ tokens.css
design-tokens-skill	W3C DTCG トークン仕様：OKLCH、参照／エイリアス、Terrazzo、Figma エクスポート

公式プラットフォームスイート

スキル	最適な用途
anthropics-skills	6つの Anthropic スキル：frontend-design、artifacts、canvas、theme、brand、pptx
vercel-skills	4つの Vercel スキル：web-design-guidelines、コンポーネント、React のベストプラクティス
microsoft-skills	2つの Microsoft スキル：デザインレビュー、ダークテーマの React
software-mansion-skills	Software Mansion 公式：RN アニメーション、ジェスチャー、SVG、オンデバイス AI
callstack-agent-skills	Callstack 公式：RN のベストプラクティス、プロファイリング、Turbo Modules、アップグレード
expo-skills	Expo 公式：Expo SDK、EAS Build/Submit、Expo Router