Jin Wang

Linkedin

Resume

About me

Linkedin

Resume

About me

Jin Wang

Linkedin

Resume

About me

Zero to Design System: Leading DarwinCX's Component Library

From ad-hoc components to a unified system built for scale

The Team

1 PM

3 Designers

1 Developers

My Role

Design Lead

Platform

Desktop

Timeline

8 months

Summary & Impact

DarwinCX had no design system - developers were building custom buttons, forms, and tables from scratch on every features, creating inconsistent UI and slowing team velocity.

As design team lead, I built the company's first shared design system and component library from the ground up, leading two designers and collaborating with one PM and one front-end developer over the course of 8 months.

Grounded in a three-tier token architecture, the system established a single sources of truth between design and engineering, eliminated redundant component work, and laid a scalable foundation for future product growth. Currently 80% complete and actively use by engineering team.

The Problem

Without a shared foundation, every new feature meant reinventing the wheel. Developers made independent UI decisions, resulting in inconsistent components across the product with no single source of truth between design and engineering.

Process

1. Product UI Audit

Started by auditing the existing product UI to identify inconsistencies, redundant patterns, and the most frequently used components across product.

2. Token Architecture

Build a three-tier token structure - primitives, alias, and semantic tokens. To ensure the system could scale across themes and future product needs.

3. Component Build

Prioritized components by usage frequency, starting with the most common (buttons, input fields, tables, dropdown). Built each with defined variants, states, and documentations.

4. Patterns

After core components, moved into compositional patterns, combining components into repeatable UI solutions.

5. Tooling & AI Experipentation

Used a token library alongside Cursor and the Figma MCP server to streamline the design-to-development workflow. As part of exploring AI-assisted development, I used Cursor to build a date picker and time field component from scratch — without prior coding knowledge — and pushed it to Git for engineering code review. This was a first attempt at closing the design-to-code gap directly from the design side.

Current Status

The system is 80% complete, with core components and token architecture shipped and in active use by engineering team.

What's Next

Completing remains components, finalizing pattern documentation, and establishing contribution guideline for long-term governance

Key Learnings

➡️ Figma MCP in Cursor bridge the design-to-dev gap

Once Figma MCP was configured directly in Cursor, designers without coding knowledge could independently work on simple components, reducing back-and-forth with engineering and freeing developers to focus on review rather than build. A small workflow change with a meaningful impact on team efficiency.


➡️ Token Studio + Git makes design changes transparent default

Connecting Token Studio to design system's Git repository meant any token change made in Figma was automatically pushed to codebase. Keep engineers immediately aware of updates without a separate handoff step. It turned what used to be communication overhead into an automated workflow.


➡️ A design system is only as strong as its adoption

Building the design system was the easier half, the harder half was getting people to use it consistently. A design system is essentially a set of rules, and like any ruleset, it only works when the people it's built for understand the value of following it. This shaped how I approached documentation, naming, and cross-functional alignment throughout the project.


➡️ Figma MCP in Cursor bridge the design-to-dev gap

Once Figma MCP was configured directly in Cursor, designers without coding knowledge could independently work on simple components, reducing back-and-forth with engineering and freeing developers to focus on review rather than build. A small workflow change with a meaningful impact on team efficiency.


➡️ Token Studio + Git makes design changes transparent default

Connecting Token Studio to design system's Git repository meant any token change made in Figma was automatically pushed to codebase. Keep engineers immediately aware of updates without a separate handoff step. It turned what used to be communication overhead into an automated workflow.


➡️ A design system is only as strong as its adoption

Building the design system was the easier half, the harder half was getting people to use it consistently. A design system is essentially a set of rules, and like any ruleset, it only works when the people it's built for understand the value of following it. This shaped how I approached documentation, naming, and cross-functional alignment throughout the project.


➡️ Figma MCP in Cursor bridge the design-to-dev gap

Once Figma MCP was configured directly in Cursor, designers without coding knowledge could independently work on simple components, reducing back-and-forth with engineering and freeing developers to focus on review rather than build. A small workflow change with a meaningful impact on team efficiency.


➡️ Token Studio + Git makes design changes transparent default

Connecting Token Studio to design system's Git repository meant any token change made in Figma was automatically pushed to codebase. Keep engineers immediately aware of updates without a separate handoff step. It turned what used to be communication overhead into an automated workflow.


➡️ A design system is only as strong as its adoption

Building the design system was the easier half, the harder half was getting people to use it consistently. A design system is essentially a set of rules, and like any ruleset, it only works when the people it's built for understand the value of following it. This shaped how I approached documentation, naming, and cross-functional alignment throughout the project.


Let’s connect on

Linkedin

Or send me an

Email