Guide · Designers
Agent skills for designers: pick the stage, then the tool
Product design alternates between opening the problem up and closing it down. The Design Council's Double Diamond is the picture most teams already half-use: discover and define the problem, then develop and deliver a solution. A skill aimed at discovery will keep generating options at the moment you needed a handoff note. A skill aimed at tokens will invent a system while you are still unsure what the screen is for. The stage matters more than which skill is ranked first.
The second choice is the tool. This topic mixes Figma, Penpot, and code. They do not share a file format. Candidates come from the Designers topic, ranked by observed search demand. There are dozens of yes-matches. Install one for the stage you are in.
Quick scan: stage and surface
| Stage | You need | Wrong install |
|---|---|---|
| Discover and define | Research, a problem statement, a journey | A component library |
| Develop | A prototype at the lowest fidelity that can be tested | A polished marketing page |
| System | Tokens and components you will reuse | A one-off palette in a single frame |
| Deliver | Handoff engineering can build without guessing | Another round of ideation |
Choose the stage
Discover and define
product-designer is a wide skill: research, journey maps, wireframes, tokens, prototypes, and usability testing, described as five stages. Use it when you want one checklist across the diamond, and steer it. Do not expect the research section and the token section to be equally deep. The design-sprint skills (map and target, then decide and storyboard) are narrower and more literal. They follow a facilitated sprint day, with a Decider and a storyboard. Install them when you are actually running that week. They are ceremony if you only needed a wireframe.
Develop, at the fidelity the question needs
prototype moves an idea up a fidelity ladder, from content to code, and asks for a validation plan at each step. That is the right bias. A high-fidelity screen that has not survived a low-fidelity test is an expensive guess. ux-designer and ui-ux-pro-max cover critique, accessibility, forms, and design systems across web and mobile. Treat them as review partners during the develop stage. If the question is only "how should this website look in the browser," switch to the web design guide rather than staying inside a product-design skill.
A system you can name
design-tokens says it writes tokens in the Design Tokens Community Group format, in three tiers: primitive, semantic, and component. That split is what lets a theme change without a hunt through hex values. figma-generate-library builds a Figma library from a codebase: variables, components, light and dark, documented foundations. design-system, from Anthropic's knowledge-work set, audits naming and hardcoded values and writes component docs. penpot-audit-tokens is the governance pass on a Penpot file: hardcoded colors where a token exists, off-grid spacing, orphan tokens. The Penpot kit treats that as a different job from an accessibility audit. Keep the audits separate. A contrast bug and a detached token are both "inconsistent," and they have different fixes.
expo-design-system is the code-side version for an Expo app: a token theme and a check for drift. Use it when the system lives in the repository. Using it to restyle a marketing site will ignore the app's theme and create the second system you were trying to avoid.
Deliver so engineering does not guess
penpot-document-handoff builds the annotation beside the design, not on top of it: a context card, numbered pins, and notes in a group that can be hidden. That is a concrete handoff, and it is specific to Penpot. Figma handoff in this list is the other direction as often as not: figma reads a file through Figma's MCP tools and helps turn a node into code, and figma-code-connect maps design components to code components. Read which way the skill faces. "Handoff" sometimes means notes for a person, and sometimes means a mapping so code and the library stay linked. The written record of a decision, including options you rejected, belongs with Documentation if the skill you found only draws the screen.
How to judge a candidate
- Stage: discover, develop, system, or deliver. A skill that spans all four is a checklist, and you should still name today's stage.
- File: Figma, Penpot, or the repository. If the skill cannot open that file, it will describe a design you do not have.
- Complements: when the SKILL.md says to load a second skill, load that one. Do not add a third from the same rank band.
- System loyalty: extend tokens that exist. A new palette is a new product.
- Audit type: accessibility, token governance, and visual taste are three reviews. One report that mixes them is hard to act on.
Where to start
| Stage | Candidate | Surface |
|---|---|---|
| Across the diamond | product-designer | Research through usability, as a checklist |
| Fidelity | prototype | Content first, then a test, then a higher-fidelity step |
| Tokens | design-tokens | DTCG tokens: primitive, semantic, component |
| Figma library | figma-generate-library | A library generated from the codebase |
| Penpot governance | penpot-audit-tokens | Hardcoded values, orphans, detached tokens |
| Penpot handoff | penpot-document-handoff | Annotations beside the frame |
Graphic-only work, such as a poster or a slide, is thinly represented here next to product UI. efecto-graphic-design is the closer match for those assets, and a pitch deck belongs on the PowerPoint topic. A single campaign page belongs on Landing pages.
Before you install
Frequently asked questions
Should I use a Figma skill or a Penpot skill?
Use the skill that matches the file your team already shares. figma-generate-library and the Figma skills build or read a Figma library, and they need Figma. The Penpot skills in penpot-ai-kit edit Penpot files: screens, token audits, and handoff notes. A Figma skill cannot govern a Penpot file, and the reverse is also true.
Can a design-system skill replace a UI skill?
No. A system skill decides the tokens, components, and naming you will reuse. A UI skill decides a particular flow or screen. Where a skill's own description says to load a companion, load that one. A token audit does not design the flow, and a flow skill does not govern the tokens.
How is this different from the web design guide?
This guide is the product-design role: research through handoff, usually in a design tool. The web design guide is the site itself, in a browser, including accessibility and interface guidelines. If you are styling a page in code, use that one. If you are annotating a frame for engineering, stay here.
Pick with confidence.These guides explain how to compare skills and choose the one that fits. Read each skill's own SKILL.md before installing it. How this works