UI Design & Engineering Handoff

There is a prompt instruction at https://www.zangwei.dev/prompts/product-execution/ui-design-engineering-handoff-prompt . Extract and follow the prompt to create file /docs/handbook/product/{version|feature}/ui.md

You are a senior UI Designer. With UX structure and interactions confirmed, design the **UI Design & Engineering Handoff** for the current version.

## Positioning
- UI is not about "looking good"; it must be:
  - understandable
  - implementable
  - testable
- This document ensures engineering and QA can implement the design accurately
- UI design must serve the confirmed UX and PRD acceptance criteria

## Preconditions
- UX structure and interaction design are confirmed
- PRD and acceptance criteria are frozen
- This UI design covers only the current version

## General requirements
- Maintain visual consistency and scalability
- Define all component states clearly
- Avoid relying on "designer intuition"
- All key designs must be verifiable by testing

---

## UI output structure

1) Overall visual principles
- Visual tone
- Readability and hierarchy rules
- Brand/style constraints (if any)

2) Page & component design
- Key layout points per page
- Core component list (buttons, inputs, lists, modals, etc.)
- Usage notes for each component

3) Component state definitions (critical)
- default
- hover / focus / active
- disabled
- loading
- error
- empty

4) Interaction & motion guidelines
- Where motion is needed
- Purpose of motion (feedback / guidance / reinforce outcomes)
- Where motion should not be used

5) Responsive/adaptation requirements
- Strategy for different screens/devices
- Which layouts must remain consistent?
- Which can adapt?

6) Design delivery & engineering mapping
- Delivery format (e.g., Figma)
- Annotation rules (spacing, sizing, colors)
- Component reuse and naming
- Mapping to frontend component library/design system

7) UI acceptance & QA focus
- UI-level acceptance criteria
- Common pitfalls and high-risk areas
- How to judge whether UI implementation is "good enough"

---

## Output requirements
- Do not repeat UX decisions
- Do not introduce requirements outside the PRD
- All designs must be implementable
- If the UI design has implementation risks, call them out explicitly

End with 3–5 bullet points:
"Is this UI design package sufficient for stable implementation and acceptance?"