Frame0 と ASCII ワイヤフレーム — 同じ画面のコストを実測

2026-05-22 · 7 min read

最近、Frame0 を Claude Code の MCP ツールセットに繋いでみた。狙いはシンプルで、AI に会話の流れでサッとワイヤフレームを描かせれば、文字で説明するより早く意思疎通できるはず——というもの。

ただ、そこで一つ気になることが出てくる。ワイヤフレーム一枚を描くのに、結局トークンはいくらかかるのか?

自分の side project である Heimdall(Jira のデスクトップクライアント)を実験台にして、メイン画面を二通りで描いてみた。プレーンテキストの ASCII と、MCP 経由の Frame0 ベクター。同じ構造、同じモックデータ、同じセッションの中で。

二枚を並べる

ASCII 版、メッセージ内に直接描画、MCP 呼び出しゼロ:

Frame0 版、93 個の図形、PNG として出力:

同じ画面——AppBar、タブストリップ、検索ボックス、アサイン者ドロップダウン、テーブル(サブタスクのインデント、サブタスク非表示インジケータ、優先度アイコン、ステータス pill 付き)——を、それぞれの媒体で一回ずつ描いた。

数字

Frame0 の 50k–70k は均等に分布していない。内訳はこう:

• 図形の作成 —— 約 95 個成功 + 5 個リトライ、おおよそ 30k–35k トークン。一つの shape あたり平均で入力 ~180、出力 ~150。
• search_icons —— 15 回のアイコン名問い合わせで、意外にもこれが最大の隠れコストとなり、約 20k–30k トークン。キーワードごとに 5〜50 件のアイコン記述が返ってきて、レスポンスの嵩が想像よりずっと大きい。
• export_page_as_image —— PNG は visual input として課金され、一枚あたり 1.5k–2k トークン。
• その他(schema 読み込み、add_page、create_frame)—— 2k トークン未満。

~25k 節約できる小さな一手

一周回ったあとには、使ったアイコン名がすべて手元に残った:

次に同種の画面を描くときは、search_icons を呼ばずに名前を直接指定すればいい。この一手だけで、合計使用量が 50k–70k から ~30k に下がる。

もう一つ小さな落とし穴。create_icon の name パラメータはアイコンライブラリの名前であって、自分が分かりやすいラベルではない。初回は自分が認識しやすい名前(例えば action-hash)を入れて、五個のアイコンが全部 500 で返ってきた。hash や refresh-cw といった実在のアイコン名に直したら通った。一回で 1.5k トークン無駄にしている。

結局たどり着いたワークフロー

構造の合わせ込みは ASCII。形が固まってから Frame0 で最終稿を描く。

ASCII 版の価値は見栄えではない——修正コストがほぼゼロであること。列の順序、グルーピングの論理、空状態の振る舞いをテキスト版で先に決めておけば、Frame0 のターンは合意済みの構造を視覚化するだけになる。

最初から Frame0 で座標を動かし、アイコンを差し替え、pill の幅を調整していたら、コストは 50k–70k では済まない——その二倍、三倍になる。図形を一つ直すたびに update_shape が走り、update は create と同じだけ高い。

MCP ツールを試している人へ

• 単一画面の対外的なワイヤフレーム —— Frame0 は割に合う。30k–70k トークンで対外に出せる視覚稿一枚なら妥当。
• バッチ・複数画面の出力 —— コストは線形に積み上がる。製品全体の設計稿が欲しい場合、Frame0 は最終稿に取っておき、構造の合わせ込みは ASCII か Mermaid で。
• アイコン対応表を先に用意する —— search_icons を飛ばすのが、一箇所での節約としては最大。
• shape の作成は並列で送る、ただし期待値を調整する —— 同じ frame の中の図形には相互依存がない。一つのメッセージで 32 個まとめて並列送信して問題なく、Frame0 サーバー側は一バッチを数秒で処理しきる。ただし全体の実時間は秒オーダーではない —— LLM はバッチごとに tool call を生成するのに十数秒から数十秒かかるため、一枚を仕上げるのは「数分」のオーダーになる。並列バッチが節約しているのは MCP サーバー側の処理時間であって、LLM 側の生成時間ではない。
• TRIALMODE の透かし —— Frame0 トライアル版の MCP 出力には、斜めの TRIALMODE 文字が入る。キャンバス内自体はクリーンで、出力にだけ刻印される。対外に出す前にライセンス状態を確認すること。

このベンチマークは 2026-05-22 に Claude Opus 4.7 上で実施した。Frame0 MCP クライアント、Heimdall のメイン画面(800×632 のデスクトップフレーム)をサンプルとしている。数字は推定値で、セッション内から harness の正確なトークンカウントを読むことはできない。実際の値は session usage パネルが基準。