canicode

CanICode

CSSを学ばなくても、Figmaのデザインを意図したとおりに公開できます。

ブラウザーで試す — インストールは不要です。

canicodeでできること

Figmaでデザインを作成しました。どのように見え、動作すべきかは正確に把握しています。しかし、AIコード生成は推測するため、半分くらいは間違った推測をします。モバイルではカードが縦に並ばない。ホバー状態が消える。パディングが標準化される。私がデザインしたのはこういうものではありません。

canicodeは、FigmaファイルとAIコード生成の間にある実装前のヒアリングです。実装前に開発者が確認するような質問を、答えやすい言葉で尋ねます。

「デスクトップ幅では3枚のカードが横並びですが、画面が狭いときはどうしますか？」

「좁아지면 한 줄에 하나씩」（狭くなったら1行に1つずつ）／「縦に並べる」のように、普段の言葉で答えます。canicodeはその回答をコード生成に必要な正確な技術仕様に変換し、構造化された注釈としてFigmaファイルに書き戻します。これにより、次回の実行では推測する必要がなくなります。

Figmaを使ったまま作業できます。CSSセレクターを入力する必要はありません。意図がそのまま実装に反映されます。

→ 詳細な説明：docs/POSITIONING.md

3つのレイヤー

1. リンター — 17個のルールで、デザインの感覚では気づいていても言葉にできない抜けを見つけます。「この余白、何か違う」という感覚から、ほかのカードが16pxなのに1枚だけ14pxのカードを特定します。
2. Q&Aの仕組み — 抜けを見つけるたびに、開発者の言葉ではなく、あなたが使う言葉で質問します。回答すると、仕様に変換されます。
3. 往復による永続化 — 回答はDev Modeの注釈としてFigmaファイルに保存されます。次回の実行でも、次の担当者でも、次のコード生成でも、意図を確認できます。

リンターは決定論的に動作するため、分析自体でLLMのトークンを消費しません。また、アブレーションテストで検証済みで、生のJSONと比べてトークンを5分の1に抑えながらピクセル精度94%を達成し、実際のFigmaデザインに基づいて調整済みです。

Claude Designとの違い

Claude Designは2026年4月に公開され、プロンプトからアプリへという流れを見事に実現しています。AIがプロンプトからデザインを作成し、その結果をClaude Codeに渡します。一方、canicodeは別のワークフローを対象としています。

AIにデザインを任せたい場合は、Claude Designをお使いください。すでにデザインがあり、意図したとおりに実装したい場合は、canicodeが適しています。想定するデザインの担い手が異なるため、両者は競合しません。

詳しい説明（対象ユーザー、想定するワークフロー、canicodeが対象としないもの）は、docs/POSITIONING.mdをご覧ください。

ラウンドトリップのワークフロー

スキル： canicode-gotchas は、調査の回答を SKILL.md のみにローカルで保存します（メモ）。canicode-roundtrip は同じ分析プロセスに加えて、Figma に書き込みます（注釈／プロパティ）。記録のみの場合は gotchas を、デザインファイルを変更する場合は roundtrip を選んでください。

1. 分析する — Figma デザインに対して17のルールを実行します（レポートには評価が含まれます）。
2. gotchas を明らかにする — アナライザーは、推測できないデザイン情報について質問します（状態の不足、バリアントが不明確、レスポンシブ対応の意図）。
3. Figma に修正を適用する — /canicode-roundtrip スキルは use_figma を介して回答を書き戻します。各書き込みは、3種類の結果マーカーのいずれかとともにサマリーに表示されます。
   • ✅ シーンへの書き込みに成功 — プロパティがシーンノードまたはインスタンスのオーバーライドに直接書き込まれました。
   • 📝 シーンノードに注釈を追加 — プロパティを書き込む代わりに、スキルが構造化された注釈を残しました。インスタンスの子要素へのレイアウト書き込みでは、プロパティをコンポーネント定義（したがって、そのすべてのインスタンス）に反映するのはユーザーの意図に合わないことがほとんどなので、これがデフォルトです。📝 マーカーばかりのサマリーも正しい動作であり、失敗ではありません。
   • 🌐 定義への書き込みが反映されました — プロパティがコンポーネント定義に書き込まれ、すべてのインスタンスに継承されました。ユーザーが事前に allowDefinitionWrite でオプトインした場合にのみ発生します。
