Frontend Design Prompt

先把「AI 生成页面」的套路长相写出来再刻意避开，然后用真实字号体系、十六进制色值、对比度和完整状态清单守住细节底线。

第 0 步先让模型用五行写出「AI 生成版本」的页面长什么样——这份清单就是要避开的东西。随后依次处理气质（字体是最被低估的杠杆、刻意选定疏密、一个克制的强调色、且只用一个结构性想法）、细节底线（明确的尺度体系与精确取值）、响应式（断点依据内容断裂处而非设备名）、包含 focus-visible 在内的全部状态，以及带明确对比度数值的语义与无障碍要求。

# Frontend Design

**Use when:** building web interfaces and you want something that does not look like every other AI generated page.
**Pairs with:** [ui_design.md](ui_design.md), [ux_review.md](ux_review.md)

There is a recognisable look that models produce by default: a centred container, a gradient hero, three feature cards with icons, rounded corners everywhere, a purple to blue gradient button, and generous grey. It is competent and forgettable. This prompt is about escaping it.

---

## The prompt

```text
You are building a web interface that a designer would look at and think
someone made real decisions here.

STEP 0: NAME THE DEFAULT, THEN AVOID IT
Write down, in five lines, what the generic AI generated version of this
page looks like. Layout, colours, type, spacing, components.
That is your list of things not to do, unless you can give a real reason
why the default is genuinely right here.

STEP 1: DECIDE THE CHARACTER
One sentence: what should this feel like? And one sentence: what should
it not feel like?
Then pick the choices that create that feeling. Character comes from a
small number of strong decisions, usually in this order:
- Type. The most under used lever. A real typeface choice with a real
  scale changes everything. Say the family, the weights, the scale.
- Density. Airy or tight is a decision. Make it deliberately.
- Colour discipline. Mostly neutral with one confident accent usually
  beats a palette of five.
- One structural idea. An asymmetry, an unusual grid, a strong rule line,
  an oversized element. One. Not five.

STEP 2: THE DETAIL FLOOR
Real values only.
- Spacing scale, stated, and every gap comes from it.
- Type scale with size, weight, line height, and letter spacing per level.
  Body line height 1.5 to 1.65. Headings tighter, often 1.1 to 1.25.
  Large headings usually need negative letter spacing.
- Measure of 45 to 75 characters for reading text. Full width paragraphs
  are the most common mistake on the web.
- Colours in hex with light and dark values, and the contrast ratio for
  every text pairing.
- Radii from one scale. Shadows with exact values or none at all.
- Transitions with duration and easing.

STEP 3: RESPONSIVE IS A DESIGN, NOT A SIDE EFFECT
- Say the breakpoints and why they are there. Base them on where the
  content breaks, not on device names.
- Design the small screen deliberately, not as a squeezed version of the
  large one. Say what changes: order, hierarchy, what is hidden, what
  becomes a different pattern.
- Test the awkward widths, around 320px and around 700px, not just the
  two you designed.
- Touch targets at least 44px on touch devices.

STEP 4: EVERY STATE
default, hover, active, focus visible, disabled, loading, empty, error,
success, partial data, long content, short content, no JavaScript if that
applies.
Focus visible is skipped constantly and it is the one keyboard users
depend on. Never remove the outline without replacing it with something
clearly visible.

STEP 5: SEMANTICS AND ACCESSIBILITY
- Real elements. A button is a button, a link is a link, a heading is a
  heading, in order, without skipping levels.
- Labels tied to inputs. Errors tied to their field and announced.
- Keyboard: everything reachable, focus order matching visual order, no
  trap, escape closes.
- Contrast: 4.5:1 body text, 3:1 large text and meaningful icons and
  borders.
- Respect prefers reduced motion and prefers colour scheme.

STEP 6: PERFORMANCE IS PART OF THE DESIGN
- No layout shift. Reserve space for anything that loads.
- Images sized and served at the right size, with modern formats.
- Fonts: say the loading strategy, and make sure text is readable while
  they load.
- Nothing important waits on JavaScript that did not need to.

STEP 7: CRITIQUE PASS
As a design director who did not make this:
1. Which parts are still the default from step 0?
2. Where is the spacing rhythm inconsistent? Point at the values.
3. Is there one memorable thing here, or is it all safe?
4. What would break at 320px wide, or with three times as much text?
5. Which element could be deleted with no loss?
Fix, then run the pass again. Stop when a pass finds nothing above minor.

OUTPUT
The implementation, a values table, and under 8 lines on the direction
and the one decision that mattered.
```

---

## The character test

```text
Describe this design in three adjectives. Now, would those adjectives
describe most websites? If yes, you have not designed anything yet. Pick
adjectives that are actually a choice, and redesign to earn them.
```

---

## For a component library

```text
Design this component as part of a system, not on its own.
- Which tokens does it consume? It must not introduce a value that is not
  in the system without saying why.
- What variants exist, and what is the rule for when to use which?
- What is the component not responsible for? Say this explicitly, it
  prevents the component from growing forever.
- How does it compose with the components next to it? Show it in context,
  not in isolation.
- Every state, with the exact token used for each.
```

---

## Why it works

**Step 0** is the most important part. The default look is a strong attractor. The only reliable way to escape an attractor is to describe it first, which turns it from an invisible habit into a visible list.

**Type as the first lever** is real design advice and it changes model output noticeably. Models default to system fonts at three sizes. Asking for a deliberate typographic scale produces the largest visible improvement per instruction.

**One structural idea, not five** prevents the other failure mode, which is a page where every section is trying to be interesting and none of it holds together.