Practical resources for product designers
Build your craft and your workflow. Explore design systems, interface fundamentals, and practical ways to bring AI into your design process.
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.
How to plan an AI product development workflow
Plan one feature from customer problem to tested release with a product brief, ownership map, acceptance criteria, and QA checklist.
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.
Explore resources for designers.
90 resources to explore
Step-by-step guides 15
Work through a practical design task from start to finish.
How to plan an AI product development workflow
Plan one feature from customer problem to tested release with a product brief, ownership map, acceptance criteria, and QA checklist.
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 set up product context for AI tools
Create a product context system with an entry point, approved decisions, feature specs, ownership, and a maintenance checklist.
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 create a UI color palette, step by step
Build a UI color palette with semantic roles, copyable CSS tokens, contrast checks, and a practical review checklist.
How to create semantic color tokens for UI
Map primitive colors to semantic UI tokens, document states and themes, and validate meaning with a small implementation example.
A design-to-code workflow: from requirements to review
Take a feature from requirements to implementation with a state matrix, component map, handoff prompt, and verification 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 install and use TDP AI agent skills
Choose and install a TDP agent skill, confirm your host supports it, run one bounded task, and review the result.
How to redesign status cards in a product dashboard
Improve dashboard status cards with a task definition, state model, focused concepts, reusable components, and a review checklist.
GitHub for designers: your first pull request, step by step
Learn repos, branches, commits, and pull requests with a designer-friendly walkthrough, GitHub Desktop options, naming examples, and a copyable PR template.
How to check color contrast in a UI
Check text and interface contrast with a live calculator, WCAG reference thresholds, state-by-state examples, and a review checklist.
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.
Color codes 20
Find a color, copy its codes, and check contrast.
Red color codes: #FF0000
Red HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Orange color codes: #FFA500
Orange HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Yellow color codes: #FFFF00
Yellow HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Green color codes: #008000
Green HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Lime color codes: #00FF00
Lime HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Blue color codes: #0000FF
Blue HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Navy color codes: #000080
Navy HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Cyan color codes: #00FFFF
Cyan HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Teal color codes: #008080
Teal HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Purple color codes: #800080
Purple HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Pink color codes: #FFC0CB
Pink HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Magenta color codes: #FF00FF
Magenta HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Coral color codes: #FF7F50
Coral HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Lavender color codes: #E6E6FA
Lavender HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Beige color codes: #F5F5DC
Beige HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Brown color codes: #A52A2A
Brown HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Gray color codes: #808080
Gray HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Black color codes: #000000
Black HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
White color codes: #FFFFFF
White HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Gold color codes: #FFD700
Gold HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Fonts & typography 5
Choose typefaces, pair fonts, and build a type scale.
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.
How to choose font pairings for a product interface
Choose a font pairing using real UI specimens, role assignments, fallback checks, and a practical typography specification.
Serif vs. sans serif: how to choose for your interface
Compare serif and sans serif fonts using product tasks, realistic specimens, and a decision checklist instead of style stereotypes.
How to create a UI type scale with CSS examples
Create a practical UI type scale, assign semantic text roles, and test size, weight, line height, and responsive behavior.
Font weight, border width, and icon strokes: a UI guide
Choose font weights, border widths, and icon strokes with a live specimen, CSS examples, and practical hierarchy checks.
AI skills & playbooks 17
Reusable instructions and workflows for your tools.
Use the Figma MCP
Mandatory prerequisite before any use_figma MCP call. Foundational context that prevents the most common write/read failures in Figma.
Bring a coded page into Figma
Translates an app page, view, or multi-section layout from code into Figma. Triggers on 'push this to Figma', 'create in Figma from code', 'build a landing page in Figma'.
Build a frontend interface
Creates distinctive, production-grade frontend interfaces with high design quality. Avoids the generic 'AI aesthetic' of identical sans-serif + flat color UI.
Review UI design guidelines
Reviews UI code against Web Interface Guidelines — UX, accessibility, design conventions. A second-pass audit lens after you've built something.
Review web accessibility
Supports web accessibility reviews covering WCAG 2.2, keyboard navigation, screen-reader considerations, and interface semantics.
Apply marketing psychology
Applies psychology, mental models, and behavioral science to marketing — anchoring, social proof, scarcity, loss aversion, framing, nudge.
Write and evaluate AI prompts
Writes, refactors, and evaluates LLM prompts. Templates, structured output schemas, evaluation rubrics, test suites.
Extract a design system
Extracts design primitives (color, type, spacing) from a public website and generates starter token files.
Find an agent skill
Discovers and installs agent skills when you ask 'is there a skill for X?' or 'how do I do Y?'. Surfaces things you didn't know existed.
Create a Cursor skill
Authors new Cursor Agent Skills. Use when writing a SKILL.md or asking how the Cursor skill format works.
Write and verify shared skills
Creates, edits, and verifies skills before deployment. Best practices, examples, graph conventions, subagent-based testing.
Use concise agent responses
A concise communication mode for iterative agent work. Use shorter responses while retaining the technical detail the task requires.
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.
Grok Bot design guide
A eight-step guide to designing with Grok Bot: setup, product context, tool connections, references, exploration, feedback, and implementation. Includes ten reusable prompts.
AI product team workflow
A downloadable presentation on organizing product teams around AI agents: shared context, responsibilities, code review, functional QA, and weekly delivery.
Figma to Storybook playbook
A five-step guide to cleaning up Figma tokens and bringing a component into Storybook with usage rules AI can follow. Includes reusable prompts and a review checklist.
Articles & insights 32
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.
Open source AI for design: What happened when I tested GLM, Kimi, and Claude
Three models, one landing page challenge. I compared GLM, Kimi, and Claude to see how well they could turn separate product roles into one scrolling story.
AI product development workflow: Give your team a product brain
See how TDP connects product decisions, design, engineering, and QA in an AI product development workflow built around a shared product brain.
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.
Claude Fable 5 vs GPT-5.5: which AI actually builds a better feature?
I ran Claude Fable 5 vs GPT-5.5 on a real feature build, not a benchmark. Here's which model shipped the better UX, how long each took, and when to use which.
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.
Mobbin MCP: Pull design inspiration in Claude Code without a single screenshot
Mobbin MCP lets you pull real UI inspiration straight into Claude Code — no manual searching, no screenshots. Here's the exact workflow I use to go from inspo to wireframe in minutes.
Claude Code vs Codex: Same prompt, same repo, very different results
# Claude Code vs Codex: Same prompt, same repo, very different results I gave Claude Code and Codex the exact same job. Same repo. Same prompt. Build a quick design system from what's already in the codebase, then ship a small feature on top of it. I've been a Claude Code lover for a while now, so going in I had a clear favorite. By the end of this test, my brain was a little exploding. The agent I expected to win didn't win cleanly, and the one I was newer to surprised me in ways I didn't see
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.
Claude Design workflow: where it fits in your product cycle (and where it doesn't)
A walkthrough of where Claude Design actually fits in a product designer's workflow — when to use it for exploration, when to hand off to Claude Code, and the parts of the tool that still need work.
The interface is about to get personal: four stages of AI-native UI
Chat is a compromise, not a destination. Here are the four stages of AI UI — and why most SaaS products are still stuck on stage one.
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.
Claude Code for designers: from wireframe to pull request
A step-by-step walkthrough of how a designer takes a wireframe, designs in Claude Code using a real component library, iterates on UI decisions, and pushes a properly scoped PR for engineering review.
GitHub for designers: The complete guide to repos, branches, and pull requests
A designer's guide to GitHub — repos, branches, commits, and pull requests explained through real experience shipping code with engineering teams.
Paper vs Figma Make: what our design-to-code tests showed
Paper vs Figma Make: compare our 404-page test, a separate Figma MCP experiment, and practical ways to evaluate AI design tools with your engineering team.
Build presentations with Claude Code: Stop designing decks in Figma and ship interactive ones instead
Stop prototyping presentation decks in Figma. Learn how to use Claude Code to turn your designs into interactive HTML presentations you can share with anyone.
AI wireframing: How to build clickable prototypes in code in 20 minutes
AI made it too easy to skip wireframing. Here's how to bring it back — not in Figma, but as a functional prototype built directly in your codebase in 20 minutes.
Design to code with AI: The complete workflow for designers who want to ship
The old design-to-dev handoff is dying. Here's the exact workflow we use at TDP to go from a GitHub repo to a redesigned, deployed product using Claude Code, Cursor, and Figma MCP — no engineering degree required.
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.
Stop re-explaining your product to AI. Build a Claude Code skill instead.
Claude Code skills let you encode your team's processes, templates, and product context into reusable workflows. Build once, share across your team, and stop re-explaining context every time.
Design glossary 1
Understand the language of product design.
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