AgentBoard SaaS ランディングページおよびダッシュボード UI

Generates a refined side-by-side SaaS landing page and dashboard mockup for an AI agent workspace, useful for product design exploration.

目標: AIエージェント協調プラットフォーム {argument name="product name" default="AgentBoard"} の洗練されたエディトリアルSaaS製品探索画像を作成します。2つの大きなWeb UI画面を温かいオフホワイトの背景に並べて表示します：左にマーケティングランディングページ、右に製品ダッシュボード。洗練されたスタートアップデザイン、柔らかいシャドウ、角丸カード、薄いグレーの区切り、豊富なホワイトスペース、控えめなフォレストグリーンのアクセント、ランディング見出しの黒いセリフディスプレイタイポグラフィ、小さくクリーンなサンセリフUIテキストを使用します。

キャンバス: 広い4:3構図、約1200×900。2つの角丸で微妙なドロップシャドウを持つ、ブラウザのような高いパネルを配置し、狭いgutterで隔てます。背景は明るいクリーム色で、微細なグレーンと非常に柔らかいビネット付き。

左画面、マーケティングランディングページ: トップナビゲーションバーに左上にロゴテキスト "AgentBoard"、4つの中央揃えナビリンク（Product、Solutions、Resources、Pricing）、右にログインと暗い緑色の "Start for free" ボタン。ヒーローエリアには小さなピルラベル "AI-NATIVE WORKSPACE"、3行の大きな見出し "One board. Many agents. Real outcomes." で "Real outcomes." はイタリックと緑色、サポートライン "Plan, build, and ship work—together."、2つのCTAボタン：暗い緑色の "Start for free" と明るいアウトラインの "Book a demo"。ヒーローテキストの右には、正確に5つの接続されたエージェントカード：Research Agent、Strategy Agent、Content Agent、Design Agent、Data Agent、カーブした接続線と "Done" や "In progress" のような小さなステータスチップで接続。下に正確に4つのメトリックタイル："2.4M+ Tasks automated"、"180K+ Agents this month"、"98.6% On-time"、"4.9★ User rating"。メトリックの下、"Connects with the tools you use" の行で正確に7つの統合アイコン/ボタン：Slack、Notion、GitHub、Figma、Google Drive、HubSpot、"+ More"。円形の女性ヘッドショットと引用 "AgentBoard gives us complete visibility and keeps our team aligned." クレジット Sarah Chen, Head of Product, Northline を含む証明ブロックを追加。下に正確に4つの特徴ブリーフ、小さなラインアイコン付き：Visual workspace、Multi-agent collaboration、Real-time progress、Secure & governed。

右画面、製品ダッシュボード: 密でエレガントなWebアプリインターフェースを作成。トップアプリバーに左に "AgentBoard"、メインタブ Workspace、Agents、Integrations、Data、Reports、Inviteボタン、5つの小さなユーザーアバターの行、"+3" バッジ、ドロップダウンChevron。左サイドバー、ワークスペース "Acme Inc." で正確に11つのナビゲーション項目：Home、Inbox（8バッジ付き）、Boards、Agents、Workflows、Data、Reports、Integrations、Settings、Help、Collapse。メインページタイトル {argument name="dashboard title" default="Q2 Go-to-Market Launch"} 緑色の "Live" ピルとサブタイトル "Coordinating agents across research, strategy, content, design, and ops." Shareと暗い緑色の Add agent ボタン付き。

ダッシュボードコンテンツ: タイトルの下、正確に4つのタブ：Board、Progress、Outputs、Activity、Boardがアクティブ。メインボードキャンバスには、カーブした接続線で左から右に配置された正確に6つの接続されたワークフローカード：Research Agent "Market & audience research" Done；Data Agent "Performance analysis" Done；Strategy Agent "Go-to-market plan" In progress；Content Agent "Messaging & content framework" In progress；Design Agent "Creative concepts & brand" In progress；Ops Agent "Launch readiness & checklist" In progress；Analytics Agent "Performance forecast" Queued。右上に小さなボードコントロール：検索アイコン、レイアウトアイコン、フィットアイコン、ズーム "100%"、ドロップダウン。

ボードの下、KPIストリップで正確に5アイテム：Live progress 72% 緑色のプログレスバー付き、9 Active agents、24 Tasks running、156 Tasks completed、92% On-time、"View all runs" ボタン付き。最近の出力セクションで正確に4つのドキュメントカード：GTM Strategy Brief、Messaging Framework、Creative Concepts、Performance Forecast、それぞれ小さなプレビューサムネイルと更新時間付き。最近のランテーブルで正確に5行：Q2 Go-to-Market Launch、Customer Onboarding Revamp、Pricing Strategy Analysis、Brand Refresh Campaign、Enterprise Sales Playbook；小さなエージェントアバターグループ、カラードステータスピル、開始時間、持続時間付き。下にコンポーザー入力バー、プレースホルダー "What would you like the agents to work on?"、AttachとAdd contextのボタン、"All agents" ドロップダウン、緑色の送信ボタン付き。

ビジュアルスタイル: プレミアムミニマル製品モックアップ、現実的なUI比率、鮮明なベクトルライクレンダリング、可能な限り小さく読みやすいインターフェーステキスト、微妙なドットパターンの背景テクスチャ、淡いベージュのカード、グリーンのステータスインジケーター、細い接続線、製品デザイン探索ツイートに適した現代的なエディトリアルSaaS美学。

制約: 正確に2つのメイン画面、ランディングヒーローに正確に5つのエージェントカード、正確に4つのメトリックタイル、正確に7つの統合アイコン、正確に4つのボトム特徴ブリーフ、正確に11つのサイドバーアイテム、正確に4つのダッシュボードタブ、ダッシュボードボードに正確に6つのワークフローエージェントカード、キュー入れられたAnalyticsカードを7番目のエンドポイントとして追加、正確に5つのKPIアイテム、正確に4つの出力カード、正確に5テーブル行。記述されたUIeyond、追加のパネル、透かし、ブラウザクローム、または装飾テキストを追加しないでください。

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

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