excalidraw-visuals

Files (4)

• SKILL.md
• excalidraw-style-reference.png
• generate-visual.cjs · scripts/
• style-guide.md

SKILL.md (first lines)

Read the full visual specification before building any prompt:
- [style-guide.md](style-guide.md) -- color system, font spec, shape rules, icon vocabulary, layout templates, text minimization rules

---

## Style Prefixes (LOCKED)

Two variants exist: **Light** (default) and **Dark**. Use Dark when the user asks for "dark mode", "dark background", or "dark theme". Never modify these per-request.

### Light Mode (default)

```
Excalidraw-style sketch on a completely plain white background -- pure #ffffff, no texture, no paper grain, no off-white, no noise. The background must be perfectly clean and flat white.

Text and linework are the hand-drawn elements: all text is messy but legible hand-scrawled handwriting with uneven letter sizes and slight tilts -- like someone wrote it fast with a thick felt-tip marker. Lines and shape outlines are VERY wobbly and imperfect -- visibly shaky, not smooth at all. Corners of rectangles don't quite meet. This should look like a real person drew the outlines and wrote the text by hand, NOT like a computer generated it.

Shape fills are SOLID and FLAT -- exactly like Excalidraw's default fill. Clean, even, uniform pastel color inside each shape. No hatching, no cross-hatching, no pencil shading, no marker texture, no highlighter streaks, no uneven coverage. Just a flat solid color fill, the way Excalidraw renders it. Each shape's border color is a darker version of its fill -- soft blue fill (#a5d8ff) with medium blue border (#1971c2), warm yellow fill (#ffec99) with amber border (#f59f00), soft green fill (#b2f2bb) with medium green border (#2f9e44), coral fill (#ffa8a8) with red-orange border (#e03131), light purple fill (#d0bfff) with medium purple border (#7048e8). Borders are 2-3px thick with wobbly hand-drawn outlines. Do NOT use dark gray borders -- every shape's border matches its fill color family.

Arrows are hand-drawn with visible wobble and curve, like someone drew them freehand. Arrowheads are rough triangles, slightly lopsided. Arrows match the color of shapes they connect, or dark gray (#495057) for neutral flows.

Color palette: soft blue (#a5d8ff), warm yellow (#ffec99), soft green (#b2f2bb), coral (#ffa8a8), light purple (#d0bfff). All text is dark charcoal (#343a40). Background is always pure flat white (#ffffff).

People are very simple stick figures -- just a circle head and stick body, drawn with wobbly lines. AI robots have a wobbly round head with two uneven dot eyes and a crooked little antenna. Documents have a folded corner. Gears represent automation. All icons are simple wobbly 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 like authentic Excalidraw -- messy hand-drawn text and wobbly outlines, but with clean solid flat color fills inside shapes. Like a whiteboard sketch, not a polished diagram.

Do NOT include: realistic photos, gradients, drop shadows, 3D effects, corporate clip art, stock imagery, dark backgrounds, dark gray borders on colored shapes, textured backgrounds, hatching, cross-hatching, pencil shading, marker texture on fills.
```

### Dark Mode

Use this prefix when the user requests dark mode, dark background, or dark theme.

