デザインを選ぶと、次の選択肢が勝手に出てくる

デザインが苦手な人が AI ツールでつまずくのは、言葉にできないことです。空白の入力欄と点滅するカーソルが「何が欲しい？」と待ちます。今の版がおかしいのは分かるのに、「ファーストビューが詰まっている」「階層が足りない」と言えず、「もう一案」以外に何を頼めるかも分かりません。

Replit Design はここを逆にします。まず適当に一枚生成し、選ぶとすぐ横にパネルが浮きます。「Suggested next steps」（次に試せる提案）で、色付きカードが数枚、各一行。一枚クリックすると、その一文どおりに新稿が横に置かれ、元の一枚はそのまま残ります。公式はこの推薦を Ambient Intelligence と呼び、製品ドキュメントでは UI の中心コンポーネントです。

提案の方向は三種類です。

ポイントはクリック後です。新稿は原稿の横に並び、原稿はその場に残る。分岐をもう一本開いたのと同じです。方向を間違えても取り消し不要。二版が並び、一目でどちらが欲しいか分かります。ドキュメントの言い方は方向ごとの探索で、一本を辿ることは採用を意味しません。

提案カードとタイピングは併用です。カードは広く試し、タイピングは精密に寄せます。ドキュメントは特に、「ナビを左へ」のような一文も新しい方向の開始だと記します。チャットは仕上げだけのものではありません。

テンプレは冒頭だけじゃない。途中からでも差し込める

ただ提案カードは既にあるものから出ます。最初の一枚はどこから来るのか。途中で行き詰まったらどうするか。Replit Design への入口は四つです。文章で説明、テンプレート選択、既存の持ち込み、保存済みデザインシステムから。後二者は後述し、ここではテンプレートです。

キャンバス右にライブラリパネルがあり、タブは三つ。Templates（テンプレート）、Inspiration（インスピレーション）、Library（このプロジェクトで自分が作ったもの）。テンプレは検索・カテゴリ絞り込みが可能。ドキュメントの分類はポスター、SNS 投稿、ランディング、モバイル、バナー、プロトタイプ。デモ動画のフィルタにはメールも。誰が作ったかは両側で食い違います。ドキュメントは Replit 自作、発表ページは数百人の実デザイナー。クリックまたはドラッグでキャンバスに落とすと、編集可能なライブフレームになり、自分で生成した稿と同じ。そのまま編集し、App 化もできます。

Replit は発表ページで同種ツールと線を引きます。他の AI デザインツールはテンプレを起点にし、使うか使わないかは最初の一回。ここでのテンプレは材料で、途中いつでも投げ込める。デモ動画もその使い方です。

Mobbin の実 UI ライブラリ内蔵：参考にはなるが、コードにはならない

しかし同じパネルに二つ目のタブがあります。見た目はテンプレとほぼ同じで、挙動はまったく違います。ここがいちばん読み違えやすい。

Inspiration の裏は Mobbin です。実 App の画面スクリーンショットを集めた参考ライブラリで、自社サイトの紹介では 2018 年から。Replit の言い方では、世界最大の UI/UX 参考ライブラリ、200 万デザイナーが利用、毎週更新、1000 超の App、60 万超の実画面。業界初として全員が使え、Mobbin アカウント不要で、そこに接続済みです。

この一文の重みは数字で見えます。Mobbin 自社サイトは今も単独でサブスクを売っています。個人年払いは月あたり 10 ドル、チームは一人月 16 ドル。無料枠は厳しく、最新 4 App・最新 4 サイトのみ、フォルダは最大 3 つ。「アカウントなしで検索」は、未契約の人には実益です。

この対比がいちばん読み違えやすい。発表ページは「60 万超の実画面から着想し、アイデアを完成 App やサイトに」と書き、スクショがそのまま自分のページになるように読めます。製品ドキュメントははっきりしています。インスピ画像はプロジェクトにコードを一切追加しない。人にもモデルにも見せるための一枚です。

Mobbin と Replit の関係は発表ページにありません。買収・投資・ライセンスのいずれも触れず、公開報道にも買収発表は見つかりません。確認できるのは、Mobbin 自社サイトが今も単独サブスクを売っていること。規模も両側で合いません。Replit は 1000 超 App・60 万超画面、Mobbin 価格ページの説明は「hundreds of apps」、About は 40 万+ ユーザー・10 万+ スクショ。ここでは Replit 側の数字を使います。

ブランド統一は、人も機械も読めるスタイルガイド

