Skip to content
MeloSkill

Interface

Frontend design skills for coding agents

This page is a short list of agent skills for designing a new UI — type, color, layout, and motion without default template chrome. Compare the four files below, pick one default, install it from GitHub or paste its SKILL.md, then ask the agent to design a real page with a concrete subject. frontend-design fits a blank UI; web-design-guidelines fits product screens; taste-skill when the brief is “look designed”; impeccable for a craft pass on work that already exists. Install steps: how to install.

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

How an agent uses this

Install one default file, then ask the agent to design a real page with a concrete subject. Prefer frontend-design for a new UI; add taste-skill when the brief is about looking designed; use impeccable for a craft pass on work that already exists. Full agent paths: install guide.

Default file: Frontend Design. Read the SKILL.md on that page before you install.

Install

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

Try asking

Using the frontend-design skill, redesign this page so it does not look like a default AI template. Pick type, color, and layout for this product.
Skill When to use it Platform Updated Safety
Frontend Design
anthropics/skills
Default for Claude Code, Cursor, or Codex 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. Any agent 2026-10-24 pass
Impeccable
pbakaus/impeccable
When the job is a high-craft pass on an existing interface, not a new page. Claude Code 2026-10-26 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. Open the file: it pushes type, color, and motion choices for this subject, not a template kit. 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. Prefer this over taste-skill when you want one broad UI file, not a dedicated art-direction playbook.

    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 — pair or swap, don’t stack three UI briefs.

    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 for landings, portfolios, and redesigns. Install it when the prompt is about looking designed, not about wiring a design system. Skip it for dashboards and dense product UI — wrong job for this file. Overlaps frontend-design; open the Taste task for more taste-adjacent files.

    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 — start with frontend-design or taste-skill instead.

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

FAQ

Which skill should I install first for Cursor or Claude Code?

Start with Anthropic frontend-design for a general blank-page brief. Add web-design-guidelines when the job is a product UI with real layout constraints, and taste-skill when the prompt is explicitly about visual taste. Copy the install command on the listing, or follow how to install for Claude Code, Cursor, and Codex paths.

How is frontend-design different from taste-skill?

frontend-design is Anthropic’s general anti-generic UI brief: type, color, and motion for a page that does not exist yet. taste-skill is a dedicated taste playbook for landings, portfolios, and redesigns when “look designed” is the job. They overlap on triggers — install one first, not both. Side-by-side taste files also live on the taste task.

When should I pick impeccable instead?

impeccable is a high-craft pass on an interface that already exists. Use it after a first render. It is not the file for inventing a new visual identity from a blank page — that is frontend-design or taste-skill.

The agent’s UI looks like a default AI template — what do I do?

Install one blank-page file — usually frontend-design — and ask it to redesign a real page with a concrete subject (see the prompt in How an agent uses this). If the brief is specifically “look designed,” use taste-skill on the taste task instead. Do not stack both as defaults.

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.

Can I use this with Grok Bot?

Yes. Paste the SKILL.md into Grok Bot or attach the file, then ask for the same job this page describes. MeloSkill is not affiliated with xAI. Grok Bot instructions: Grok Bot playbooks.

Related tasks