Claude Design Sync UI モックアップ
デザインエディターと Claude Code ターミナルを同期させた、洗練された SaaS スタイルのクラウドファンディングページ用モックアップを生成します。
プロンプト
目的: Claude Design と Claude Code が連携して募金用ウェブページのデザインを構築している様子を示す、洗練された 16:9 の製品発表用モックアップを作成する。
キャンバス: 1200×675 のランドスケープ構成で、背景全体を温かみのあるコーラルオレンジで塗りつぶす。中央に、かすかな影を落としたクリームホワイトの大きなデザインキャンバスを配置し、その左側にエディターサイドバー、右側に寄付カード、そしてフローティングターミナルウィンドウを重ねる。
レイアウト: 以下の 4 つの主要インターフェース要素を配置する：左側のデザインエディターパネル 1 つ、中央のウェブページアートボード 1 つ、右側の寄付進捗カード 1 つ、右上にあるフローティングダークターミナルウィンドウ 1 つ。アートボードはパネルの背面に配置し、ターミナルはアートボードの右上エリアに重ねる。
左側のエディターパネル: 角丸のオフホワイトのサイドバー。「Playground Crowdfunding Page」というタイトルを付け、左端に小さな円形のアプリアイコン、右端にベルアイコンを配置する。その下に「Edit」、「Discard」、コーラル色の「Save」ボタンという正確に 3 つのアクションを並べる。次に「Simple」、「Pro」、「Code」の 3 つのタブを配置し、「Simple」をアクティブにする。9 つのツールバーアイコン（選択ポインター、カーソル、長方形、グリッド/十字、円、テキスト T、鉛筆、取り消し、やり直し）をコンパクトに含める。Text、Typography、Appearance、Border の各コントロールラベルを追加する。Typography コントロールには、フォント「Poppins」、サイズ「36 px」、カラー「#1A1714」、ウェイト「Bold」、イタリック、下線、取り消し線、配置アイコン、行間「1.35」、大文字小文字「none」、トラッキングを含める。Appearance コントロールには、背景「None」、半径「0px」、オーバーフロー「visible」、不透明度「1」、z「auto」を含める。
中央のウェブページアートボード: ページ上部に、緑・黄・赤の 3 つのドットで構成された小さなロゴを配置し、その後にサイト名 Maple Grove Park を続ける。その下に、緑色のドット 1 つとテキスト A neighborhood project on Elm Street を含む淡い緑色のピル型タグを配置する。メインの見出しは大きく、太字で、ダークグリーンがかった黒色にし、青い細い境界線と 4 つの青い正方形のコーナーハンドルでアクティブに選択された状態にする。見出しテキスト: Let's build a playground our kids will never forget. 画像のように 4 行に分割する。見出しの下に、「Maple Grove's old play structure came down last spring. Together, we can replace it with something」で始まる小さな灰色の本文を表示する。
右側の寄付カード: 柔らかな影が付いた角丸の白いカードで、右端を少し切り取る。以下の 4 つのコンテンツ要素を含める：青い破線の選択枠で囲まれた、$61,240 と表示された選択済み金額テキストボックス、緑からライム色へのグラデーションで塗りつぶされた水平プログレスバー（残りは淡い灰色）、左側に「72% funded」、右側に「312 neighbors」と表示されたステータス行、そして「Chip in today」と書かれた大きな角丸の緑色の CTA ボタン。
フローティングターミナルウィンドウ: 右上に、角丸で影が付いた macOS スタイルの黒いターミナルを追加する。赤・黄・緑の 3 つの信号機ドットを配置する。ウィンドウのタイトル行には「temp — claude — 64x22」と表示する。左側にピクセルアート風のオレンジ色の Claude マスコットアイコンを表示する。ターミナルのテキストには「Claude Code v2.1.176」、「claude-opus-4-8」、「~/temp」、「? for shortcuts」、および「/design-sync Push my design components to Claude Design」というコマンドラインを含め、末尾にキャレットを配置する。ターミナルのタイポグラフィには等幅フォントを使用する。
ビジュアルスタイル: モダンな SaaS インターフェースのスクリーンショット、Figma のようなクリーンなデザインコントロール、クリームホワイト、ダークフォレストグリーンのテキスト、コーラル色のアクセント背景、柔らかな影、角丸、鮮明で読みやすい UI テキスト、ハイエンドなプレゼンテーション Slides の美学。
制約事項: 構成を広く、すっきりと保つこと。上記の正確な要素数を維持すること。人物を追加しないこと。余分なパネルを追加しないこと。ウォーターマークを含めないこと。
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
GPT Image 2 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 画像 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 画像 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。