Nick Du
Design Engineer · Design Director
Nineteen years designing consumer and enterprise products at Tencent and ByteDance, and twenty five years writing code. I build design systems that both people and models can use.
About me.
WORKED AT
Over 19 years I’ve learned that great design isn’t just about shipping features, it’s about building systems that empower millions while growing the people who create them. From leading 300+ designers across three continents at ByteDance to designing products that serve over 500M daily users.
Years of experience
Years of leadership
DAU across 10+ products
ARR delivered at Lark
What I do.
1. Design systems that models can use
- Component libraries in React, driven by props rather than variants
- AI readable schemas so a model can drive a component through its properties
- Token and theming architecture, with contrast enforced by algorithm
- MCP servers that give agents an address for every component
- Memory layers that carry the reasoning behind a decision, not just the decision
2. Building it, not specifying it
- Front end in React and TypeScript
- Back end in Python, FastAPI, PostgreSQL, self hosted
- Canvas design, custom code components, Server API
- Design to code with no translation step in between
3. Design leadership
- Org design and scaling, 7 to 300 designers
- Career frameworks and dual track growth
- Design strategy and operating model
- Multi brand systems across markets
Recent work.
Design systems were built for designers and developers. Io is my attempt at one a model can read too — every component addressable by a URL, the whole catalogue published as a machine-readable manifest, colour and type resolved from whatever project it lands in.
Stack.
React · TypeScript
The component layer. Everything runs on props, not on enumerated variants.
Framer · Figma · Design Canvas
Where it ships. A canvas designers can work in, real React underneath.
Python · FastAPI · PostgreSQL
Services I run myself. Colour generation, and the memory the models read from.
Claude · OpenAI
The models that build with the system. Build skills in production.
MCP
How agents reach the system, and how skills get distributed to a team.
OKLCH
Colour that stays readable in both modes, decided by algorithm rather than by eye.
Experience.
VP of Design
Shanda Group
2023 - Present
Overseeing UX at group level. Recent launches include Tanka.ai, Discoverative.ai, Evermind.ai and the Chen Institute.
Founding Designer
Wanderboat AI
2023
Designed an AI-native travel assistant that grew to 4M monthly users in eight months.
VP of Design, Lark
ByteDance
2021 - 2023
Scaled the design organisation from 100 to 300+ people across three regions. A unified design system cut time-to-market by 40%; Lark reached $100M ARR and a 4.8 rating across 127 countries.
Design Director, D2 Design Studio
Tencent
2006 - 2021
Led 10+ B2C and B2B products past 100M DAU, and built the Care Design System — Tencent’s first vertical-specific design system.
Io system Intro
Tell me about this design system, what it is and how it's put together.
Which component
Users need to pick several tags from a long list. Which component, and why not the dropdown?
Generate a theme
Generate a theme for a SaaS product. Pick a colour you would not expect to see in this category.
The memory layer
How is the memory service built, and what does it actually store?
Writing
What have you written about design systems and AI? Show me the pieces.
Color system
How does the colour system decide contrast?
Nick Du
Design Engineer · Design Director
Nineteen years designing consumer and enterprise products at Tencent and ByteDance, and twenty five years writing code. I build design systems that both people and models can use.
About me.
WORKED AT
Over 19 years I’ve learned that great design isn’t just about shipping features, it’s about building systems that empower millions while growing the people who create them. From leading 300+ designers across three continents at ByteDance to designing products that serve over 500M daily users.
Years of experience
Years of leadership
DAU across 10+ products
ARR delivered at Lark
What I do.
1. Design systems that models can use
- Component libraries in React, driven by props rather than variants
- AI readable schemas so a model can drive a component through its properties
- Token and theming architecture, with contrast enforced by algorithm
- MCP servers that give agents an address for every component
- Memory layers that carry the reasoning behind a decision, not just the decision
2. Building it, not specifying it
- Front end in React and TypeScript
- Back end in Python, FastAPI, PostgreSQL, self hosted
- Canvas design, custom code components, Server API
- Design to code with no translation step in between
3. Design leadership
- Org design and scaling, 7 to 300 designers
- Career frameworks and dual track growth
- Design strategy and operating model
- Multi brand systems across markets
Recent work.
Design systems were built for designers and developers. Io is my attempt at one a model can read too — every component addressable by a URL, the whole catalogue published as a machine-readable manifest, colour and type resolved from whatever project it lands in.
Stack.
React · TypeScript
The component layer. Everything runs on props, not on enumerated variants.
Framer · Figma · Design Canvas
Where it ships. A canvas designers can work in, real React underneath.
Python · FastAPI · PostgreSQL
Services I run myself. Colour generation, and the memory the models read from.
Claude · OpenAI
The models that build with the system. Build skills in production.
MCP
How agents reach the system, and how skills get distributed to a team.
OKLCH
Colour that stays readable in both modes, decided by algorithm rather than by eye.
Experience.
VP of Design
Shanda Group
2023 - Present
Overseeing UX at group level. Recent launches include Tanka.ai, Discoverative.ai, Evermind.ai and the Chen Institute.
Founding Designer
Wanderboat AI
2023
Designed an AI-native travel assistant that grew to 4M monthly users in eight months.
VP of Design, Lark
ByteDance
2021 - 2023
Scaled the design organisation from 100 to 300+ people across three regions. A unified design system cut time-to-market by 40%; Lark reached $100M ARR and a 4.8 rating across 127 countries.
Design Director, D2 Design Studio
Tencent
2006 - 2021
Led 10+ B2C and B2B products past 100M DAU, and built the Care Design System — Tencent’s first vertical-specific design system.
Nick Du
Design Engineer · Design Director
Nineteen years designing consumer and enterprise products at Tencent and ByteDance, and twenty five years writing code. I build design systems that both people and models can use.
About me.
WORKED AT
Over 19 years I’ve learned that great design isn’t just about shipping features, it’s about building systems that empower millions while growing the people who create them. From leading 300+ designers across three continents at ByteDance to designing products that serve over 500M daily users.
Years of experience
Years of leadership
DAU across 10+ products
ARR delivered at Lark
What I do.
1. Design systems that models can use
- Component libraries in React, driven by props rather than variants
- AI readable schemas so a model can drive a component through its properties
- Token and theming architecture, with contrast enforced by algorithm
- MCP servers that give agents an address for every component
- Memory layers that carry the reasoning behind a decision, not just the decision
2. Building it, not specifying it
- Front end in React and TypeScript
- Back end in Python, FastAPI, PostgreSQL, self hosted
- Canvas design, custom code components, Server API
- Design to code with no translation step in between
3. Design leadership
- Org design and scaling, 7 to 300 designers
- Career frameworks and dual track growth
- Design strategy and operating model
- Multi brand systems across markets
Recent work.
Design systems were built for designers and developers. Io is my attempt at one a model can read too — every component addressable by a URL, the whole catalogue published as a machine-readable manifest, colour and type resolved from whatever project it lands in.
Stack.
React · TypeScript
The component layer. Everything runs on props, not on enumerated variants.
Framer · Figma · Design Canvas
Where it ships. A canvas designers can work in, real React underneath.
Python · FastAPI · PostgreSQL
Services I run myself. Colour generation, and the memory the models read from.
Claude · OpenAI
The models that build with the system. Build skills in production.
MCP
How agents reach the system, and how skills get distributed to a team.
OKLCH
Colour that stays readable in both modes, decided by algorithm rather than by eye.
Experience.
VP of Design
Shanda Group
2023 - Present
Overseeing UX at group level. Recent launches include Tanka.ai, Discoverative.ai, Evermind.ai and the Chen Institute.
Founding Designer
Wanderboat AI
2023
Designed an AI-native travel assistant that grew to 4M monthly users in eight months.
VP of Design, Lark
ByteDance
2021 - 2023
Scaled the design organisation from 100 to 300+ people across three regions. A unified design system cut time-to-market by 40%; Lark reached $100M ARR and a 4.8 rating across 127 countries.
Design Director, D2 Design Studio
Tencent
2006 - 2021
Led 10+ B2C and B2B products past 100M DAU, and built the Care Design System — Tencent’s first vertical-specific design system.
Io system Intro
Tell me about this design system, what it is and how it's put together.
Which component
Users need to pick several tags from a long list. Which component, and why not the dropdown?
Generate a theme
Generate a theme for a SaaS product. Pick a colour you would not expect to see in this category.
The memory layer
How is the memory service built, and what does it actually store?
Writing
What have you written about design systems and AI? Show me the pieces.
Color system
How does the colour system decide contrast?