Design

Design

Use for user-facing flows, screens, layout, interaction, content hierarchy, or visual refinement. The source product language remains authoritative. Protect attention: one primary action, one success state, and no decorative complexity that hides the job.

Inputs to lock

• User and job to be done.
• Primary action and success state.
• Existing product language and visual system.
• Required states, devices, accessibility level, and performance constraints.
• Reference image or live page when fidelity is required.

Method

1. Read the current experience before proposing changes. Capture the relevant states when a rendered surface exists.
2. State the problem, result, and one design direction.
3. Map the flow from entry to success, including empty, loading, error, disabled, partial, and recovery states.
4. Establish hierarchy: one primary action, clear grouping, readable density, and predictable navigation.
5. Reuse healthy components and tokens. Do not add a parallel visual language for one screen.
6. Preserve semantic HTML, keyboard flow, focus visibility, contrast, reduced motion, and meaningful labels.
7. Implement the smallest coherent change. Avoid decorative motion or abstraction that does not improve comprehension.
8. Verify narrow and wide view sizes, content extremes, interaction states, and keyboard use.
9. Compare the rendered result against the chosen direction, not only the source code.
10. Record any deliberate trade-off, unmet state, and the next visible action or proof.

Output

Show the chosen direction visually when shape matters. Bind completion to rendered proof and behavior checks. Do not invent product semantics or rename concepts without an accepted product decision.