I built three Claude Code skills that generate production-ready SVGs on demand — a logo mark, an illustration, and a flowchart. Each skill follows the same pattern: ask a few focused questions up front, then emit a fully self-contained SVG file.

Why SVG?

SVG is a great fit for AI-generated graphics — it’s just text, so the model can reason about coordinates and structure without hallucinating pixel values. The output is infinitely scalable, easy to inspect, and works anywhere a browser does.

The Three Skills

Generates a 100×100 icon-only logo mark. No text, no external fonts. The safe zone is 6–94px on each axis so the mark survives cropping to any shape.

Inputs collected before generation:

  • Style — Geometric, Lettermark, Abstract mark, or Mascot/character
  • Palette — six presets (Midnight, Ember, Moss, Steel, Blush, Obsidian), each a primary + accent pair
  • Animation — None, Entrance (fade/scale), Loop (breathe/pulse), or Spin

The design constraint of 1–2 colors and geometric primitives only (<circle>, <rect>, <polygon>, <path>) keeps logos legible at 50px while still looking intentional.

Example output: outputs/brew-logo.svg

svg-illustration

Generates expressive, layered illustrations with a default 400×300 canvas (wide banner, portrait, and square also available). Every output is structured into three named groups — #background, #midground, #foreground — so the layers are easy to edit afterward.

Inputs collected before generation:

  • Style — Flat, Outlined, Isometric, or Organic
  • Palette — six presets (Aurora, Meadow, Dusk, Sand, Coral, Arctic)
  • Canvas size
  • Animation — None, Float, Fade in layers, or One element loops

Color discipline: max 5 distinct hues total, opacity variations before introducing new colors. The background layer is always the palette’s background color; accent colors go on the foreground focal element only.

SMIL and CSS @keyframes are used for animation — no JavaScript, fully portable.

Example output: outputs/developer-coding-illustration.svg

svg-flowchart

Generates structured process diagrams with a fixed 800px width and computed height based on node count. Handles four diagram types — Linear steps, Decision tree, Swimlane, and Cycle/loop — in either Top→Bottom or Left→Right orientation.

Inputs collected before generation:

  • Diagram type — Linear, Decision tree (with branches), Swimlane (by role/team), or Cycle/loop
  • Direction — Top→Bottom or Left→Right
  • Palette — five presets (Indigo, Ocean, Slate, Violet, Mono)

Node shapes follow flowchart conventions: rounded rect for process steps, diamond for decisions, pill for start/end, parallelogram for input/output. Connectors always use an <marker> arrow defined in <defs> so arrowheads render correctly everywhere.

For decision branches, Yes/No labels sit on the connector line mid-point; branches reconnect back to the main axis via <path> curves.

Example output: outputs/login-process-flowchart.svg

Common Design Decisions

A few things I applied consistently across all three skills:

Ask first, generate once. Each skill uses ask_user_input_v0 to collect style and color options before emitting any SVG. This eliminates the back-and-forth of “regenerate but make it darker.”

Palette presets over free-form colors. Offering named palettes with pre-paired colors produces more harmonious results than letting users specify arbitrary hex codes.

No external resources. No <image> tags, no Google Fonts, no CDN links. The output file is always fully self-contained.

Outputs go to ./outputs/ with a descriptive filename like login-process-flowchart.svg. Predictable output paths make it easy to drop the file into a project without renaming.