Agent skill · design visual · guanyang
excalidraw-visual-designer
Create and revise editable visual drawings directly in the Excalidraw website through the in-app browser. Use when the user asks Codex to draw in Excalidraw or update an Excalidraw canvas, including diagrams, flowcharts, architecture sketches, process maps, infographics, teaching visuals, product explanation graphics, whiteboard layouts, promotional materials, posters, flyers, menu boards, and social media graphics, especially when the output should remain editable as Excalidraw elements or imported clipboard JSON.
Why this skill is useful
Provides specific guidelines and rules for creating editable visuals in Excalidraw that the AI wouldn't generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-16. 28 stars on the source repository.
What this skill does
Excalidraw Visual Designer Core Workflow Use the in-app browser and the existing Excalidraw tab when present. 1. Read and follow the browser:control-in-app-browser skill before controlling the browser. 2. Claim the existing https://excalidraw.com/ tab instead of opening a duplicate. 3. Keep the browser visible when the user is reviewing the drawing. 4. Prefer Excalidraw clipboard JSON import over manual dragging for complex layouts. 5. After each substantial visual change, take a screenshot and inspect it for legibility, overlap, and visual quality. 6. Finalize with the Excalidraw tab kept as deliverable. Output Types Choose the structure by intent: Diagrams and flowcharts: use editable Excalidraw rectangles, diamonds, arrows, swimlanes, labels, and grouping. Architecture or system maps: use consistent containers, call paths, data stores, boundaries, and directional arrows. Infographics and teaching visuals: combine editable text/cards with simple charts, numbered sections, icons, and callouts. Product or object explanation graphics: use clean SVG image elements for polished product/object illustrations, then layer editable labels and arrows. Whiteboard sketches: keep a looser Excalidraw style, but still preserve alignment, spacing, and clear reading order. Promotional materials and posters: use structured panels, headline, offer, main visual, information blocks, and CTA. Use editable Excalidraw text and shape elements for copy, labels, arrows, process structure, prices, CTA, and layout blocks. Use embedded SVG image elements only when a detailed illustration would look crude if built from primitive Excalidraw shapes. Visual Construction Rules Use a constrained canvas area or frame-like boundary for presentation graphics. Establish a clear reading path before placing decorative details. Keep text editable wherever future changes are likely. Prefer simple, recognizable symbols over overdrawn illustration. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills guanyang/excalidraw-visual-designer