vector-design

A premium vector graphics design tool for AI agents. Create unique SVG logos, mascots, icons with render-critique-export loop. Anti-slop guaranteed.

⚡️ Quick Install

Via npx (one-liner)

npx skills add SaddamTechie/vector-design

Manual / Clone

# Clone to ~/.claude/skills/
git clone https://github.com/SaddamTechie/vector-design.git ~/.claude/skills/vector-design

# Add to CLAUDE.md:
# - **vector-design** (~/.claude/skills/vector-design/SKILL.md)

💡 Important: After install, always run from the skill folder:

cd ~/.claude/skills/vector-design
uv run --with resvg-py python scripts/render.py --check

🔧 Setup (Required Once)

# Navigate to skill folder
cd ~/.claude/skills/vector-design

# Verify resvg-py is working
uv run --with resvg-py python scripts/render.py --check

# Optional: PDF export
# brew install inkscape   # macOS
# apt install inkscape  # Linux

🚀 Usage

Just talk to Claude Code:

"Create a logo for my outdoor brand. I like the merge logo style — geometric peaks and waves."
"Make 3 direction swatches so I can pick one."
"Render and critique this logo — I want score 90+."
"Export to PDF at 300dpi."

Or via CLI:

# Gather brief → create design
python scripts/render.py --create my-brand --brief

# Follow the prompts:
# 1. References — logos/brands you like
# 2. What to avoid — styles you hate
# 3. Colors — brand colors
# 4. Mood — 3 keywords
# 5. Industry — what is this for?

# Render preview
python scripts/render.py --design my-brand

# Get critique (must be ≥80)
python scripts/critique.py --design my-brand

# Export
python scripts/export.py --output logo.pdf --design my-brand

📁 Project Structure

vector-design/
├── README.md                          # ← You're here
├── SKILL.md                         # Main skill file
├── scripts/
│   ├── render.py                  # Create → render → preview
│   ├── critique.py              # Anti-slop critique (score 0-100)
│   └── export.py               # PDF export
├── references/
│   ├── directions.md           # 10 brand-specific directions
│   ├── design-styles.md      # 12 design philosophies
│   ├── anti-slop.md         # AI patterns to avoid
│   ├── color.md           # Color systems
│   ├── typography.md       # Typography rules
│   ├── print-prep.md      # Bleed, safe zone, DPI
│   └── svg-patterns.md     # Copy-paste patterns
└── vector-designs/           # Your designs go here

🎯 Commands

Command	Purpose
--create [name] --brief	Gather brief → create design
--design [name]	Render SVG → PNG
--list	List all designs
--critique	Anti-slop critique
--output file.pdf	Export to PDF

🎨 Design Philosophy

Premium, unique output — NOT generic AI slop.

Anti-Slop Rules (Built-in)

❌ AVOID	✓ USE INSTEAD
Purple-to-blue gradient	Solid brand colors
Inter font	Helvetica, Arial
All rounded corners	Sharp or sharp+round mix
"GET STARTED" text	Brand-specific copy
Centered everything	Intentional asymmetry
6+ colors	Restrained palette (≤5)

Premium Workflow (Required)

1. Brief — Gather inspiration, colors, mood first
2. Direction — Match to brand personality
3. Swatches — Show 3 options → get user pick
4. Execute — Full design, one direction
5. Critique — Score ≥80 before export
6. Export — PDF at 150/300dpi

Critique Scores

Score	Status
90+	[EXCELLENT] — premium, unique
75-89	[GOOD] — usable, minor fixes
60-74	[NEEDS WORK] — revise
<60	[REVISIONS NEEDED]

---

Author: SaddamTechie
License: MIT