# Frontend Design > Has your agent design distinctive, production-grade interfaces with a clear point of view instead of generic, templated defaults. Anthropic's frontend design skill, which also ships as the frontend-design plugin for Claude Code. It steers your agent away from templated, generic-looking UI: the agent works like the design lead at a studio, grounding each design in its subject and making deliberate choices about palette, typography and layout. Claude uses it on its own when you ask for frontend work, whether that's a new interface or reshaping an existing one. What it teaches your agent - Ground the design in its subject: work out the product, the audience and the design's main job first, and draw visual ideas from the subject's own world - Plan in two passes: a compact token system (4 to 6 named colours, typefaces and their roles, a layout concept sketched as ASCII wireframes, principles), then a review of that plan against the brief before writing any code - Recognise the looks AI-generated design falls into, such as a cream background with a serif and a terracotta accent, identical rounded cards with soft shadows, and all-caps eyebrow labels, and avoid them unless the brief asks for one - Treat typography as the page's personality: one or two deliberate typefaces, a clear type scale and lines under 80 characters - Use motion sparingly: one orchestrated moment rather than effects on every section - Spend boldness in one place, and build to a quality floor: responsive down to mobile, visible keyboard focus, reduced motion respected and accessible colour - Write interface copy from the user's side: plain names, buttons that say what they do, errors that say how to fix them How to install it In Claude Code, run /plugin install frontend-design@claude-plugins-official, or add Anthropic's claude-code marketplace with /plugin marketplace add anthropics/claude-code and run /plugin install frontend-design@claude-code-plugins. The skill itself is one SKILL.md file, so agents that take Agent Skills can use it too. Good to know - No sign-in, API key or MCP server: it's guidance your agent follows while it writes the code. - When your brief names a visual direction, the skill follows it exactly, even if it's one of the looks it would otherwise avoid. - For more on prompting for frontend design, Anthropic points to its Frontend Aesthetics Cookbook. - Type: Skill - Made by: Anthropic - Category: Design - Formats: Skills - Version: a533345 - Website: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design - Source: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design - Page: https://pluginboard.ai/skills/anthropic-frontend-design ## Works with - ChatGPT - Claude - Gemini - GitHub Copilot - Cursor - Claude Code - Codex - Antigravity - Gemini CLI - Replit - OpenClaw - OpenCode - Hermes Agent ## Install ### ChatGPT In ChatGPT: Download the frontend-design folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans. View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Claude In Claude (web or desktop): Download the frontend-design folder and zip the folder itself, then upload it in Customize → Skills. View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Gemini In Gemini: Download the frontend-design folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it). View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### GitHub Copilot Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.copilot/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Cursor Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.cursor/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Claude Code Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.claude/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design Or as a Claude Code plugin: ```text /plugin marketplace add anthropics/claude-code /plugin install frontend-design@claude-code-plugins ``` ### Codex Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.agents/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Antigravity In Antigravity: Copy the frontend-design folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI). View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Gemini CLI Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.gemini/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Replit Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design .agents/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### OpenClaw Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.openclaw/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### OpenCode Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.config/opencode/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design ### Hermes Agent Run in your terminal: ```shell npx -y degit anthropics/claude-code/plugins/frontend-design/skills/frontend-design ~/.hermes/skills/frontend-design ``` View the folder on GitHub: https://github.com/anthropics/claude-code/tree/HEAD/plugins/frontend-design/skills/frontend-design --- From Pluginboard (https://pluginboard.ai).