proto-medium — Figma か、コードか（媒体選択の判断軸）

プロトタイプ・デザイン検証の媒体（Figma / コード / 併用）を、確かめたい問いから逆算して決めるための判断軸。 人間がまだ判断に慣れていない前提で、AIが毎回この基準を通して推奨＋理由を提示し、人間が承認する運用にする。

基準の核（一言）

止まっている絵で判断できるなら Figma。動かさないと分からないならコード。

判断フロー（上から順に最初に当てはまったものを採る）

1. 触った感触・動き・入力感が体験の核心か？ → コード （hover・スクロール・アニメーション・タイピング感は Figma では嘘になる）
2. 実データ・実ロジックが体験を左右するか？（速度・データ量・エッジケース） → コード
3. 色・タイポ・レイアウト・トーンの比較検討か？ → Figma （variants で複数案を並べて見るのが最も得意。手でドラッグして微調整もできる）
4. 画面遷移・情報設計を俯瞰して合意したいか？ → Figma （画面一覧・フロー全体を1枚で見る。非開発者に見せる資料にもなる）
5. デザインシステム・トークンの整備か？ → Figma （/design-ssot で Dev Mode からトークン抽出して実装へ流せる）
6. どれでもない・迷う → 併用: Figma でトーンボード → 良かった方向をコードで動かして確認

早見表

Figma が向く（Claude が MCP で操作できる）	コードプロトが向く
色・タイポ・レイアウトの比較検討（複数案並置）	hover・スクロール・アニメーション等の触感
画面一覧・遷移フローの俯瞰	実データ・レイテンシ・データ量が効く体験
デザイントークン・コンポーネント整備	技術的に成立するかの検証
人に見せて合意を取る資料	レスポンシブの実挙動
手でドラッグして微調整したいもの	生成的・ゲーム的な「動きに世界観が宿る」表現

運用ルール

• 媒体を決めたら推奨＋理由を一言で人間に提示し、承認を得てから作る（判断を人間が学べるよう、理由は必ず言葉にする）
• 1ラウンド内の併用は可（例: Figma で3トーン並べて選定 → 選ばれたトーンをコードで動かす）
• Figma 側の実働スキル: 書き込みは figma-generate-design / figma-use、実装への引き渡しは design-ssot。コード側の置き場は proto-loop の規約（proto/* ブランチ / samples/）に従う
• Figma プロトの URL は設定集（Setting Book）に記録して揮発を防ぐ

よくある誤り

• 「デザインの話だから」と何でも Figma に寄せる（動きが核心の体験は Figma では検証できない）
• 「どうせ実装するから」と何でもコードで作る（トーン比較はFigmaの方が数倍速く、非開発者とも共有できる）
• 併用時に Figma とコードで別々の判断をして分岐する（結論は設定集に一本化する）