Profile My skills Saved My plugins Edit profile Submit a skill

AI agent skills for design and mockups

Design skills give an agent taste it does not have by default — a type scale, spacing rhythm, a restrained palette, and rules about when to stop. The ones that work read like a design system's rationale rather than a component list, because the agent needs to know why before it can extend anything. Judge one by what it produces on a page you did not specify tightly; that is where generic output shows.

People land here searching for “claude code design skill”, “agent skill for ui mockups”, “design system skill”.

28 design and mockups skills Refine in search →

How to install a design and mockups skill

  1. Compare the skills. Read the design and mockups skills below — each page shows the full SKILL.md, its safety verdict, and the capabilities it declares.
  2. Install it. Run npx skillmds@latest add <owner>/<name>. The CLI writes the skill into every agent directory it detects, or use --agent to pin one.
  3. Use it. Restart your agent. It loads the skill on demand the next time you ask for something that matches — you do not have to name the skill.

What makes a good design and mockups skill?

Design skills give an agent taste it does not have by default — a type scale, spacing rhythm, a restrained palette, and rules about when to stop. The ones that work read like a design system's rationale rather than a component list, because the agent needs to know why before it can extend anything. Judge one by what it produces on a page you did not specify tightly; that is where generic output shows.

Every skill listed here is a plain SKILL.md file in the format Anthropic documents for Agent Skills, read unchanged by Cursor, OpenAI Codex and 60+ agents. Each passes a safety review before it is publicly listed; the verdict and declared capabilities are on every skill's page.

Frequently asked questions

What is an agent skill for design and mockups?

Design skills give an agent taste it does not have by default — a type scale, spacing rhythm, a restrained palette, and rules about when to stop. The ones that work read like a design system's rationale rather than a component list, because the agent needs to know why before it can extend anything. Judge one by what it produces on a page you did not specify tightly; that is where generic output shows.

Can a design skill read my Figma file?

Only with a Figma MCP server or plugin connected to your agent; the skill itself is instructions, not an integration. Skills that assume that connection say so, and the ones that do not work from a written description of your system instead.

Which agents can use these design and mockups skills?

Any agent that reads SKILL.md files: Claude Code, Claude.ai, Cursor, OpenAI Codex, Windsurf, OpenCode and 60+ others. The format is not vendor-specific, so the same file works everywhere — each agent just keeps its skills in a different directory, listed at /agents.

Are these design and mockups skills free?

Yes. Searching, reading and installing skills on SkillMD is free and needs no account. Individual skills carry their own licence, shown on each skill's page.