Builder Methods Brand Illustrator

Generate hand-drawn line illustrations that match the Builder Methods visual identity: warm off-white canvas, confident black ink lines, and one bold accent color.

This Skill is designed to be reusable and procedural:

• you gather requirements
• you propose three on-brand concepts
• you get a selection
• you generate final image(s) consistently using our style + color system

What this Skill produces

• Icon: 1 primary object, isolated, quick punctuation.
• Scene: 2–4 objects, suggested environment, hero/header moments.
• Periphery: 1–3 objects, used as corner/edge elements or decorative supports.

See references/visual-world.md for the world + constraints and references/style.md for rendering rules.

Requirements

• Python 3.8+ for running the generation script
• google-genai package: pip install google-genai
• GEMINI_API_KEY environment variable: Set your Google Gemini API key as GEMINI_API_KEY (alternatively GOOGLE_API_KEY or GENAI_API_KEY)

Get an API key from: https://ai.google.dev/

Quick Start

1. Create a project folder (recommended) in projects/ with today's date and a short slug.

   Example:

   bash
   1mkdir -p projects/2026-01-13-blog-hero

2. Gather requirements — use the AskUserQuestion tool for each missing piece one at a time. Required inputs:

   • Content context: topic + the core idea (insight), or paste article/transcript
   • Visual context: where the illustration will live (page screenshot, layout notes), or “n/a”
   • Accent color: coral | teal | indigo | amber
   • Image type: icon | scene | periphery
   • Dimensions (px): width × height

   Defaults:

   • scene: 1200×630
   • icon: 512×512
   • periphery: 500×500

3. Generate 3 concept options using references/idea-mapping.md:

   • Present Option A / B / C
   • Each option includes: connection type, category (Builder’s World / Metaphor / Digital Artifact), object list, and why it fits the content.
   • Keep options meaningfully different (object choice, metaphor, or mood), but all on-brand.

4. Get user choice — use AskUserQuestion and let them pick A/B/C (or “Other” for feedback).

5. Document the project — create project.md inside the project folder with:

   • requirements
   • A/B/C concepts
   • chosen direction
   • final prompt + parameters
   • output filenames

6. Craft prompt and generate once a concept is approved, saving outputs to the project folder.

   Example:

   bash
   1python3 ${CLAUDE_PLUGIN_ROOT}/skills/brand-illustrator/scripts/generate.py \
   2  --prompt "A worn leather notebook open to a page with handwritten wireframe sketches" \
   3  --color coral \
   4  --type scene \
   5  --width 1200 \
   6  --height 630 \
   7  --output projects/2026-01-13-blog-hero/illustration-v1.png

Color System

See references/colors.md for all hex values (single source of truth).

Available accent colors: Coral, Teal, Indigo, Amber

Rules

• Use ONE accent color per illustration.
• Most of the image is warm off-white background with confident black lines.
• Accent color should fill ~20–30% of the illustration.
• Shadow/depth color is used sparingly (~5–10%), mostly as grounding.

Style Requirements (non-negotiable)

These are enforced by prompt + review. See references/style.md for full details.

• Hand-drawn ink line art; no photorealism, no 3D, no gradients
• Restrained compositions: focus objects over scenery
• Suggest environment with a few cues; do not render full rooms
• Leave negative space for text overlays when used as a hero image

Concepting Guidance

Use the mapping doc to ensure every illustration is connected to the content:

• references/idea-mapping.md — connection types, object lists, metaphors, quick reference by meaning
• references/visual-world.md — what “belongs” in the Builder Methods world
• references/prompts.md — prompt templates and proven patterns

Safety / Brand Guardrails

• Avoid trademarks/logos/brand names on devices, mugs, screens, or apparel.
• Avoid depicting real identifiable people.
• Keep UI/terminal content generic (nonsense code is fine; no secrets).
• No violence, gore, or sensitive themes—Builder Methods illustrations should feel calm and inviting.

Project Documentation Template

Copy into projects/<date>-<slug>/project.md:

md
1# Project: <slug>
2
3## Requirements
4- Content context:
5- Core idea:
6- Visual context:
7- Accent color:
8- Image type:
9- Dimensions:
10
11## Concepts
12### Option A
13- Connection type:
14- Category:
15- Objects:
16- Rationale:
17
18### Option B
19...
20
21### Option C
22...
23
24## Selected Direction
25- Chosen option:
26- Notes / tweaks:
27
28## Final Prompt
29```text
30<final prompt here>

Generation Params

• color:
• type:
• width:
• height:
• output:

Outputs

• illustration-v1.png
• illustration-v2.png