Reusable Token-to-Code Pipelines for Dual-Theme Design Systems
Using Figma token specs and Claude Code build loops to derive production-ready components
Created for one of India’s largest streaming and DTH platforms (under NDA; a flexible drawer component is shown here to demonstrate the methodology).
overview
A scalable design system engine built for a DTH platform
Built a spec-driven generation pipeline in Claude Code that converts hand-built Figma token systems into verified React components.
challenge
Fragmented architecture and code-design drift across multi-product surfaces
An enterprise product ecosystem lacked a unified design system, causing code-design drift, duplicate component variants, and inconsistent thematic styling.
try it
Try it. Reconfigure the drawer and watch it rebuild.
Theme
Content
Body
approach
Automating component generation through closed-loop rules and AI specs
Rather than building components manually one by one, I engineered a reusable spec-and-generation pipeline. By feeding hand-crafted Figma token schemas and strict system constraints CLAUDE.md into Claude Code, the pipeline derives verified React components, Storybook stories, and accessibility checks directly from the design spec.
Token Architecture: Hand-built primitive and semantic tokens in Figma; exported to tokens.json and tokens.css with native light/dark mode support in a single layer.
System Rules CLAUDE.md:
Strict constraints injected into every generation pass—zero hardcoded values, strict token usage, single-file component outputs, and mandatory dual-theme compliance.
Reusable Skill (component-from-spec): Encapsulated design rules into a reusable Claude routine that handles component scaffolding, Storybook story generation, and accessibility checks.
Verification Loop: Visual and token diffing against Figma reference specs, logging deltas directly to the spec until achieving 100% parity.
solution
Replacing static variant sprawl with one flexible API
To demonstrate the pipeline at scale, I consolidated an entire family of static drawers into a single component API. By leveraging flexible props and content slots, this single implementation powers every drawer use case across the application.
| variant | body |
|---|---|
| message | header + buttons |
| confirmation | status icon + header + buttons |
| list | header + cards (icon + title + subtitle) |
| selection | header + description + radio options + buttons |
| edit | header + text input + buttons (keyboard aware) |
| metadata | header + cards |
impact & system governance
Enforcing zero-hardcode quality, built-in accessibility, and repeatable scale
100% Token Compliance: Programmatically verified zero hardcoded colours across generated codebases using automated search scripts.
Reduced Code Surface: Consolidated a full variant family into a single configurable API, significantly lowering governance and maintenance overhead.
In-Contract Accessibility & Theming: Baked native accessibility and dual-theme switching directly into the component spec, ensuring first-pass compliance without retrofits.
Upstream Quality Control: Identified and resolved pre-existing Figma token discrepancies at the build-log stage, catching design debt before it reached production.
Repeatable Architecture: Standardised the spec-and-loop framework across the library, establishing a scalable blueprint for all future component generation.