What the tech

Search

Browse topics

/ opens search from anywhere. Esc closes it.

Tools
What the tech
Get the newsletter

frontend-design: a Claude Code skill by Anthropic

Official

For anyone asking Claude to build a page or screen whose look should be chosen for the subject. Skip it if your brief already fixes the palette, fonts and layout.

Copy install command View the source
Score
97of 100
Rank
#2of 239
Installs
1.1Mon skills.sh
Security
Clear 5 scanners
Updated
2026
Context
~54tokens always

Install

npx skills add https://github.com/anthropics/skills --skill frontend-design

Run it in your terminal. View the source

Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app

frontend-design is also a Claude Code plugin. See that page

What does frontend-design do?

frontend-design is a Claude skill that sets how Claude approaches visual design when it builds or reshapes an interface. It first pins down the subject, audience and main job of the design, confirming them when the brief is silent. Claude then drafts a plan: four to six named hex colors, typefaces and their roles, a layout idea sketched as ASCII wireframes, and a few guiding principles. It checks that plan against a list of common AI design habits, such as a cream background with a clay accent or identical rounded cards, and revises anything generic before coding. It also covers interface copy, restrained motion and mobile and keyboard basics.

When should you use frontend-design?

Use it when

  • Starting a new landing page or app screen from a short brief
  • Your AI-built pages keep looking like every other one
  • You also want help with button labels and error text

Skip it when

  • Your brief already pins down the visual direction
  • You only need backend or data code

What it needs and what it can touch

What it can do

  • Writes frontend code files in your project
  • Takes screenshots of its own work when your setup allows

From reading its instructions, not from running it.

Why it scores 97

Strongest on upkeep (100 of 100), weakest on adoption (92).

  • Adoption35 points 92
  • Upkeep20 points 100
  • Trust20 points 100
  • Quality15 points 100
  • Reader answers10 points Not enough answers yet, so this does not count

How the formula works

Is frontend-design safe to install?

Every scanner that checked it passed it. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.

ScannerResultDate
Gen Agent Trust HubPassedSep 15, 2026
SocketPassedSep 15, 2026
SnykLow riskSep 15, 2026
RunlayerPassedFeb 26, 2026
ZeroLeaksPassedApr 16, 2026

Details

Installs
1,103,417
Repository stars
192,526
Last repository change
Tokens always loaded
about 54
Tokens when used
about 2,268
License
Apache-2.0
Data confidence
High

Alternatives to frontend-design

All skills for this job

  • AI Design Skills

    For people building a landing page or Figma file who want fixed design rules and conversion structure.

    Score 60 15.2K GitHub stars

    Get AI Design Skills

  • ui-ux-pro-max

    For builders who want Claude to pick styles, palettes and fonts from a local search database before writing UI.

    Score 86 446K installs

    Get ui-ux-pro-max

  • design-taste-frontend

    For people building landing pages or app screens who want a chosen art direction, checked in a real browser.

    Score 84 761K installs

    Get design-taste-frontend

  • hallmark

    For founders and designers starting a new site who want a dealt theme and a lint pass against stock AI looks.

    Score 78 102K installs

    Get hallmark