参考とテンプレが解くのは一枚の見た目です。五枚、十枚になると、同じ家のものに見えるかが問題になります。発表ページが指摘するのは、今の AI デザインが断片的だということ。一つのツールで指示し、別で直し、三つ目で公開。引き継ぎのたびに色がずれ、書体がリセットされ、最後は薄まった版になる。

答えは内蔵デザインシステムです。言い方を除けば、生成されるシステムには五種が入ります。

保存の仕方は実体的で、空のブランドガイドではありません。tokens は tokens.json にあり、CSS 変数（例：src/index.css）へ渡り、コンポーネントがそれを使います。同じ内容の文書版 DESIGN.md も生成され、人も AI も読めます。

作り方は二通り。ゼロから：Replit ホームで要望を出し、短いブランド質問に答える。もう一つは気に入った一枚から逆引き抽出。稿右上三点メニューで抽出を選び、色・書体・余白をシステムとして保存。素材は他にも使えます。Figma リンク（デザイナーがよく使う UI デザインツール）、公開サイト、コード断片、参考画像数枚、既存の DESIGN.md。保存したシステムはワークスペースに載り、新規作成時に選べ、プロジェクトごとに差し替えられます。

デザインから App 新規はワンクリック。ただし無料枠はここで止まる

デザインの終点が動くものなら、最後の一歩に何が要るのか。

デザイン稿を選ぶと、上のアクションバーに Build メニューがあり、道は二本です。

一本目は、この稿に沿って本物の App を新規作成します。AI がレイアウト・スタイル・素材を動くプログラムにし、プロジェクトの作品一覧に載せます。二本目は、このプロジェクト内の既存 App を一覧し、選ぶと AI がその App のコードを稿に合わせて書き換えます。稿はキャンバス上に参照として残り、できているものの見た目を差し替えたいときはこちら。どちらも開始前に AI が自動で checkpoint（保存点）を残し、問題があれば改変前へ戻せます。

そして本記事でいちばん押さえておきたい一点です。発表ページの敷居は「本日すべてのユーザーに開放」の一文だけ。公式課金ドキュメントの表はこうです。

ドキュメント原文では、デザインから新 App をビルドするには Core または Pro が必要で、デザインの適用と Design の他の各能力は全プランで使える、とあります。したがって上の二本のうち止まるのは一本目だけです。プロジェクト内の既存 App に稿を被せるのは無料枠でもできます。無料枠は日次枠内で生成・分岐・クリック編集・PNG 書き出しを続けられますが、稿に沿って動くものを新規に開くことだけができません。

枠の減り方も知っておく価値があります。AI は今回の仕事量で課金され、小さな bug 修正は安く、機能まるごとは高い。話しかけるだけで課金され、テキスト返信だけでコードを動かさなくても同じです。逆に節約ポイントもあります。クリック編集パネルの単純変更（文言・色・余白）はソースを直接直し、枠を消費しません。複雑さが潜む変更だけ AI に渡ります。なおこのパネルは Web ブラウザ限定で、スマホ App とデスクトップ App では使えません。

背後のモデルはいつでも差し替え。発表は 5 社、ドキュメントは 4 つ

デザインはモデルが作るので、モデルを換えるのはデザイナーを換えるのと同じです。公式も探索の道として明示します。提案カードは同一デザイナーの方向転換、モデル変更は別人に任せる。同じ一文を二つのモデルに渡し、二枚を並べて比べます。

ここは説明が食い違うので、両方出します。

ドキュメント側はモデル選択 UI のスクリーンショットで、Power モードの主モデル一覧です。新モデル投入で変わるとも注記があり、製品内メニューがあなたのアカウントで使えるものが正です。

素材生成は別系統のモデルで、デザイン用の主モデルとは違います。

Nano Banana は Google の画像モデルで、ベクター欄にも Gemini があります。発表ページの Gemini はこの層に落ちる可能性が高いです。GLM はどちらの一覧にも対応項目がありません。

同じポップアップの別ノブも一言。一つはモードで、速度・費用・能力の取捨を決め、Lite / Economy / Power の三段階（課金ドキュメントは Turbo も触れ、Pro のみ）。もう一つは思考にどれだけ力を使うかで、Low から Max。モデルごとに推奨段が付きます。

Figma 稿、Claude のデザイン、URL も、起点にできる

上はゼロからの話です。手元に既にある人は？ 経路は四つ。

URL 経路は、公開サイトをデザイン稿として再現します。自分の現行サイトや作り直したいページのアドレスを渡し、それに沿って一枚を再構築。Figma 経路は、一つのフレームを持ち込んで稿として再構築。どちらも入ったあと提案カードが付き、ドキュメントの例は少し違います。Figma 側は「ダーク編集風の変種」「価格帯を追加」「スマホ版」、URL 側は「ダーク編集風の変種」「スマホ版」「連絡ページを追加」。

