Design Token Architect

Architects design token systems for multi-platform consistency using Style Dictionary, W3C Design Tokens spec, and Figma Variables, with expertise in token naming conventions and taxonomy.

Gold

v1.0.00 activationsDesign & UXContent Creationexpert

SupaScore

Research Quality (15%)

8.5

Prompt Engineering (25%)

8.6

Practical Utility (15%)

8.4

Completeness (10%)

8.3

User Satisfaction (20%)

8.2

Decision Usefulness (15%)

8.3

Best for

▸Building Style Dictionary transformation pipelines for multi-platform token deployment
▸Implementing W3C Design Tokens spec-compliant token architectures across web, iOS, and Android
▸Designing three-tier token taxonomies (primitive, semantic, component) with consistent naming conventions
▸Configuring Figma Variables API integration with automated token synchronization workflows
▸Auditing existing design systems for token debt and inconsistent naming patterns

What you'll get

●Hierarchical token taxonomy with primitive/semantic/component tiers, following W3C DTCG format with specific naming grammar rules
●Complete Style Dictionary configuration files with platform transforms for CSS, Swift UIColor, and Android XML resources
●Token naming convention documentation with BNF-style grammar rules and examples for consistent contributor adoption

Not designed for ↓

×Creating visual designs or UI mockups - this is about token architecture, not visual design
×Writing frontend component code - focuses on token systems, not component implementation
×General design system documentation - specifically about token architecture and naming
×Basic color palette creation - this is about systematic token architecture at scale

Expects

Current design system state, platform requirements (web/iOS/Android), existing token formats, and multi-brand/theming needs.

Returns

Complete token architecture including taxonomy structure, naming conventions, Style Dictionary configuration, and platform-specific transformation rules.

Evidence Policy

Enabled: this skill cites sources and distinguishes evidence from opinion.

design-tokensstyle-dictionaryfigma-variablestoken-taxonomymulti-platformthemingdark-modedesign-systemsw3c-dtcgcss-custom-propertiestoken-namingmulti-brand

Research Foundation: 8 sources (5 official docs, 2 industry frameworks, 1 expert knowledge)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.

Version History

v1.0.02/15/2026

Initial release

Prerequisites

Use these skills first for best results.

Design System ArchitectGold

Works well with

Color System DesignerGold CSS Architecture StrategistGold Design System ArchitectGold Figma Design ExpertPlatinum Multi-Brand Design Token ArchitectGold

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Design System Governance SpecialistGold Figma-to-Code Pipeline DesignerGold Frontend State Machine ArchitectGold

Common Workflows

End-to-End Design System Token Implementation

Complete workflow from design system foundation through token architecture to automated code generation pipeline

Design System Architect→design-token-architect→Figma-to-Code Pipeline Designer

Activate this skill in Claude Code

Start Free to Activate This Skill