figma-impl-init

Figma から実装するプロジェクトの既定値を1回で確定させる。毎回発生する判断を、プロジェクト開始時に前倒しして終わらせるのが目的。

このスキルは執筆ではなく添削にする。ゼロから20項目を書かせず、実測とデザインシステムの慣例から草案を出し、人が本気で見る箇所だけを絞って提示する。

発火条件

.figma-impl/conversion.md と .figma-impl/defaults.md が存在しないとき。

ls .figma-impl/conversion.md .figma-impl/defaults.md 2>/dev/null

存在する場合はこのスキルを使わない。figma-impl の担当。**「新規プロジェクトのとき」のような意図での判定はしない。**ファイルの有無だけで分岐する。

前提

• figma-impl スキルが同じ親ディレクトリに置かれていること。scan-file.js は figma-impl/scripts/figma-api.js を共有モジュールとして参照する。この2つは対で導入する。 片方だけをコピーすると scan-file.js は起動しない
• Node.js 18 以降（figma-api.js がグローバルの fetch を使うため）
• FIGMA_TOKEN が環境変数に設定されていること（Figma の Settings → Security → Personal access tokens）
• 対象 Figma ファイルの URL

いずれか欠けている場合はここで止まる。取得できないまま進めると、実測のはずの値が推測で埋まる。

手順

Step 1. Figma ファイルを実測する

node ~/.claude/skills/figma-impl-init/scripts/scan-file.js <FigmaのURL>

.figma-impl/scan-report.md に以下が出る。推測ではなく実測値。

• PALT が立っているテキストの割合（統一されているか、混在しているか）
• 使われている fontFamily / fontPostScriptName の一覧
• PALT 以外の有効な OpenType 機能（PWID など）
• letterSpacing の分布（REST API は px で返すので、fontSize で割った em で集計する）
• lineHeightUnit の分布（PIXELS / FONT_SIZE_% / INTRINSIC_%。INTRINSIC_% が Figma の Auto）
• itemSpacing / padding* の分布から判定した余白スケール（4px か 8px か）
• Auto Layout が無いフレームの割合

**Auto Layout 無しが 30% を超えたら、その警告をユーザーに伝える。**座標しか情報が無いため、このスキルで上げられる精度には原理的な上限がある。Figma ファイル側の整備が先だと明示する。

Step 2. 草案を生成する

templates/ の3ファイルをベースに、Step 1 の実測値と既存デザインシステム（shadcn/ui、Material 等）の慣例を材料に草案を書く。

各行にラベルを必ず付ける。

[要判断] は少数に絞る。全部に付けたら意味が無い。判断の価値があるのは、その人の目にしかオラクルが無い項目（フォーカスリングの仕様、中間ブレークポイントの扱い、要素数超過時の見せ方など）だけ。

conversion.md に必ず含める項目は templates/conversion.md を参照。特に palt と letter-spacing の二重適用（palt は字間を詰める機能なので、両方指定されている Figma を片方だけ写すとズレる）を明記すること。

Step 3. [要判断] だけを提示して確定させる

[要判断] の項目だけを並べて確認を取る。[実測] と [慣例] は提示しない（全件を見せると、見るべき箇所が埋もれる）。

確定したら .figma-impl/ に書き出す。

出力形式

.figma-impl/
  conversion.md    Figma値 → CSS値の変換規則
  defaults.md      Figma に存在しない項目の既定値
  reset.css        グローバルに1回だけ効かせる CSS
  scan-report.md   Step 1 の実測結果（後で参照するため保存）

• reset.css はプロジェクトのグローバル CSS に読み込ませる。読み込み方はプロジェクトの構成に合わせ、読み込み位置をユーザーに伝える
• 書き出し後、figma-impl が使えるようになったことを伝える

禁止事項

• **[要判断] 以外を人に確認しない。**確認項目を増やすほど、判断の質が下がる
• **スキル本体にプロジェクト固有の値を書かない。**palt の 0/1、フォント名、トークン名は .figma-impl/ 側に置く
• **.figma-impl/ に既存ファイルがある場合、確認なしに上書きしない。**差分を提示して承認を取る
• **実測せずに草案を書かない。**Step 1 を飛ばした草案は、全行が実質 [慣例] になる
• 運用中に育てる前提で項目を空けておかない。defaults.md は初回に書き切る。20項目程度に収まる
• **palt が混在（20〜80%）のとき、レイヤーごとの出し分けを提案しない。**プロジェクト全体で統一する前提を崩さない

非目標

• スクリーンショットのピクセル差分による検証（ラスタライザ差でノイズが支配的になり、原理的に機能しない）
• ピクセルパーフェクトの追求（達成不能。目標は系統的なズレの排除）
• Figma ファイル自体の修正（Variant / Variable 化の提案は figma-impl の UNRESOLVED.md 集計を材料に別途行う）