Use when someone asks for a hand-drawn visual, PNG image, rendered diagram, visual explanation, or says "excalidraw image" or "excalidraw visual". This generates PNG images, not editable files.
Before using this skill, make sure you have:
.env as KIE_AI_API_KEYscripts/excalidraw-visuals/generate-visual.jsbrand-assets/excalidraw-style-reference.pngRead the full visual specification before building any prompt:
style-guide.md (in this skill's folder) -- color system, font spec, shape rules, icon vocabulary, layout templates, text minimization rulesThis exact text is prepended to EVERY prompt. Never modify it per-request.
Excalidraw-style hand-drawn diagram on a clean white background. All text uses neat, consistent architect-style handwriting -- legible, slightly rounded letters with medium stroke weight. Letter sizes are uniform within each label. Titles are bold and larger. Body labels are smaller but equally neat. This is NOT sloppy handwriting -- it looks like a designer wrote it carefully with a thick marker.
Shapes are rounded rectangles with a 2-3px dark gray (#495057) hand-drawn outline and soft pastel fills. Lines and arrows are slightly wobbly and hand-drawn, not ruler-straight. Arrowheads are simple triangles. Nothing is pixel-perfect -- everything has a natural, sketched feel with visible stroke texture.
Color palette: soft blue (#a5d8ff), warm yellow (#ffec99), soft green (#b2f2bb), coral (#ffa8a8), light purple (#d0bfff). All text is dark charcoal (#343a40). All lines and arrows are dark gray (#495057). Background is always clean white.
People are simple stick figures with round heads, no facial features. AI agents/robots have a round head with two dot eyes and a small antenna. Documents have a folded corner. Gears represent automation. All icons are simple line drawings, not detailed or cartoonish.
Layout is clean and spacious with generous whitespace. Visual hierarchy is clear -- title is largest, labels are short (max 3 words each). The overall feel is educational, friendly, and slightly more polished than basic Excalidraw -- colored fills, intentional spacing, consistent sizing, and meaningful color coding elevate it.
Do NOT include: realistic photos, gradients, drop shadows, 3D effects, corporate clip art, stock imagery, dark backgrounds, heavy borders.
Get from the user:
If the request is vague, ask one clarifying question about what specific angle or flow to show.
Pick the best layout from the style guide:
| Template | Best For |
|---|---|
| Left-to-Right Flow | Processes, sequences, transformations |
| Hub and Spoke | Capabilities, features around a central concept |
| Top-to-Bottom Hierarchy | Levels, layers, progressive depth |
| Side-by-Side Comparison | Before/after, old vs new, option A vs B |
| Numbered Steps List | Frameworks, checklists, ordered instructions |
| Cycle / Loop | Feedback loops, iterative processes |
Plan every piece of text that will appear in the image before writing the prompt:
Spelling protection:
Construct the prompt in this exact structure:
[STYLE PREFIX]
STYLE REFERENCE: Match the visual style of the reference image exactly -- same font, same shapes, same colors, same level of polish.
Diagram concept: [TITLE -- max 5 words]
Layout: [TEMPLATE NAME] -- [brief spatial description]
Elements (left to right / top to bottom):
1. [Element name] -- [color] fill, [icon if any], label: "[EXACT TEXT]"
2. [Element name] -- [color] fill, [icon if any], label: "[EXACT TEXT]"
3. ...
Connections:
- Arrow from [1] to [2], label: "[TEXT or none]"
- Arrow from [2] to [3]
...
Title at top center, bold and large: "[EXACT TITLE TEXT]"
Rules:
Never leave color choice to the model. Always specify.
Always include the style reference image. This is mandatory for visual consistency.
node scripts/excalidraw-visuals/generate-visual.js "<FULL_PROMPT>" "projects/excalidraw-visuals/[YYYY-MM-DD]-[slug].png" "[ASPECT_RATIO]" --input "brand-assets/excalidraw-style-reference.png"
You can pass additional reference images (logos, screenshots, etc.) via extra --input arguments:
node scripts/excalidraw-visuals/generate-visual.js "<FULL_PROMPT>" "projects/excalidraw-visuals/[YYYY-MM-DD]-[slug].png" "[ASPECT_RATIO]" --input "brand-assets/excalidraw-style-reference.png" "path/to/another-image.png"
Aspect ratios: 16:9 (default), 1:1, 4:5
If brand-assets/excalidraw-style-reference.png does not exist, generate without it and tell the user to add a style reference image for consistent results.
If adjustments needed: modify only the diagram-specific portion. Never change the style prefix.
| What | Path |
|---|---|
| Style guide | .claude/skills/excalidraw-visuals/style-guide.md |
| Script | scripts/excalidraw-visuals/generate-visual.js |
| Style reference | brand-assets/excalidraw-style-reference.png |
| Output | projects/excalidraw-visuals/ |
| API key | .env (KIE_AI_API_KEY) |
.env for KIE_AI_API_KEY