Nick Du
Founding Designer · Design Systems · Design Engineering
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 built products and the systems underneath them, across markets and languages. At Lark, one design system across 30+ product teams and 9 platforms, and the brand refresh that took Lark international. At Tencent, products serving 100M+ daily users. Now at Shanda, a design system that designers and AI agents both build with, shipping AI products to the US, China, and Japan. I design and ship in code, so what I draw is what ships.
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
2024 - Present
Overseeing UX at group level. Recent launches include Tanka.ai, Discoverative.ai, Evermind.ai and the Chen Institute.
Founding Designer
Wanderboat AI
2023 - 2024
Designed an AI-native travel assistant that grew to 3M 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.
Lark Design, 2021 to 2023
VP of Design, ByteDance (Lark). The brand, principles, and design system behind Lark's move to v5 and international markets.
Designing for Users When the Traffic Floods In
Under 1% of paid social visitors reached the leaderboard. 85% of LinkedIn visitors did, even on mobile. How I designed and built for the right users, solo, with a schema-driven design system.
I Don't Want AI to Auto-Log My Life
Every AI product is racing to remember everything about you. Forgetting is a feature. Mine remembers two things, what worked and what burned me, and refuses to guess at anything in between.
AI Design System - Part 2 Typography for Taste
Four named text styles. Two visible sizes. A tidy rounding rule had quietly flattened the hierarchy while every number still looked correct. On specimen pages, and why AI is a generous proposer and a terrible pruner.
Design Notes on Japanese and English-Speaking Users
A cartoon assistant users liked converted no one. On the Japanese site, the terms-of-service page ranked ninth among all pages visited. Two markets on one design system — what changed wasn't the structure, but what counts as evidence.
Who is Nick
Twenty-five years writing code, nineteen years designing. I never picked a side, and not by accident. Then the handoff stopped going to people and started going to a model, so I built the thing my team had no engineer to build.
AI Design System - Part 1 Color
Design and code never lined up because the bilingual party in the middle didn't exist. Now it does. Layered tokens, OKLCH, and why I cut the agent's vocabulary from 44 slots down to 32. The constraint is on the agent, not on you.
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
Founding Designer · Design Systems · Design Engineering
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 built products and the systems underneath them, across markets and languages. At Lark, one design system across 30+ product teams and 9 platforms, and the brand refresh that took Lark international. At Tencent, products serving 100M+ daily users. Now at Shanda, a design system that designers and AI agents both build with, shipping AI products to the US, China, and Japan. I design and ship in code, so what I draw is what ships.
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
2024 - Present
Overseeing UX at group level. Recent launches include Tanka.ai, Discoverative.ai, Evermind.ai and the Chen Institute.
Founding Designer
Wanderboat AI
2023 - 2024
Designed an AI-native travel assistant that grew to 3M 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
Founding Designer · Design Systems · Design Engineering
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 built products and the systems underneath them, across markets and languages. At Lark, one design system across 30+ product teams and 9 platforms, and the brand refresh that took Lark international. At Tencent, products serving 100M+ daily users. Now at Shanda, a design system that designers and AI agents both build with, shipping AI products to the US, China, and Japan. I design and ship in code, so what I draw is what ships.
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
2024 - Present
Overseeing UX at group level. Recent launches include Tanka.ai, Discoverative.ai, Evermind.ai and the Chen Institute.
Founding Designer
Wanderboat AI
2023 - 2024
Designed an AI-native travel assistant that grew to 3M 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.
Lark Design, 2021 to 2023
VP of Design, ByteDance (Lark). The brand, principles, and design system behind Lark's move to v5 and international markets.
Designing for Users When the Traffic Floods In
Under 1% of paid social visitors reached the leaderboard. 85% of LinkedIn visitors did, even on mobile. How I designed and built for the right users, solo, with a schema-driven design system.
I Don't Want AI to Auto-Log My Life
Every AI product is racing to remember everything about you. Forgetting is a feature. Mine remembers two things, what worked and what burned me, and refuses to guess at anything in between.
AI Design System - Part 2 Typography for Taste
Four named text styles. Two visible sizes. A tidy rounding rule had quietly flattened the hierarchy while every number still looked correct. On specimen pages, and why AI is a generous proposer and a terrible pruner.
Design Notes on Japanese and English-Speaking Users
A cartoon assistant users liked converted no one. On the Japanese site, the terms-of-service page ranked ninth among all pages visited. Two markets on one design system — what changed wasn't the structure, but what counts as evidence.
Who is Nick
Twenty-five years writing code, nineteen years designing. I never picked a side, and not by accident. Then the handoff stopped going to people and started going to a model, so I built the thing my team had no engineer to build.
AI Design System - Part 1 Color
Design and code never lined up because the bilingual party in the middle didn't exist. Now it does. Layered tokens, OKLCH, and why I cut the agent's vocabulary from 44 slots down to 32. The constraint is on the agent, not on you.
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?
_ ___ __ ____ __ / | / (_)____/ /__/ __ \__ __ ____ ______/ /_ / |/ / / ___/ //_/ / / / / / // __ `/ ___/ __/ / /| / / /__/ ,< / /_/ / /_/ // /_/ / / / /_ /_/ |_/_/\___/_/|_/_____/\__,_(_)__,_/_/ \__/