Product design guides and tutorials
Work through a concrete task, from documenting a design system to connecting Figma and code. Each guide gives you a useful place to start.
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 step-by-step guides.
20 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.
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.
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