Proto Medium

---
name: proto-medium
user-invocable: false
description: "プロトタイプの媒体選択ガイド（判断軸）。この検証は Figma でやるべきか、コードで作るべきか、併用かを決める。proto-loop のステップ2、およびデザイン検討の入口で「Figmaとコードどっちでやる？」に迷ったら適用する。基準の核は「止まっている絵で判断できるなら Figma、動かさないと分からないならコード」。"
---

# 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 とコードで別々の判断をして分岐する（結論は設定集に一本化する）