Design System & UI Component Architect

Design System & UI Component Architect is a premium product-design, UI architecture, token-system, component-library, accessibility, design-governance, and frontend handoff skill for teams that need to turn inconsistent interfaces into a scalable system.

It can build a design system from

Existing Digital Products Brand Guidelines Screenshots Mockups Legacy Interfaces Figma Libraries Component Inventories SaaS Products Mobile Apps Enterprise Software Dashboards Admin Panels Ecommerce Products Marketplaces Fintech Interfaces EdTech Products Health Applications Multi-Brand Ecosystems Cross-Platform Products

The skill is designed to solve common problems such as

Too Many Button Styles Inconsistent Spacing Typography Drift Hard-Coded Colors Duplicated Components Missing Interaction States Missing Focus States Inconsistent Tables Inconsistent Navigation Inconsistent Error Handling Dark Mode Built Through Simple Color Inversion Arbitrary Border Radii Uncontrolled Shadows Figma and Production Mismatches Accessibility Added Too Late Feature Teams Creating Their Own Components Uncontrolled Variants No Deprecation Strategy No Contribution Workflow No Design-System Ownership No Token Architecture No Migration Plan

The skill treats a design system as an operational product framework rather than a decorative component gallery.

Its architecture is

Brand

• Foundations
• Primitive Tokens
• Semantic Tokens
• Component Tokens
• Core Components
• Product Patterns
• Templates
• Product Experiences
• Governance
• Design QA

The skill begins with an audit.

It identifies

Existing Components Duplicate Components Near-Duplicate Components Visual Drift Behavior Drift Missing States Accessibility Gaps Off-Token Values One-Off Styles Legacy Patterns Product-Specific Components Candidates for Consolidation Candidates for Deprecation

Each component can be classified as

Keep Merge Split Rename Rebuild Deprecate Core System Product-Specific Extension

The skill can assess design-system maturity.

Level 0 — Unsystematic

One-off styling, inconsistent components, no shared foundation.

Level 1 — Shared Styles

Shared colors and typography exist, but system behavior is limited.

Level 2 — Component Library

Reusable components exist, but governance and tokenization remain incomplete.

Level 3 — Tokenized Design System

Semantic tokens, component states, responsive rules, accessibility, and documentation exist.

Level 4 — Governed Multi-Product System

Contribution workflows, versioning, deprecation, multi-theme support, design-code parity, and controlled product extensions exist.

The skill creates layered token architecture.

Primitive Tokens

Raw values.

Examples

color.blue.600 space.16 radius.8 font.size.16

Semantic Tokens

Purpose-based values.

Examples

color.text.primary color.surface.default color.action.primary color.border.subtle color.feedback.error

Component Tokens

Component-specific values only where necessary.

Examples

button.primary.background.default input.border.focus table.row.background.selected

The preferred architecture is

Primitive

• Semantic
• Component

Product interfaces should use semantic meaning rather than raw visual values whenever possible.

The skill creates semantic naming conventions.

Strong

color.action.primary.hover

Weak

blueButtonHover

The skill separates brand colors from product roles.

A marketing brand palette may contain

Signature Colors Editorial Colors Gradients Decorative Accents

but application UI needs semantic roles such as

Primary Action Secondary Action Focus Error Warning Success Informational Surface Border Text

The skill prevents a brand color from being reused indiscriminately for every action, status, and decorative element.

The color system can define

Brand

Primary Secondary Accent

Text

Primary Secondary Muted Inverse Disabled Link

Surface

Canvas Default Subtle Raised Overlay Inverse

Border

Subtle Default Strong Focus Error

Action

Primary Secondary Tertiary Destructive

Feedback

Success Warning Error Information

Data Visualization

Categorical Sequential Diverging

Chart colors can remain separate from action colors to avoid semantic confusion.

The skill can build tonal ramps only where the system actually requires them.

Dark mode is designed semantically rather than through mechanical inversion.

Dark-mode review can include

Surfaces Text Borders Elevation Focus Status Charts Disabled States Illustrations

High-contrast mode can define

Stronger Borders Explicit Focus Reduced Decorative Surfaces Non-Color Status Communication Improved Data Visualization Differentiation

