Cheatcode_
Feedback

Catalog / Design / Frontend design

Agent skills

Frontend design

Listed by its author as frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated…

by anthropics · Apache-2.0 · 191k GitHub stars

DoesDesign and UIWeb frontendMaps, travel and locationNews and social feeds

Source on GitHub ↗
curl -fsSL https://api.cheatcodehq.com/install.sh | sh -s -- anthropic-frontend-design --to all

Copies 1 skill into each app's skills folder (Claude Code: ~/.claude/skills), after checking every file against anthropics/skills at commit 3337550. Nothing else on your computer changes. To undo it, run the terminal command with --uninstall at the end; that also removes what the app added.

Then start a new session in your AI app and ask for the work in plain words; it picks the skill from its description. In Claude Code you can also type /anthropic-frontend-design:frontend-design.

See it in use

One real session, replayed step by step: the request, each step at the moment it happened, and the answer, unedited. Long waits are shown faster, with the real time in the corner. Sample website brief invented for this example: Hearth & Crumb is a fictional neighborhood bakery, and every name is made up.
The result
index.htmlWhat the session produced: index.html, the file the session saved, opened in a browser.

A one page website as a single HTML file, plus a list of placeholders and open questions before it goes live.

index.html, the file the session saved, opened in a browser.

Open the whole result
Try it

After installing, start a new session and say: Make a one page website for my small business from the notes in brief.md. Don't ask me anything first, and save it as index.html.

What else it can do, and its limits
  • One skill that guides the AI's visual choices when it builds a web page, an app screen or reshapes an existing one
  • Starts from your subject's own world for palette, typefaces and layout, and avoids the looks that mark a page as made by AI
  • Writes interface copy in plain words: buttons that say what they do, errors that say how to fix them
  • Builds to a basic quality floor: works on phones, visible keyboard focus, reduced motion respected
  • It guides the design but does not host or publish the page; a working sign up form needs your own email address or a form service, as this run noted
  • It suggests checking the page in screenshots; this run had no browser, so the page was not looked at before saving

Sample input Recorded Oct 24, 2026 in Claude Code 2.1.308 with Sonnet 5.5. The video replays that session; nothing in it was acted or edited.

What's inside 1 skill

  • frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

    Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

About

Public repository for Agent Skills

Where this comes from. The public repository anthropics/skills at commit 3337550, under its Apache-2.0 license, copied without changes. anthropics is not affiliated with Cheatcode and has not claimed this listing yet. New releases are repackaged after review, never synced automatically. If this is your project, write to admin@cheatcodehq.com to claim or remove it.

Something wrong with this listing, or it did not install? Tell us

Versions

v0.0.0-g3337550Listed from anthropics/skills at 3337550 · 2026-09-28