| name | sync-screen-design |
| description | 画面設計書・Figma・実装キャプチャの三点突合で、実装済み画面を仕様とデザインに同期する。Figma 側の対象ノード特定、スクリーンショットによる採用判断、visible 判定、色・フォント・余白の実値抽出、capture-emulator-screen による実装側キャプチャ、デザイントークン対応、差分修正までを扱う。「Figma 通りに直して」「デザイン差分を抽出して修正して」「この画面を設計とデザインに合わせて」と言われた時に使用する。 |
| user-invocable | true |
| argument-hint | <画面名 / Figma URL / node-id> |
| allowed-tools | Bash(curl -s -H *api.figma.com*), Bash(curl -sL *), Bash(uv run *), Bash(python3 *), Bash(dart format *), Read, Glob, Grep, Edit, Write, AskUserQuestion, Skill(capture-emulator-screen) |
sync-screen-design
実装済みの画面を画面設計書・Figma・実装キャプチャで突き合わせ、仕様とデザインに同期する。
鉄則（これだけは外さない）
- スクリーンショットが採用判断の唯一の基準。node ツリーに要素が存在しても、実描画に写っていなければ実装しない（
visible=false の隠しノードがツリーに残る）。
- 色・フォントは名前でなく実値で照合。Variable / Style 名だけを根拠に変えない。
- フォントファミリーは指定しない（システムフォント任せ）。Figma の「SF Pro / Hiragino」は EN/JP トークンの使い分けを意味するだけ。
- 共有コンポーネント（2 画面以上で import）を 1 画面の Figma に合わせて書き換えない。画面専用 Widget で対応する。
- 値の直書き禁止。デザイントークン or
static const 経由。
- キャプチャ前に必ず最新コードを反映する（ホットリロード／リスタート、アセット・l10n はフル再ビルド）。編集前ビルドのスクショで「直った」と判断しない（
capture-emulator-screen Skill）。
- Figma は見た目の正、画面設計書・機能設計書は仕様/条件/遷移の正として扱う。矛盾がある場合は勝手に決めず、差分としてユーザーに確認する。
必須実行フロー（UI 見た目差分）
UI の見た目差分を修正するときは、コード値だけで判断せず、必ず以下を実施する。
- 対象画面の画面設計書・機能設計書を確認し、実装スコープ、表示条件、遷移、状態バリエーションを把握する。
- Figma の対象ノードを特定し、画面設計書の nodeId が古くないか検証したうえで、Figma スクリーンショットを取得する。
- 最新コードを Emulator / Simulator へ反映する（hot reload / restart / full rebuild を使い分ける）。
- Emulator / Simulator のスクリーンキャプチャを取得する。
- Figma SS / 実装 SS / コードの三点で比較する。
- 差分を修正し、再キャプチャして確認する。
詳細手順は docs/figma-side.md、capture-emulator-screen Skill、docs/review-checklist.md を参照する。
ワークフロー
このスキルは impl-issue に依存しない独立スキル。実装側キャプチャは共通スキル capture-emulator-screen に委譲し、UI 実装・Typography・レビューの知見は本スキルの docs/ に取り込み済み。
進め方の要点
