/suede-design · Design system

Suede AI Design Skills Make the next action clear.

Review an existing flow or UI diff without changing the application, or implement an authorized design using the product's current components, tokens and brand. Start with the user's task and primary action, then examine hierarchy, content, accessibility, state coverage and visual fit. Keep source findings, rendered observations and conversion hypotheses distinct.

View skill folder Install options

Skills Directory: Grade A

"review this flow and the UI diff without editing" /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 review this flow mode: read-only review · user task and primary action evidence: source findings and observed states labeled separately OUTPUT: PRIORITIZED FINDINGS WITH EVIDENCE

Copy just this skill

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

Review the whole task

  • Follow the user's goal through entry, decision, action, feedback and recovery states.
  • Review a UI diff for changed behavior, hierarchy, accessibility and scope without editing the application.
  • Prioritize task completion, clarity and conversion hypotheses before decorative polish.
  • Record source locations and observed states so each finding can be checked.

Build within the product

  • Use the current components, tokens, typography, color roles and approved brand assets.
  • Apply layout, dark mode, motion, responsive behavior and accessibility rules to the authorized surface.
  • Implement a selected mock or screenshot with an available image-to-code capability, or the existing local stack.
  • Compare matched viewport, content, theme and state when checking a design against a render.

Choose the matching task

Review: keep the application unchanged and return findings with proposed fixes. Build or fix: implement the authorized change and verify its behavior. Visual QA: compare the current render with the supplied target and report the observed gaps.

For a development workbench with real components, synthetic stress fixtures and live variants, use Suede AI Component Lab Skills. For a read-only explanation of the existing mechanism, use Suede AI Interface Explain Skills.

Use references deliberately

An optional visual kit can guide an explicitly selected direction. Record its source and reuse rights, then translate its useful principles through the product's existing brand. Keep approved marks, protected assets and factual claims intact.

Inspect local components before considering a third-party source. Review the actual source, license and proposed dependency change before adoption. Availability in a registry alone does not establish suitability.

Know what was verified

Source findings explain what the inspected code supports. Rendered findings describe states actually observed. If no browser or render is available, report that limitation and leave visual checks unverified. Source inspection alone never establishes a rendered visual pass.

A review can identify friction and suggest a conversion hypothesis. Claim a measured improvement only when a valid before-and-after measurement supports it.

Example review request

Use $suede-design for a read-only whole-flow review of this checkout and its UI diff. Prioritize the user's task, primary action, error recovery, hierarchy and accessibility. Preserve the current brand and scope. Return source-backed findings, rendered observations and proposed fixes separately. Do not change application files or call unobserved states verified.

Related skills

Suede AI Component Lab Skills builds state workbenches. Suede AI Interface Explain Skills explains mechanisms. Suede AI Copy Skills handles copy without layout. Suede AI Visibility Grader Skills grades public-page findability and promotion readiness.

Install this skill

It ships inside the Suede AI 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.

terminal · install the pack
Claude Code 
$ /plugin marketplace add JasonColapietro/suede-creator-skills
$ /plugin install suede-skills@suede
Codex 
$ codex plugin add suede-skills@suede-codex

Cursor, Copilot, and Windsurf install through the skills CLI. Every path is on the install page, and every folder is readable first on GitHub.

Proof is part of the release.

First install takes two commands. After the marketplace is added, install is one. Every skill is plain Markdown.

$ /plugin marketplace add JasonColapietro/suede-creator-skills → /plugin install suede-skills@suede All install paths