Sketch & wireframes
Draw wireframes in Excalidraw and send them to the AI for implementation.
The Sketch view provides an Excalidraw canvas for wireframing screens before or during development.
Opening sketch mode
In the workbench, switch to the Sketch view. Your drawings autosave per project.
Workflow
- Sketch rough layouts — boxes for screens, labels for sections, arrows for navigation
- Export or send the sketch to chat
- The AI uses the design-from-sketch skill to interpret layout intent and build screens
Sketches communicate structure and hierarchy; they do not need to be polished designs.
Best practices
- Label each screen (Home, Profile, Settings)
- Mark primary actions (buttons, lists, tabs)
- Note navigation flow with arrows
- Keep wireframes simple — the AI fills in styling via theme and design references
Sketch vs. visual editor
| Tool | Purpose |
|---|---|
| Sketch | Plan layout before code exists |
| Visual editor | Refine styling on live UI |
| Design reference | Set global visual language |