The skill supports multi-brand architectures.

Possible structure

Core Foundations

• Brand Theme
• Product Semantic Layer
• Component Layer

This allows shared behavior while preserving brand variation.

The skill defines complete typography architecture.

It can specify

Font Family Fallback Stack Weights Type Scale Line Heights Tracking Paragraph Spacing Maximum Reading Width Responsive Adjustments

Semantic typography roles may include

Display Page Title Section Title Card Title Body Large Body Body Small Label Helper Metadata Button Code Numeric Display

The skill avoids excessively granular type scales with nearly identical values.

Text scaling and accessibility are incorporated into the foundation.

Mobile or accessibility-sensitive interfaces should support

Wrapping Reflow Larger Text Expanded Controls Dynamic Type or Equivalent Scaling

The skill creates systematic spacing.

Example scale

4 8 12 16 24 32 48 64

or a denser scale when the product requires it.

Semantic spacing can distinguish

Inline Spacing Control Spacing Component Spacing Group Spacing Section Spacing Layout Spacing

The skill supports density modes.

Comfortable

Suitable for consumer or lower-density interfaces.

Compact

Suitable for enterprise and data-heavy workflows.

Density should be tokenized where possible rather than creating duplicated component libraries.

The skill defines grid systems.

Possible decisions include

Container Widths Columns Gutters Page Margins Nested Grids Breakpoints Maximum Width

Responsive grids may use patterns such as

Mobile — 4 columns Tablet — 8 columns Desktop — 12 columns

but the system should follow actual product requirements rather than arbitrary conventions.

Breakpoints should respond to content and layout behavior, not specific device brand names.

The skill creates controlled radius systems.

Example

0 4 8 12 16 Full/Pill

Potential semantic roles

Control Card Dialog Pill

It avoids arbitrary corner-radius variation.

The skill creates border systems.

Potential roles

Subtle Default Strong Focus Error Selected

The skill creates elevation architecture.

Potential levels

Base Raised Dropdown Popover Modal Toast

Elevation communicates hierarchy rather than decoration.

The skill creates controlled shadow systems and can account for dark-mode differences.

It creates z-index architecture to prevent arbitrary escalation.

Potential layers

Base Sticky Dropdown Popover Modal Toast Critical Overlay

The skill creates iconography standards.

It can define

Icon Family Stroke Style Fill Style Sizes Alignment Optical Adjustments Platform Variants Accessible Naming Rules

The skill creates motion systems.

Potential dimensions include

Duration Easing Fade Scale Slide Expansion Collapse Navigation Transition

Motion should communicate

Causality State Change Hierarchy Progress

It should not delay task completion.

Reduced-motion alternatives are defined.

The skill creates a unified focus system.

Focus behavior applies consistently to

Buttons Inputs Links Tabs Menu Items Custom Controls Table Actions

The skill performs component architecture systematically.

Every component can define

Purpose Anatomy Variants Sizes States Content Rules Behavior Responsive Rules Accessibility Do / Don't Implementation Notes

Before creating a new component, the skill asks

Is this truly a new pattern? Can an existing component solve it? Would a variant be enough? Would that variant create long-term complexity? Is the pattern domain-specific rather than universal?

The skill prevents uncontrolled variant proliferation.

Strong variants represent meaningful semantic differences.

Example

Primary Secondary Tertiary Destructive

Weak variants represent accidental visual differences.

Example

Blue Dark Blue Light Blue Blue With Shadow Blue Rounded

The skill can define a complete button system.

Possible variants

Primary Secondary Tertiary Destructive Icon Button

Possible sizes

Small Medium Large

Possible states

Default Hover Pressed Focus Disabled Loading

Rules can include

Keep one dominant primary action within a local context where possible. Do not use destructive styling for ordinary secondary actions. Icon-only buttons require accessible names. Loading states should preserve layout stability where practical.

The skill creates link systems.

Possible types

Inline Link Standalone Link Navigation Link Destructive Link

The skill creates complete input systems.

Components may include

Text Input Textarea Password Search Number Email Phone

Url

Input anatomy can define

