Whiteboard e Pencil — visão geral no editor
Duas superfícies visuais complementares: wireframes no Pencil e fluxos no Whiteboard. A IA lê o contexto e transforma em código.
Nem todo mundo começa pelo prompt. Whiteboard e Pencil trazem superfícies visuais dentro do projeto: você desenha fluxos, organiza telas ou importa contexto de outro app, e a IA lê esse contexto na geração. São ferramentas complementares — Pencil para wireframes de UI, Whiteboard para jornadas e diagramas.
Passo a passo
Tutorial interativo
Use Pencil para telas e componentes (wireframe UI). Use Whiteboard para jornadas, fluxos e diagramas de processo.
Demo — Escolha a superfície certaStep 1Step 2
Casos de uso reais
Casos de uso — clique no perfil
Validou fluxo no quadro antes de pedir código
Prompt exemplo
“Whiteboard onboarding → signup → dashboard → "implementa Steps 1-3"”
Resultado no Vibe
App nasce alinhado à jornada desenhada, não a um prompt genérico
Quando usar cada um
- Pencil: wireframes low-fi, telas de login, dashboards, formulários
- Whiteboard: fluxos de usuário, personas, jornadas, mapas de processo
- Importe contexto do App ou de outro Whiteboard antes de gerar
- Peça no chat "implemente o wireframe do Pencil" ou "siga o fluxo do Whiteboard"