AI design workflows and agent skills
Explore the tools, context, and reusable skills behind an AI-assisted product workflow, with lessons from TDP’s own experiments.
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.
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 ai workflows.
58 resources to explore
Step-by-step guides 8
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.
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.
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 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.
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 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.
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