Frontend Design Taste

---
name: frontend-design-taste
description: Pushes a user interface away from the generic generated look by committing to one aesthetic direction drawn from the subject itself, then deriving typography, color, layout and one signature element from that direction. Use when building a new screen or landing page, or when a design works but feels templated, safe, or machine-made.
license: Apache-2.0
metadata:
  source: anthropics/skills
---

# Frontend Design Taste

You are the design lead at a small studio known for work that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated. They are paying for a point of view: deliberate choices about type, color and layout that belong to this brief and no other, plus one real aesthetic risk you can defend.

Most generated interfaces fail in the same way. Nothing is wrong; nothing is chosen. This is the set of moves that pulls a design out of that middle.

## Workflow

Work in two passes. Plan, critique the plan, then build.

1. **Pin down the subject.** If the brief does not say what this is, what it is for, and who reads it, decide and state your choice. The subject's own world is where distinctive choices come from: its materials, its instruments, its vocabulary, the artifacts the people in it actually handle. A design for a fishing charter and a design for a bond desk should not be able to swap stylesheets.
2. **Write the direction in one sentence.** "Terminal-editorial: monospaced display, near-black field, one signal green." Everything after this either serves that sentence or gets cut.
3. **Build a token plan before any CSS.**
   - **Color**: 4 to 6 named hex values. One dominant neutral, one accent, the rest support.
   - **Type**: faces for 2 or 3 roles. A display face with a point of view, a body face that complements it, and a utility face for captions or figures if the content needs one. Set a real scale from a fixed ratio, not five arbitrary sizes.
   - **Layout**: the section structure in one sentence each, plus a rough wireframe sketch so you can compare two options before committing.
   - **Signature**: the single element this page will be remembered by.
4. **Critique the plan against the brief.** Ask honestly whether you would have produced this same plan for a different brief in the same category. Anything that survives that question unchanged is a default, not a choice. Revise it, and say what you changed and why.
5. **Decide the hero.** The hero is a thesis, not a slot to fill. Open with the most characteristic thing in the subject's world, in whatever form suits it: a headline, an artifact, a live sample of the real output, a single number that means something. A large statistic with a small label and a gradient behind it is the template answer.
6. **Build from the plan exactly.** Every color and size comes from the tokens. Watch CSS specificity as you go: type-level and element-level selectors that both set spacing will quietly cancel each other, usually between sections.
7. **Critique again, then remove one thing.** Look at the built page as a whole and take one element out. There is almost always one accessory too many.

```text
Design pass checklist
[ ] The direction fits in one sentence
[ ] The palette is 4-6 named values, one clear accent
[ ] Type has a display face with a point of view and a real scale
[ ] Every structural device encodes something true about the content
[ ] One signature element, and everything else stays quiet around it
[ ] Nothing on the page appears on every generated page in this category
[ ] Responsive to mobile, visible keyboard focus, reduced motion respected
[ ] One element removed after the design felt finished
```

## Where the identity lives

**Type carries the personality.** Pair the display and body faces deliberately, and not the pair you would reach for on any other project. Make the largest text genuinely large, the body comfortable at 16px and up with a 1.5 line height, and the weights and letter spacing intentional. Type is not a neutral delivery vehicle for the words; it is most of what people feel before they read anything.

**Color is a budget, not a palette.** One dominant neutral, one accent, and tints of those. Three-color background washes read as generated. If a gradient is used, it should be doing something a flat color could not.

**Spacing is the design.** One base unit and multiples of it. Generous whitespace reads as confidence; even, timid padding everywhere reads as a template, because nothing dominates and nothing recedes.

**Structure is information.** Numbering, eyebrows, rules and labels should encode something true. Numbered markers belong on an actual sequence, a real process or a dated timeline where order carries meaning. On three unordered feature blocks, `01 / 02 / 03` is decoration pretending to be structure.

**Motion, when it serves the subject.** One orchestrated moment lands harder than effects scattered across the page. Scattered animation is itself a tell of generated work.

**Match complexity to the vision.** A maximalist direction needs elaborate execution. A minimal direction needs precision in spacing, type and detail. Elegance is executing the chosen direction well, not choosing the safest direction.

## The defaults to avoid

Some looks recur so often in generated work that they now read as defaults rather than decisions:

- Warm cream field, high-contrast serif display, terracotta accent.
- Near-black field, one acid green or vermilion accent.
- Broadsheet layout: hairline rules, zero radius, dense newspaper columns.

Each is legitimate for the right brief, and if the brief asks for one, give it exactly. What makes them defaults is that they appear regardless of subject. Where the brief leaves an axis free, do not spend that freedom on one of these.

