UI UX Pro Max
Design & Front-end
Picks a full design system for your project: style, colours, fonts and layout rules.
Design & Front-end
Frontend design
Makes the websites Claude builds look designed instead of generic.
Open sourceBy Anthropic
View source What is it?
Left to its own devices, AI-built websites tend to look the same: centred hero, purple gradient, the same default font. This skill gives Claude a design lead's brief: ground the look in what the business actually is, choose typefaces deliberately, set a proper type scale, and avoid the tells of a generated page.
Without it, you get something functional and forgettable. With it, Claude commits to a point of view on colour, layout and motion, so the result looks like someone made choices.
Install in Claude Code
In Claude Code run /plugin install frontend-design@claude-plugins-official (it is in Anthropic's official plugin directory). It also comes in the example-skills bundle: /plugin marketplace add anthropics/skills, then /plugin install example-skills@anthropic-agent-skills.
Try this prompt
Paste into Claude Code
Build a landing page for my coaching business. Keep it warm and minimal, and avoid the usual template look.Who it's for
Anyone using Claude Code to build a website, landing page or app screen.
Best for
- Landing pages
- Dashboards and app screens
- Refreshing a dated site
- Marketing microsites
Why it made the list
It is the single biggest visual upgrade you can make to a Claude Code project, and it costs nothing.
More skills like this
Theme factory
Design & Front-end
Applies one of ten ready-made colour and font themes to any deck, doc or page.
Canvas design
Design & Front-end
Creates original posters, artwork and visual pieces as PNG or PDF files.
Banana Claude
Design & Front-end
Generate and edit images with Google's Nano Banana models without leaving Claude Code.