Frontend design: official Anthropic guidance for distinctive, intentional UI
Anthropic's design-lead playbook: avoid AI-generated defaults, ground choices in the subject matter, plan-then-critique workflow
- What
- Anthropic's design-lead playbook: avoid AI-generated defaults, ground choices in the subject matter, plan-then-critique workflow
- Cost
- Free
- Needs
- none — the skill is a design methodology; license not asserted, so fetch it from the original repo and check the license file yourself before use
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — the official @anthropics frontend-design plugin skill (from the `claude-code` repo): a design-lead playbook for distinctive, intentional UI instead of templated AI-generated defaults. It catalogs the tells of generated design (cream backgrounds with terracotta accents, acid-green on near-black, the SaaS-card kit, all-caps eyebrow labels, "→" on every button), grounds aesthetic choices in the subject matter (a toy for kids is not a finance dashboard), and runs a plan-review-build-critique loop: short design plan (color tokens, type, layout, principles) reviewed against the brief before any code is written, then self-critique with restraint rules (one memorable element, quality floor: responsive, keyboard focus, reduced motion). Short listing: license could not be verified from the source metadata, so this fiche links only to the original repo — read it there. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: none — the skill is a design methodology; license not asserted, so fetch it from the original repo and check the license file yourself before use Install "Frontend design: official Anthropic guidance for distinctive, intentional UI" for me. It gives my agent Anthropic's design-lead playbook: catalog of AI-generated design tells to avoid, grounding aesthetic choices in the subject matter, and a plan-review-build-critique workflow (short design plan with color tokens, type, layout, principles — reviewed against the brief before coding, then self-critique with restraint). License not asserted in source metadata. Repository: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "frontend-design". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. verify the license in the repo's LICENSE.txt before using it in production). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.