MetaSkill + Submit
◆ SKILL

frontend-design

Pushes agents toward distinctive, production-grade UI instead of generic layouts.

Open ↗

Install

# Claude Code (part of example-skills)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Commands change between releases — if something fails, check the official README.

About frontend-design

frontend-design gives the agent guidance on typography, colour, layout and motion so generated interfaces have a clear aesthetic direction rather than templated defaults.

One of the most installed skills for anyone building web UIs with an agent.

FAQ

What is frontend-design?

Pushes agents toward distinctive, production-grade UI instead of generic layouts.

How do I install frontend-design?

Run: /plugin marketplace add anthropics/skills. Full steps are in the Install section on this page.

Which agents does frontend-design work with?

Claude Code, Claude apps, OpenAI Codex, Gemini CLI, Cursor, VS Code & Copilot.

Is frontend-design free?

Yes. It is open source (Apache-2.0).

Alternatives to frontend-design?

Figma MCP, Framelink Figma MCP, UI UX Pro Max.

Similar to frontend-design

More design & frontend →
⇄ MCP SERVER★

Figma MCP

Bring Figma design context — components, variables, layout — into code generation.

claude mcp add --transport http figma https://mcp.figma.com/mcp
Claude CodeClaude appsCursor +3
⇄ MCP SERVER

Framelink Figma MCP

Community Figma server that simplifies design data for coding agents.

claude mcp add figma-framelink -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio
Claude CodeClaude appsCursor +4
◆ SKILL

UI UX Pro Max

Design-intelligence skill for building professional UI/UX across platforms.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Claude CodeClaude appsOpenAI Codex +3