design-suite

Design Up — a premium, anti-slop design suite for Claude Code

Make any interface look and feel high-end, and never look "AI-generated." A grid-first, anti-slop design system (typography, color, motion, depth, interaction, responsive, copy) with a deep, user-extensible reference library.

Four skills:

• design-up — the calm, premium baseline plus a hands-on expert (any page, app, or component).
• design-up-bold — the bold register: maximal, distinct, cinematic, with cool motion.
• design-up-studio / design-up-bold-studio (experimental) — generate 3 distinct directions plus an interactive studio to compare, annotate, and iterate.

Self-contained: no external skill dependencies. Image generation in bold mode is optional — used only if you have an image-generation skill or tool installed; otherwise it relies on real imagery and CSS/SVG.

Install

Option A — npx (one command, cross-platform)

npx github:mtcafe/design-suite

Copies the four skills into ~/.claude/skills/; restart Claude Code, then use /design-up, /design-up-bold, etc. Requires Node. (After publishing to npm this becomes npx design-up-suite.)

Option B — Plugin (versioned, auto-updates; no Node needed)

/plugin marketplace add mtcafe/design-suite
/plugin install design-suite@design-suite

(Or from a local copy: /plugin marketplace add /path/to/design-suite.)

Invoke as /design-suite:design-up, /design-suite:design-up-bold, /design-suite:design-up-studio, /design-suite:design-up-bold-studio.

Option C — Manual install script (no marketplace)

From this folder:

./install.sh

It copies the four skills into ~/.claude/skills/. Restart Claude Code, then use /design-up, /design-up-bold, etc. (Prefer to do it by hand? cp -R skills/* ~/.claude/skills/.)

Option D — Per project

Copy the same four folders into a repository's .claude/skills/ so they load for everyone working in that project.

Use

• /design-up "make my landing page feel premium" — premium, anti-slop design for any page, app, or component.
• /design-up-bold "..." — the bold register: oversized type, signature motion, optional generated art.
• /design-up-studio "..." / /design-up-bold-studio "..." — three distinct directions plus an interactive review studio (experimental).

On a bare brief it acts as the expert: it proposes a few candidate "organizing ideas," recommends one, and proceeds — it never makes you invent the concept.

Make it yours

Drop your own rules, brand notes, screenshots, or PDFs into skills/design-up/references/custom/ (see _example-brand.md for the format). The skill reads them on every run and treats them as the highest-priority rules, overriding its defaults on any conflict.

• Plugin installs: put persistent custom rules in ${CLAUDE_PLUGIN_DATA}/custom/ so they survive plugin updates.

What's inside

• skills/design-up/references/ — the design system (anti-slop catalog, grid & layout, typography, color, motion, interactions, surfaces, states, responsive, components (with the real video embed & carousel patterns), modes, archetypes, portfolio patterns).
• skills/design-up/scripts/gen-tokens.mjs — emits a CSS design-token system (spacing, modular type, OKLCH neutrals/accent, easings, tinted shadows, radius, z-index, dark mode, reduced motion).
• skills/design-up-studio/scripts/gen-studio.mjs — builds a self-contained interactive review studio from a set of mockups.

License

MIT. See LICENSE.