4. 再分析する — gotchas が記録されている（注釈／確認応答）ことを検証します。新たな gotchas が見つかった場合は、手順2を繰り返します。
5. 引き継ぐ — figma-implement-design に引き継ぎます。canicode の範囲はデザインの拡張までです。Figma 公式のコード生成スキルが、整理されたデザインからコードを生成します。
6. Code Connect のマッピングで締めくくる — figma-implement-design の実行後、roundtrip は生成されたコードに問題がないかを尋ねます。y の場合、canicode は Code Connect のマッピングを登録し、Figma コンポーネントを生成したばかりのコードに関連付けます。これにより、このコンポーネントを含む画面で今後 roundtrip を行う際、マークアップを再生成せずに既存の実装が再利用されます。リポジトリで Code Connect が設定されていない場合はスキップされます — roundtrip は gotcha の調査を始める前にこれを事前に通知するため、先に前提条件をインストールするか、マッピングなしで続行するかを選べます。

30秒で試す

1. ウェブアプリを開く — 任意の Figma URL を貼り付けると、レポートが表示されます。インストール不要、トークン不要、AI の利用料金もかかりません。これはリンター画面（Layer 1）で、単体でも役立ちます。
2. その後、完全な Q&A ラウンドトリップを行いたい場合は、以下の Claude Code スキルをインストールしてください。

完全なラウンドトリップを実行する（Claude Code）

npx canicode init
# saves your Figma token + installs /canicode-roundtrip
# (the prompt asks for the token; never paste it into agent chat)

/canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234
# in your Claude Code session

ラウンドトリップでは、デザインの読み取りと書き込みにFigma MCP サーバーを使用します。claude mcp add -s project -t http figma https://mcp.figma.com/mcp で一度インストールし、Claude Code を再起動してください。

Cursor／Claude Desktop／その他の MCP ホスト： こちらもサポートされています。CLI のインストール方法（npx canicode init --cursor-skills）、単体の MCP サーバーのインストール、CI ゲート用の GitHub Action、その他の方法は、以下のインストールマトリクスに記載されています。

任意 — Code Connect（手順6の最後に行うマッピング用）：@figma/code-connect をインストールし、Figma のセットアップガイドに従ってリポジトリのルートに figma.config.json を作成してから、canicode doctor を実行します。スキップしてもラウンドトリップは機能しますが、マッピングは登録されません。選択できるよう、事前に通知されます。

チェック内容

各問題は、ブロッカー > リスク > 情報不足 > 提案に分類されます。

インストール — いずれか1つを選択

トークンの安全性： Figma トークンを Claude ／ Cursor ／エージェントのチャットに貼り付けないでください。セッションログに残る可能性があります。CLI のプロンプト（npx canicode init）、--token、または FIGMA_TOKEN=… 環境変数を使用してください。

以下の各行は、完全なインストール方法です。重複する用途をカバーするため、複数の方法を実行しないでください。

トークンの取得方法： Figma → Settings → Security → Personal access tokens → Generate new token。Figma の PAT に関するドキュメント スコープ： canicode には読み取り専用で十分です。 有効期限： トークンのデフォルトの有効期限は90日です。生成時にドロップダウンを確認してください。

ラウンドトリップの前提条件： /canicode-roundtrip スキルは Figma MCP サーバーを呼び出してデザインを読み書きします。claude mcp add -s project -t http figma https://mcp.figma.com/mcp を一度実行してインストールし、新しい MCP ツールを読み込むために Claude Code を再起動してください。

# Interactive (TTY) — prompts for the token, never paste it into agent chat
npx canicode init

# Non-interactive (CI / non-TTY) — token via env or --token only
FIGMA_TOKEN=figd_xxxxxxxxxxxxx npx canicode init
npx canicode init --token figd_xxxxxxxxxxxxx

canicode config set-token   # rotate Figma token (interactive on TTY; --token for CI)
canicode config show        # masked token + config + reports paths
canicode config path        # absolute path to ~/.canicode/config.json

claude mcp add canicode -- npx --yes --package=canicode canicode-mcp

npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234"

- uses: let-sunny/[email protected]
  with:
    figma_url: 'https://www.figma.com/design/ABC123/MyDesign?node-id=1-234'
    figma_token: ${{ secrets.FIGMA_TOKEN }}
    min_score: 70

カスタマイズ

ガイド全文、例、利用可能なすべてのオプションについては、docs/CUSTOMIZATION.md をご覧ください。

開発

git clone https://github.com/let-sunny/canicode.git && cd canicode
pnpm install && pnpm build

pnpm dev        # watch mode
pnpm test       # run tests
pnpm lint       # type check

アーキテクチャの詳細については CLAUDE.md を、キャリブレーションパイプラインについては Calibration wiki をご覧ください。

コントリビューション

実際のデザインを基にスコアを調整できるよう、**Figma のデザインを共有**してください。

サポート

• バグや質問： GitHub Issues
• プライバシー： データの収集とオプトアウトの方法については、PRIVACY.mdをご覧ください。

ライセンス

MIT