[Web/PWA][Design] Define DeepReader Web visual direction from the new design system

[AlphaMao1]

Parent

#11

What to build

Create the product-facing visual direction for the Web/PWA rebuild before further front-end implementation continues. This is a human-review design issue, not an implementation ticket.

The output should translate the upcoming front-end design system into DeepReader-specific screens: library, desktop reader with three-column reading/notes/AI layout, and Android Chrome/PWA reader with AI as a narrow-screen sheet or stacked panel. Existing Tauri screenshots can be used as behavior references, but the visual style should be redesigned rather than copied.

Acceptance criteria

• Produces 2-3 visual directions or one clearly chosen direction for DeepReader Web/PWA.
• Covers at least: library, desktop reader, Android/narrow reader, AI assistant, notes/annotations, settings entry.
• Uses Chinese product UI copy in mocks and avoids development/internal text such as issue numbers or scaffold status.
• Defines typography, spacing, surface hierarchy, icon style, controls, states, and color direction enough for an implementation agent to follow.
• Explicitly states what should be preserved from the current Tauri UX as behavior only, and what visual style should be replaced.
• User approval is recorded before dependent implementation issues start.

Blocked by

None - can start immediately.