👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin
Today’s Post
I’ve put together the ultimate resource on the Design System Lifecycle 2.0
Step-by-Step: How to Run a Design System Like a Product
How to Use AI in Each Design System Building Stage
The Tools You Need
My Advice and Tips
Intelligence
This is research, but continuous. It means building a hub where everything you know about your company lives, so you can connect the dots and act faster.
My advice:
Understand your goal/mission
Record every stakeholder/user call and feed transcripts into AI to spot repeating pain points.
Prepare interview guides.
Cluster problems visually in Miro or FigJam so the team sees patterns.
Keep a single Airtable that logs insights, effort estimates, and opportunities.
Use predictive queries in Metabase or Looker Studio to connect insights to business outcomes.
Use tools that help you do the analysis (mentioned below)
Tools:
Gong records and analyzes customer calls.
Insight7 uses AI to surface insights from CX, sales, and research calls.
Dovetail aggregates qualitative data, themes, and sentiment.
Notably turns messy research data into clear insights.
FigJam and Miro cluster pain points and map workflows.
Airtable structures, insights, and calculators.
Productboard connects insights directly to prioritization and roadmaps. “
Granola takes smart meeting notes you can feed back into your hub.
Statsig accelerates experimentation with feature flags, analytics, and session replays.
You can also use ChatGPT, but be careful what you share and what are you company policies.
Act as a Senior User Research Expert with 20+ years experience in the tech industry as an IC UXR lead. We have the following roadmap items we’re considering:
[INSERT CONTEXT]
What would be good user research to conduct to validate these?
Provide:
Specific research method recommendation
Key questions to ask
Success/failure criteria
Sample size needed
Timeline breakdownI know you will want to skip steps, but don’t. You really need to understand how the product works, so you can plan how your design system will fit in.
Execution
Strategy is useless if you cannot build. Start with MVPs, test them, and maintain active feedback loops. AI accelerates this stage.
My advice:
Create adaptive roadmaps (no further than 2 quarters). Make them based on your product and all your insights from customers and employees.
Identify where you can use AI to unlock competitive advantages
Use Cursor, Claude Code to generate component skeletons instead of hand-coding everything. Plus, you can spin off specs as well.
Test MVPs with real users, not just your design team.
Add Slack integrations so bug reports flow directly into Linear or Jira.
Test different models for tasks to determine what works best.
Tools:
GitHub/GitLab are essential for storing design tokens, automating token transformation workflows, and triggering component builds with GitHub Actions.
GitHub Copilot acts as your AI pair programmer.
LangGraph builds multi-agent workflows for iterative MVPs.
GitLab Duo brings AI into CI/CD pipelines.
Cursor is an AI-first code editor for prototyping.
Claude Code helps with debugging and refactoring in natural language.
Linear keeps roadmaps adaptive and execution focused.
Roadmunk helps visualize roadmaps informed by research data.
Chromatic provides automated visual testing and team review for Storybook components.
Style Dictionary is an open-source build system that transforms tokens from JSON into platform-specific formats like CSS variables, iOS Swift, and Android XML.
Storybook develops, tests, and documents UI components in isolation, with Chromatic enabling visual testing and live showcasing.
React, Vue, Angular are the primary frameworks for building robust component libraries.
Web Components enable framework-agnostic component development that works anywhere.
Strategy
Strategy keeps the system aligned with the vision. The context engine constantly updates it. Think of this as the GPS for your design system.
My advice:
Write a one-page document and revisit it monthly.
Prioritize by outcomes, not opinions.
Use Productboard/Airtable to sort features by customer value and revenue impact.
Use AI forecasting tools to help you flag unrealistic goals
Share strategy openly and host “Design (Bi)Weekly hours.
Tools:
Aha! ties strategy to delivery with roadmapping.
Airtable can also help you prioritize, build roadmaps and have all your work connected.
Productboard helps prioritize what to build next.
Notion gives you a flexible hub for strategy.
Confluence serves as shared documentation for vision and direction.
Impact
If you cannot prove ROI, your system will get cut the next time budgets shrink. Impact shows adoption, savings, and the business value behind your work.
My advice:
Define adoption metrics before building
Track time savings by comparing time-to-build with and without the system (I already wrote about this)
Automate reporting with Amplitude or Mixpanel hooked into Looker Studio.
Train at scale → use videos, guides, online meetups, etc.
Connect metrics with your own, local MCP
Tools
Amplitude tracks adoption and engagement.
Mixpanel measures behavior and funnels.
Looker Studio provides ROI dashboards.
Evolution
Evolution is about adapting automatically, monitoring drift, and expanding to new platforms and modalities.
My advice:
Create your own MCP (help with design tokens, internal docs, chatbot, self-healing components, etc.)
Automate theming
Set up AI monitoring agents with Dust.tt or LangChain to detect unused, duplicated, or inconsistent components.
Expand systematically (one new platform at a time).
Revisit governance quarterly and automate alerts with n8n or Zapier.
Expand to context-aware systems.
Tools:
Style Dictionary transforms tokens across platforms.
n8n automates governance workflows.
Zapier handles repetitive updates.
Dust.tt builds AI agents for governance and monitoring.
LangChain powers agentic AI workflows.
GitHub Actions automates token transformation, component building, and Storybook deployment whenever design tokens are updated in Figma.
Playwright automates UI testing to catch drift and regressions early.
Figma MCP Server provides a structured, machine-readable context that AI coding assistants use to generate design-system-informed code with proper token usage and component reuse.
Cursor or Claude Code connected with various MCPs can become powerful, helpful tools. I will write about this in the upcoming newsletters.
Metrics
Metrics close the loop, connect adoption to ROI, and help you spot trends. Also, right now is easier than ever to bring in to one dashboard all the customer data and see the effect of components/flows also on your conversion rates.
My advice:
Build AI-connected dashboards that show adoption, velocity, and ROI together.
Surface quick wins automatically, such as the component that saved the most time this quarter.
Connect adoption to business KPIs, such as churn, conversion, or NPS.
Run predictive reports quarterly to forecast adoption and spot lagging projects
Share dashboards openly to drive accountability.
Tools:
Altair AI Studio delivers predictive insights.
Metabase provides lightweight dashboards.
Looker Studio visualizes ROI and trends.
Amplitude ties usage analytics to adoption velocity.
Mixpanel highlights usage patterns. Airtable organizes ROI data.
Tableau/Power BI interactive real-time dashboards for design system KPIs, combining multiple data sources for comprehensive performance tracking.
dbt + Snowflake powers scalable data pipelines.
React Scanner library for parsing codebases to track component usage, dependencies, and adoption rates across projects.
Omlet.dev is an analytics tool that provides insights into developer activity, component reuse patterns, and design system adoption across repositories with shareable stakeholder reports.
Last tips
Start small and do MVPs.
Always connect tools back to the context engine.
Isolated tools create chaos, integrated tools create leverage.
Prove ROI early. A single “20 percent faster” story gets leadership on board.
Iterate like a product team. Ship, measure, adapt, repeat.
YOU GOT THIS. ✌️
— If you enjoyed this post, please tap the Like button below 💛 Thank you.
💎 Community Gems
GitHub Annotation Kit
The GitHub Annotation Toolkit is a Figma asset library packed with components to help you organize your design canvas, diagram UI anatomy, and annotate accessibility details for web and mobile experiences.
🔗 Link
Cognitive Biases In Product Design
via Vitaly Friedman, Author: BeyondUXDesign
🔗 Link