skills.rest
scanady
scanadyCOMMUNITY
Explore all skills by this author →
GitHub

design-system-architect

Create and audit design systems with tokens, typography scales, and component consistency rules.

Updated Jan 28, 2026
Search Tags:#accessibility#design system#design tokens#ui audit#typography scale#component consistency#styling review
One-click install
npx skills add https://github.com/scanady/nexus-skills --skill design-system-architect-scanady
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-architect
Source: https://github.com/scanady/nexus-skills/tree/main/skills/design-system-architect
Command: npx skills add https://github.com/scanady/nexus-skills --skill design-system-architect-scanady

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Product interfaces drift into inconsistent styling, one-off components, and generic AI-generated visuals when teams lack a defined design system. This Skill establishes reusable visual rules and audits existing UIs for consistency, accessibility, and distinctiveness. ## Core Features & Use Cases - System Generation: Define design tokens, color palettes, typography scales, spacing systems, and component rules packaged as DESIGN.md, design-tokens.json, and preview artifacts. - UI Audits and PR Reviews: Score existing interfaces across ten dimensions including color discipline, state design, and accessibility, with prioritized findings and fixes. - Slop Detection: Identify generic AI-era patterns like decorative gradients and glassmorphism, then provide concrete replacement directions. - Use Case: A team reviewing a styling pull request uses the audit mode to catch raw hex values, inconsistent spacing, and missing focus states before merge. ## Quick Start Ask the agent to audit your application's UI for design consistency and produce a scored report with prioritized fixes.

Frequently Asked Questions about design-system-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for a new product?▼

Use the generate mode to define a visual posture based on product context and brand, then produce design tokens, typography and spacing scales, and component rules. Outputs include DESIGN.md, design-tokens.json, and a preview artifact.

How do I audit an existing UI for design consistency?▼

Run the audit mode against your screens, code, or screenshots. It scores ten dimensions including color discipline, typography hierarchy, state design, and accessibility, then lists findings with severity, evidence, and prioritized fixes.

Can this review styling pull requests for design drift?▼

Yes, the review mode examines styling diffs for regressions in consistency, accessibility, and system drift. It flags raw hex values, one-off component styling, and token naming inconsistencies, citing only files actually inspected.

What are design tokens and how are they delivered?▼

Design tokens are named reusable values for color, typography, spacing, radius, and elevation. The skill delivers them as a design-tokens.json file with semantic usage guidance, separating token definitions from component-level overrides.

When should I not use a design system audit?▼

Avoid audits when no real UI artifact exists to inspect, since findings require actual screens, code, or diffs. For building full screens or coded flows, define the system first then hand implementation to an application UX skill.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
mgd34msumgd34msu
4

css-variables

Implement and manage CSS custom properties for theming and runtime customization.

Community
Intermediate
oakossoakoss
14

ux-designer

Designs user experiences and interfaces with WCAG 2.2 AA compliance.

Official
Intermediate
TechsioCZTechsioCZ
2

app-ui-kit-audit

Audit app UIs for @techsio/ui-kit adoption gaps and token-first violations.

Official
Intermediate