```
CRITICAL: The background color MUST be EXACTLY #121212 -- not black (#000000), not near-black, not dark gray, not #1a1a1a, not #0d0d0d. The EXACT hex value #121212. This is non-negotiable.

Excalidraw-style sketch on a completely plain dark background -- EXACTLY #121212, no texture, no paper grain, no noise. The background must be perfectly clean, flat, and uniform #121212 everywhere. Not darker, not lighter -- exactly #121212 like Excalidraw's dark mode.

Text and linework are the hand-drawn elements: all text is messy but legible hand-scrawled handwriting in white (#f8f9fa) with uneven letter sizes and slight tilts -- like someone wrote it fast with a thick white felt-tip marker on a dark surface. Lines and shape outlines are VERY wobbly and imperfect -- visibly shaky, not smooth at all. Corners of rectangles don't quite meet. This should look like a real person drew the outlines and wrote the text by hand, NOT like a computer generated it.

Shape fills are SOLID and FLAT -- exactly like Excalidraw's default fill in dark mode. Clean, even, uniform muted color inside each shape. No hatching, no cross-hatching, no pencil shading, no marker texture, no highlighter streaks, no uneven coverage. Just a flat solid color fill, the way Excalidraw renders it. Each shape's border color is a lighter version of its fill -- muted blue fill (#1e3a5f) with light blue border (#74b9ff), muted amber fill (#5c4813) with warm yellow border (#ffec99), muted green fill (#1e4d2b) with light green border (#8ce99a), muted red fill (#5c1a1a) with coral border (#ff8787), muted purple fill (#3b2d6b) with light purple border (#b197fc). Borders are 2-3px thick with wobbly hand-drawn outlines.

Arrows are hand-drawn with visible wobble and curve, like someone drew them freehand. Arrowheads are rough triangles, slightly lopsided. Arrows are light gray (#dee2e6) or match the border color of shapes they connect.

Color palette (dark mode fills): muted blue (#1e3a5f), muted amber (#5c4813), muted green (#1e4d2b), muted red (#5c1a1a), muted purple (#3b2d6b). Color palette (dark mode borders/labels): light blue (#74b9ff), warm yellow (#ffec99), light green (#8ce99a), coral (#ff8787), light purple (#b197fc). All text is white (#f8f9fa). Background is ALWAYS exactly #121212 -- this exact hex value, no variation.

People are very simple stick figures -- just a circle head and stick body, drawn with wobbly white lines. AI robots have a wobbly round head with two uneven dot eyes and a crooked little antenna, drawn in white. Documents have a folded corner. Gears represent automation. All icons are simple wobbly white line drawings, not detailed or cartoonish.

Layout is clean and spacious with generous dark space. Visual hierarchy is clear -- title is largest, labels are short (max 3 words each). The overall feel is like authentic Excalidraw in dark mode -- messy hand-drawn white text and wobbly outlines, but with clean solid flat muted color fills inside shapes. Like a dark whiteboard sketch.

Do NOT include: realistic photos, gradients, drop shadows, 3D effects, corporate clip art, stock imagery, white or light backgrounds, textured backgrounds, hatching, cross-hatching, pencil shading, marker texture on fills. REMINDER: background must be EXACTLY #121212.
```

---

## Step 1: Gather Input

If `$ARGUMENTS` was provided, use it as the concept to visualize.

Otherwise, get from the user:
- What concept or process to visualize
- Any specific elements, steps, or labels to include
- Aspect ratio preference (default: 16:9 for YouTube)

If the request is vague, ask one clarifying question about what specific angle or flow to show.

## Step 2: Choose a Layout Template

Pick the best layout from the style guide:

| Template | Best For |
|----------|----------|
| Left-to-Right Flow | Processes, sequences, transformations |
| Mission Control 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 |

## Step 3: Plan the Text (Minimize It)

Plan every piece of text that will appear in the image before writing the prompt:

1. **Title:** Max 5 words. Prefer 3.
2. **Box labels:** Max 3 words each. Prefer 1-2.
3. **Annotations:** Max 4 words each.
4. **Total word count:** Target under 30 words. Absolute max 50.

**Spelling protection:**
- Flag any word over 8 characters and shorten it
- Use icons instead of words where possible
- Use abbreviations (API, AI, DB, CLI)
- Remove articles and prepositions

## Step 4: Build the Prompt

Construct the prompt in this exact structure:

```
[STYLE PREFIX]

STYLE REFERENCE: Match the hand-drawn Excalidraw aesthetic of the reference image but make it EVEN MORE rough and sketchy. More wobble on outlines and text, more imperfection. But keep shape fills SOLID and FLAT like Excalidraw -- no hatching, no shading, no texture on fills.

Diagram concept: [TITLE -- max 5 words]

Layout: [TEMPLATE NAME] -- [brief spatial description]

Elements (left to right / top to bottom):
1. [Element name] -- [color] (#hex) rough rounded rectangle with solid flat [color] fill and [border color] (#hex) wobbly border. Inside: [icon description], label: "[EXACT TEXT]"
2. ...

Connections:
- Arrow from [1] to [2], label: "[TEXT or none]"
...

Title at top center, bold and large scrawled text: "[EXACT TITLE TEXT]"
```

**Critical rules for element descriptions:**

From MichaelZelbel/godspeed-mission-control, MIT.

More from MichaelZelbel/godspeed-mission-control