suede-design

Files (8)

• CARD.md
• SKILL.md
• openai.yaml · agents/
• design-laws.md · references/
• restyle-playbook.md · references/
• scoped-bans.md · references/
• surface-lenses.md · references/
• ui-component-sources.md · references/

SKILL.md (first lines)

# Suede AI Design Skills

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.

## Compatibility

An agent with access to the target UI or source and visual inspection. Implementation needs project file access and its existing build runtime; screenshot comparison needs a browser or supplied renders.

## 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:

```text
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 each to its section.

## Delivery contract

Before a new surface, a significant redesign, a component family, or a system
pass, lock:

```text
Objective (user-visible outcome):
Surface (repo, route, live URL, branch):
Audience and primary action:
Register:
Reference or visual target:
Done signal (screenshot, build, test, deploy readback):
Constraints (WIP to keep, routes not to touch, unapproved claims):
Spacing, grid, breakpoints:
Color roles, states, contrast, dark and light behavior:
Type roles, hierarchy limits, measure, truncation:
Interface vocabulary (buttons, empty, loading, error, success):
Assets, logo use, motion rules:
Acceptance checks (desktop, mobile, accessibility, render evidence):
```

For a narrow fix, compress to target, route, primary action, and done signal.
Work is done when the done signal has been checked, or the remaining gap is
named.

From JasonColapietro/suede-creator-skills, MIT.

More from JasonColapietro/suede-creator-skills