AgentBoard SaaS 랜딩 및 대시보드 UI

AI 에이전트 워크스페이스를 위한 세련된 SaaS 랜딩 페이지와 대시보드 목업을 나란히 생성하며, 제품 디자인 탐색에 유용합니다.

프롬프트

목표: 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개의 내비게이션 항목을 배치하세요. 메인 페이지 제목은 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 외에 추가 패널, 워터마크, 브라우저 크롬 또는 장식용 텍스트를 추가하지 마세요.