frontend design — Agent Skill
by anthropics · Updated
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
At a glance
frontend-design is an Agent Skill by anthropics in the Design & Creative category. In Claude Code it installs with `/plugin install frontend-design@claude-plugins-official` after adding the anthropics/claude-plugins-official marketplace; other assistants use its SKILL.md instructions as rules. Its source repository has 45,039 GitHub stars (as of Oct 27, 2026).
How to install frontend design in your AI client
Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.
How to install frontend design in Claude CodeAnthropic's agentic CLI
Add the marketplace
claude/plugin marketplace add anthropics/claude-plugins-officialInstall the skill
claude/plugin install frontend-design@claude-plugins-officialUse it
These are slash commands for a Claude Code session, not your shell. Claude auto-invokes the skill when your request matches its description — or type its slash command if it exposes one.
How to install frontend design in Claude DesktopDesktop app (MCP config)
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/frontend-design — that folder contains the SKILL.md.
Add the SKILL.md to your Skills folder
Settings → Capabilities → Skills → add the folder containing SKILL.md. Claude picks it up automatically.
How to install frontend design in CursorAI-first code editor
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/frontend-design — that folder contains the SKILL.md.
Convert to a Cursor rule
Create .cursor/rules/frontend-design.mdc and paste the SKILL.md body. Set `alwaysApply` or a glob so the Agent loads it in context.
How to install frontend design in Codex CLIOpenAI coding agent
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/frontend-design — that folder contains the SKILL.md.
Reference in AGENTS.md
Add the skill's instructions (or a link) to AGENTS.md at your repo root — Codex reads it on every run.
How to install frontend design in WindsurfCodeium's agentic IDE
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/frontend-design — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install frontend design in ClineVS Code autonomous agent
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/frontend-design — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install frontend design in VS CodeCopilot / MCP support
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/frontend-design — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
Documentation
Full READMEFrontend Design Plugin
Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.
What It Does
Claude automatically uses this skill for frontend work. Creates production-ready code with:
- Bold aesthetic choices
- Distinctive typography and color palettes
- High-impact animations and visual details
- Context-aware implementation
Usage
"Create a dashboard for a music streaming app"
"Build a landing page for an AI security startup"
"Design a settings panel with dark mode"Claude will choose a clear aesthetic direction and implement production code with meticulous attention to detail.
Learn More
See the Frontend Aesthetics Cookbook for detailed guidance on prompting for high-quality frontend design.
Authors
Prithvi Rajasekaran (prithvi@anthropic.com) Alexander Bricken (alexander@anthropic.com)
More Design & Creative skills
- Design & Creative184k
example skills
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
Anthropic Skills12 skillsby anthropics
- Design & Creative184k
academy guide
Recommends relevant Claude Academy courses, tutorials, and use cases when users ask how to use Claude
Anthropic Skills1 skillsby anthropics
- Design & Creative74k
hyperframes
HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.
Claude Plugins (Official)by heygen-com
- Design & Creative45k
discord
Discord messaging bridge with built-in access control. Manage pairing, allowlists, and policy via /discord:access.
Claude Plugins (Official)by anthropics
- Design & Creative45k
imessage
iMessage messaging bridge with built-in access control. Reads chat.db directly, sends via AppleScript. Manage pairing, allowlists, and policy via /imessage:access.
Claude Plugins (Official)by anthropics
- Design & Creative45k
mcp server dev
Skills for designing and building MCP servers that work seamlessly with Claude. Guides you through deployment models (remote HTTP, MCPB, local), tool design patterns, auth, and interactive MCP apps.
Claude Plugins (Official)by anthropics
Catalog data refreshed . Something wrong? Report it.