Claude 経路は向きが逆

Claude からのデザイン取り込みは Replit 側では操作しません。Claude 側から起動します。Claude でできたデザインを Share → Send to… → Send to Replit とし、認可後に Replit がプロジェクトを作り、デザインは静的な index.html として着地。AI が「Turn this Claude design into a real app」タスクを自動で受け、静的ページをインタラクティブにします。ドキュメントは新統合だと注記し、Claude 側にこの項目が見えるかは Claude 側の制御で、全アカウントにあるわけではありません。

ほか便利な小物が二つ。別画面サイズは設定を探さず、「このページのスマホ版を見せて」と AI に言えば 390×844 で一枚（タブレット 768×1024、デスクトップ 1280×720）。デザイン稿と App フレームはワンクリックで PNG 保存（画像・動画など素材フレームは元ファイルの直接ダウンロード）。ショートカットで選択フレームを画像としてコピーもできます。

初期ユーザーの成果はポスター、招待状、ショップページ

仕組みはここまでです。最後に、実際の成果物の見た目をざっと見ます。発表ページ冒頭は本編動画で、続く最初の録画は初期ユーザーの作品フローです。

Replit の言い方では、マーケ素材から本当に公開した App とサイトまであります。初期ユーザーの声が二本。

ブランド戦略の会社をやっていて、デザインの好みははっきりしています。たいていの AI ツールの出力は汎用すぎて、自分の名を付けられません。Replit Design には本当に驚きました。感心しています。しかも使い始めたばかりです。

Darby IRL、ブランド戦略会社創業者

創作に集中でき、開発の段で止まりません。以前試して出せなかったプロジェクトが、今は公開できます。

Agatha、Designely

本日すべてのユーザーに開放。入口は replit.com/design。同時期にデザインマラソン Designathon も開催。賞金プールは現金 5 万ドル超と Replit 枠で、「その場で足を止めさせる」作品向け。先月はニューヨークで vibecon というイベントも開きました。

デザインが苦手な人が AI デザインツールで詰まるのは、空白の入力欄に何を書けばいいかわからないときです。この版は違うと分かるのに、「ファーストビューが詰まっている」「階層が弱い」と言語化できない。Replit Design はここを逆にします。まず一枚生成して選び、横にカードが浮かびます。各カードは一文の人の言葉。1枚押すと、その指示で隣に新稿が生まれ、元の稿はそのまま残ります。この提案の仕組みを Replit は Ambient Intelligence と呼んでいます。

Replit Design への入り口は4つです。文章で記述、Templates から選ぶ、既存素材を取り込む、保存済みのデザインシステムから始める。キャンバス右のライブラリには2つのタブが並びます。Templates は Replit 自作のテンプレート。Inspiration の裏は Mobbin で、実在 App の画面スクショを集めた参考庫です。Replit の説明では 1000 以上の App、60 万枚超の画面。Mobbin 本体は今も単独で有料サブスクを売っており、個人プランの年払いは月換算 10 ドル、無料枠は最新 4 アプリのみです。

テンプレートと参考は1枚の見た目を担います。5枚目、10枚目になると「同じブランドから出たか」が問題になります。Replit Design はブランドを人と機械の両方が読めるアーカイブとして保存し、いちばん下の層を変えると上が全部追従します。

稿を選ぶと上のアクションバーの Build メニューに2本の道があります。そのデザインから動く App を新規作成するか、プロジェクト内の既存 App に当てはめるか（稿はキャンバス上の参照として残る）。どちらも開始前に自動で checkpoint を保存し、問題があれば直前に戻せます。公開ページの敷居説明は「今日から全ユーザーに開放」の一文だけ。Replit の課金ドキュメント表では、キャンバス、要素のクリック編集、AI 対話は全プランで使え、デザイン稿から App を新規に開くのは Core または Pro と明記されています。2本のうち止まるのは前者だけです。

本ページの数字の出典：ライブラリ規模（1000 超の App、60 万枚超の実画面、200 万人のデザイナー）は Replit 側の説明で、Mobbin 公式は数百 App と表記。プラン条件・価格・課金ルールは Replit 製品ドキュメントと課金ページからで、公開ページにはありません。デモの所要時間と金額は公式録画から。背後モデルも2つのリストが食い違います。公開ページは Claude、GPT-5、Gemini、Kimi、GLM の5つ。Replit ドキュメント現在の主モデルは Claude Fable 5（推奨表示）、Claude Opus 5、GPT-5.6 Sol、Kimi K3 の4つで、リストは新モデル追加に応じて変わるとあります。入口は replit.com/design。