suede-design

What it does

The skill instructs an agent to design Suede interfaces with intentional tokens, color ramps, type scale, component polish, brand decisions, and visual QA for shipped screens. It emphasizes rendering results from current source and a rendered screen, using a specific logo asset, and grounding work in local product and design context files. It also specifies how to conduct visual work (desktop 1280px, mobile 390px), how to capture renders, and how to report preflight and governance signals during major design work.

How it works

• It requires working from current source and a rendered screen rather than memory. It instructs usage of the asset docs/assets/suede-ai-logo-transparent.png and to stop if the file checksum differs or is unavailable. It also notes not to use the passport icon or other marks.
• It prescribes checking local PRODUCT.md and DESIGN.md (or equivalents) and to proceed if missing context but note it and proceed with available context.
• It requires issuing a preflight update with a specific fenced block:

SUEDE_DESIGN_PREFLIGHT: target=<repo-or-folder> surface=<route-or-url> register=<brand|product> context=<pass|partial|none> design_system=<loaded|not_found> git=<pass|skipped:reason> render=<pass|pending|skipped:reason> mutation=open

• For major work, it outlines gate and collaboration usage, including Suede workflow and gates when installed.
• It defines a task router with pathways for small fixes, ambiguous or net-new design, large redesigns, visual system work, and source-to-implementation QA.
• It defines a compact delivery contract structure and notes on using Suede teams and code-review gates for ship-related changes.
• It provides a detailed Suede UI Contract framework covering audience, spacing, color, typography, and motion, plus acceptance checks and a design-laws section (Subject First, One Memorable Move, Color, Typography, Layout, Controls).

When to use it

• Use for design-system tokens, color ramps, type scale, component polish, and brand identity decisions.
• Use for visual QA, accessibility audits, information architecture, and handoff docs in related workflows.
• Use for visual system work: scan current CSS, tokens, components, spacing, shadows, breakpoints, icons, and repetitive UI patterns before proposing changes.
• Use for source-to-implementation QA when a mock or target exists and a rendered implementation needs visual comparison.

What it can touch

• Tools declared: claude-code, codex.
• It references the local assets and repository context and expects rendering and screenshot commands (Playwright) for capture:
  • npx playwright screenshot <url> --viewport-size=1280,900 desktop.png (and mobile/app store variants as noted)

Caveats

• Requires the approved logo file docs/assets/suede-ai-logo-transparent.png from the specified repository and checksum; if unavailable or checksum differs, the mark must be omitted rather than improvised.
• If PRODUCT.md or DESIGN.md are missing on a major surface, note it and proceed with available context.
• Uses specific gate and collaboration workflows that require the suede-workflow-skills package; if not installed, several gates may be unavailable.
• Content emphasizes render-first validation and strict adherence to Suede branding rules; it cautions against drawing or tracing the brand mark and requires per-surface design contracts before major work.