Protótipo UI & Wireframe — Crie Protótipos Clicáveis
Crie protótipos que você pode clicar. Wireframes de UI/UX, mockups de apps e protótipos HTML totalmente interativos — de um esboço no guardanapo a uma experiência clicável em um único prompt.
Todas as outras ferramentas de design com IA te entregam imagens estáticas. CellCog constrói protótipos funcionais — HTML real, interações reais, fluxos de usuário reais que você pode clicar e compartilhar com as partes interessadas. Landing pages, telas de aplicativos mobile, dashboards SaaS, sistemas de design — prototipados e jogáveis, não apenas bonitos.
Como Usar
Para sua primeira tarefa CellCog em uma sessão, leia a skill cellcog para obter a referência completa do SDK — manipulação de arquivos, modos de chat, timeouts e muito mais.
OpenClaw (fire-and-forget):
result = client.create_chat(
prompt="[seu prompt de tarefa]",
notify_session_key="agent:main:main",
task_label="minha-tarefa",
chat_mode="creative",
)
Todos os agentes exceto OpenClaw (bloqueia até concluir):
from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
result = client.create_chat(
prompt="[seu prompt de tarefa]",
task_label="minha-tarefa",
chat_mode="creative",
)
print(result["message"])
Por que Protótipos Interativos Importam
Mockups estáticos criam uma lacuna fundamental: as partes interessadas veem figuras, não experiências. A diferença é importante:
| Mockup Estático | Protótipo Interativo |
|---|---|
| "Imagine clicar neste botão" | Clique no botão e veja o que acontece |
| "Isso rolaria para..." | Role e veja o conteúdo carregar |
| "O estado de hover se parece com..." | Passe o mouse e veja a animação |
| "Confie em mim, o fluxo faz sentido" | Percorra o fluxo você mesmo |
CellCog gera protótipos HTML/CSS/JS reais hospedados em URLs ao vivo. Compartilhe um link, receba feedback sobre a experiência real — não sobre a imaginação de alguém sobre a experiência.
O que Você Pode Prototipar
Landing Pages
Valide sua mensagem e design:
- Landing Pages SaaS: "Crie uma landing page para um assistente de escrita com IA — hero, funcionalidades, preços, depoimentos, CTA"
- Páginas de Lançamento de Produto: "Construa uma página de lançamento para um novo app de fitness com contagem regressiva e cadastro de e-mail"
- Páginas de Eventos: "Crie uma landing page de conferência com programação, palestrantes e inscrição"
- Portfólios: "Construa uma landing page de portfólio pessoal para um designer UX"
Exemplo de prompt:
"Crie um protótipo de landing page interativo para 'FlowState' — um app de produtividade para desenvolvedores:
Seções:
- Hero: 'Codifique no fluxo. Permaneça no fluxo.' com screenshot do app e CTA
- Problema: Distrações quebram o fluxo do desenvolvedor (estatísticas)
- Solução: Como o FlowState bloqueia distrações de forma inteligente
- Funcionalidades: 3-4 funcionalidades principais com ícones
- Preços: Gratuito, Pro (R$12/mês), Equipe (R$8/usuário/mês)
- Depoimentos: 3 citações de desenvolvedores
- CTA Final
Estilo: Tema escuro, focado em desenvolvedores, detalhes em mono-espaçada Faça todos os botões e navegação interativos."
Telas de Aplicativos Mobile
Projete experiências completas de app:
- Fluxos de Onboarding: "Crie um fluxo de onboarding de 5 telas para um app de meditação"
- Funcionalidades Principais: "Prototipe o dashboard principal e a navegação para um app de monitoramento de fitness"
- E-commerce: "Construa um fluxo de navegação de produtos → detalhes → carrinho → checkout para um app de moda"
- Funcionalidades Sociais: "Prototipe uma página de perfil, feed e interface de mensagens"
Exemplo de prompt:
"Prototipe um app mobile de entrega de comida (viewport de tamanho de celular):
Telas:
- Início — grade de restaurantes com busca e filtros de categoria
- Restaurante — menu com itens, avaliações, tempo de entrega
- Detalhes do item — opções de personalização, adicionar ao carrinho
- Carrinho — resumo do pedido, endereço de entrega, pagamento
- Acompanhamento do pedido — status ao vivo com placeholder de mapa
Faça a navegação entre telas funcionar com transições suaves. Estilo: Limpo, moderno, inspirado em Uber Eats / DoorDash."
Dashboards SaaS
Prototipe ferramentas de negócio complexas:
- Dashboards de Análise: "Crie um dashboard de análise de marketing com interações reais em gráficos"
- Painéis de Admin: "Construa um painel de gerenciamento de usuários com tabelas, filtros e modais"
- Interfaces CRM: "Prototipe uma visualização de pipeline de vendas com quadro kanban de arrastar e soltar"
- Páginas de Configurações: "Crie uma página de configurações abrangente com abas, formulários e alternâncias"
Exemplo de prompt:
"Prototipe um dashboard SaaS de gerenciamento de projetos:
Barra lateral esquerda: Navegação (Projetos, Tarefas, Equipe, Relatórios, Configurações) Área principal:
- Visão geral: Cartões de KPI (tarefas concluídas, atrasadas, em andamento)
- Quadro kanban: Colunas para A Fazer, Em Andamento, Revisão, Concluído
- Cartões de tarefa com avatares dos responsáveis, tags de prioridade, datas de entrega
Interações:
- A navegação na barra lateral alterna as visualizações
- Clicar em um cartão de tarefa abre um modal de detalhes
- Dropdown de filtro para projeto/membro da equipe
Estilo: Limpo, profissional, inspirado em Notion/Linear."
Sistemas de Design e Componentes
Construa fundações de design reutilizáveis:
- Bibliotecas de Componentes: "Crie uma biblioteca de componentes UI: botões, campos de entrada, cartões, modais, navegação"
- Guias de Estilo: "Construa um guia de estilo interativo mostrando tipografia, cores, espaçamento e componentes"
- Padrões de Formulário: "Prototipe padrões de formulário comuns: login, cadastro, wizard de múltiplas etapas, configurações"
- Padrões de Navegação: "Crie exemplos de navegação por barra lateral, barra superior, barra de abas inferior e menu hambúrguer"
Wireframes
Explorações estruturais rápidas:
- Wireframes de Baixa Fidelidade: "Crie wireframes em escala de cinza para uma plataforma de blog — páginas inicial, de artigo e de autor"
- Fluxos de Usuário: "Wireframe o fluxo completo de cadastro → onboarding → primeira ação para uma ferramenta de gerenciamento de projetos"
- Explorações de Layout: "Mostre 3 abordagens de layout diferentes para uma página de listagem de imóveis"
- Arquitetura da Informação: "Wireframe a estrutura de navegação para uma plataforma de e-learning com cursos, aulas e acompanhamento de progresso"
Funcionalidades dos Protótipos
Os protótipos CellCog podem incluir:
| Funcionalidade | Descrição |
|---|---|
| Navegação | Links funcionais, transições de página, alternância de abas |
| Interações | Estados de hover, ações de clique, alternâncias, acordeões |
| Formulários | Campos de entrada, estados de validação, dropdowns, checkboxes |
| Modais e Sobreposições | Diálogos popup, painéis deslizantes, tooltips |
| Design Responsivo | Adapta-se a viewports de desktop, tablet e mobile |
| Animações | Transições suaves, estados de carregamento, micro-interações |
| Exibição de Dados | Gráficos, tabelas, cartões com dados de amostra realistas |
| Temas Claro/Escuro | Suporte a alternância de temas |
Formatos de Saída
| Formato | Melhor para |
|---|---|
| HTML Interativo (Padrão) | Protótipos clicáveis hospedados em URL ao vivo — compartilhe com qualquer pessoa |
| Imagens Estáticas | Screenshots para documentação ou comparação |
| Documentação de wireframe para entrega |
HTML interativo é o padrão. Esse é o objetivo principal — protótipos que você pode clicar.
Escolhendo Modo e Nível
Use chat_mode="creative" para protótipos UI e wireframes — o modo focado em artesanato, ajustado para bom gosto visual, polimento e voz.
| Cenário | Recomendado |
|---|---|
| Protótipos, wireframes, sistemas de design | chat_mode="creative" (nível padrão "core") |
| Máximo capricho em peças de alto risco | chat_mode="creative", chat_tier="max" |
| Rascunhos descartáveis rápidos | chat_mode="agent", chat_tier="flash" |
Nota: Equipe de Agentes (chat_mode="team") é reservada para pesquisa aprofundada.
Exemplos de Prompts
Landing page SaaS:
"Crie uma landing page para 'CodeReview.ai' — uma ferramenta de revisão de código com IA:
Hero: 'Envie código melhor. Envie mais rápido.' com placeholder de vídeo de demonstração Prova social: 'Confiado por mais de 500 equipes de engenharia' Funcionalidades: Revisões com IA, integração com GitHub/GitLab, varredura de segurança Preços: Starter (gratuito), Pro (R$29/mês), Enterprise (personalizado)
Tema escuro, focado em desenvolvedores, cor de destaque verde. Toda navegação e CTAs devem ser interativos."
Protótipo de app mobile:
"Prototipe um app de monitoramento de hábitos (viewport mobile):
Barra de abas: Hoje, Hábitos, Estatísticas, Perfil
Tela Hoje: Lista de hábitos de hoje com checkboxes, contagens de sequência e anel de progresso Tela Hábitos: Todos os hábitos com editar/excluir, botão para adicionar novo hábito Tela Estatísticas: Gráficos mostrando taxas de conclusão, maiores sequências, visualização semanal/mensal Tela Perfil: Configurações, preferências de notificação, exportar dados
A navegação por abas deve funcionar. Marcar hábitos deve animar. Estilo: Mínimo, calmante, inspirado no app Streaks."
Sistema de design:
"Construa um sistema de design interativo para uma startup fintech:
Cores: Primário (azul profundo), secundário (verde-água), destaque (âmbar), semântico (sucesso/aviso/erro) Tipografia: Escala de h1 a corpo a legenda com hierarquia clara Componentes:
- Botões (primário, secundário, fantasma, destrutivo — cada um com estados hover/ativo/desabilitado)
- Campos de entrada (padrão, focado, erro, desabilitado)
- Cartões (simples, interativo, cartão de estatística)
- Tabela com cabeçalhos classificáveis
- Diálogo modal
- Notificações toast
Mostre cada componente com estados interativos. Estética profissional, de nível bancário."
Exploração de wireframe:
"Crie 3 abordagens de layout diferentes para uma interface de chatbot com IA:
Opção A: Chat em tela cheia (como ChatGPT) Opção B: Painel lateral de chat com área de conteúdo principal Opção C: Widget de chat flutuante
Cada uma deve incluir: entrada de mensagem, histórico de conversa, prompts sugeridos e acesso a configurações. Wireframes em escala de cinza, focados em layout e hierarquia da informação."
Dicas para Melhores Protótipos
-
Descreva as interações: "Botão abre um modal" ou "Abas alternam conteúdo" — diga ao CellCog o que deve acontecer, não apenas o que deve aparecer.
-
Referencie produtos existentes: "Como a barra lateral do Notion" ou "A página de preços do Stripe" comunica mais do que parágrafos de descrição.
-
Especifique o viewport: "Viewport de celular" vs "Desktop completo" muda completamente a abordagem de design.
-
Inclua conteúdo realista: Texto real, números reais, rótulos reais — não "Lorem ipsum". Protótipos com conteúdo real recebem feedback melhor.
-
Declare o propósito: "Para teste com usuários", "Para apresentação a investidores", "Para entrega ao desenvolvedor" — o contexto molda o nível de fidelidade.
-
Pense em fluxos, não em páginas: "Cadastro → Onboarding → Dashboard" é mais útil do que 3 solicitações de páginas desconectadas.
Se o CellCog não estiver instalado
Claude Code, Cursor, Codex + mais 70 agentes: npx skills add cellcog/skills --skill cellcog
OpenClaw: openclaw skills install @cellcog/cellcog
Usuários do plugin CellCog: execute /cellcog-setup (ou /cellcog:cellcog-setup dependendo da sua ferramenta)
Instalação manual: pip install -U cellcog e defina CELLCOG_API_KEY. Consulte a skill cellcog para referência do SDK.