Full-Stack Design System & Workflow Manager

Inconsistent Design Systems & Synchronization Challenges

In modern web and mobile development, teams frequently grapple with the inconsistency of design systems across projects. A color token like color.primary defined in Figma by designers might be hardcoded as #3498db in the frontend codebase. Upon launching dark mode, the component library's styles then need to be manually synchronized to the iOS and Android clients. As a product grows to 3-5 sub-applications, maintaining multiple sets of design assets and ensuring a cohesive cross-platform experience becomes a persistent drain on engineering resources.

How It Works: From Tokens to Cross-Platform Implementation

This skill presents a structured engineering solution to the above problem, with Design Tokens at its core to build an executable design system.

1. Tokenization & Standardization: Adhering to the W3C Design Tokens Community Group specification, it defines colors, typography, spacing, radii, and shadows using semantic naming (e.g., spacing.lg) instead of raw values. This establishes the single source of truth for all subsequent processes.
2. Automated Multi-Platform Output: This is the critical step. From a single set of token source files, it generates configurations tailored to different tech stacks:
   • For web projects: CSS Custom Properties under :root (e.g., --color-primary).
   • For Tailwind projects: Extensions for theme.extend in tailwind.config.js.
   • For mobile apps: Flutter ThemeData, iOS UIColor extensions, or Android colors.xml.
3. Integrated Design Workflow: The skill can output JSON compatible with Figma's design tokens plugins, allowing designers to apply these tokens directly within their tools, achieving source parity between design and code. It also leverages the built-in references/ui-ux-data/ containing curated palettes, font pairings, and UX rules to support early-stage design decisions.
4. Comprehensive Theme & State Coverage: It mandates that theme variants (light/dark/high-contrast) be supported architecturally, providing complete token structures and CSS variable implementation examples. At the component level, it requires specifications to cover empty, loading, and error states, along with keyboard navigation and focus states, to ensure WCAG AA/AAA accessibility compliance.

Scope & Considerations

This is a tool for systematic design management, not an on-the-fly "design idea generator." It is best suited for product teams already operating in—or planning to enter—a phase of standardization and multi-project collaboration. Its full workflow may feel overly formal for scenarios focused on rapidly prototyping a single page's visual concept. While its "Design Style Mastery" section provides references and starting points, successful implementation ultimately relies on designers' judgment and iteration based on specific business contexts.