emoon-portal/prototype/adjutant-mobile/design-qa.md

Product Design QA — Adjutant P0 complete flow

Comparison target

• Source visual truth: final-visual-target.png
• Browser-rendered implementation: implementation-home-p0-complete.png
• Normalized phone-screen crop: implementation-home-p0-screen.png
• Side-by-side evidence: design-comparison-p0-complete.png
• Source pixels: 852 × 1846
• Browser screenshot pixels: 679 × 818
• Normalized comparison: 393 × 852 per side, deviceScaleFactor 1
• State: single-hospital P0 portal home, fixed Mock patient

The source is a full scroll-length mobile board without device chrome. The implementation uses the protected iPhone runtime and a visible above-the-fold viewport. The comparison therefore evaluates app-owned hierarchy, spacing, colors, cards, copy and entry prominence; the device bezel and scroll crop are expected runtime differences.

Full-view comparison

No actionable P0, P1 or P2 mismatch remains.

• Fonts and typography: heading hierarchy, weights, muted supporting copy and compact card labels match the selected direction.
• Spacing and layout rhythm: hospital header, assistant entry, status/todo strip, registration hero, two secondary services and bottom navigation preserve the source order and density.
• Colors and visual tokens: medical purple, cyan accent, pale blue surface and white-card system are consistent with the source.
• Image quality and asset fidelity: the supplied registration illustration and brand mark render sharply; Radix icons are used for standard interface actions.
• Copy and content: the only intentional product change is “语音挂号”, which reflects the frozen voice-first interaction model more accurately than “开始分诊”.

Focused region comparison was not required because the implementation reuses the already approved home visual system and the new work is primarily additional route/state behavior. The report-confirmation and tongue-processing screens use the same established card, type and spacing tokens.

Interaction verification

Verified in the Codex in-app browser at http://127.0.0.1:4173/:

1. Home “语音挂号” → voice transcript → persistent 5/6 slot summary → modify department → missing doctor follow-up → complete 6/6 slot summary → query schedule.
2. Registration emergency demo → ordinary registration stops → emergency guidance and 120 action appear.
3. New-report todo → report voice context + known-information panel → select hospital report → owner/source/final-status confirmation.
4. Tongue service → voice context + known-information panel → consent → symptom question → qualified demo image → tongue MCP processing state.
5. Services, health records and root navigation remain accessible.
6. The expandable “本次对话与操作记录” shows the voice transcription, parameter extraction, safety screening and completion events.

Browser console: no errors; only Vite connection and React development information messages.

Comparison history

Iteration 1

• Finding: the report todo previously opened a completed result directly.
• Fix: it now enters the report agent, confirms source and ownership, then proceeds to processing.
• Finding: the tongue flow skipped the visible MCP-processing stage.
• Fix: added image-quality completion, existing tongue MCP call and evidence-fusion progress.
• Finding: the emergency branch was not directly reachable from the voice-first registration entry.
• Fix: added an explicit P0 emergency-door demo and urgent text routing.
• Post-fix evidence: all three paths and the emergency branch were exercised in the in-app browser.

Iteration 2 — conversational task interface

• Finding: the first version minimized dialogue too aggressively, so patients could not easily review what they said or how the agent understood it.
• Fix: every agent task start now preserves the latest patient utterance and the assistant's interpretation.
• Finding: registration slots were only shown after all information was complete.
• Fix: the slot panel is persistent from the first follow-up, highlights the missing doctor, reports 5/6 or 6/6 completion and supports field modification.
• Finding: report and tongue entry states looked like one-off navigation cards rather than the same agent interaction system.
• Fix: both now use the shared pattern of recent dialogue, known context, current task and expandable operation history.
• Finding: the previous dark transcript surface had weak text contrast in the rendered device frame.
• Fix: the patient utterance uses a light brand-tint surface with explicit dark text.
• Evidence:
  • artifacts/product-design/conversational-task-ui/01-registration-followup.png
  • artifacts/product-design/conversational-task-ui/02-registration-complete.png
  • artifacts/product-design/conversational-task-ui/03-report-conversational-task.png
  • artifacts/product-design/conversational-task-ui/04-tongue-conversational-task.png

Follow-up polish

• P3: add a real speech-to-text adapter when the P0 demo moves beyond scripted voice transcripts.
• P3: connect task state to a shared mock store so newly completed tasks change the record list during the same session.

final result: passed