Skip to content
MeloSkill

Interface

Frontend design skills for Claude Code, Cursor & Codex

Skills that push an agent past default UI: hierarchy, type, motion, and the parts of the page that usually look generated.

Last reviewed 2026-09-10 · Methodology · How to choose · How to install

Skill When to use it Platform Updated Safety
Frontend Design
anthropics/skills
Default when the agent is about to invent a UI and you need it to choose type, color, and motion on purpose instead of a purple-gradient template. Claude Code 2026-09-03 pass
Web Design Guidelines
vercel-labs/agent-skills
Use for product surfaces: spacing, hierarchy, and web interface rules from Vercel’s agent-skills set. Any agent 2026-01-16 pass
Design Taste Frontend
leonxlnx/taste-skill
When the prompt is “make it look designed,” and you want a taste-oriented playbook rather than a component library. Cursor 2026-05-26 pass
Impeccable
pbakaus/impeccable
When the job is a high-craft pass on an existing interface, not a new page. Claude Code 2026-09-09 pass

Safety is a text search on the file, not an audit. Pass / Review / Risk are explained in the evaluation guide.

  1. 01

    Frontend Design

    Anthropic’s general anti-generic brief. It tells the agent to pick type, color, and motion for this subject instead of a template. Use it when the page does not exist yet. It is not a component library and it is not a craft pass on work you already have.

    npx skills add https://github.com/anthropics/skills/tree/HEAD/skills/frontend-design

  2. 02

    Web Design Guidelines

    Vercel’s interface-rules skill. It checks layout, density, and accessibility-adjacent UI patterns on product surfaces. Reach for it when the job is a real app screen, not a marketing landing page. It does not replace a taste or art-direction file.

    npx skills add https://github.com/vercel-labs/agent-skills/tree/HEAD/skills/web-design-guidelines

  3. 03

    Design Taste Frontend

    A taste playbook against generic AI UI, aimed at landings, portfolios, and redesigns. Install it when the prompt is about looking designed, not about a design system. Skip it for dashboards and dense product UI — that is the wrong job.

    npx skills add https://github.com/leonxlnx/taste-skill/tree/HEAD/skills/taste-skill

  4. 04

    Impeccable

    A high-craft pass on an interface that already exists. Install it when the first render is in and you want a meticulous second pass. It is not the file for inventing a new visual identity from a blank page.

    npx skills add https://github.com/pbakaus/impeccable/tree/HEAD/plugin/skills/impeccable

FAQ

Which skill should I install first?

Start with Anthropic frontend-design if you want a general anti-generic brief. Add web-design-guidelines when the job is a product UI with real layout constraints, and taste-skill when the brief is explicitly about visual taste.

Is this a replacement for an MCP server?

No. These files are instructions the agent loads for a UI job. They do not connect to Figma or a design system API.

How do I know a listing is current?

Use the last-change date on the skill page, not repository stars. Stars count the whole repo.

Related tasks