Communitygithub.com

fantianxin96/i-figma-spec

Figma 仕様ワークフローのための Codex スキル:デザインシステムページからの抽出、構築、チェック、学習を行います。

i-figma-spec とは?

このスキルは、Figma のデザインシステムページから仕様を自動的に抽出、構築、チェック、学習するための Codex 向けスキルです。開発者やデザイナーがデザイントークン、コンポーネントプロパティ、バリアントなどの情報を迅速に取得し、コード生成や品質チェックに活用できます。主に Figma API と連携し、デザインデータを構造化された形式で出力することで、デザインと開発のギャップを埋めます。Codex エージェント上で動作し、コマンドベースの操作で効率的な仕様管理を実現します。

対応~Claude Code✓Codex CLI~Cursor
npx skills add fantianxin96/i-figma-spec

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

i-figma-spec は何をしますか?

Figma 仕様ワークフローのための Codex スキル:デザインシステムページからの抽出、構築、チェック、学習を行います。

概要

このスキルは、Figma のデザインシステムページから以下の操作を実行できます:

  • 抽出: デザイントークン、コンポーネント、スタイルを構造化データとして抽出
  • 構築: 抽出したデータからコード生成やドキュメント作成
  • チェック: デザインとコードの一貫性を検証
  • 学習: デザインシステムのパターンを分析し、ベストプラクティスを学習

使用方法

# デザインシステムページから仕様を抽出
figma-spec extract <file-key> <page-name>

# 抽出したデータからコードを構築
figma-spec build <spec-file>

# デザインとコードの一貫性をチェック
figma-spec check <spec-file> <code-file>

# デザインシステムのパターンを学習
figma-spec learn <file-key>

環境変数

  • FIGMA_ACCESS_TOKEN: Figma API アクセストークン(必須)
  • FIGMA_FILE_KEY: 対象の Figma ファイルキー(オプション)

対応プラットフォーム

  • Codex CLI
  • Claude Code
  • Cursor

ライセンス

MIT

関連スキル