สร้างภาพจำลองหน้า Landing Page และ Dashboard ของ SaaS แบบเคียงข้างกันสำหรับพื้นที่ทำงานของ AI agent ซึ่งเหมาะสำหรับการสำรวจการออกแบบผลิตภัณฑ์
เป้าหมาย: สร้างภาพการสำรวจผลิตภัณฑ์ SaaS ที่ดูเป็นมืออาชีพสำหรับแพลตฟอร์มการทำงานร่วมกันของ AI agent ในชื่อ AgentBoard โดยแสดงหน้า UI เว็บ 2 หน้าขนาดใหญ่เคียงข้างกันบนพื้นหลังสีครีมอ่อน: หน้า Landing Page ทางการตลาดทางด้านซ้าย และ Dashboard ของผลิตภัณฑ์ทางด้านขวา ใช้การออกแบบสไตล์สตาร์ทอัพที่ประณีต เงาที่นุ่มนวล การ์ดแบบขอบมน เส้นแบ่งสีเทาบาง พื้นที่ว่างจำนวนมาก เน้นสีเขียวป่า (forest-green) แบบหม่น ใช้ฟอนต์แบบมีหัว (serif) สำหรับพาดหัวหน้า Landing Page และข้อความ UI ขนาดเล็กที่สะอาดตาแบบไม่มีหัว (sans-serif)
ผืนผ้าใบ: องค์ประกอบภาพกว้าง 4:3 ขนาดประมาณ 1200×900 วางแผงหน้าต่างเบราว์เซอร์ทรงสูง 2 แผงที่มีมุมโค้งมนและเงาตกกระทบที่นุ่มนวล คั่นด้วยช่องว่างแคบๆ พื้นหลังเป็นสีครีมอ่อนที่มีลายจุดจางๆ และขอบมืด (vignette) ที่นุ่มนวลมาก
หน้าจอซ้าย หน้า Landing Page การตลาด: แถบนำทางด้านบนมีข้อความโลโก้ “AgentBoard” ที่มุมซ้ายบน ลิงก์นำทาง 4 รายการที่จัดกึ่งกลาง ได้แก่ Product, Solutions, Resources, Pricing จากนั้นมีปุ่ม Log in และปุ่มสีเขียวเข้ม “Start for free” ทางด้านขวา พื้นที่ Hero มีป้ายกำกับขนาดเล็ก “AI-NATIVE WORKSPACE” พาดหัวขนาดใหญ่ 3 บรรทัดว่า “One board. Many agents. Real outcomes.” โดยคำว่า “Real outcomes.” เป็นตัวเอียงและสีเขียว มีบรรทัดสนับสนุนว่า “Plan, build, and ship work—together.” และปุ่ม CTA 2 ปุ่ม: ปุ่มสีเขียวเข้ม “Start for free” และปุ่มขอบโปร่ง “Book a demo” ทางด้านขวาของข้อความ Hero ให้แสดงบอร์ดเวิร์กโฟลว์แบบไอโซเมตริกที่มีการ์ด agent เชื่อมต่อกัน 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
หน้าจอขวา Dashboard ผลิตภัณฑ์: สร้างอินเทอร์เฟซเว็บแอปที่แน่นแต่ดูหรูหรา แถบแอปด้านบนแสดง “AgentBoard” ทางด้านซ้าย แท็บหลัก Workspace, Agents, Integrations, Data, Reports พร้อมปุ่ม Invite แถวของอวตารผู้ใช้ขนาดเล็ก 5 รูป ป้าย “+3” และลูกศรดรอปดาวน์ แถบด้านข้างซ้ายสำหรับพื้นที่ทำงาน “Acme Inc.” ที่มีรายการนำทาง 11 รายการพอดี: Home, Inbox พร้อมป้าย 8, Boards, Agents, Workflows, Data, Reports, Integrations, Settings, Help และ Collapse ชื่อหน้าหลักอ่านว่า Q2 Go-to-Market Launch พร้อมป้าย “Live” สีเขียว และคำบรรยายย่อย “Coordinating agents across research, strategy, content, design, and ops.” รวมปุ่ม Share และปุ่ม Add agent สีเขียวเข้ม
เนื้อหา Dashboard: ใต้ชื่อเรื่อง ให้แสดงแท็บ 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” เพิ่มส่วน Recent outputs ที่มีการ์ดเอกสาร 4 ใบพอดี: GTM Strategy Brief, Messaging Framework, Creative Concepts และ Performance Forecast แต่ละใบมีภาพตัวอย่างขนาดเล็กและเวลาอัปเดต เพิ่มตาราง Recent runs ที่มี 5 แถวพอดี: Q2 Go-to-Market Launch, Customer Onboarding Revamp, Pricing Strategy Analysis, Brand Refresh Campaign และ Enterprise Sales Playbook; รวมกลุ่มอวตาร agent ขนาดเล็ก ป้ายสถานะสี เวลาที่เริ่ม และระยะเวลา ที่ด้านล่างให้รวมแถบอินพุต Composer พร้อมข้อความตัวอย่าง “What would you like the agents to work on?”, ปุ่มสำหรับ Attach และ Add context, ดรอปดาวน์ “All agents” และปุ่มส่งสีเขียว
สไตล์ภาพ: ภาพจำลองผลิตภัณฑ์แบบมินิมอลระดับพรีเมียม สัดส่วน UI ที่สมจริง การเรนเดอร์ที่คมชัดเหมือนเวกเตอร์ ข้อความอินเทอร์เฟซขนาดเล็กที่อ่านได้ชัดเจน พื้นผิวพื้นหลังแบบจุดจางๆ การ์ดสีเบจซีด ตัวบ่งชี้สถานะสีเขียว เส้นเชื่อมต่อที่ละเอียด สุนทรียศาสตร์ SaaS แบบบรรณาธิการสมัยใหม่ที่เหมาะสำหรับทวีตสำรวจการออกแบบผลิตภัณฑ์
ข้อจำกัด: ใช้หน้าจอหลัก 2 หน้าพอดี, การ์ด agent 5 ใบในหน้า Landing hero พอดี, ช่องตัวเลข 4 รายการพอดี, ไอคอนการเชื่อมต่อ 7 รายการพอดี, คำบรรยายฟีเจอร์ด้านล่าง 4 รายการพอดี, รายการแถบด้านข้าง 11 รายการพอดี, แท็บ Dashboard 4 รายการพอดี, การ์ด agent ในเวิร์กโฟลว์บน Dashboard 6 ใบพอดีบวกกับการ์ด Analytics ที่สถานะ Queued เป็นจุดสิ้นสุดที่เจ็ด, รายการ KPI 5 รายการพอดี, การ์ดผลลัพธ์ 4 ใบพอดี และแถวตาราง 5 แถวพอดี ห้ามเพิ่มแผง ลายน้ำ โครมเบราว์เซอร์ หรือข้อความตกแต่งนอกเหนือจาก UI ที่อธิบายไว้