Label Required Indicator Control Prefix Suffix Helper Error Counter

Input states can include

Default Hover Focus Filled Disabled Read-Only Error Success

Persistent labels are preferred.

Placeholder text should not function as the only label.

The skill defines selects, dropdowns, and comboboxes.

It considers

Search Keyboard Interaction Clear Behavior Groups Selected Values Disabled States Errors

The skill avoids custom interaction models that reduce keyboard accessibility.

The skill defines

Checkboxes for independent choices. Radio buttons for one selection among visible alternatives. Switches for immediate binary settings. Segmented controls for compact mode switching.

It avoids using switches for actions that still require a separate Save action unless that behavior is clearly communicated.

The skill creates date and time picker rules.

It can define

Locale Timezone Formatting Allowed Ranges Keyboard Alternatives Desktop Behavior Mobile Behavior

The skill creates search-field architecture.

Potential states include

Idle Focused Loading Suggestions Results No Results Error

The skill creates form systems.

It defines

Field Groups Vertical Rhythm Section Grouping Single vs Multi-Column Layout Responsive Collapse Validation Error Summary Recovery Success

It avoids unnecessary multi-column forms.

The skill creates card systems.

Possible variants include

Static Interactive Selectable Summary Metric Media

It avoids "card for everything" interface architecture.

Card anatomy can include

Header Title Subtitle Content Status Actions Footer

The skill treats tables as a dedicated system rather than a generic card variant.

Table architecture can define

Header Rows Columns Sorting Filtering Selection Bulk Actions Row Actions Pagination Sticky Behavior Density Empty State Loading Error Responsive Behavior

Table tokens can include

Row Height Header Height Cell Padding Selected Background Hover Background Borders Sticky Shadow

Column rules can define

Text Alignment Numeric Alignment Truncation Wrapping Priority Minimum Width Maximum Width

Responsive table strategies may include

Priority Columns Stacked Records Expandable Detail Horizontal Scroll Where Necessary

The skill creates data-visualization systems.

Potential areas include

Categorical Colors Sequential Colors Diverging Colors Axes Gridlines Tooltips Legends Annotations Accessible Alternatives

Chart palettes should not casually reuse interaction colors.

The skill creates navigation systems.

Potential components include

Top Navigation Sidebar Bottom Navigation Tabs Breadcrumbs Command Palette Pagination

Sidebar architecture can define

Expanded Width Collapsed Width Groups Active State Badges Nested Items Scrolling Mobile Adaptation

Top navigation can define

Logo Workspace Search Primary Actions Notifications Account

Tabs can define

Default Hover Focus Selected Disabled Overflow Responsive Behavior

Breadcrumbs can define

Separator Truncation Current Item Overflow

Pagination can define

Previous / Next Page Numbers Rows Per Page Mobile Adaptation Accessibility Labels

The skill creates a feedback system.

Components may include

Toast Snackbar Banner Inline Alert Notification Status Badge Progress Skeleton

Alert variants may include

Informational Success Warning Error Critical Where Required

Alert anatomy can define

Icon Title Message Action Dismiss Persistence

The skill avoids using transient toast notifications as the only confirmation for critical outcomes.

Persistent banners are reserved for appropriate product-wide states rather than becoming permanent clutter.

The skill creates badge and status architecture.

Status should not rely on color alone.

The skill creates tooltip and popover systems.

Tooltips supplement information.

They should not contain essential instructions required for task completion.

Popovers can support

Contextual Detail Short Action Groups Compact Controls

The skill creates menu architecture.

Menu items can define

Label Icon Shortcut Destructive State Disabled State Grouping Separators

The skill creates modal/dialog systems.

Dialog anatomy can include

Title Body Primary Action Secondary Action Close Destructive Variant

Behavior can define

Focus Trap Scrolling Keyboard Responsive Adaptation

Nested modals should be avoided.

The skill creates drawer and side-sheet systems for

Quick Details Editing Filtering Inspectors

It can define width, closing behavior, action placement, and responsive adaptation.

For mobile products, the skill can create bottom-sheet behavior.

It can define

Grabber Snap Points Where Appropriate Safe Areas Actions Keyboard Interaction

