Skill
Frontend Design Skill
Design guidance that keeps AI-built interfaces from looking AI-built.
What does Frontend Design Skill do?
The frontend-design skill loads a set of design rules into Claude Code before it writes any UI. It pushes the model to commit to a visual direction, set a real type scale, and build spacing from a system instead of defaulting to the rounded cards, purple gradients, and Inter-on-white layout that generic AI output produces.
It works as a single SKILL.md file in your project. Claude Code reads it automatically when a task involves components, pages, or styling, so the guidance applies without being asked for. It is strongest on new builds and restyles where the direction is still open.
The skill guides decisions. It does not generate images, icons, or brand assets, and it will not overrule a design system you have already documented.
How do you install Frontend Design Skill?
$ mkdir -p .claude/skills/frontend-design
# Install into the current project
mkdir -p .claude/skills/frontend-design
curl -fsSL https://codegen.com/skills/frontend-design/skill.md -o .claude/skills/frontend-design/SKILL.md
# Or install globally for every project on this machine
mkdir -p ~/.claude/skills/frontend-design
curl -fsSL https://codegen.com/skills/frontend-design/skill.md -o ~/.claude/skills/frontend-design/SKILL.mdRaw endpoint /skills/frontend-design/skill.md
Before you start
You need Claude Code installed and a project folder to work in. Nothing else. The skill is a single markdown file with no dependencies.
Project install
Run the first command block from the install panel above. It creates the skills folder inside your project and pulls the SKILL.md straight from the Codegen registry endpoint. Claude Code picks it up on the next session.
Global install
The second command block writes the same file to your home directory instead, which applies the skill to every project on the machine. A project-level copy wins when both exist.
Verify it loaded
Start a new Claude Code session and ask it to list its available skills. frontend-design should appear. If it does not, confirm the file landed at the path shown in the install panel and that the filename is SKILL.md in caps.
What does it look like in use?
# Input:
"Build a pricing page for a developer tool. Three tiers.
Make it look like a real product, not an AI mockup."
# Output:
# With the skill loaded, Claude Code commits to a direction first:
# - Names an aesthetic (editorial, warm technical, retro terminal) before any CSS
# - Sets a type scale with one display face and one body face
# - Derives all padding and gaps from a fixed spacing unit
# - Skips the default purple gradient and glassmorphism card look
# The result is a page with a deliberate point of view instead of
# the interchangeable SaaS template look.Which tools does it work with?
What does it not do?
- Does not generate images, icons, illustrations, or any binary assets. Pair it with an image generation workflow when a build needs artwork.
Does not import designs from Figma or translate mockups into code. It shapes direction when none exists. For mockup-to-code work, hand Claude Code the mockup file directly and use this skill for the polish pass.
Does not replace a documented design system. If your team already has tokens and component standards, point Claude Code at those and apply this skill only where the system is silent.
Learn more
- Guide Putting It All Together: Your First Working Agent · Combine CLAUDE.md rules, a review skill, and a GitHub MCP server into a working code review agent.
- Guide Connecting MCP Servers to Your Agent · Give Claude Code access to GitHub, databases, and external tools through the Model Context Protocol.
- Guide Adding Skills to Your Agent · Create custom slash commands and install community skills to extend what Claude Code can do.
- Guide Writing Your First CLAUDE.md Rules File · Create a rules file that makes Claude Code follow your project conventions from the first session.
Frequently Asked Questions
The file follows the Claude Code skills convention, so Claude Code reads it natively. Cursor and Windsurf do not load SKILL.md files, but the content is plain markdown. Paste the Process and Rules sections into .cursorrules or a Windsurf rules file and you get most of the same behavior.
Edit the SKILL.md after installing. Add your brand fonts, color values, and hard constraints under the Rules section, and delete any direction you never want. Claude Code reads the edited file on the next session. Keep your copy in version control so the whole team gets the same guidance.
Skills load based on their description field. This one triggers on frontend work like component builds, page styling, and restyles. You can also invoke it explicitly by naming it in your prompt, which helps when a task is mostly backend but touches UI at the end.
The skill itself is free. It adds a small amount of context to sessions where it loads, which counts toward normal Claude Code token usage. The file is small enough that the overhead is negligible next to the code it helps produce.