Figma and design-to-code resources
Connect design decisions to implementation. Explore workflows for translating interfaces into reusable components and working product experiences.
Live React previews. Copyable code. Made for your next product.
Start here.
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.
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 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.
Explore figma & code.
23 resources to explore
Step-by-step guides 4
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.
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 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.
AI skills & playbooks 3
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'.
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 16
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.
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 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.
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.
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.
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.
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.
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.
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