/suede-design

name: suede-design
description: "Suede AI design skill for interfaces that feel intentional instead of templated: design tokens, color strategy, OKLCH ramps, type scale, fluid type, visual hierarchy, dark mode, spacing, component laws, motion, full surface builds that ship layout and words together, reference-to-target restyles (Suedify), and source-to-implementation visual QA. Use when asked to design, restyle, polish, or audit a screen, landing page, dashboard, or component; pick colors or fonts; define or fix design tokens; build or repair a dark mode; review a design system; make this site look like that one; or compare a mock, Figma frame, or screenshot against the rendered build. NOT FOR: writing copy with no layout work (use suede-copy); conversion and funnel architecture (use suede-site-alchemy); an A-F findability and first-screen grade of a public page (use suede-visibility-grader); multi-lane builds with file ownership and rollback plans (use suede-agent-teams)."

Suede Design

Make interfaces feel intentional, legible, and specific to the product they serve. Covers product UI, brand and launch surfaces, dashboards, component systems, responsive polish, restyles, and visual QA.

**Core principle:** strip the logo and the surface must still be recognizably this product. Render the result before claiming it works.

Gate policy: advisory, not blocking

Every score, QA result, and ship status here is a recommendation to the user, not a control on the agent. Finish the work that was asked for and attach the verdict. A failed gate changes what you report, never what you do. Single exception: an extreme-risk finding (legal or rights exposure, copied protected assets, payment or data loss, irreversible public damage). Pause, name the risk and the options, and let the user choose.

Brand mark

For Suede AI surfaces, use only `docs/assets/suede-ai-logo-transparent.png` from `JasonColapietro/suede-creator-skills` (SHA-256 `83a7ee0317e4debe2e7b076c20ba067feb76a587f9e829dc6310ae4be4b44dfa`). Outside that checkout, fetch the same file from `https://raw.githubusercontent.com/JasonColapietro/suede-creator-skills/cbd192309580a32da375881e0eeb4b2450a554c2/docs/assets/suede-ai-logo-transparent.png`. Never redraw, trace, typeset, recolor, distort, or generate a replacement S. `suede-skill-icon.png` is a Passport icon, not the brand mark. If the file is missing or its checksum differs, omit the mark and say so. Use brand colors exactly as the brand system defines them; never invent new ones.

Pick the mode

| Request | Mode | |---|---| | A clear, small visual fix | **Fix:** inspect, make the narrow edit, render, report. | | New surface or ambiguous redesign | **Design:** gather context, propose 2 or 3 directions with tradeoffs, recommend one, get a yes before building. | | Large redesign or launch surface with words | **Surface build:** delivery contract first, then layout and words together, then QA. | | Tokens, components, or a whole system | **System:** scan CSS, tokens, components, spacing, breakpoints, and repeated patterns before proposing changes. Score with the system audit. | | Mock, Figma frame, or screenshot vs. the build | **Visual QA:** compare both in one pass, save `visual-qa-report.md`. | | "Make this site look like that one" | **Restyle (Suedify):** reference URL to target URL. |

Name the active mode in the working update. Do not run every mode by default.

**Long polish loops:** at most 3 passes on the same unit. If the same failure repeats, stop, report what each attempt changed and the unresolved failure, offer 2 to 4 options, and let the user pick.

**Multi-agent work:** for a large surface build, ask first: "Run this as a multi-agent team (more thorough, roughly 3 to 5 times the tokens) or single-agent?" This skill spawns at most 4 subagents and names the model they bill to. Anything larger goes to suede-agent-teams.

Read current truth first

1. Identify the surface: repo, route, live URL, deploy target, branch, dirty files. 2. Read `PRODUCT.md`, `DESIGN.md`, `AGENTS.md`, `CLAUDE.md`, and `README.md` when present. If `PRODUCT.md` or `DESIGN.md` is missing on a major surface, proceed and offer to create them afterward. 3. Render the current UI at desktop and mobile before judging it. 4. Name the physical scene: who uses this, where, under what light, under what pressure, and what they need to do next.

State the preflight line:

SUEDE_DESIGN_PREFLIGHT: target=<repo-or-folder> surface=<route-or-url> mode=<fix|design|build|system|qa|restyle> register=<brand|product|docs|campaign|mobile> context=<pass|partial|none> render=<pass|pending|skipped:reason>

**Render, do not guess.** Desktop at 1280 px and mobile at 390 px minimum: `npx playwright screenshot <url> --viewport-size=1280,900 desktop.png` and `--viewport-size=390,844 mobile.png` (first run: `npx playwright install chromium`), or the environment's built-in preview tool. For App Store sets, check Apple's current screenshot specifications before exporting: the 6.9-inch iPhone slot takes 1320 x 2868 (1290 x 2796 also accepted) and the 13-inch iPad slot takes 2064 x 2752 (2048 x 2732 also accepted).

Register sets the defaults

| Register | Signal | Defaults | |---|---|---| | Brand | Homepage, about, campaign, press, portfolio | Highest typographic ambition, lowest density, motion earns premium feel, declarative copy | | Product | App UI, dashboard, settings, onboarding, admin | Density serves the task, motion clarifies state, instructional copy | | Docs | Reference, API, guides, changelog | Monospace hierarchy, no decoration, precise scannable copy | | Campaign | Launch, landing, offer, event | Conversion structure first, proof above the fold, one CTA | | Mobile and listing | Screenshots, paywall, onboarding | Platform conventions, system-safe type, no custom fonts in store screenshots |

When a request spans registers (a dashboard with a marketing hero), name both and apply ea