Design Director

Plan colors, fonts, and motion from real catalogs — then ship UI.
An agent skill for Cursor, Claude Code, Codex, and 60+ agents via npx skills.

Install (30 seconds)

npx skills add shivtchandra/design-director -g

Note: If the installer reports Failed to install → PromptScript, ignore it — PromptScript does not support global (-g) installs. Cursor, Claude Code, Codex, and the other listed agents still install correctly to ~/.agents/skills/. For PromptScript only, run without -g inside the project folder.

Then in any agent chat:

Use the design-director skill. Plan first (brief + tokens + 2–3 effects), then …

---

What you get

Capability	Detail
Design systems	~74 brands searchable by mood / slug (colors + fonts)
Motion recipes	~132 portfolio effects with HTML snippets
Animation catalog	~120 libraries, patterns, component kits, inspiration repos
Snippets	HTML for all effects · React for many
Workflow	Forced plan-first: brief → tokens → motion → implement
Hero continuity	Cinematic heroes must carry atmosphere through scroll sections
Logo system	Companion logo-creation skill for wordmarks and marks
Packaging	Works after install — no monorepo required at runtime

---

How it works

flowchart LR
  brief[Brief]
  tokens[search-designs]
  motion[search-effects]
  ship[Implement]

  brief --> tokens --> motion --> ship

Loading

1. Lock product, audience, tone (3 adjectives).
2. Query real systems — don’t invent purple-gradient defaults.
3. Pick 2–4 effects; pull HTML/React snippets.
4. Build against the brief.

---

Live examples

Full landing pages built with Design Director — not mockups. Open them, scroll them, click the CTAs.

Brand	Pairing	Demo
Luxury Coffee — artisan specialty coffee house	burgundy on cream	Open live →
Voltstride — boutique running & race footwear	neon on black	Open live →
Liminal — guided inner-journey experiences	charcoal on lavender-cream	Open live →

Gallery: shivtchandra.github.io/design-director

Deployed from examples/showcase/ via GitHub Pages on every push to main.

Enable Pages (one-time): Repo → Settings → Pages → Build and deployment → GitHub Actions.

---

Demo

Search design systems

node scripts/search-designs.js "dark cinematic"

## Design Systems (8 shown)

| Slug        | Primary   | Fonts                                      | Score |
|-------------|-----------|--------------------------------------------|-------|
| airtable    | #181d26   | Haas Groot Disp, Haas                      | 15    |
| composio    | #0007cd   | abcDiatype, JetBrains Mono                 | 10    |
| ferrari     | #da291c   | FerrariSans                                | 10    |
| linear.app  | #5e6ad2   | Linear Display, Linear Text                | 10    |
| mintlify    | #0a0a0a   | Inter, Geist Mono                          | 10    |
…

Pull a React effect snippet

node scripts/search-effects.js "24" --react

### 24. Magnetic button (Cursor)
- Snippets: HTML yes · React yes

#### React Hook/Component
export function useMagnetic(strength = 0.12, radius = 80) { … }

Paths are relative to the installed skill folder (e.g. ~/.agents/skills/design-director/).

---

Vs other design skills

	Prose skills (frontend-design, web-design-guidelines)	Design Director
Guidance	Taste, polish, audit rules	Locked tokens + motion choices
Data	Little / none	Catalogs + searchable CLI
Output	Advice	Copy-paste snippets
Best used as	Primary taste layer	Companion that makes decisions concrete

Install both: guidelines for review, Design Director for direction + assets.

---

Example prompts

New landing page

Use the design-director skill. Design a landing page for a boutique running brand called “Voltstride” — dark, athletic, editorial. Plan first (brief + tokens + 2–3 effects), then build a single page.

SaaS waitlist

Use the design-director skill. Plan first (brief + tokens + 2–3 effects), then build a waitlist landing page for “Relaykit” — calm, precise, product-led. One hero, email CTA, no dashboard chrome.

Unconventional — sticker-paste

Use the design-director skill. Plan first (brief + tokens + 2–3 effects), then build a landing for “Peel & Static” sticker club. Flavor: sticker-paste zine — die-cut collage, locked sticker palette, mixed display lettering. Intentional sticker exception; uniform site-wide.

Unconventional — oversized poster

Use the design-director skill. Plan first (brief + tokens + 2–3 effects), then build a landing for “POST ROOM”. Flavor: oversized poster — type fills the hero; 2–3 spot colors only.

Revamp an existing page

Use the design-director skill. Plan first (brief + tokens + 2–3 effects), then revamp @src/pages/HomePage.jsx. Keep routing and copy; replace palette, type, and motion. Tone: dark, cinematic, technical.

More (poster, risograph, highway signs, receipt, blueprint, scoreboard, perfume strip, street stencil, SaaS, ecommerce, …): skills/design-director/references/example-prompts.md

---

CLI recipes

After install, from the skill directory:

node scripts/search-designs.js "brutalist editorial"
node scripts/search-designs.js --slug cursor

node scripts/search-effects.js "magnetic"
node scripts/search-effects.js "05" --html
node scripts/search-effects.js --cat "Scroll" --complexity easy

node scripts/search-animation-catalog.js "lenis"
node scripts/search-animation-catalog.js --type library
node scripts/search-animation-catalog.js --cat "Page Transitions"

---

Package contents

Skill	Use when
design-director	Full visual planning (mood → tokens → motion → build)
logo-creation	Wordmarks, lettermarks, and logo systems for branded pages
portfolio-effects	Effects only — look already decided

npx skills add shivtchandra/design-director --list
npx skills add shivtchandra/design-director --skill design-director -g -y
npx skills add shivtchandra/design-director --skill logo-creation -g -y

---

License

MIT