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

design-system-architect

Create and maintain design systems with tokens, typography, spacing, and component rules.

Updated Jan 28, 2026
Search Tags:#ui#consistency#accessibility#brand#tokens#ux#design-system
One-click install
npx skills add https://github.com/scanady/nexus-agents --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-agents/tree/main/skills/design-system-architect
Command: npx skills add https://github.com/scanady/nexus-agents --skill design-system-architect-scanady

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to maintain consistency across products due to fragmented visuals. This skill provides a framework to create and maintain a reusable design system with tokens, typography, spacing, shadows, and component rules.

Core Features & Use Cases

  • Token architecture and naming conventions for color, typography, spacing, radii, and shadows
  • Component consistency rules and audit-ready guidance for PR reviews and design reviews
  • Use Case: Define a design system for a SaaS product and audit existing UI for drift, accessibility gaps, and deviation from tokens

Quick Start

Draft the initial design system scope and generate the tokens, typography, and component rules artifacts for your product

Frequently Asked Questions about design-system-architect

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

FAQPage Schema
How do I audit existing product UI for design system drift and accessibility gaps?▼

Audit existing UI for drift and accessibility gaps by applying component consistency rules and design tokens to identify deviations from typography, spacing, and color standards across your product interfaces.

What is the best way to structure design tokens for a SaaS product?▼

Structure design tokens for a SaaS product by defining a token architecture with clear naming conventions for color, typography, spacing, radii, and shadows to maintain brand consistency across multiple projects.

How do I create a reusable design system that supports dark mode?▼

Create a reusable design system with dark mode readiness by defining token architecture and component rules that explicitly include color token mappings for both light and dark visual themes.

Can I use this design system framework for PR reviews and system upgrades?▼

Yes, you can use the design system framework for PR reviews and system upgrades by applying audit-ready component consistency rules and accessibility checks to ensure ongoing brand compliance.

How do I define naming conventions for typography and spacing tokens?▼

Define naming conventions for typography and spacing tokens by establishing a token architecture framework that categorizes visual properties systematically to prevent fragmented visuals and ensure UI consistency.

Related Skills

Explore More Design & Creative Skills→
howdeployhowdeploy
15

design-consultation

Generate a DESIGN.md design system with typography, color, spacing, and motion guidelines.

Community
Advanced
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
DeltaFoundry850DeltaFoundry850

tailwind-css

Automate token-driven Tailwind CSS styling for Next.js 16 and React 19 apps.

Community
Advanced
jorgeochipinti97jorgeochipinti97

brand-identity

Define and enforce brand identity systems for digital products.

Community
Advanced