Hand it a mock, a Figma frame, or a reference screenshot and the live route, and it returns the narrow patches that close the gap, with desktop and mobile renders as evidence. Underneath: design tokens, OKLCH color ramps, a fluid type scale, spacing and component laws, motion, and a dark mode built from tokens rather than inverted by hand. A whole surface that needs words as well as layout is johnny-suede-design.
"pick the tokens and fix the dark mode"->/suede-designAsk in plain words. The router reads the request and loads this lane; MCP agents find it with list_suede_skills.
claude code · sample session
$ /suede-design fix the dark modetokens: OKLCH L 12-24 · borders over shadowsbody contrast 7:1 · chroma trimmed 20%TOKEN MAP SHIPPED · NO PURE BLACK
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.
Vetted third-party component registries for pieces the local system lacks, bundled 2026-08-26: sources clear an operational bar (loaded live, license read, domain reputation scanned, source repository pinned), and one evaluated source stays held with stated promotion conditions. Every import runs a seven-check adoption pass: local first, registry install, signature test, retokenize, motion law, license tier, render proof.
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.
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.
It ships inside the Suede Creator Skills pack, so one install brings the whole pack and this skill with it. Claude Code takes two commands the first time and one after that; Codex installs the same pack natively.