---
name: design-distinctive-frontend-ui
description: Gives a new page or app screen a distinctive look instead of the generic AI-template style - ground it in the subject, plan palette, type and layout, check the plan for cliches, then build and critique. Use when a design looks generic or AI-made, the user wants a unique visual identity, or asks for bold typography and a fresh style.
license: Apache-2.0
metadata:
  category: design
  tags: "ui,typography,css"
  author: johnny-bravo
  version: "1.0"
  updated: "2026-10-31"
  status: published
  source_url: "https://github.com/anthropics/skills/tree/ca45fc496a3436251f191354091d557da31c15b5/skills/frontend-design"
  source_license: Apache-2.0
  copyright: "Copyright 2026 Anthropic, PBC."
  original_author: "Anthropic (anthropics/skills, frontend-design)"
  modified: "Adapted by TheSkillVault: condensed into numbered steps in plain language, kept the list of generic tells, added safety and done-when sections."
  imported_on: "2026-10-31"
---

# Design a distinctive frontend UI

Make choices that fit this product and its audience, not the defaults you would use for any page.

## When to use
- A page works but looks like every other AI-generated site.
- You want a visual identity for a new product, page or screen.
- You are about to pick colours and fonts and want them to mean something.

## Steps
1. **Name the subject.** Write one line each for what the product is, who it is for and the page's main job. If the brief does not say, propose it and confirm.
2. **Mine the subject's world.** Its materials, vocabulary and culture are where distinctive choices come from. A toy for kids and a finance dashboard should look nothing alike.
3. **Write a small design plan.** Use 4–6 named hex colours, one or two typefaces with clear roles, a layout idea (a rough ASCII wireframe helps) and two or three principles.
4. **Check the plan for generic tells.** Look for a cream background with a serif and clay accent, near-black with one neon accent, and identical rounded cards with the same soft shadow. Also look for all-caps eyebrow labels above every heading, "A · B · C" meta lines and arrows on every button. Replace any you did not choose on purpose, and say why.
5. **Open with the most characteristic thing.** The hero might be a headline, an image, a live demo or an interaction. Do not default to a big number with a gradient.
6. **Let type carry the personality.** Set a clear type scale and keep lines under about 80 characters. Avoid highlighting one word in a headline.
7. **Spend boldness in one place.** Make one memorable element and keep the rest quiet. Use one orchestrated motion moment rather than fades on every section.
8. **Write real copy.** Name things the way users would. Buttons say exactly what happens ("Save changes", not "Submit"). Errors explain how to fix the problem.
9. **Build, then critique.** Screenshot the result, compare it with the plan, and remove one decoration that does not serve the brief.

## Quality floor
- Responsive down to mobile, visible keyboard focus, and enough colour contrast.
- Respect `prefers-reduced-motion`.

## Gotchas
- Use only fonts and images you have the licence to use. Never paste private customer data into mock-ups.

## Works with any stack
This works with any framework or CSS approach, including plain CSS, Tailwind or CSS-in-JS. If the brief names a style, the brief wins, even when it asks for one of the "generic" looks.

## Done when
- The plan names its colours, type and layout, and explains every departure from the defaults.
- None of the generic tells appear unless they were chosen on purpose.
- The page passes the quality floor on a phone and a laptop.

## Example prompt
"My landing page looks like every AI template. Give it its own personality."

---
Adapted from "frontend-design" in anthropics/skills (Apache-2.0, Copyright 2026 Anthropic, PBC). Changed by TheSkillVault as noted above. See LICENSE.txt.