Pencil — wireframes no editor | Blog Vibe

Passo a passo

Tutorial interativo

Pela aba ou toolbar do editor. Superfície de wireframe low-fi dentro do projeto.
Demo — Abra o Pencil

Como usar

Abra Pencil pela aba ou toolbar do editor

Monte wireframes: header, hero, cards, formulários

Importe contexto do App ou de outro Whiteboard se já existir fluxo

Preencha o briefing de fidelidade antes da primeira geração

No chat: "implemente a tela de login do Pencil em shadcn"

Pencil é a superfície de wireframe dentro do Vibe. Arraste blocos, defina hierarquia de telas e fidelidade — depois peça ao agente para transformar o layout em componentes React com Tailwind.

Demo — Pencil (wireframes no editor)

Carregando demo…

Passo a passo

Tutorial interativo

Pela aba ou toolbar do editor. Superfície de wireframe low-fi dentro do projeto.
Demo — Abra o Pencil

Casos de uso reais

Casos de uso — clique no perfil

Wireframe aprovado em reunião de 30 min

Prompt exemplo

“Pencil 3 telas → "implementa fluxo completo"”

Resultado no Vibe

Código fiel ao wireframe na mesma tarde

Como usar

Abra Pencil pela aba ou toolbar do editor
Monte wireframes: header, hero, cards, formulários
Importe contexto do App ou de outro Whiteboard se já existir fluxo
Preencha o briefing de fidelidade antes da primeira geração
No chat: "implemente a tela de login do Pencil em shadcn"

Visão geral Whiteboard + Pencil