vector-designer

Files (8)

• SKILL.md
• openai.yaml · agents/
• evals.json · evals/
• animation-guide.md · references/
• design-philosophy.md · references/
• vectorize.md · references/
• wallpaper-design.md · references/
• wordmark-alignment.md · references/

SKILL.md (first lines)

# Vector Designer

## HARD DEPENDENCY: Inkscape MCP Required

This skill REQUIRES the Inkscape MCP server (`mcp__inkscape-mcp__*` tools). Before any work:

1. Verify `mcp__inkscape-mcp__dom_validate` is callable
2. If Inkscape MCP tools are NOT available → **STOP. Tell the user: "Inkscape MCP is required for vector design. Please configure the inkscape-mcp server."** Do NOT fall back to Bash CLI, do NOT hand-craft SVG geometry.

**There is no fallback. No Inkscape MCP = no vector design work.**

## FORBIDDEN — Anti-Patterns That Produce Bad Results

These patterns are STRICTLY PROHIBITED. They produce amateur output:

| FORBIDDEN | Why | Do Instead |
|-----------|-----|------------|
| Hand-drawing `<polygon points="...">` to approximate letterforms | Produces crude geometric shapes, not typography | Use existing font paths from client SVGs or Inkscape text-to-path |
| Guessing coordinates for `<rect>`, `<polygon>`, `<path>` to create letters | Looks like a child's drawing compared to real typefaces | Extract paths from existing professional SVGs |
| Using Bash `inkscape` CLI as fallback | Bypasses the MCP design loop; no validation/iteration | Use MCP `action_run` exclusively |
| Creating "geometric K" or "simplified R" from basic shapes | Always looks worse than the real typeface | Scale/transform existing professional paths with `matrix()` transforms |
| Writing SVG path `d=""` data by hand for anything complex | Error-prone, ugly results | Use Inkscape path operations: `path-union`, `path-difference`, `path-combine` |
| Presenting v1 to user without self-assessment | Wastes user's time on rough drafts | Self-assess 3-5 iterations internally first |

### The Cardinal Rule

**If the client has existing SVG assets with professional letterforms — USE THEM.** Extract the paths, apply transforms (`matrix()`, `translate()`, `scale()`), use Inkscape operations to modify. NEVER recreate what already exists as high-quality vector data.

## Overview

Design vector graphics iteratively using Inkscape MCP for ALL validation, export, path operations, and SVG manipulation. The core loop: **source professional paths -> compose with Inkscape tools -> validate -> export PNG -> view -> self-assess -> iterate**.

## When to Use

- Creating logos, icons, favicons, badges
- Designing SVG assets for web/print
- Creating wallpapers, backgrounds, and landscape compositions
- Any task requiring visual iteration on vector graphics
- Converting/cleaning existing SVGs
- **Vectorizing a raster image (JPG/PNG → SVG)** — see [references/vectorize.md](references/vectorize.md)

## When NOT to use

- Raster image editing (photos, pixel art, image filters)
- UI component implementation in code (React, SwiftUI)
- CSS-only designs that don't involve SVG files
- Architecture or flow diagrams (use drawio-diagram)

## Core Loop

```dot
digraph design_loop {
  rankdir=TB;
  "Verify Inkscape MCP available" -> "Gather requirements";
  "Gather requirements" -> "Resolve open decisions";
  "Resolve open decisions" -> "Read existing SVGs for paths";
  "Read existing SVGs for paths" -> "Compose with Inkscape tools";
  "Compose with Inkscape tools" -> "dom_validate";
  "dom_validate" -> "action_run export PNG 300dpi";
  "action_run export PNG 300dpi" -> "Read PNG (visual check)";
  "Read PNG (visual check)" -> "Self-assess (7-point checklist)";
  "Self-assess (7-point checklist)" -> "Passes?" [shape=diamond];
  "Passes?" -> "Present to user" [label="yes"];
  "Passes?" -> "Compose with Inkscape tools" [label="no — use dom_set / actions"];
  "Present to user" -> "User approves?" [shape=diamond];
  "User approves?" -> "dom_clean + export final" [label="yes"];
  "User approves?" -> "Compose with Inkscape tools" [label="no, iterate"];
}
```

**Critical: do NOT present v1 to user.** Self-assess internally for 3-5 iterations first.

## Inkscape MCP Tools

| Tool | Purpose | Key params |
|------|---------|------------|
| `dom_validate` | Check SVG structure | `doc_type: "inline"`, `doc_svg: "<svg>..."` |
| `action_run` | Export to PNG/PDF/SVG | `export_type`, `export_dpi`, `export_out` (relative only) |
| `dom_set` | Modify element attrs/styles | `ops_json`, `save_as` (relative only) |
| `dom_clean` | Optimize SVG with scour | `save_as` (relative only) |
| `action_list` | List available Inkscape actions | (no params) |

### Input Modes

- **`doc_type: "inline"`** + `doc_svg: "<svg>..."` — pass SVG as string. Best for iterating.
- **`doc_type: "file"`** + `doc_path: "relative/path.svg"` — read from file. Best for existing SVGs.

### action_run: Path Operations

- `path-union`, `path-difference`, `path-intersection`, `path-exclusion`, `path-combine`, `path-break-apart`, `path-simplify`
- Selection: `select-by-id:myElement`, `select-all`, `select-clear`
- Transform: `object-to-path`, `transform-scale:1.5`, `transform-rotate:45`, `object-align:hcenter vcenter page`

### dom_set: Batch Attribute Changes

```json
[
  {"sel": "#shield", "set": {"fill": "#C8FF00", "stroke-width": "2"}},
  {"sel": ".accent", "style": {"opacity": "0.8"}}
]
```

### Bounding Boxes — Precise Measurements

Query element widths directly (don't measure from PNG crops):

```bash
inkscape file.svg --query-id=elementId -W       # width
inkscape file.svg --query-id=elementId -X -Y -W -H   # full bbox
```

This is the one permitted Bash `inkscape` usage — read-only query, not design work.

### Workspace & Limitations

- MCP outputs to `inkscape/` relative to project root. **Absolute paths fail.** Copy to final destination with Bash.
- Inline export **fails silently for large SVGs**. Workaround: write SVG to file, use `doc_type: "file"`, or split into parts. **No CLI fallback.**

## Design Process

From DimmKirr/skills, MIT.

More from DimmKirr/skills