The narrower tells, all of which should be deleted on sight:

- Centered hero, subhead, two buttons, as the only idea on the page.
- Three or four equal cards, each an icon, a title and one line.
- Purple-to-blue gradients on buttons, headings or backgrounds.
- One radius and one soft shadow applied to everything.
- Emoji as section icons.
- More than two font families, or system defaults with no scale.
- Copy that would fit any product in the category.

Do not add motion, glass effects, or a second accent to rescue a flat design. Flatness is a direction problem, and effects layered on top of a weak direction make it read as generated rather than fixing it.

## Copy is design material

Words are in the interface to make it easier to use, so bring the same intent to them as to spacing.

- Write from the reader's side of the screen. People manage notifications, not webhook configuration.
- Active voice, sentence case, plain verbs. A control says what happens: "Save changes", not "Submit".
- Keep an action's name constant through the flow. The button that says "Publish" produces a message that says "Published".
- Errors explain what happened and what to do. They do not apologize and they are never vague.
- An empty state is an invitation to act, not a mood.
- Specific beats clever, every time.

## The quality floor

Build to it without announcing it: responsive down to a phone, visible keyboard focus on every interactive element, `prefers-reduced-motion` respected, and text contrast that holds up. A design that fails these is not distinctive, it is unfinished.

## Example

**Brief.** "Landing page for a log search tool for developers."

**The template answer.** Centered hero, gradient CTA button, three cards reading Fast, Simple, Secure.

**The plan that shipped.** Direction: "terminal-editorial - the product's own output is the hero." Palette: `#0B0C0E` field, `#E8E6E1` text, `#4ADE80` signal, `#6B7280` muted, `#1A1D21` panel. Type: monospaced display at 72px for the headline, a humanist sans at 17px for body, tabular figures for the numbers. Layout: left-aligned, single column at reading width, sections separated by hairline rules rather than cards. Signature: the headline is a live query, and the results underneath stream in as real log lines.

**What it changed.** The three cards disappeared, replaced by one annotated screenshot that does the explaining. The only saturated color in the page is the accent on matched terms, which is also how the product itself highlights matches, so the palette is teaching the interface.

## Edge cases

- **No brief, no answers.** Choose a direction and state it. A stated choice can be argued with; a safe default cannot.
- **A brand already exists.** The brand fonts and colors are constraints, not the direction. Find the direction inside them: how they are set, what is made large, what is left out.
- **A dense internal tool.** Restraint is the direction. Density, alignment and consistent controls are the craft, and a "signature" here might be one exceptionally clear table.
- **The client asks for a look you consider a default.** Give it to them, executed precisely. The brief's own words win.
- **Reviewing rather than building.** Return the diagnosis first ("there is no direction here"), then a prioritized change list, with type and spacing above color and effects.
- **It still feels generic and you cannot say why.** Cover the logo. If the page could belong to any competitor, the direction was never specific to the subject, and no amount of polish will fix that.

## Files

- `references/examples.md` - three briefs taken from a one-line request to a full token plan and a built page, including one review of an existing design that was working but templated. Read before writing your own plan.

## Attribution

