ゼロから始めるか、既存のデザインをインポートする
Replit Design から始めるか、ワークスペースホームの作成用入力欄の下にある Design を選択します。始め方は4通りあります。- プロンプト: 欲しいものを説明して最初のフレームを生成します。
- テンプレート: 既成のランディングページ、ポスター、ソーシャル投稿、モバイル画面、プロトタイプから始めて、それをリミックスします。
- インポート: Figmaや Claude からデザインを持ち込むか、サイトをそのURLから、あるいはスクリーンショットから再現します。
- デザインシステム: 保存済みのシステムから始めて、最初のフレームから既にブランドに沿った状態にします。
Replit Designのホーム: プロンプト、インポート、あるいはテンプレートから始められます。
バリエーションを探る
決める前に幅広く試しましょう。すべての結果は新しいフレームとして配置されるため、どの方向性も失われません。- 提案: フレームを選択すると、Replit Designが次に試すべきことをワンクリックで提案します。
- 別のモデル: Designの背後にあるモデルを切り替え、同じブリーフを送って本当に異なる方向性を得ます。
提案は選択したフレームの隣に、ワンクリックで表示されます。
改良する
自分にとって自然なやり方で、勝ち残ったデザインを仕上げましょう。- チャット: 自分の言葉でAgentにブリーフします — ボード全体でも、一度に1つのフレームでも構いません。
- ビジュアルエディター: 任意の要素をクリックして、テキスト、色、スペース、画像を直接調整します。シンプルな編集はクレジットを消費せず、即座にソースコードへ反映されます。
- 描画: 問題箇所を丸で囲んだり、意図する要素を矢印で示したり、付箋を残したりします。Agentはそのマークアップを読み取ります。
- アセットを生成する: デザインに必要な画像、動画クリップ、ベクターグラフィックを、プロジェクトの見た目に合うようリファレンスを添付しながら作成します。
4つの改良手段の1つ: 選択した要素に対して開かれたビジュアルエディター。
構築する
フレームが仕上がったら、それをAgentに渡します。ここでのデザインは単なる絵ではなく、実際のソフトウェアの仕様です。- デザインを構築する: フレームを新しい動作するアプリに変換します。
- 既存のアプリを作り直す: すでに持っているアプリに、そのフレームの見た目を適用します。
選択したフレームのアクションバーにあるBuildアクション。
デザインフレームから新しいアプリを構築するにはCoreまたはProプランが必要です。それ以外のDesignの機能はすべてのプランで利用できます。プランの詳細は料金を参照してください。
拡張する
次のデザインを、前回よりも速く作りましょう。- デザインシステムを作成する: 気に入ったデザインから色、タイポグラフィ、トークン、コンポーネントを抽出するか、ゼロからプロンプトで作成します。
- そこから新しい作業を始める: 新しいアーティファクトは最初のフレームからブランドに沿った状態で生成されます。
- 既存のアプリをシステム配下に取り込む: 既に持っているアプリのスタイリングを作り直し、すべてを一致させます。
- システムを切り替える: プロジェクトごとにシステムを選択・変更できます。
保存されたデザインシステムを、生きたスタイルガイドとして表示した状態。
DesignとBuildのどちらから始めるべきか
DesignとBuildは、同じプロジェクトへの2つの入口です。BuildはAgentがソフトウェアを実際に動かす場所であり、Designはその見た目を形作る場所です。デザインしたものがデザインツールの中に取り残されることはありません。- 見た目が難しい部分であるときは Design から始めましょう: まず方向性を探り、勝ち残ったものを構築します。
- 動作が難しい部分であるときは Build から始めましょう: まず動くようにしてから、Replit Designでスタイルを作り直します。
次のステップ
最初の画面をデザインする
デザインの経験がなくても、プロンプトから最初のデザインフレームを生成しましょう。