{
 "schema_version": 1,
 "generated": "2026-10-31",
 "id": "anthropics-skills--build-distinctive-frontends-with-the-frontend-design-skill",
 "repo": "anthropics/skills",
 "repo_url": "https://github.com/anthropics/skills",
 "repo_slug": "anthropics-skills",
 "title": "Build frontends without the generic AI look in Claude Code",
 "page_title": "How to build frontends without the generic AI look in Claude Code with Anthropic Skills",
 "summary": "Install Anthropic's example Anthropic Skills in Claude Code and use the frontend-design skill to commit to a bold aesthetic direction, with a reviewed design plan, before Claude writes any UI code.",
 "who": "A developer or founder who asks Claude for a landing page or app UI and keeps getting the same templated look.",
 "problem": "Generated pages cluster around the same defaults the skill itself lists: a warm cream background with a terracotta accent, identical rounded SaaS cards with soft grey shadows, and an all-caps eyebrow label above every heading.",
 "outcome": "A UI built from a design plan specific to your subject (named palette, deliberate typefaces, a layout concept), with one memorable element and a quality floor of mobile responsiveness, visible keyboard focus and reduced motion.",
 "steps": [
  "Run `/plugin marketplace add anthropics/skills` in Claude Code to register the repo as a plugin marketplace",
  "Run `/plugin install example-skills@anthropic-agent-skills` to install the example Anthropic Skills, which include frontend-design",
  "Give Claude a brief with the real subject, audience and primary job of the page; if the brief leaves the subject out, the skill has Claude propose one and confirm it with you",
  "Ask for the design plan first: 4 to 6 named hex colors, the typefaces and their roles, a layout concept with ASCII wireframes, and the principles that make this page unique",
  "Have Claude review the plan against the brief and revise any part that reads like a generic default, saying what changed and why, before it writes code",
  "Check the build against the quality floor: responsive down to mobile, visible keyboard focus, reduced motion respected"
 ],
 "agent_prompt": "Use the frontend-design skill from anthropics/skills to design a landing page for my product. Before writing any code, give me a design plan: 4 to 6 named hex colors, the typefaces and their roles, a layout concept with an ASCII wireframe, and the principles. Review the plan against my brief, revise anything that reads like a generic default and tell me what you changed. Spend the boldness in one place, and keep it responsive down to mobile with visible keyboard focus and reduced motion respected.",
 "agents": [
  "claude-code"
 ],
 "difficulty": "Beginner",
 "time": "20 minutes",
 "basis": "readme",
 "caveat": "The README says these Anthropic Skills are for demonstration and educational purposes and that what Claude does may differ from what is shown, so test the skill in your own environment first. On Claude.ai paid plans the example Anthropic Skills are already available without the plugin.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "python",
 "requirements": [
  "Claude Code to install the plugins (Claude.ai paid plans already include the example skills)",
  "The Claude API only if you use pre-built or custom skills through the API",
  "Many skills are Apache 2.0; the docx, pdf, pptx and xlsx skills are source-available, not open source"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": true,
 "score": 1.0,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/anthropics-skills/build-distinctive-frontends-with-the-frontend-design-skill/",
 "md": "https://dedupedai.com/use-cases/anthropics-skills/build-distinctive-frontends-with-the-frontend-design-skill/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/anthropics-skills--build-distinctive-frontends-with-the-frontend-design-skill.json",
 "api_version": "v1"
}