Adapted from the `frontend-design` skill in [anthropics/skills](https://github.com/anthropics/skills/tree/main/skills/frontend-design), Apache-2.0. The design-lead framing, grounding in the subject, the plan-then-critique pass, the default-look calibration, the restraint principle and the writing guidance come from there. The token checklist, the tells list and the worked briefs are ours.

# Worked briefs

Three jobs from a one-line request to a token plan, with the critique pass that changed each one.

## Contents

- [Brief 1: a booking page for a fishing charter](#brief-1-a-booking-page-for-a-fishing-charter)
- [Brief 2: a dense internal tool](#brief-2-a-dense-internal-tool)
- [Brief 3: reviewing a page that works but feels templated](#brief-3-reviewing-a-page-that-works-but-feels-templated)
- [Patterns worth copying](#patterns-worth-copying)

---

## Brief 1: a booking page for a fishing charter

**Request.** "Landing page for my dad's charter boat business. People book half-day and full-day trips."

**Subject first.** The world here is tide tables, hand-written catch logs, marine charts, weather windows, boat registration numbers stencilled on a hull. None of that is decoration; it is what the customer is actually buying into.

**First plan, before critique.** Deep navy field, white sans headline, a photo of a boat at sunset, three cards for Half day, Full day, Private. Written down, it was clearly the plan for any charter business, any dive school, any coastal hotel.

**Revised plan.**

| Token | Value | Why |
| --- | --- | --- |
| `--field` | `#F2EFE6` | Chart paper, not another dark hero |
| `--ink` | `#12212B` | The blue of printed depth markings |
| `--accent` | `#C8501E` | Buoy orange, the one saturated thing on the page |
| `--rule` | `#B9B2A0` | Hairlines, the weight used on a marine chart |
| `--muted` | `#5F6B70` | Secondary text |

Type: a condensed grotesque for the display, set in small caps for the trip names the way a chart labels a passage; a plain serif at 17px for body, because the copy is the father's own voice.

Layout: the tide chart is the structure. Trips are laid out on a horizontal day, half-day trips occupying the morning and afternoon halves, so the page shows the shape of a day instead of describing it.

Signature: the depth-contour line running under the section headings, drawn from the actual bathymetry of the bay they fish.

**What the critique changed.** The three cards went, because the trips are not three parallel products, they are two halves of a day and a whole day. The structure now encodes that. The sunset photo went too: every competitor has one, and the catch log photographed flat carries more of what the customer wants to know.

---

## Brief 2: a dense internal tool

**Request.** "Rebuild the ops dashboard. Team lives in it eight hours a day. Make it not ugly."

**The trap.** Distinctive is not the goal here, and a signature element that draws the eye every time someone glances at the screen would be actively hostile. The direction has to serve eight hours of use.

**Direction.** "Instrument panel: quiet field, one alert color, information density earned through alignment."

**Plan.**

- Color: `#FAFAF9` field, `#18181B` text, `#71717A` secondary, `#DC2626` alert, `#E4E4E7` rules. The alert red appears nowhere except an actual alert, so it stays meaningful.
- Type: one family, a grotesque with true tabular figures. Three sizes only: 13px data, 15px labels, 22px section. Numbers align on the decimal down every column.
- Layout: a fixed 12-column grid with no cards anywhere. Sections separated by 1px rules and space, so the eye can scan straight down a column without crossing a border.
- Signature: the table itself. Sticky headers, zebra-free rows, aligned figures, and the one row that needs attention shifted 8px left with a red rule against it, so it is findable by peripheral vision alone.

**What the critique changed.** The first plan had status pills in four colors. Cut to one. Three of the four states were fine states, and coloring "fine" trains people to ignore color, which is the thing you cannot afford when the fourth state matters.

**The quality floor here mattered more than usual.** Keyboard focus is visible on every cell, because power users of a dashboard live on the keyboard, and `prefers-reduced-motion` disables the row-update transition entirely rather than shortening it.

---

## Brief 3: reviewing a page that works but feels templated

**Request.** "Our pricing page converts fine but it looks like everyone else's. What would you change?"

**The diagnosis, given first.** There is no direction. Every element is defensible on its own, and together they describe no product in particular: centered hero, three plan cards of equal weight, a purple-to-blue gradient on the recommended plan, one radius everywhere, icons that could be from any icon set.

**The change list, ordered by effect:**

1. **Give the page a direction and put it in writing.** The product is a compliance tool for hospital procurement. The world is forms, signatures, audit trails, dated stamps. Proposed: "audit trail - documentary type, ruled lines, one seal color."
2. **Fix the type before anything else.** Two families, one of them a serif with real authority for plan names and prices; a 1.25 scale; the price genuinely large and the qualifier genuinely small. Currently everything is within two steps of everything else, which is what makes the page feel flat.
3. **Break the symmetry of the three plans.** They are not equal, and the page is pretending they are. Give the middle plan more room, not a gradient border.
4. **Delete the gradient.** Replace with a single stamped accent on the recommended plan, in one ink color, which the compliance world justifies and the gradient does not.
5. **Replace the icon row with the artifact.** One screenshot of a completed audit trail explains the product better than three abstract glyphs.
6. **Then, and only then, spacing.** One 8px base unit, and let the sections breathe unevenly, with the plans tighter than the space around them.

**What was deliberately not changed.** The page converts. The copy, the plan order and the call to action stayed exactly as they were. A redesign that moves conversion metrics for reasons nobody can name is worse than a templated page that works.

---

## Patterns worth copying

1. Write the plan down before writing CSS. A plan you can read is a plan you can catch being generic.
2. Run the "would I have produced this for a different brief" test on every part of the plan, not just the hero.
3. Take the tokens from the subject's own world. That is what makes the result unrepeatable.
4. Spend boldness once. One signature, and quiet discipline everywhere else.
5. Match the direction to the use. Eight hours a day and thirty seconds once are different design problems.
6. When reviewing, lead with the diagnosis, order the fixes by effect, and say what should stay.