Product design resources from 2026

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.

FOLLOW YOUR CURIOSITY

Explore 2026 resources.

Visit the blog

Browse by role or topic

Search resourcesFilter by format

32 resources to explore

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.