design-pack

A connector-first Claude Code pack for graphic designers.

The centerpiece is the connectors - the MCP servers that let Claude actually drive your design tools: Figma · Canva · Adobe Express/Firefly · Nano Banana (Gemini) · Higgsfield · Unsplash · Brand.dev. On top of that sit skills that orchestrate them, plus a guardrail backbone (contrast, asset hygiene, licensing, brand) that's enforced by hooks - because hooks run every time, while rules are only advisory.

Every item serves a goal:

Icon Goal
🪙 Fewer tokens
🎯 Accuracy (real values from connectors)
✅ Truth-telling (no faked generations/exports)
⚡ Speed
💎 Quality / craft / compliance

★ Connectors first

The heart of the pack lives in mcp/CONNECTORS.md: what each connector does, how to authenticate it (OAuth vs. API key), which connector to use for which job, and example prompts.

Connector Use it for
Figma existing designs, variables/tokens, specs, design-to-code
Canva fast on-brand layouts from templates, export
Adobe Express / Firefly retouch, background removal, generative fill/expand
Nano Banana (Gemini) text-to-image, edits, multi-reference composition, up to 4K
Higgsfield 30+ image/video models (Soul, Kling, Veo) - photoreal + cinematic motion
Unsplash licensable stock photography
Brand.dev real brand colours/logos by domain

The OAuth connector URLs and the npm package names in mcp/.mcp.json are placeholders - the OAuth ones are normally added through Claude's connector settings. See mcp/CONNECTORS.md for the real setup. Never paste a real key into a file (the secret-scan hook blocks it).

What's inside

Folder Contents Layer
mcp/ Connector config + CONNECTORS.md guide ★ Connectors
skills/ 15 skills that orchestrate the connectors On-demand
hooks/ 6 deterministic guardrails + settings.json Enforced
loops/ 6 workflow slash commands Workflow
commands/ one slash command per skill + agent Shortcuts
agents/ 3 review subagents Review
rules/ 8 advisory CLAUDE.md fragments Advisory
templates/ brief, brand kit, asset manifest, design tokens Docs
tests/ test_hooks.py - runs every hook against sample inputs Proof

See INVENTORY.md for the full table.

Install

./install.ps1 -ProjectPath "C:\path\to\your\workspace"   # Windows
./install.sh /path/to/your/workspace                      # macOS / Linux

Copies hooks -> .claude/hooks/, skills -> .claude/skills/, loops + commands -> .claude/commands/, agents -> .claude/agents/, appends rules to CLAUDE.md, merges settings.json. Wire the connectors per mcp/CONNECTORS.md. Requires Python 3.8+. Verify: python tests/test_hooks.py (12 cases / 6 hooks).

Uninstall: ./uninstall.ps1 -ProjectPath ... / ./uninstall.sh ... (removes only what it installed).

Slash commands

After install, type / in Claude Code:

  • Workflows: /design-it, /handoff, /brand-kit, /make-image, /social-set, /a11y-check.
  • Skills: /image-generate, /figma-handoff, /design-tokens, /canva-design, /asset-export, /stock-source, /moodboard, /og-image, /design-review, ... (one per skill).
  • Agents: /design-critic, /brand-compliance-reviewer, /asset-qa-reviewer.

Honest scope

  • New repo - 0 stars, no inflated claims. The connector endpoints/packages in .mcp.json are placeholders to replace with your accounts; the value is the orchestration + guardrails + the connector guide.
  • Guardrails reduce risk (contrast, naming, licensing) - they don't replace your eye or the review agents.

License

MIT - see LICENSE.