Design system guides and resources
Keep colors, components, and product decisions connected. Learn how to document a system that designers, engineers, and AI agents can work with.
Live React previews. Copyable code. Made for your next product.
Start here.
How to write a design.md file: a step-by-step guide
Write a design.md file with product context, design tokens, component rules, and a reusable template. Check it against a real screen.
Figma to Storybook: document and build one component
Take one Figma component into Storybook with a token audit, component specification, state matrix, and review checklist.
How to build an AI-ready design system
Make a design system usable by AI with semantic tokens, component metadata, examples, and a small migration plan.
Explore design systems.
28 resources to explore
Step-by-step guides 6
Work through a practical design task from start to finish.
Figma to Storybook: document and build one component
Take one Figma component into Storybook with a token audit, component specification, state matrix, and review checklist.
How to build an AI-ready design system
Make a design system usable by AI with semantic tokens, component metadata, examples, and a small migration plan.
How to create an AI agent skill for design work
Turn a repeated design task into an agent skill with inputs, instructions, examples, boundaries, and a validation checklist.
How to document a component library for people and AI
Write component specifications with anatomy, variants, states, token references, examples, and clear ownership.
How to create a UI spacing system
Build a spacing scale with semantic roles, CSS tokens, component examples, and a responsive layout checklist.
How to extract design tokens from an existing website
Audit a website’s colors, type, spacing, and components, then turn observed values into a reviewed starter token map.
Fonts & typography 1
Choose typefaces, pair fonts, and build a type scale.
AI skills & playbooks 3
Reusable instructions and workflows for your tools.
Extract a design system
Extracts design primitives (color, type, spacing) from a public website and generates starter token files.
Create AI component metadata
Generates AI-ready metadata for design system components. Analyzes structure and produces structured metadata so AI knows when and how to use each component correctly.
Context OS principles
A downloadable Markdown file with principles for keeping product decisions, design context, and team knowledge connected across AI sessions and tools.
Articles & insights 18
Explore ideas and lessons from the TDP blog.
Figma to Storybook: Build a component library AI can use
Explore product design tools, decisions, and workflows with the TDP team.
PostHog design system: how its agent-first product vision shows up in the UI
A look at PostHog’s LemonUI, quill, and repository rules, and what product teams can learn about building interfaces for AI agents.
Grok Bot design workflow: From confusing cards to working code
Follow Dianne’s Grok Bot design workflow to rethink feedback cards using Mobbin, Paper, and Storybook, then bring the chosen design into code.
Context engineering: build a product brain for your AI workflow
Build a product brain that connects customer context, feature specs, Figma components, and human approval in your AI product workflow.
Agentic design system: How to stop UI drift in your codebase
Connect AGENTS.md, skills, PRODUCT.md, and DESIGN.md so coding agents reuse your components and stop creating off-brand UI.
AI design system patterns: What IBM, AWS, Atlassian, and GitLab agree on
Four major design systems are converging on the same AI UX patterns. Here is what product teams can borrow for clearer, more trustworthy AI experiences.
AI product design: why the designer still changes the outcome
Three designers received the same 30-minute AI brief. Their different results reveal how workflow, references, iteration, and taste shape the outcome.
Paper AI design tool: a code-connected workflow from design to production
See how we use Paper to extract tokens from code, direct an AI agent, refine UI components, and ship the result back into production.
Impeccable design to code: the missing taste layer for AI-built products
Impeccable brings design taste, live UI iteration, and critique into your AI design-to-code workflow. Here's where it fits and how product teams can use it.
AI Design to Code Workflow: Why Figma-to-code is the wrong question
Learn why AI design-to-code needs product context, business rules, repo structure, and agents instead of simple Figma-to-code conversion.
AI design workflow: the toolkit I use to go from inspo to code in minutes
A practical AI design workflow for product teams: how I use Conductor, Codex, Claude Code, Wispr Flow, Fireflies, Mobbin MCP, and Paper to move from research to code faster.
Agent skills: stop re-teaching AI your design system
Agent skills let your AI apply your design system automatically. Learn what they are, why they matter, and how to build your own in five minutes.
design.md and your component library: how to scale a design system AI won't outgrow
Most design.md files stop at brand colors. Here's how to keep yours lightweight while pointing it to component metadata so AI won't hallucinate your UI.
AI-ready design system: how to build one that AI agents can actually use
Five signs your design system is broken for AI, plus a step-by-step migration to shadcn/ui with the metadata structure Claude can actually read.
Agentic design system: how to build a component library AI agents can actually use
Your design system is built for humans — that's why AI agents keep inventing variants. Here's how to build an agentic design system Claude can actually use.
design.md file: how to write a design system AI agents actually follow
A design.md file is a plain-text design system written for AI agents. Here's what goes in one, why it matters, and how to build one with your engineering team.
Google Stitch review: great for inspiration, wrong tool for production design
An honest Google Stitch review from a product designer. Where it shines, where it falls short, and whether it belongs in your design workflow.
Storybook component libraries: How to audit and build one from any codebase in a day
Learn how to audit an entire codebase, catalog every component, and build a working Storybook library — using Claude Code to do the heavy lifting.
Give your workflow
a new set of skills.
Reusable AI skills from the TDP team. Explore the collection and find a practical starting point for your next project.
Explore the skills repo