The skill creates a complete empty-state system.

Types may include

First Use Filtered Empty Completed Permission Restricted Error Empty

Anatomy can include

Optional Illustration Title Explanation Primary Action Secondary Action

The skill creates loading systems.

Possible patterns include

Spinner Skeleton Progress Bar Determinate Progress Indeterminate Progress Local Loading Full-Screen Loading

Skeletons are recommended only when content structure is predictable.

The skill creates error systems.

Potential levels include

Field Error Component Error Module Error Page Error Network Error Permission Error Destructive Failure

The skill creates success systems.

Potential patterns include

Inline Success Toast Dedicated Confirmation Receipt Completed State

The skill creates permission-state architecture.

Potential strategies

Hidden Disabled + Explanation Access Request Restricted Page

The skill creates supporting components such as

Avatar Chip Tag Accordion Stepper File Upload Media Components

File-upload systems can define

Idle Drag Selected Uploading Success Error Retry Remove

The skill distinguishes components from product patterns.

Patterns combine multiple components into repeatable workflows.

Potential patterns include

Application Shell Dashboard Settings Record Detail Form Checkout Onboarding Search Results Master-Detail Split Pane

The application shell can define

Global Navigation Content Area Utility Area Responsive Behavior Loading System Status

Dashboard patterns can define

Page Header Controls KPI Zone Task Zone Analytics Zone Alerts Responsive Collapse

Settings patterns can define

Category Navigation Section Layout Form Hierarchy Save Behavior Destructive Section

Record-detail patterns can define

Identity Status Primary Actions Tabs or Sections Activity Metadata

The skill creates responsive rules.

Mobile considerations include

Safe Areas Touch Targets Bottom Navigation Sheets Keyboard Mobile Density Mobile Tables Mobile Filters

Desktop considerations include

Hover Keyboard Focus Wide Layouts Sidebars High Data Density Resizable Panes

Tablet considerations include

Split View Multi-Pane Adaptive Navigation Touch and Keyboard Interaction

A responsive component matrix can define

Mobile Tablet Desktop Large Desktop

The skill supports cross-platform design systems.

Shared layers may include

Brand Semantic Colors Terminology Information Hierarchy Product Rules

Platform-specific adaptation may include

Navigation Pickers Sheets Back Behavior System Prompts Typography Metrics Gestures

The skill builds accessibility into components rather than adding it later.

Every component can define

Semantic Role Accessible Name Keyboard Behavior Focus Behavior Touch Target Contrast Text Scaling Reduced Motion Error Association Screen-Reader Announcement

The skill can perform WCAG-oriented checks for

Contrast Focus Visibility Keyboard Access Labels Headings Status Messages Errors Target Sizes Color Independence

It does not claim formal accessibility compliance without implementation testing.

The skill incorporates localization.

It can account for

Long Translations Pluralization Date Formats Number Formats Currencies

Rtl

Wrapping Truncation

The skill creates content-design rules.

Potential standards include

Capitalization Punctuation CTA Style Terminology Error Voice Status Language Empty-State Voice

A product terminology glossary can prevent inconsistent terms from appearing across different screens.

The skill creates naming conventions.

Possible design naming

Component / Variant / State / Size

Possible token naming

category.role.state

Design and code names should align where practical.

The skill creates Figma architecture.

Potential library structure

Foundations Tokens Components Patterns Templates Examples Deprecated

Each component documentation page can include

Purpose Anatomy Variants States Behavior Accessibility Content Rules Responsive Rules Examples Do / Don't

Where supported, Figma variables can map

Primitive Tokens Semantic Tokens Themes Modes

The skill creates design-to-code parity architecture.

Recommended model

Design Component ↔ Code Component ↔ Documentation ↔ Token Source

Names should not drift unnecessarily between design and engineering systems.

Frontend token outputs may be prepared conceptually for

Json

CSS Variables TypeScript Platform-Specific Token Files

The implementation format should follow the user's engineering environment.

The skill creates Design QA processes.

Checks can identify

Off-Token Colors Off-Token Spacing Unsupported Typography Unsupported Radii One-Off Shadows Invalid Variants Missing Focus Missing Error State Inconsistent Icon Sizes Component Drift

