AI Brand Guide Generation UI

Creates a clean AI workspace screenshot showing a markdown brand file being turned into a six-slide Dacoit-style brand guide contact sheet.

ゴール：洗練されたスクリーンショットスタイルのUIモックアップを作成し、AIチャットまたはエージェントのワークスペースがmarkdownファイルからブランドガイドスライドを正常に生成していることを示します。

キャンバス：4:3の横長構図、約1024×768。背景は暗いグリーンのカッティングマットのグリッドで、上端と左端に定規の目盛り、薄いミント色のグリッド線、5から50までの計測数字、小さな目盛り、およびいくつかの淡い対角線ガイドラインが付いています。中央に大きな角丸の白いアプリウィンドウを配置し、柔らかい影を落とし、グリーンのグリッドがボーダーとして見えるようにします。

アプリウィンドウのレイアウト：白いパネルには角丸と最小限のツールバーがあります。左上には、タイトルテキスト「Create brand guide slides」に続いて3点ドットメニューを表示します。右上には、正確に4つの小さなツールバーアイコンを配置します：ドロップダウンの矢印付きの暗い四角いアイコン、リスト/設定アイコン、小さな長方形アイコン、分割パネルアイコン。ツールバーの下に細い水平の区切り線を引きます。チャットエリアの右上付近に、「DACOIT-DESIGN.md」とラベル付けされた角丸の添付チップを配置し、その下に「Read this and generate a brand guide slides based on this」というライトグレイのユーザーメッセージバブルを配置します。ウィンドウ内部の右端に、繊細な縦スクロールバーを追加します。

メインの応答コンテンツ：左中央エリアに、穏やかなステータス行「Worked for {argument name="processing time" default="5m 3s"} ›」を表示します。区切り線の下に、応答テキスト「Generated above using GPT image generation.」を表示します。その後に段落「It’s a single raster contact-sheet concept for six Dacoit brand-guide slides based on `DACOIT-DESIGN.md`: cover, brand signal, color system, typography, layout rules, and motion/footer. Tiny generated text can have minor artifacts, but the overall brand direction is captured.」を配置します。クリーンでモダンなサンセリフUIタイポグラフィ、黒とグレーのテキスト、ゆとりのある間隔を使用します。

埋め込まれた生成画像のサムネイル：段落の下に、6スライドのブランドガイドコンタクトシートの角丸のサムネイルプレビューを1つ配置します。正確に6つのミニスライドパネルを3×2のグリッドに含める必要があります。ミニスライドのスタイルは、黄褐色、焦げたオレンジ、黒、クリーム、赤のグリッティな編集ブランドです。6つの表示されるスライドトピックを数え、描写します：1) 巨大なテキスト「DACOIT DESIGN CO」のカバースライド、2) 「REBELLIOUS / EARTHY / DECLARATIVE」のブランドシグナルスライド、3) おおよそTAN、RED、INK、BLACK、SMOKEとラベル付けされた縦のスウォッチのカラーシステムスライド、4) 大きな言葉「WORDS BECOME ARCHITECTURE」のタイポグラフィスライド、5) 「DESIGN WITHOUT APOLOGY」のレイアウトルールスライド、6) 暗い背景と「START A RIOT」のモーション/フッタースライド。小さなテキストは不完全かもしれませんが、大きなラベルは認識できるようにします。

ビジュアルスタイル：高精細な製品スクリーンショット、鮮明な白いインターフェース、繊細な影、リアルなブラウザ/アプリの外装、最小限のモノクロームアイコン、鋭く読みやすいテキスト、クリーンな間隔。背景はデザインワークスペースやドラフティングマットのように感じさせるべきです。

カスタマイズ可能なソース/ブランド詳細：変更された場合は、{argument name="project title" default="Create brand guide slides"}をウィンドウタイトルとして使用します。添付チップと段落の参照には{argument name="file name" default="DACOIT-DESIGN.md"}を使用します。ブランドガイドの件名には{argument name="brand name" default="Dacoit"}を使用します。メッセージバブルテキストには{argument name="user request" default="Read this and generate a brand guide slides based on this"}を使用します。

制約：人や手、ブラウザのアドレスバー、余分なポップアップ、透かし、または無関係なUIを追加しないでください。正確に1つのアプリウィンドウ、1つの添付チップ、1つのユーザーメッセージバブル、1つのステータス行、1つの応答段落ブロック、そして正確に6つのミニスライドを含む1つの埋め込みサムネイルを維持します。

機械翻訳 — この作品を生成したのは元のプロンプトです。

✨ 生成 保存 プロンプトをコピー 共有 元の投稿 Hitboard で開く