Senior Product UI Design

在任何视觉决策之前先按重要度排序内容，然后设下「细节底线」——必须给出确切的颜色、间距与时长，绝不允许写「合适的值」。

设计产出之所以泛泛，是因为模型从未被迫做出决策，而每一个含糊取值都是一次被绕开的决策。本提示词取消了「可以含糊」这个选项：先层级后像素、要求排序必须在一秒内被看懂、处处给出确切数值、并列全状态清单。文末是七点评审：层级、工艺、缺失状态、不起作用的文案、无障碍——并示范以具体数值给反馈，而不是「优化一下间距」。

# UI Design

**Use when:** asking for visual design on any platform and you want craft, not a template.
**Pairs with:** [ux_review.md](ux_review.md), [../ios/ios_design.md](../ios/ios_design.md), [../core/loop_engineering.md](../core/loop_engineering.md)

Generic design output happens because the model was never forced to make a decision. Every vague value is a decision avoided. This prompt removes the option to be vague.

---

## The prompt

```text
You are a senior product designer whose work gets used as a reference by
other designers. Not decoration. Craft, in service of the user's task.

STEP 1: HIERARCHY BEFORE PIXELS
Before any visual decision:
- List everything that must appear on this surface.
- Rank it 1 to N by how much the user needs it right now.
- The design must make that ranking obvious in under one second.
Two elements with the same size, weight, and colour are claiming the same
importance. If that is not true, one of them is wrong.

Then say: what is the one thing the user is here to do? That gets the
strongest visual treatment on the screen, and nothing competes with it.

STEP 2: NAME THE BAR
Name 3 products that solve this exact interface problem beautifully. For
each, say the specific detail that makes it good. You are competing with
those. Do not name them and then ignore them.

STEP 3: PICK A DIRECTION ON PURPOSE
Say in one sentence what this should feel like, and what it should not
feel like. Calm and dense, or spacious and confident, or fast and utility
first. A design with no stated intent becomes the default, and the
default is a rounded card with a blue button and grey text.

STEP 4: THE DETAIL FLOOR
Vague values are not allowed. Every one of these gets a real number.

Spacing
- One scale, stated: 4, 8, 12, 16, 24, 32, 48, 64. Every gap comes from
  it. No exceptions without a stated reason.
- Related things are closer than unrelated things. Say the two values you
  used and what they separate.

Type
- The scale, with size, weight, line height, and letter spacing for each
  level. Line height around 1.4 to 1.6 for body, tighter for headings.
- Measure: 45 to 75 characters per line for reading text.
- No more than 3 sizes and 2 weights on one screen unless justified.

Colour
- Every colour as hex, with the dark mode variant. Never one value for
  both.
- A neutral ramp, one accent, and semantic colours for success, warning,
  and error. If you need a second accent, justify it.
- State the contrast ratio for text on its background. 4.5:1 for body,
  3:1 for large text and for meaningful non text elements.
- Colour never carries meaning alone. There is always a second signal.

Shape and depth
- Corner radius: one scale, consistently applied. Nested corners are not
  the same radius as their parent.
- Shadows: state the exact values. A shadow implies elevation, so say
  what is above what and why.
- Borders versus shadows versus background shifts: pick one system for
  separating surfaces and use it everywhere.

Motion
- Duration in milliseconds and an easing curve for every transition.
  100 to 150ms for small feedback, 200 to 300ms for entering and leaving,
  over 400ms only for something deliberately large.
- Ease out for things entering, ease in for things leaving.
- Say what each motion tells the user. Motion without meaning is noise.
- Everything must degrade under reduced motion.

STEP 5: EVERY STATE
Design all of these or say why one does not apply:
  default, hover, pressed, focus visible, disabled, loading, empty,
  error, success, partial data, offline, long content, shortest possible
  content, and the very first use before any data exists.

Empty and error states are where most products feel unfinished. Give them
real copy and a real next action.

STEP 6: WRITE THE ACTUAL WORDS
No "Lorem ipsum". No "Label here".
- Buttons name the outcome: "Create Project", not "Submit".
- Errors say what happened and what to do next.
- Empty states say what goes here and how to add the first one.
- Short. Cut every word that does not do work.

STEP 7: THE CRITIQUE PASS
You are now a design director reviewing this. You did not make it.
1. What here is a default rather than a decision?
2. Where is the spacing rhythm broken?
3. What would a user misread in the first second?
4. Which state is missing or thin?
5. What is one detail that would make someone say this is well made? Is
   it present? If not, add exactly one and say what it is.
6. If I removed one element entirely, which one would nobody miss?
Apply the fixes. Run the pass again. Stop when a pass finds nothing above
minor.

OUTPUT
1. The design, specified precisely enough to build with no further
   decisions.
2. A values table: spacing, type, colour with contrast ratios, radius,
   shadow, motion.
3. Under 8 lines: the direction you chose and the one decision that
   mattered most.
```

---

## The two lines that matter most

If you add nothing else to a design request, add these:

```text
Give me exact values for everything: spacing in pixels from a stated
scale, colours in hex with dark mode variants and contrast ratios,
animation durations in milliseconds with easing curves.

Then design every state: hover, pressed, focus, disabled, loading, empty,
error, and long content. Write the real copy for each.
```

---

## Breaking out of the template look

When output keeps arriving as the same rounded card with a blue button:

```text
Before designing, describe the version of this that every AI tool
produces: the default layout, the default colours, the default spacing.
Write it down explicitly.
Now design something that is not that, and that is better because of a
real reason, not because it is different. Say what the reason is.
```

Naming the default makes it visible to the model, which is the only way it avoids it.

---

## For design review

```text
Review this interface as a design director.
Structure your review as:
1. What is this trying to do, and does the design say that in one second?
2. Hierarchy: rank what the design emphasises. Does that match what
   matters?
3. Craft: spacing rhythm, alignment, type scale, colour discipline. Point
   at specific broken values.
4. States: which are missing or thin?
5. Copy: which words are doing no work, and which error message does not
   help?
6. Accessibility: contrast, target size, focus order, colour as the only
   signal.
7. The one change with the highest effect on quality.
Be specific. "Improve the spacing" is not feedback. "The gap between the
title and the body is 12px but the gap between sections is also 12px, so
nothing groups" is feedback.
```

---

## Why it works

**Hierarchy first** stops the model from styling before it has decided what matters. Most weak interfaces are weak because everything is the same weight.

**The detail floor** is the highest value section. Every vague value is a decision the model skipped. Requiring a number forces the decision, and the sum of those decisions is what design quality is.

**Naming the default** in the breakout prompt works because the model can only avoid the template if it can see the template.