A component consistency check can define

Expected Pattern Observed Pattern Deviation Severity Required Action

A token consistency check can define

Property Expected Token Observed Value Off-Token Status Recommendation

The skill performs variant audits.

It can define

Current Variants Duplicate Variants Missing Variants Deprecated Variants Recommended Final Set

The skill creates governance because design systems degrade without ownership.

Governance can define

Ownership Contribution Review Approval Documentation Release Versioning Deprecation Migration Quality Assurance

Possible ownership roles include

Design-System Lead Design Owner Engineering Owner Accessibility Reviewer Content Reviewer Product Representative

A contribution workflow can follow

Need Identified

• Existing Component Check
• Proposal
• Design Review
• Accessibility Review
• Engineering Review
• Implementation
• Documentation
• Release

New component proposals can require

Problem User Need Existing Workaround Proposed Anatomy Variants States Accessibility Responsive Behavior Product Usage Maintenance Cost

The skill discourages adding new variants just because one screen needs a visual exception.

Legitimate exceptions can be documented with

Reason Scope Owner Review Date Expiration Where Appropriate

The skill creates deprecation strategy.

Deprecated components can define

Replacement Migration Guidance Removal Timeline Where Appropriate

The skill creates versioning and release strategy.

Potential mechanisms include

Semantic Versioning Release Notes Component Changelog

Breaking changes may include

Removed Variant Changed Prop Changed Behavior Changed Spacing Renamed Token

Migration impact should be documented.

Release notes can include

Added Changed Deprecated Removed Fixed Accessibility

The skill can define system metrics such as

Component Adoption Off-System Components Token Adoption Duplicate Variants Accessibility Issues Design-Code Parity Migration Progress

It does not invent metric values.

The skill creates migration strategies for legacy products.

Possible phases

Phase 1 — Audit Phase 2 — Foundations and Tokens Phase 3 — Core Components Phase 4 — High-Traffic Screens Phase 5 — Product Patterns Phase 6 — Deprecation Cleanup Phase 7 — Governance Phase 8 — QA Automation

Migration can prioritize

High-Use Components High-Risk Inconsistencies Accessibility Problems Duplicate Components Components Blocking Redesign

The skill supports brownfield systems.

It does not require complete product rewrites.

Possible strategies include

Compatibility Layers Phased Token Adoption Component Wrappers Incremental Replacement

For greenfield systems

Foundations First Core Components Second Patterns Third Product Screens Fourth

The skill supports multi-product ecosystems.

Recommended model

Core System

• Product Extensions
• Brand Themes

Product-specific components remain separate where they encode real domain behavior.

Examples include

Trading Ticket Medical Result Card AI Prompt Composer Order Fulfillment Row Learning Progress Card

The skill prevents domain-specific complexity from contaminating universal components.

Supported operating modes include

Full Design System Architect

Creates foundations, tokens, components, patterns, responsiveness, accessibility, governance, and migration.

Screenshot-to-System Reconstructor

Extracts repeated visual patterns from screenshots and converts them into a provisional system while labeling inferred values.

Design Token Architect

Focuses on primitive, semantic, component, theme, density, and platform tokens.

UI Component Library Architect

Focuses on reusable controls, navigation, data components, feedback, overlays, and interaction states.

Design-System Consistency Auditor

Finds duplicated components, off-token styling, missing states, and UI drift.

Figma Library Architect

Structures variables, pages, naming, variants, documentation, and contribution workflows.

Design-to-Code System Architect

Maps UI foundations and components to frontend architecture.

Multi-Brand Design System Architect

Creates shared product architecture with theme-level brand adaptation.

Accessibility-First Design System Architect

Builds focus, contrast, keyboard, semantics, text scaling, and reduced-motion requirements into the system.

Legacy UI Migration Architect

Creates phased migration from fragmented UI to standardized components and tokens.

The core commercial promise is: transform scattered UI decisions into a scalable design system with semantic foundations, reusable components, complete states, responsive rules, accessibility, design-code alignment, and governance so the product can grow without continuously accumulating visual and interaction inconsistency.