# Art

> Complete visual content system for Claude Code. Use when generating blog headers, infographics, editorial art, diagrams, or comics. Default aesthetic: light backgrounds, teal/burnt orange accents, hand-drawn sketch style.

- Skill: `dreamlab-ai/art` (Agent Skill, multi-file: 28 files)
- Install (CLI): `npx skillmds@latest add dreamlab-ai/art`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dreamlab-ai/art/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dreamlab-ai (https://skillmd.com/u/dreamlab-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dreamlab-ai/art

---


# Art Skill

Complete visual content system supporting **multiple brand aesthetics**.

## When Not to Use

- AI-generated photoreal images or video -- use `comfyui` (local diffusion) or
  `clipcannon` (video) instead
- Academic/publication diagrams destined for a LaTeX document -- prefer TikZ via
  `book-publishing` (references/latex-conventions.md); only reach for this skill's `diagram-upcycling.md` path to polish a
  TikZ/Mermaid render, not to author the diagram itself
- Plain image editing (resize, crop, format convert, batch watermark) with no
  generation involved -- use `imagemagick`

---

## Aesthetic Routing

The art skill supports multiple visual identities. **Before generating any visual, determine which aesthetic applies.**

### How to Select an Aesthetic

1. **Check if the user specifies a brand/project** (e.g., "my-brand icon", "acme newsletter header")
2. **Check for content-type exceptions** (see Content-Type Override Rules below)
3. **Check if the target output has a site-specific style guide** (e.g., `HERO-IMAGE-TEMPLATE.md`)
4. **If no brand specified, use the default aesthetic**

### Content-Type Override Rules

**CRITICAL:** Some content types intentionally use different aesthetics than their host site.

| Content Type | Detection Pattern | Aesthetic to Use | DO NOT Use |
|--------------|------------------|------------------|------------|
| **Satirical/Parody Content** | User explicitly says "satire", "parody", "joke product" | Match the satire target's aesthetic (e.g., corporate B2B for business parody) | Host site's aesthetic |
| **Easter Eggs** | Path contains `easter-eggs/`, explicitly marked as easter egg | Depends on easter egg theme, ask user if unclear | Host site's default |

**Rule:** When content-type override detected, DO NOT check host site style guides. The content is intentionally divergent.

### Base Prompt Prefix Standard (MANDATORY)

**Every aesthetic MUST define a Base Prompt Prefix** — a locked consistency block that gets prepended to every image generation prompt for that aesthetic. This ensures visual cohesion across a set of illustrations.

**What the prefix locks down:**
- Line weight and quality
- Background treatment
- Camera angle / perspective
- Fill ratio (illustration vs. whitespace)
- Color balance percentages
- Shadow intensity and direction
- Text treatment (if applicable)

**Where to find each prefix:**
- Each aesthetic file (`.md`) contains a "Base Prompt Prefix" section with the locked values
- Project-specific aesthetics (e.g., lead magnet `AESTHETIC.md`) inherit from their parent brand and override only what changes
- **Always read the aesthetic file and use its prefix before generating** — never freestyle prompt parameters that have been locked

**When creating new aesthetics via `aesthetic-definer`:** The agent MUST produce a base prompt prefix as part of the output. An aesthetic without a consistency lock is incomplete.

### Available Aesthetics

| Brand | Aesthetic File | Style |
|-------|---------------|-------|
| **Default** | `aesthetic.md` | Hand-drawn sketch, cream backgrounds, teal/orange accents |

**To add a new aesthetic:** Create a new file at `aesthetics/[name].md` using the default aesthetic as a template. See `aesthetics/README.md` for the required format.

### Aesthetic Loading Rule

**Read the matching aesthetic file BEFORE writing any prompt or generating any image.** The aesthetic file is the source of truth for that brand's colors, style parameters, anti-patterns, and prompt integration phrases.

---

## Workflow Routing

| Content Type | Workflow |
|--------------|----------|
| Blog headers / Editorial | `workflows/workflow.md` |
| Adaptive orchestrator | `workflows/visualize.md` |
| Flowcharts / Sequences | `workflows/mermaid.md` |
| Architecture diagrams | `workflows/technical-diagrams.md` |
| Classification grids | `workflows/taxonomies.md` |
| Chronological | `workflows/timelines.md` |
| 2x2 matrices | `workflows/frameworks.md` |
| X vs Y | `workflows/comparisons.md` |
| Screenshot markup | `workflows/annotated-screenshots.md` |
| Step-by-step | `workflows/recipe-cards.md` |
| Sketchnotes / visual notes | `workflows/sketchnotes.md` |
| Quote cards | `workflows/aphorisms.md` |
| Idea territories | `workflows/maps.md` |
| Big numbers | `workflows/stats.md` |
| Sequential panels | `workflows/comics.md` |
| **Edit existing image** | `workflows/image-editing.md` |

---

## Image Generation

**Default model:** nano-banana-2 (Gemini 3.1 Flash Image)

The skill resolves its own location — set `$ART_SKILL` once so every snippet works whether the skill is installed at `~/.claude/skills/art` or baked into the image at `/opt/agentbox/skills/art`:

```bash
ART_SKILL="${ART_SKILL:-$( [ -d /opt/agentbox/skills/art ] && echo /opt/agentbox/skills/art || echo ~/.claude/skills/art )}"

bun run "$ART_SKILL/tools/generate-image.ts" \
  --model nano-banana-2 \
  --prompt "[PROMPT]" \
  --size 2K \
  --aspect-ratio 1:1 \
  --output /path/to/output.png
```

### Alternative Model

| Model | When to Use |
|-------|-------------|
| **nano-banana-pro** | Maximum quality, professional asset production, complex multi-turn editing |

### Model Selection Guide

**Nano Banana 2 (default):**
- Best for: Most image generation tasks, fast iteration
- Strengths: Pro-level quality at Flash speed, reference images, web search grounding, 512px-4K range
- Use when: Default choice for all standard image generation
- API model: `gemini-3.1-flash-image-preview`

**Nano Banana Pro:**
- Best for: Professional asset production, maximum reasoning
- Strengths: Advanced reasoning, multi-turn refinement, style transfer
- Use when: Quality matters more than speed, complex compositional tasks
- API model: `gemini-3-pro-image-preview`

**API keys in:** `~/.claude/.env`
- `GOOGLE_API_KEY` - Required for both models
- `REMOVEBG_API_KEY` - Background removal (optional)

### Quick Preview Workflow (512px)

Use `--size 512px` for fast, cheap previews before committing to full resolution:

```bash
# 1. Preview at 512px (fast, low cost)
bun run "$ART_SKILL/tools/generate-image.ts" \
  --prompt "[PROMPT]" --size 512px --output /tmp/preview.png

# 2. Happy? Regenerate at full size
bun run "$ART_SKILL/tools/generate-image.ts" \
  --prompt "[PROMPT]" --size 2K --output /path/to/final.png
```

### Thinking Flag (Nano Banana 2 only)

Add `--thinking` to give the model more reasoning time for complex compositions:

```bash
bun run "$ART_SKILL/tools/generate-image.ts" \
  --prompt "Complex multi-element scene..." \
  --thinking high --output /path/to/output.png
```

| Level | Use When |
|-------|----------|
| `minimal` | Default — balances quality and latency |
| `high` | Complex layouts, precise positioning, multi-element scenes |

Only works with `nano-banana-2`. Thinking is always on (minimal by default). Use `high` when composition accuracy matters more than speed.

### Common Diagram Pitfalls & Platform Limits

Generating an architecture/technical diagram, or an image for a specific social/publishing
platform? Read **[references/output-constraints.md](references/output-constraints.md)** — it
holds the diagram-pitfall table + pre-flight checklist and the per-platform dimension/size
constraints with compression commands.

### Site-Specific Style Override (CRITICAL)

**Before generating images for a specific website, CHECK for style guides:**

```bash
# Check project root for style documentation
ls HERO-IMAGE-TEMPLATE.md    # Site-specific image style
ls STYLE-GUIDE.md            # Design system
```

**If found, the site's style guide OVERRIDES the default aesthetic.**

**Default aesthetic.md applies when:** No site-specific style guide exists.

### Consistent Dimensions for Related Images

When generating multiple images for the same page/section:
- Use **identical resize dimensions** for all images
- Document the size used: `# All diagrams: 800x500`
- Prevents distortion when displayed together

---

### Nano Banana Prompting Guide

**For detailed prompting techniques:** `nano-banana-guide.md`
**Applies to both Nano Banana 2 and Nano Banana Pro** — same prompt patterns, same API structure.

Includes:
- Core prompt formula: `[Action] the [Subject] by [Specific Change]. The goal is [Desired Outcome].`
- Action verb vocabulary (recolor, retouch, style, adjust, enhance, transform, add, remove, replace, blend)
- Mood and atmosphere vocabulary tables
- Color palette phrases
- Aspect ratio selection guide
- Iterative refinement workflow
- Brand integration template

---

## Quick Decision Tree

```
What does user need?

├─ Unsure which approach? → VISUALIZE (analyzes & orchestrates)
├─ Flowchart/sequence/state diagram? → MERMAID
├─ Abstract metaphor for article? → Editorial (workflow.md)
├─ System/architecture with labels? → Technical Diagram
├─ Categories in grid? → Taxonomy
├─ Change over time? → Timeline
├─ 2x2 matrix or mental model? → Framework
├─ Side-by-side contrast? → Comparison
├─ Markup existing screenshot? → Annotated Screenshot
├─ Step-by-step process? → Recipe Card
├─ Sketchnote or visual meeting notes? → Sketchnote
├─ Quote as social visual? → Aphorism
├─ Idea territories as map? → Conceptual Map
├─ Single striking number? → Stat Card
├─ Multi-panel story? → Comic
└─ Edit/modify/transform existing image? → IMAGE EDITING
```

---

## LinkedIn Slide / Carousel Production

To turn results into a **stunning, faithful, LinkedIn-ready slide deck** (Beamer 4:3 →
MuPDF rasterise → Nano Banana Pro per-slide upcycle with a shared metaprompt → audit →
composite PDF), see **[references/linkedin-slides.md](references/linkedin-slides.md)**.
Reusable tooling: `tools/slide-upcycle.sh` + `tools/slide-upcycle-metaprompt.txt`.
Key rule: diagrams-as-code (PGFPlots) give exact charts; the upcycle improves *only* the
visuals — the `--ref` image is authoritative, every number/label is reproduced verbatim.

## Diagram Upcycling (TikZ / Mermaid / matplotlib → publication quality)

Enhancing a rendered diagram for print/publication? See
**[references/diagram-upcycling.md](references/diagram-upcycling.md)** — render-to-PNG,
upcycle (via `generate-image.ts` with `nano-banana-pro`, or the current `google-genai` SDK
with `gemini-3-pro-image-preview`), ImageMagick fallback, the ≥2x text-hallucination rule,
and LaTeX integration.

---

## Assimilation Note

**Source:** Personal_AI_Infrastructure Art Skill
**Assimilated:** 2026-01-04
**Adapted:** PAI's dark/neon aesthetic → warm/cream aesthetic

**For complete visual styling rules, ALWAYS read:** `aesthetic.md`