実行可能な仕様書のビジュアルエディタ + AI コンパイラ
モバイル UX プロトタイピングの「作って終わり」を終わらせる
Figma のデータモデルはベクターとフレーム。「これはボタンで、押すと保存して、失敗したらエラーになる」を持たない。だから design-to-code はガワだけを生む。
生成コードが保守できない品質なら捨てられる。回避策はランタイムロックインだけ — 受託の現場では選べない。
Dreamweaver、Anima、FlutterFlow…。「絵からコード」を志した道具は、同じ死因で倒れてきた。
コンパイラ付き Figma を作るのではない。最初から意味を編集するエディタとして作り、AI をコンパイラバックエンドにする。
画面構成・遷移・状態分岐は、静止画の WF では検証できない。実機で「触れる WF」にしてから Figma に渡せば、デザイン後のちゃぶ台返しが減る。
画面一覧・遷移図・各画面の要素と意図 (仕様書 Markdown) を添えて渡す。デザイナーは白紙からではなく「確定した骨格」から始められる。
社内ツールや PoC は Figma を経由せず、モックからそのまま AI 実装へ。テーマトークンで見た目の品位は担保する。
| レイヤー | 持っている情報 |
|---|---|
| 構造 | role 44種 (button / input / list / lottie…)、ネスト、固定要素、スクロール |
| フロー | onTap 遷移 16種 + Motion プリセット 13種、タブ遷移 |
| 状態 | 状態バリエーション、Five UI State ステートマシン |
| 意図 | devNote — 「タップで保存、失敗時は再試行」を自然文で。非エンジニアは質問に答えるだけで書ける |
| デザイン | テーマトークン (色・角丸・部品の地) — アプリの意匠ごと切替可能 |
これは「コンパイル可能なデータモデル」。Figma が構造的に持てないもの。
// mock: コメントで該当コードを特定クリーンビルドしかできないコンパイラはデモ。「直したら、変わった画面だけ更新される」が成立して初めてコンパイラを名乗れる。実アプリ (七夕アプリ) で 2 周実証済み。
本番運用中の Flutter アプリ (559 ファイル) を読み解き、モック + devNote + // mock: コメント + スナップショットを逆生成。
このスライドの配色が変わったのは、handy-editor のテーマトークンの話をするため。取り込んだアプリの意匠 (Japanese Swiss) を、エディタ自身が着られる。
任意のモック全画面を PNG 化するテスト基盤。視覚回帰と AI の目視比較に使える。
小さい checkbox の描画崩壊、プレースホルダ溢れ、FAB の影 — 実アプリ再現の圧が品質を上げた。
認証バイパス + シードデータの隔離ブランチで、実アプリの全画面を機械的に採取。
QR にはローカル一時 URL だけ。ダイアログを閉じればサーバごと消える。外部ホスティング不使用。
gzip 圧縮 → 番号付き QR のグリッドに分割。実機は読めた番号が緑に灯り、全部揃うと自動取り込み。通信ゼロ。
開発フロー: feature ブランチ → 日本語 PR → 実機確認 → マージ。AI (Claude Code) と人間の共同開発で運用。
diff_prototype → 実装コードに差分だけ反映handy-editor — 実行可能な仕様書のビジュアルエディタ + AI コンパイラ