Canvas Design
AnthropicOfficial
Anthropic's official Canvas Design skill makes posters and other static designs as PNG or PDF, starting from a design philosophy it writes first.
Agent Skills for Design
Skills that teach your AI agent a design job: choosing a visual direction, polishing motion, auditing accessibility. Pick your agent, then copy a skill straight into it.
Frontend Design
AnthropicOfficial
Anthropic's official Frontend Design skill steers AI agents away from templated UI toward a deliberate palette, typography and layout for each brief.
Theme Factory
AnthropicOfficial
Anthropic's official Theme Factory skill styles slides, documents and web pages with one of ten ready-made colour and font themes, or a new one.
Animate
Emil Kowalski
Emil Kowalski's Animate skill builds a UI animation in the right order: whether to animate, which properties, curve and duration, interruption and exit.
Animation Vocabulary
Emil Kowalski
Emil Kowalski's Animation Vocabulary skill turns a vague description of a motion effect into its exact name, so you know what to ask an AI or designer for.
Apple Design
Emil Kowalski
Emil Kowalski's Apple Design skill translates Apple's fluid, physical interface design for the web: springs, gestures, sheets, materials and type.
Brandkit
Leonxlnx
Brandkit is an image-generation skill that turns a rough brand idea into brand-guideline boards with logo concepts, colour, type and mockups.
Break UI
Emil Kowalski
Emil Kowalski's Break UI skill stress-tests a component with worst-case data - long names, missing fields, emoji, huge numbers - and reports every fix.
Emil Kowalski Design Engineering
Emil Kowalski
Emil Kowalski's design engineering skill teaches AI agents his approach to UI polish, component design and animation decisions.
Extract Design System
arvindrk
Extract Design System has your agent pull colours, fonts, spacing and shadows from any public website into starter design-token files.
Find Animation Opportunities
Emil Kowalski
Emil Kowalski's skill finds places in your UI that should animate but don't, rejects the ones that shouldn't, and proposes motion with exact values.
Image To Code
Leonxlnx
Image To Code makes your agent design a website as images first, study them, then build the frontend to match. Built for Codex.
Impeccable
Paul Bakaus
Paul Bakaus's Impeccable skill gives AI agents a design language: 24 commands to shape, critique, audit and polish UI, and checks for AI-made design tells.
Improve Animations
Emil Kowalski
Emil Kowalski's Improve Animations skill audits a codebase's motion and writes a prioritised plan of fixes that other agents can carry out.
Make Interfaces Feel Better
Jakub Krehel
Jakub Krehel's skill teaches AI agents the small details that make UI feel polished: shadows, borders, radius, optical alignment, type and micro-motion.
Prototype
Emil Kowalski
Emil Kowalski's Prototype skill builds several genuinely different versions of a UI piece behind a live picker, so you can flip through them and pick one.
Review Animations
Emil Kowalski
Emil Kowalski's Review Animations skill checks your motion code against ten strict standards, from easing and duration to performance and reduced motion.
Taste Skill
Leonxlnx
Taste Skill gives AI agents art direction for web pages: researched directions from 247 gallery sites and a browser check that catches generic AI layouts.
UI/UX Pro Max
nextlevelbuilder
UI/UX Pro Max gives AI agents a searchable library of UI styles, palettes, font pairings and UX guidelines to design and review interfaces.
Web Design Guidelines
Vercel
Vercel's Web Design Guidelines skill audits your UI code against the Web Interface Guidelines and reports accessibility and UX issues by file and line.
How a skill gets to work
-
You install it once
A skill is a folder with a SKILL.md file. The install line puts that folder where your agent looks for skills.
-
Your agent reads its description
At the start of a session the agent reads only each skill's name and one-line description, so installed skills cost almost nothing.
-
It loads when your task matches
Ask for a landing page or an accessibility review and the matching skill's full instructions load. You can also call one by name.
Install guides
Where skills live in each tool, how to call one, and how to update, turn off or remove it.
- Claude Install agent skills in Claude Code with one command, a plugin or by hand, and upload them to claude.ai and the Claude desktop app as a ZIP.
- Codex Install agent skills in OpenAI Codex with the skills CLI, Codex's own $skill-installer or by hand, then call, turn off and update them.
- Other AI tools Install agent skills in Cursor, Gemini CLI, GitHub Copilot, Windsurf, OpenCode and other agents with one command - or use one in any chat model.
What is an agent skill?
An agent skill is a set of instructions your AI agent loads when a task calls for them,
packaged as a folder with a SKILL.md file. Anthropic created the format and
released it as an open standard, so the same skill works in Claude, OpenAI Codex, Cursor,
Gemini CLI, GitHub Copilot and other agents. Unlike a prompt you paste in every time, an
installed skill sits ready and is picked up on its own when your request matches it.
The skills here are the design ones: they shape how an agent chooses type and colour, builds and animates components, and checks an interface before it ships. Each skill's page has the full install steps for your tool and prompts to try once it is in.
