Let’s chat Explore 13 agent skills, four practical resources, and five workflows from the TDP skills repo. Find a task, copy the setup instructions, and connect it to your product work.
Start with the outcome, then follow the sequence. These workflows come from the original TDP skills collection.
You already built the page in code and want a Figma version without recreating it by hand.
Load as prereq before any Figma MCP call
Translate the code page into a Figma frame using your design system
Shipping any user-facing page or component.
Build the UI with taste — avoid the generic AI look
Audit UX, typography, focus states, touch targets
Review accessibility and document issues requiring further testing
Building or rewriting landing pages, pricing pages, onboarding flows, or AI features.
Anchor copy / pricing / CTAs in real behavioral principles
Refactor the AI-powered features behind that copy into structured, evaluated prompts
Starting a new project, rebranding, or making an existing DS usable by AI agents.
Point it at a reference site — your own, a competitor, or one you admire — to extract color, typography, and spacing tokens
Generate AI-consumable metadata for each component so an agent knows when and how to use it
Any time, in parallel with the main flows.
Use concise responses for iteration while keeping necessary technical detail
Before building anything custom, check if a skill already exists
Package a repeated workflow as a SKILL.md (Cursor authoring)
When the skill will be shared: most thorough variant — includes testing and verification
Mandatory prerequisite before any use_figma MCP call. Foundational context that prevents the most common write/read failures in 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'.
Creates distinctive, production-grade frontend interfaces with high design quality. Avoids the generic 'AI aesthetic' of identical sans-serif + flat color UI.
17 resources to explore
Reusable instructions and workflows for your tools.
Mandatory prerequisite before any use_figma MCP call. Foundational context that prevents the most common write/read failures in 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'.
Creates distinctive, production-grade frontend interfaces with high design quality. Avoids the generic 'AI aesthetic' of identical sans-serif + flat color UI.
Reviews UI code against Web Interface Guidelines — UX, accessibility, design conventions. A second-pass audit lens after you've built something.
Supports web accessibility reviews covering WCAG 2.2, keyboard navigation, screen-reader considerations, and interface semantics.
Applies psychology, mental models, and behavioral science to marketing — anchoring, social proof, scarcity, loss aversion, framing, nudge.
Writes, refactors, and evaluates LLM prompts. Templates, structured output schemas, evaluation rubrics, test suites.
Extracts design primitives (color, type, spacing) from a public website and generates starter token files.
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.
Authors new Cursor Agent Skills. Use when writing a SKILL.md or asking how the Cursor skill format works.
Creates, edits, and verifies skills before deployment. Best practices, examples, graph conventions, subagent-based testing.
A concise communication mode for iterative agent work. Use shorter responses while retaining the technical detail the task requires.
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.
A downloadable Markdown file with principles for keeping product decisions, design context, and team knowledge connected across AI sessions and tools.
A eight-step guide to designing with Grok Bot: setup, product context, tool connections, references, exploration, feedback, and implementation. Includes ten reusable prompts.
A downloadable presentation on organizing product teams around AI agents: shared context, responsibilities, code review, functional QA, and weekly delivery.
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.
Reusable AI skills from the TDP team. Explore the collection and find a practical starting point for your next project.
Explore the skills repo