/suede-design · Design system

Dark mode with opinions, tokens with receipts.

Suede Design evolves Suede interfaces from generic to intentional through design laws, tokens, component rules, dark mode, fluid typography, animation sequencing, and visual QA. Use it when picking color strategy or tokens, building or auditing a design system, polishing components, or comparing a mock against rendered implementation.

View skill folder Install options

"pick the tokens and fix the dark mode" /suede-design Ask in plain words. The router reads the request and loads this lane; MCP agents find it with list_suede_skills.
$ /suede-design fix the dark mode tokens: OKLCH L 12-24 · borders over shadows body contrast 7:1 · chroma trimmed 20% TOKEN MAP SHIPPED · NO PURE BLACK

Public install commands

Claude Code full pack

/plugin marketplace add JasonColapietro/suede-creator-skills
/plugin install suede-skills@suede

Claude Code project-level copy

git clone https://github.com/JasonColapietro/suede-creator-skills.git /tmp/suede-creator-skills
mkdir -p .claude/skills
cp -R /tmp/suede-creator-skills/skills/suede-design .claude/skills/

Codex installer

python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
  --repo JasonColapietro/suede-creator-skills \
  --path skills/suede-design

What it covers

  • Design laws and component-specific rules for Suede surfaces from landing pages to app shells.
  • Color strategy, design tokens, dark-mode surface layers, semantic states, contrast, and chroma rules.
  • Fluid typography, hierarchy, body measure, line height, and deliberate type pairing.
  • Layout, controls, forms, modals, empty states, data tables, navigation, assets, and motion rules.
  • Visual QA from current source and rendered screens, including desktop and mobile screenshots when practical.
  • Design-system artifacts such as token maps, state matrices, copy vocabulary, screenshot contracts, accessibility passes, and migration notes.

When to use it

  • Pick color strategy, color ramps, tokens, type scale, or brand identity decisions.
  • Build or audit a design system, reusable app shell, launch system, or important component family.
  • Polish product UI, brand surfaces, landing pages, dashboards, component systems, and responsive behavior.
  • Compare a mock, screenshot, Figma frame, or source visual target against the rendered implementation.
  • Not for: full-stack copy+design builds or copy+design launches (use johnny-suede-design).
  • Not for: general-purpose UI/UX pattern lookup, framework examples, or broad accessibility heuristic searches (use ui-ux-pro-max, private Suede Labs companion not in this pack).
  • Not for: deck-only or HTML presentation generation (use power-design, private Suede Labs companion not in this pack).
  • Not for: UX critique, accessibility audits, information architecture, or design handoff docs (use suede-ui, private Suede Labs companion not in this pack).
  • Not for: visual iteration with local script harness craft, shape, or audit commands (use suede-visual-qa, private Suede Labs companion not in this pack).

Best prompt

Use $suede-design to audit this Suede dashboard for color strategy, design tokens, type scale, component states, dark mode, motion, and visual QA. Compare the current route against the supplied mock, then give me the narrow patches plus desktop and mobile render evidence.

Related skills

Related pages: Johnny Suede Design and Suede Visibility Grader.

Stop shipping on vibes.

/plugin install suede-skills@suede All install paths