Excalidraw — sketch, then export
[model draft]An un-gated canvas with a four-item onboarding overlay gives way to a clean workspace, and exporting opens a split modal where a live preview of the actual drawing updates as background and dark-mode switches are toggled.
Step 1 of 3
Excalidraw — empty canvas- component pattern · model draftThe empty canvas is annotated with handwritten hints and hand-drawn arrows pointing at real controls: "Export, preferences, languages, ..." at the menu, "Pick a tool & Start drawing!" at the toolbar, "Shortcuts & help" at the help button. Steal onboarding drawn in the product's own medium and aimed at the actual controls.
- component pattern · model draftThe top-center toolbar holds twelve tools, ten with a single-letter shortcut set small at the icon's lower right (V, R, D, O, A, L, P, T, N, E), and a grey line below explains panning with keycaps for "Scroll wheel" and "Space". Steal the shortcut letter printed on each toolbar button, which teaches the keyboard while the mouse is in use.
- copywriting · model draftThe center block puts the logo over a three-line warning ("Your drawings are saved in your browser's storage. Browser storage can be cleared unexpectedly. Save your work to a file regularly to avoid losing it.") and then a short menu: Open (Ctrl+O), Help (?), Live collaboration..., Sign up. Steal an empty state that says where the data is stored before the first stroke, followed by the few actions with their shortcuts.
Step 2 of 3
Excalidraw — a first sketch- component pattern · model draftSelecting a tool opens its properties as a narrow left column (stroke, fill, width, roundness). The panel exists only while a tool is in hand, so the empty canvas stays empty.
- texture/material · model draftShapes are drawn with a deliberate hand wobble. The roughness says 'draft', which makes people willing to put half an idea down.
Step 3 of 3
Excalidraw — export image dialog- component pattern · model draftExport is one modal: a checkerboard preview of the exact output on the left, three toggles on the right (background, dark mode, embed scene), then three destinations (PNG, SVG, clipboard) as equal buttons.
- grid/layout · model draftThe canvas dims behind the dialog but stays visible, so the export plainly reads as a copy of what was drawn, not a new place to work.
- motion/interaction · model draftEach toggle repaints the preview immediately (the checkerboard shows transparency once background is off), so no option needs explaining.
Agents get the same order from get_reference: any screen's reply names the flow and every step in it.