playbooks

home / skills / robdtaylor / personal-ai-infrastructure / art

Art skill

/skills/Art

This skill generates Excalidraw-style visual diagrams and illustrations to clarify architectures, blogs, or comics with a hand-drawn, dark-mode aesthetic.

npx playbooks add skill robdtaylor/personal-ai-infrastructure --skill art

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
2.5 KB
---
name: Art
description: Visual content generation with Excalidraw hand-drawn aesthetic. USE WHEN user wants diagrams, visualizations, comics, or editorial illustrations.
---

# Art Skill

Visual content generation system using **Excalidraw hand-drawn** aesthetic with dark-mode, tech-forward color palette.

## Output Location

```
ALL GENERATED IMAGES GO TO ~/Downloads/ FIRST
Preview in Finder/Preview before final placement
Only copy to project directories after review
```

## Workflow Routing

Route to the appropriate workflow based on the request:

  - Technical or architecture diagram -> `Workflows/TechnicalDiagrams.md`
  - Blog header or editorial illustration -> `Workflows/Essay.md`
  - Comic or sequential panels -> `Workflows/Comics.md`

---

## Core Aesthetic

**Excalidraw Hand-Drawn** - Clean, approachable technical illustrations with:
- Slightly wobbly hand-drawn lines (NOT perfect vectors)
- Simple shapes with organic imperfections
- Consistent hand-lettered typography style
- Dark mode backgrounds with bright accents

**Full aesthetic documentation:** `$PAI_DIR/skills/Art/Aesthetic.md`

---

## Color System

| Color | Hex | Usage |
|-------|-----|-------|
| Background | `#0a0a0f` | Primary dark background |
| PAI Blue | `#4a90d9` | Key elements, primary accents |
| Electric Cyan | `#22d3ee` | Flows, connections, secondary |
| Accent Purple | `#8b5cf6` | Highlights, callouts (10-15%) |
| Text White | `#e5e7eb` | Primary text, labels |
| Surface | `#1a1a2e` | Cards, panels |
| Line Work | `#94a3b8` | Hand-drawn borders |

---

## Image Generation

**Default model:** nano-banana-pro (Gemini 3 Pro)

```bash
bun run $PAI_DIR/skills/Art/Tools/Generate.ts \
  --model nano-banana-pro \
  --prompt "[PROMPT]" \
  --size 2K \
  --aspect-ratio 16:9 \
  --output ~/Downloads/output.png
```

**API keys in:** `$PAI_DIR/.env` (single source of truth for all authentication)

---

## Examples

**Example 1: Technical diagram**
```
User: "create a diagram showing the auth flow"
-> Invokes TECHNICALDIAGRAMS workflow
-> Creates Excalidraw-style architecture visual
-> Outputs PNG with dark background, blue accents
```

**Example 2: Blog header**
```
User: "create a header for my post about AI agents"
-> Invokes ESSAY workflow
-> Generates hand-drawn illustration
-> Saves to ~/Downloads/ for preview
```

**Example 3: Comic strip**
```
User: "create a comic showing the before/after of using AI"
-> Invokes COMICS workflow
-> Creates 3-4 panel sequential narrative
-> Editorial style, not cartoonish
```

Overview

This skill generates visual content in an Excalidraw hand-drawn aesthetic optimized for dark-mode, tech-forward projects. It produces diagrams, editorial illustrations, and comics with a consistent palette and organic line work. Outputs are saved to ~/Downloads for preview before final placement.

How this skill works

Requests are routed to a targeted workflow (TechnicalDiagrams, Essay, or Comics) based on the user’s intent. The generator uses a defined dark-theme color system and hand-lettered typography rules, and by default runs a configured model to render 2K, 16:9 images. All images land in ~/Downloads so you can review them in Finder/Preview before copying them into project folders.

When to use it

  • Technical or architecture diagrams that need an approachable, hand-drawn look
  • Blog headers and editorial illustrations with a modern dark aesthetic
  • Sequential panels or short comics for product storytelling
  • Quick explainer visuals for docs, PRs, or presentations
  • Visualizations that should feel informal yet polished

Best practices

  • State the intent clearly (diagram, header, comic) to route to the correct workflow
  • Include key elements and labels you need — the system preserves hand-lettered labels
  • Preview and approve images from ~/Downloads before adding to repos or assets
  • Use the palette sparingly: primary accents, secondary flows, and minimal highlight color
  • For technical diagrams, provide step order or flow directions to ensure correct connections

Example use cases

  • Auth flow diagram for README or design discussion (TechnicalDiagrams workflow)
  • Blog header for a post about AI agents with dark, tech-forward vibes (Essay workflow)
  • Three-panel comic showing before/after of adopting an AI assistant (Comics workflow)
  • Explainer card visuals for onboarding slides or product pages
  • Architecture overview for a design review with labeled components and flows

FAQ

Where do generated images appear?

All generated images are saved to ~/Downloads first. Preview them in Finder/Preview and only copy to project directories after review.

Which model and settings are used by default?

The default is the configured model (nano-banana-pro) rendering 2K images at a 16:9 aspect ratio. Prompts and model can be adjusted in the generation script.