AgentBoard SaaS Landing and Dashboard UI
Generates a refined side-by-side SaaS landing page and dashboard mockup for an AI agent workspace, useful for product design exploration.
프롬프트
목표: {argument name="product name" default="AgentBoard"}라는 AI 에이전트 협업 플랫폼을 위한 세련된 편집 스타일의 SaaS 제품 탐색 이미지를 생성합니다. 따뜻한 오프 화이트 배경 위에 왼쪽에는 마케팅 랜딩 페이지, 오른쪽에는 제품 대시보드 등 두 개의 대형 웹 UI 화면을 나란히 배치하세요. 세련된 스타트업 디자인, 부드러운 그림자, 둥근 카드, 얇은 회색 구분선, 충분한 여백, 차분한 포레스트 그린 포인트 컬러, 랜딩 헤드라인에는 검은색 세리프 디스플레이 서체를, UI 텍스트에는 작고 깔끔한 산세리프 서체를 사용하세요.
캔버스: 4:3 와이드 구성, 약 1200×900 사이즈. 둥근 모서리와 은은한 드롭 섀도우가 적용된 브라우저 형태의 패널 두 개를 좁은 간격으로 배치하세요. 배경은 희미한 질감과 매우 부드러운 비네팅이 들어간 밝은 크림색입니다.
왼쪽 화면, 마케팅 랜딩 페이지: 상단 내비게이션 바 왼쪽에는 “AgentBoard” 로고 텍스트를, 중앙에는 Product, Solutions, Resources, Pricing 메뉴를, 오른쪽에는 Log in과 다크 그린 색상의 “Start for free” 버튼을 배치하세요. 히어로 영역에는 작은 알약 모양의 “AI-NATIVE WORKSPACE” 라벨, “One board. Many agents. Real outcomes.”라는 세 줄짜리 대형 헤드라인(Real outcomes.는 이탤릭체 및 녹색 적용), “Plan, build, and ship work—together.”라는 서브 문구, 그리고 다크 그린 색상의 “Start for free”와 밝은 테두리의 “Book a demo” CTA 버튼 2개를 배치하세요. 히어로 텍스트 오른쪽에는 5개의 연결된 에이전트 카드(Research Agent, Strategy Agent, Content Agent, Design Agent, Data Agent)가 포함된 아이소메트릭 워크플로우 보드를 배치하고, Done 및 In progress와 같은 작은 상태 칩이 달린 곡선 커넥터 라인으로 연결하세요. 하단에는 “2.4M+ Tasks automated”, “180K+ Agents this month”, “98.6% On-time”, “4.9★ User rating”이라는 4개의 지표 타일을 배치하세요. 지표 아래에는 “Connects with the tools you use”라는 행을 만들고 Slack, Notion, GitHub, Figma, Google Drive, HubSpot, “+ More” 등 7개의 통합 아이콘/버튼을 배치하세요. 원형 여성 프로필 사진과 “AgentBoard gives us complete visibility and keeps our team aligned.”라는 인용구, 그리고 Northline의 Head of Product인 Sarah Chen의 이름을 포함한 추천사 블록을 추가하세요. 맨 아래에는 작은 라인 아이콘과 함께 Visual workspace, Multi-agent collaboration, Real-time progress, Secure & governed라는 4개의 기능 설명 문구를 넣으세요.
오른쪽 화면, 제품 대시보드: 밀도 높으면서도 우아한 웹 앱 인터페이스를 만드세요. 상단 앱 바 왼쪽에는 “AgentBoard”를, 메인 탭에는 Workspace, Agents, Integrations, Data, Reports를 배치하고, Invite 버튼, 5개의 작은 사용자 아바타 행, “+3” 배지, 드롭다운 화살표를 포함하세요. 왼쪽 사이드바에는 “Acme Inc.” 워크스페이스를 위한 Home, Inbox(8 배지 포함), Boards, Agents, Workflows, Data, Reports, Integrations, Settings, Help, Collapse 등 11개의 내비게이션 항목을 배치하세요. 메인 페이지 제목은 {argument name="dashboard title" default="Q2 Go-to-Market Launch"}로 하고, 녹색 “Live” 라벨과 “Coordinating agents across research, strategy, content, design, and ops.”라는 부제목을 넣으세요. Share 버튼과 다크 그린 색상의 Add agent 버튼을 포함하세요.
대시보드 콘텐츠: 제목 아래에 Board, Progress, Outputs, Activity 등 4개의 탭을 배치하고 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)와 7번째 엔드포인트로 Queued 상태의 Analytics Agent “Performance forecast” 카드를 배치하세요. 오른쪽 상단에는 검색 아이콘, 레이아웃 아이콘, 맞춤 아이콘, “100%” 줌, 드롭다운 등 작은 보드 컨트롤을 포함하세요.
보드 아래에는 녹색 진행률 바가 포함된 Live progress 72%, 9 Active agents, 24 Tasks running, 156 Tasks completed, 92% On-time 등 5개의 항목으로 구성된 KPI 스트립과 “View all runs” 버튼을 추가하세요. Recent outputs 섹션에는 작은 미리보기 썸네일과 업데이트 시간이 포함된 GTM Strategy Brief, Messaging Framework, Creative Concepts, Performance Forecast 등 4개의 문서 카드를 추가하세요. Recent runs 테이블에는 Q2 Go-to-Market Launch, Customer Onboarding Revamp, Pricing Strategy Analysis, Brand Refresh Campaign, Enterprise Sales Playbook 등 5개의 행을 포함하고, 작은 에이전트 아바타 클러스터, 색상이 지정된 상태 칩, 시작 시간 및 소요 시간을 넣으세요. 맨 아래에는 “What would you like the agents to work on?”이라는 플레이스홀더가 있는 Composer 입력 바, Attach 및 Add context 버튼, “All agents” 드롭다운, 녹색 전송 버튼을 배치하세요.
시각적 스타일: 프리미엄 미니멀 제품 목업, 사실적인 UI 비율, 선명한 벡터 스타일 렌더링, 가능한 경우 작고 읽기 쉬운 인터페이스 텍스트, 은은한 점 패턴 배경 질감, 연한 베이지색 카드, 녹색 상태 표시기, 세밀한 커넥터 라인 등 제품 디자인 탐색 트윗에 적합한 현대적인 편집 스타일의 SaaS 미학을 적용하세요.
제약 사항: 정확히 2개의 메인 화면, 랜딩 히어로에 5개의 에이전트 카드, 4개의 지표 타일, 7개의 통합 아이콘, 4개의 하단 기능 설명 문구, 11개의 사이드바 항목, 4개의 대시보드 탭, 대시보드 보드에 6개의 워크플로우 에이전트 카드와 7번째 엔드포인트인 Queued 상태의 Analytics 카드, 5개의 KPI 항목, 4개의 출력 카드, 5개의 테이블 행을 사용하세요. 설명된 UI 외에 추가 패널, 워터마크, 브라우저 크롬 또는 장식용 텍스트를 추가하지 마세요.
기계 번역 — 실제 결과물을 만든 것은 원문 프롬프트입니다.
원문 프롬프트
Goal: Create a polished editorial SaaS product exploration image for an AI agent collaboration platform called {argument name="product name" default="AgentBoard"}, showing two large web UI screens side by side on a warm off-white background: a marketing landing page on the left and the product dashboard on the right. Use refined startup design, soft shadows, rounded cards, thin gray dividers, lots of whitespace, muted forest-green accents, black serif display typography for the landing headline, and small clean sans-serif UI text.
Canvas: Wide 4:3 composition, approximately 1200×900. Place two tall browser-like panels with rounded corners and subtle drop shadows, separated by a narrow gutter. Background is light cream with faint grain and very soft vignette.
Left screen, marketing landing page: Top navigation bar with the logo text “AgentBoard” at top left, 4 centered nav links labeled Product, Solutions, Resources, Pricing, then Log in and a dark green “Start for free” button on the right. Hero area has a small pill label “AI-NATIVE WORKSPACE”, a large three-line headline reading “One board. Many agents. Real outcomes.” with “Real outcomes.” italic and green, supporting line “Plan, build, and ship work—together.”, and 2 CTA buttons: dark green “Start for free” and light outlined “Book a demo”. To the right of the hero text, show an isometric workflow board with exactly 5 connected agent cards: Research Agent, Strategy Agent, Content Agent, Design Agent, and Data Agent, linked by curved connector lines with small status chips such as Done and In progress. Below, include exactly 4 metric tiles: “2.4M+ Tasks automated”, “180K+ Agents this month”, “98.6% On-time”, and “4.9★ User rating”. Under the metrics, include a row labeled “Connects with the tools you use” with exactly 7 integration icons/buttons: Slack, Notion, GitHub, Figma, Google Drive, HubSpot, and “+ More”. Add a testimonial block with a circular female headshot and the quote “AgentBoard gives us complete visibility and keeps our team aligned.” credited to Sarah Chen, Head of Product, Northline. At the bottom, include exactly 4 feature blurbs with tiny line icons: Visual workspace, Multi-agent collaboration, Real-time progress, and Secure & governed.
Right screen, product dashboard: Create a dense but elegant web app interface. Top app bar shows “AgentBoard” on the left, main tabs Workspace, Agents, Integrations, Data, Reports, plus an Invite button, a row of 5 small user avatars, a “+3” badge, and a dropdown chevron. Left sidebar for workspace “Acme Inc.” with exactly 11 navigation items: Home, Inbox with an 8 badge, Boards, Agents, Workflows, Data, Reports, Integrations, Settings, Help, and Collapse. Main page title reads {argument name="dashboard title" default="Q2 Go-to-Market Launch"} with a green “Live” pill and subtitle “Coordinating agents across research, strategy, content, design, and ops.” Include Share and dark green Add agent buttons.
Dashboard content: Below the title, show exactly 4 tabs: Board, Progress, Outputs, Activity, with Board active. The main board canvas contains exactly 6 connected workflow cards arranged left-to-right with curved connector lines: 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. Include small board controls at top right: search icon, layout icon, fit icon, zoom “100%”, and dropdown.
Under the board, add a KPI strip with exactly 5 items: Live progress 72% with green progress bar, 9 Active agents, 24 Tasks running, 156 Tasks completed, and 92% On-time, plus a “View all runs” button. Add a Recent outputs section with exactly 4 document cards: GTM Strategy Brief, Messaging Framework, Creative Concepts, and Performance Forecast, each with a small preview thumbnail and update time. Add a Recent runs table with exactly 5 rows: Q2 Go-to-Market Launch, Customer Onboarding Revamp, Pricing Strategy Analysis, Brand Refresh Campaign, and Enterprise Sales Playbook; include tiny agent avatar clusters, colored status pills, started times, and durations. At the bottom, include a Composer input bar with placeholder “What would you like the agents to work on?”, buttons for Attach and Add context, an “All agents” dropdown, and a green send button.
Visual style: Premium minimal product mockup, realistic UI proportions, crisp vector-like rendering, tiny legible interface text where possible, subtle dotted background texture, pale beige cards, green status indicators, fine connector lines, modern editorial SaaS aesthetic suitable for a product-design exploration tweet.
Constraints: Use exactly 2 main screens, exactly 5 agent cards on the landing hero, exactly 4 metric tiles, exactly 7 integration icons, exactly 4 bottom feature blurbs, exactly 11 sidebar items, exactly 4 dashboard tabs, exactly 6 workflow agent cards on the dashboard board plus the queued Analytics card as the seventh endpoint, exactly 5 KPI items, exactly 4 output cards, and exactly 5 table rows. Do not add extra panels, watermarks, browser chrome, or decorative text beyond the described UI.