c2d2c は無料で使えますか？ライセンスは？

c2d2c は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

c2d2c は今もメンテナンスされていますか？

半年以内に更新あり。c2d2c の最終コミットは 2026年8月3日です。

c2d2c は何に使えますか？

既存のフロントエンドコードベースにFigmaのデザインを1:1で実装するデザインレビュー用に、コードベースのコンポーネントをFigmaへ書き出す散在する余白、角丸、色の値を1つのトークンスケールに統一する

c2d2c のインストール方法は？

パッケージマネージャーでスキルをインストールします: npx skills add BIAsia/c2d2c Figma MCPコネクターを接続します（d2cは読み取りアクセス、c2dは書き込みアクセス）エージェントに、実現したい内容とFigmaリンクを伝えてスキルを実行するよう依頼します。初回実行時に設定がC2D2C.mdに自動でセットアップされます

c2d2c はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/BIAsia/c2d2c

BIAsia/c2d2c

Q: c2d2c は今もメンテナンスされていますか？

半年以内に更新あり。c2d2c の最終コミットは 2026年8月3日 です。

Figmaのデザインをコードベースに反映し、コードの状態をFigmaに戻すClaude Codeスキルと、スタイルシステムを統制するスキルです。

代替できる製品:Figma Dev Mode

GitHub で見る公式サイト

スター: 57
フォーク: 2
未解決の Issue: 0
最終コミット: 3 か月前

これは何？

c2d2cは、Figmaと本番コードベースを双方向につなぐ3つのClaude Codeスキルです。d2cスキルは、Figmaのデザインリンクをコードに変換します。既存コンポーネントの調査、計画のレビュー、1:1での実装、回帰テスト用ページの作成、スクリーンショットによる受け入れ確認を行い、マージリクエストを自動で作成します。c2dスキルは逆方向に、ソースコードからコンポーネント、状態、デザイントークンをFigmaファイルに書き出します。

3つ目のds-governは、コード側だけを対象とします。ボーダー半径などのスタイルの使用状況を網羅的に調べ、単一の信頼できる情報源を提案し、プロジェクト全体をそこに移行したうえで、設定の乖離を防ぐCIゲートを追加します。オプションのToken Sync Figmaプラグインを使うと、デザイナーが変更をコードに反映し、マージリクエストとして送信できます。

npx skills addでインストールできます。各スキルは自然言語でのリクエストを受けて起動し、初回実行時にプロジェクト設定をリポジトリのルートにあるC2D2C.mdファイルへ保存します。デザインを扱う手順では、Figma MCPコネクタが必要です。

主な機能

01実装前に再利用可能なコンポーネントを調査する、Figmaからコードへの実装
02コンポーネント、状態、デザイントークンをコードからFigmaへ書き出し
03単一のトークンソースとCIゲートによるスタイルシステムの統一
04Playwrightを使った回帰スクリーンショットツール。ページ全体とセクションの拡大画像に対応
05デザイナーの変更をマージリクエストとしてコードに反映する、オプションのFigmaプラグイン

ユースケース

既存のフロントエンドコードベースにFigmaのデザインを1:1で実装する
デザインレビュー用に、コードベースのコンポーネントをFigmaへ書き出す
散在する余白、角丸、色の値を1つのトークンスケールに統一する

クイックスタート

1
パッケージマネージャーでスキルをインストールします
npx skills add BIAsia/c2d2c
2
Figma MCPコネクターを接続します（d2cは読み取りアクセス、c2dは書き込みアクセス）
3
エージェントに、実現したい内容とFigmaリンクを伝えてスキルを実行するよう依頼します。初回実行時に設定がC2D2C.mdに自動でセットアップされます

使う前に知っておきたいこと

必須条件として、Figma MCPコネクターが必要です。
READMEではClaude Fable 5での実行が推奨されており、それ以前のモデルでは手順が抜け落ちやすいとされています。

トピック

#claude-code #figma #design-tokens #design-system #code-generation #agent-skills

よくある質問

c2d2c とは？: Figmaのデザインをコードベースに反映し、コードの状態をFigmaに戻すClaude Codeスキルと、スタイルシステムを統制するスキルです。 c2d2cは、Figmaと本番コードベースを双方向につなぐ3つのClaude Codeスキルです。d2cスキルは、Figmaのデザインリンクをコードに変換します。既存コンポーネントの調査、計画のレビュー、1:1での実装、回帰テスト用ページの作成、スクリーンショットによる受け入れ確認を行い、マージリクエストを自動で作成します。c2dスキルは逆方向に、ソースコードからコンポーネント、状態、デザイントークンをFigmaファイルに書き出します。
c2d2c は無料で使えますか？ライセンスは？: c2d2c は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
c2d2c は今もメンテナンスされていますか？: 半年以内に更新あり。c2d2c の最終コミットは 2026年8月3日です。
c2d2c は何に使えますか？: 既存のフロントエンドコードベースにFigmaのデザインを1:1で実装するデザインレビュー用に、コードベースのコンポーネントをFigmaへ書き出す散在する余白、角丸、色の値を1つのトークンスケールに統一する
c2d2c のインストール方法は？: パッケージマネージャーでスキルをインストールします: npx skills add BIAsia/c2d2c Figma MCPコネクターを接続します（d2cは読み取りアクセス、c2dは書き込みアクセス）エージェントに、実現したい内容とFigmaリンクを伝えてスキルを実行するよう依頼します。初回実行時に設定がC2D2C.mdに自動でセットアップされます
c2d2c はどこで入手できますか？: ソースコードとインストール手順は GitHub にあります：https://github.com/BIAsia/c2d2c

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。