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.