2026 年にデザインツールを選ぶ際、本当の問いは「Figma にするか否か」ではなく、「アイデアから動くコードまでの道のりを、そのツールが実際にどこまで担ってくれるか」です。Starry、Figma、Google Stitch、Sketch はどれも似た領域にいますが、進める方向は大きく異なります。以下に整理します。
ひと目でわかる比較
| 機能 | Starry | Figma | Google Stitch | Sketch |
|---|---|---|---|---|
| プロンプトから UI を生成 | 対応（AI ネイティブ） | プラグイン / Make | 対応 | 内蔵 AI なし |
ネイティブな Figma .fig を読み込み |
対応 | ネイティブ | なし | プラグイン経由で読み込み |
| 本番用コードを書き出し | HTML + React (JSX) | プラグインのみ | コードスニペット | プラグインのみ |
| エディタ向け MCP サーバー | 対応（Cursor、Claude Code、Codex） | なし | なし | なし |
| ローカルファーストのファイル | ディスク上のプレーンな .pen |
クラウド | クラウド | Mac ローカルアプリ |
| 対応プラットフォーム | Web、macOS、Windows、Linux | Web、macOS、Windows、Linux | Web | macOS のみ |
| AI コーディングエージェント連携 | MCP + ACP | なし | なし | なし |
Starry — AI ネイティブな選択肢
Starry は単純な前提に基づいています。デザインとはコードであり、AI はそれについておしゃべりするだけでなく、キャンバス上で直接作業すべきだ、と。普通の言葉でインターフェースを説明すると、Starry が本物の編集可能なオートレイアウトのレイヤーを構築します。そして、あなたのプロジェクトが本当に所有するコードを書き出します。
書き出せるもの
- HTML — Tailwind の任意の値クラスを用いたセマンティックなマークアップに、インライン CSS のフォールバックを加えたもの。
- React (JSX) — 2 つのスタイル：Starry のコンパクトな属性記法、または React + Tailwind。
- SVG、デザイントークン、ビットマップ（
PNG / JPG / WEBP）。 - ネイティブな Figma
.figと Starry.penファイルの読み書き。
ファイルはディスク上のプレーンな .pen ドキュメントであるため、Starry はローカルファーストです。共有を選ばない限り、あなたの作業がマシンから外に出ることはありません。また、リアルタイムの共同編集は WebRTC 上でピア・ツー・ピアに動作し、デザインを始めるためにサーバーやアカウントは不要です。
Figma — コラボレーションの標準
Figma が標準的な共同デザインキャンバスなのは理由があります。マルチプレイヤー編集、巨大なプラグインエコシステム、そしてすでにそこで暮らしているチームです。コードのところで途切れます。Figma はデザインを生み出しますが、そのデザインを本番に乗せるには依然としてハンドオフが必要です。開発者が作り直すか、不完全なコードのためにサードパーティ製プラグインに頼るかのどちらかです。
Figma が勝る点：組織全体のデザインシステム、ステークホルダーのレビュー、そしてチーム全体がすでに知っているワークフロー。Starry が補完する点：Starry はあなたの .fig ファイルを読み込めるため、レビューには Figma をそのまま使いつつ、Starry でアートボードを本物のコンポーネントと出荷可能なコードに変えられます。
Google Stitch — プロンプトから UI へ、まだ発展途上
Stitch はプロンプトから UI を生成し、Google が送り出した「AI が代わりにデザインする」姿勢を最も明確に示す参入者です。手軽なモックアップには有望です。Starry との差は深さにあります。Stitch が出力するのは完全で編集可能な書き出し準備済みのプロジェクトではなくコードスニペットであり、Figma の読み込みも MCP サーバーも持ちません。そのため、あなたの AI コーディングエージェントはキャンバスを読み書きできません。
Sketch — Mac ネイティブな職人ツール
Sketch は、高速でネイティブなアプリをエディタごとにライセンス契約で利用したい Mac ベースのプロダクトデザイナーに愛され続けています（エディタ 1 人あたり月額約 10 ドル）。洗練されておりローカルで動きますが、内蔵 AI も MCP サーバーもありません。AI に UI を生成・出荷させたいチームにとって、Sketch はデザインツールであり、Starry はデザインからコードへのツールです。
Starry への移行（今あるものを捨てずに）
- Figma から：
.figファイルを Starry で直接開くと、レイヤー、コンポーネント、オートレイアウトが編集可能なノードとして引き継がれます。作り直す必要はありません。 - Sketch から：
.figに書き出し（または Figma 読み込み手順を使って）、Starry で開きます。 - コードへ：フレームを選択し、React (JSX) または HTML に書き出してプロジェクトに組み込みます。MCP サーバーを使えば、Cursor や Claude Code がキャンバスの文脈をエディタに直接取り込めます。
- システムを維持：デザインシステムは Starry が毎回の生成に注入する Markdown の仕様です。一度書けばどこでも再利用できます。
よくある質問
UI の生成とコードのハンドオフについては、はい。Starry はプロンプトを本物のコンポーネントに変え、あなたのプロジェクトが所有するきれいなコードを出荷します。同時に既存の .fig ファイルも読み込むため、ロックインされることはありません。
どちらもプロンプトから UI を生成しますが、Starry はさらに編集可能な React (JSX) と HTML を書き出し、Figma を読み込み、AI コーディングツールがキャンバスを読み書きできる MCP サーバーを動かします。Stitch はスニペットを出力するだけで、Figma の読み込みも MCP もありません。
Sketch はエディタごとにライセンスされるネイティブな Mac アプリです。Starry は AI ファーストで、直接コードを書き出し、MCP サーバーを持ちます。Sketch に内蔵 AI も MCP もない。
HTML、2 つのスタイルの React (JSX)、SVG、デザイントークン、ビットマップに加え、ネイティブな .fig / .pen の双方向変換。Vue や Svelte はありません。
