frontend-design git:20261020.0990fb3A

Immutable. This exact content never changes and is served at /api/v1/blob/75391a49807d84b4.

---
name: frontend-design
description: "Distinctive, non-generic visual identity for new landing pages and public-facing UI. TRIGGER when: designing a new marketing/landing page or brand-forward UI that must not look templated. SKIP: rules, palette and font databases, a11y checklists (use ui-ux-pro-max); component code (use react-patterns)."
---

# Frontend Design — A Look Worth Remembering

Use when the goal is a page that looks **specific to its subject**, not like the
output every generator converges on. This skill is about *taste and decisions*.
For reference data (style catalogue, palettes, font pairings, UX rules, a11y), use
`ui-ux-pro-max`; for component code, `react-patterns` / `mui-styling`.

## Boundary with `ui-ux-pro-max`

| Question | Skill |
|----------|-------|
| "Which palette / font pair / UX rule fits this product type?" | `ui-ux-pro-max` (lookup) |
| "How do I make this page feel unlike every other one?" | `frontend-design` (direction) |
| Internal tool, dashboard, admin UI, existing design system | `ui-ux-pro-max` only — conventions beat novelty there |
| New landing page, campaign, portfolio, public product site | `frontend-design`, then `ui-ux-pro-max` to verify a11y/contrast |

If the user or an existing design system already fixes the look, follow it. This
skill only fills the choices the brief leaves open.

## 1. Anchor in the subject

Before any visual choice, write three lines: **what it is, who it is for, what the
visitor should do first.** Pull visual material from the subject's own world —
its materials, tools, vocabulary, artefacts, era — rather than from "what modern
sites look like". A cooperative bakery and a quantum-key vendor should not share
a layout.

## 2. Decide, don't default

Pick one deliberate answer per axis and be able to say *why it fits this subject*:

| Axis | Decide |
|------|--------|
| Palette | 4-6 named hex values; one dominant, one accent, neutrals with a tint |
| Type | One or two families with distinct roles; a defined scale and weights |
| Layout | A single organising idea (grid, axis, rhythm) and an alignment rule |
| Imagery | Real content, diagrams or illustration style — not stock filler |
| Motion | One orchestrated moment at most; the rest responds to user action |

## 3. Reflex check — common generic tells

If the first thing you reach for is on this list, treat it as a default and
justify or replace it:

- Purple-to-blue gradient hero, glassmorphism, glowing blobs
- Identical rounded cards in a three-column grid, same shadow on all
- Centred hero + two buttons + logo strip, always in that order
- Default system or most-popular web font, used at one weight
- Emoji or generic line icons as feature bullets
- Every section fading/sliding in on scroll; hover-lift on every card
- Filler copy: "Unlock the power of…", "Seamless", "Revolutionary"

A listed trait is fine when the subject genuinely calls for it; the failure is
using it *because it was the default*.

## 4. Spend boldness once

Choose **one** memorable element (a typographic treatment, a hero artefact, an
unusual layout break) and keep everything around it quiet. Remove decoration that
carries no meaning. Contrast between one loud and many calm elements reads as
intent; uniform loudness reads as noise.

## 5. Write the copy as design

Headlines state a concrete claim or outcome. Buttons name the action
("Start a free trial", not "Submit"). Use real or realistic content, never
lorem ipsum, and keep one name for one thing across the page.

## 6. Plan, review, then build

1. Write a short plan: palette, type roles, layout idea, the one bold element.
2. Compare it against §3. Rewrite any part you would produce for *any* similar brief.
3. Build. Keep CSS specificity flat so section/spacing rules do not cancel out.
4. Self-critique against the rendered result (screenshot if available).

## Quality floor (non-negotiable)

Responsive down to mobile, visible keyboard focus, `prefers-reduced-motion`
honoured, text contrast meets WCAG AA. Verify with `ui-ux-pro-max` accessibility
rules.