Gera um mockup refinado lado a lado de uma landing page e dashboard SaaS para um espaço de trabalho de agentes de IA, útil para exploração de design de produto.
Objetivo: Criar uma imagem editorial polida de exploração de produto SaaS para uma plataforma de colaboração de agentes de IA chamada AgentBoard, exibindo duas grandes telas de interface web lado a lado em um fundo quente off-white: uma landing page de marketing à esquerda e o dashboard do produto à direita. Use um design de startup refinado, sombras suaves, cartões arredondados, divisórias cinzas finas, muito espaço em branco, detalhes em verde-floresta suave, tipografia serifada preta para o título da landing page e texto de interface sem serifa pequeno e limpo.
Canvas: Composição ampla 4:3, aproximadamente 1200×900. Coloque dois painéis altos semelhantes a navegadores com cantos arredondados e sombras sutis, separados por um espaçamento estreito. O fundo é creme claro com granulação suave e vinheta muito leve.
Tela esquerda, landing page de marketing: Barra de navegação superior com o logotipo “AgentBoard” no canto superior esquerdo, 4 links de navegação centralizados rotulados como Product, Solutions, Resources, Pricing, seguidos por Log in e um botão verde-escuro “Start for free” à direita. A área de hero possui um pequeno rótulo tipo pílula “AI-NATIVE WORKSPACE”, um título grande de três linhas lendo “One board. Many agents. Real outcomes.” com “Real outcomes.” em itálico e verde, linha de apoio “Plan, build, and ship work—together.”, e 2 botões de CTA: “Start for free” em verde-escuro e “Book a demo” com contorno claro. À direita do texto de hero, mostre um quadro de fluxo de trabalho isométrico com exatamente 5 cartões de agente conectados: Research Agent, Strategy Agent, Content Agent, Design Agent e Data Agent, ligados por linhas conectoras curvas com pequenos chips de status como Done e In progress. Abaixo, inclua exatamente 4 blocos de métricas: “2.4M+ Tasks automated”, “180K+ Agents this month”, “98.6% On-time” e “4.9★ User rating”. Sob as métricas, inclua uma linha rotulada “Connects with the tools you use” com exatamente 7 ícones/botões de integração: Slack, Notion, GitHub, Figma, Google Drive, HubSpot e “+ More”. Adicione um bloco de depoimento com uma foto circular de uma mulher e a citação “AgentBoard gives us complete visibility and keeps our team aligned.” creditada a Sarah Chen, Head of Product, Northline. Na parte inferior, inclua exatamente 4 descrições de recursos com pequenos ícones de linha: Visual workspace, Multi-agent collaboration, Real-time progress e Secure & governed.
Tela direita, dashboard do produto: Crie uma interface de aplicativo web densa, porém elegante. A barra superior do app mostra “AgentBoard” à esquerda, abas principais Workspace, Agents, Integrations, Data, Reports, além de um botão Invite, uma linha com 5 avatares de usuário pequenos, um badge “+3” e uma seta de menu suspenso. Barra lateral esquerda para o workspace “Acme Inc.” com exatamente 11 itens de navegação: Home, Inbox com um badge 8, Boards, Agents, Workflows, Data, Reports, Integrations, Settings, Help e Collapse. O título da página principal lê Q2 Go-to-Market Launch com uma pílula verde “Live” e subtítulo “Coordinating agents across research, strategy, content, design, and ops.” Inclua botões Share e Add agent em verde-escuro.
Conteúdo do dashboard: Abaixo do título, mostre exatamente 4 abas: Board, Progress, Outputs, Activity, com Board ativa. O canvas principal do quadro contém exatamente 6 cartões de fluxo de trabalho conectados dispostos da esquerda para a direita com linhas conectoras curvas: 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. Inclua pequenos controles de quadro no canto superior direito: ícone de busca, ícone de layout, ícone de ajuste, zoom “100%” e menu suspenso.
Sob o quadro, adicione uma faixa de KPI com exatamente 5 itens: Live progress 72% com barra de progresso verde, 9 Active agents, 24 Tasks running, 156 Tasks completed e 92% On-time, além de um botão “View all runs”. Adicione uma seção Recent outputs com exatamente 4 cartões de documento: GTM Strategy Brief, Messaging Framework, Creative Concepts e Performance Forecast, cada um com uma pequena miniatura de visualização e tempo de atualização. Adicione uma tabela Recent runs com exatamente 5 linhas: Q2 Go-to-Market Launch, Customer Onboarding Revamp, Pricing Strategy Analysis, Brand Refresh Campaign e Enterprise Sales Playbook; inclua pequenos clusters de avatares de agentes, pílulas de status coloridas, horários de início e durações. Na parte inferior, inclua uma barra de entrada Composer com o placeholder “What would you like the agents to work on?”, botões para Attach e Add context, um menu suspenso “All agents” e um botão de envio verde.
Estilo visual: Mockup de produto minimalista premium, proporções de interface realistas, renderização nítida tipo vetor, texto de interface pequeno e legível onde possível, textura de fundo pontilhada sutil, cartões bege claro, indicadores de status verdes, linhas conectoras finas, estética SaaS editorial moderna adequada para um tweet de exploração de design de produto.
Restrições: Use exatamente 2 telas principais, exatamente 5 cartões de agente no hero da landing page, exatamente 4 blocos de métricas, exatamente 7 ícones de integração, exatamente 4 descrições de recursos na parte inferior, exatamente 11 itens na barra lateral, exatamente 4 abas de dashboard, exatamente 6 cartões de agente de fluxo de trabalho no quadro do dashboard mais o cartão Analytics em fila como o sétimo ponto final, exatamente 5 itens de KPI, exatamente 4 cartões de saída e exatamente 5 linhas de tabela. Não adicione painéis extras, marcas d'água, elementos de navegador ou texto decorativo além da interface descrita.