Design QA — Cal.com-inspired family home

Source visual truth: C:\Users\19926\.codex\generated_images\01a04af9-0d32-7642-8148-1b73f4c8e2f3\exec-b564b19a-1b44-4198-93d0-166c8a00e356.png
Implementation evidence: C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-implementation-v3-desktop.png
Combined comparison: C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-design-qa-comparison.png
Responsive evidence: C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-implementation-narrow.png
Route/state: /?designPreview=1, signed-in visual preview state, first elder selected.
CSS viewport: 1440 × 1024; device scale factor 1.
Source pixels: 1488 × 1057. Implementation pixels: 1425 × 1024 (15 px vertical scrollbar reservation). The combined comparison normalizes both frames to 720 × 512 panels without changing their common ~1.407 aspect ratio.

Full-view comparison evidence

The side-by-side comparison verifies the same 64 px top-navigation state, 46 px outer page margins, 7/5 primary-panel split, 480 px primary-panel height, three-person switcher, right-side elder summary, and grouped recent-activity surface. The implementation preserves the source's near-monochrome hierarchy, light borders, limited radius scale, and single black primary action.

Focused-region comparison evidence

The source and implementation were also opened at original resolution. The header/navigation, person switcher, schedule timeline, elder summary, device row, recent conversation, primary action, and recent-activity rows are readable at full scale; no additional crop was required. Individual raster assets were inspected separately at 512 × 512 before being integrated.

Required fidelity surfaces

Fonts and typography: passed. Display headings use the Cal Sans-compatible geometric stack at weight 600 with negative tracking; body/UI copy uses Inter-compatible system text. Hierarchy and wrapping match the reference at the target viewport.
Spacing and layout rhythm: passed. Header, page margins, switcher spacing, main panel ratio/height, row rhythm, radii, and recent section align with the reference. No heavy elevation remains.
Colors and visual tokens: passed. The interface uses white, #111111, #374151, #6b7280, #e5e7eb, #f8f9fa, and #f5f5f5; primary actions are monochrome and no decorative gradients remain.
Image quality and asset fidelity: passed. Three 512 px portrait assets and one 512 px speaker product asset replace generic placeholders and retain clarity in circular/40 px crops. Ant Design supplies standard UI icons.
Copy and content: passed. The selected elder, companionship schedule, recent conversation, confirmed memory, family invitation, device state, and primary action match the selected concept's Chinese product narrative.

Comparison history

Iteration 1

Earlier finding [P1]: shared button selector overrode navigation, person-switcher, and recent-row surfaces with black fills.
Fix: reduced primary-button selector specificity with :where(...) so component-specific surfaces win.
Post-fix evidence: cal-implementation-v2-desktop.png shows white navigation, outlined person tabs, white recent rows, and a single black primary CTA.

Iteration 2

Earlier finding [P2]: content frame was too narrow, top navigation began too near the center, and the schedule panel was about 40 px too short.
Fix: set the family-home frame to 46 px desktop margins, moved navigation to begin after the brand, expanded the 7/5 panel to 1333 px, and raised the schedule row rhythm to produce a 480 px panel.
Post-fix evidence: cal-implementation-v3-desktop.png; measured panel bounds are x=46, y=277.9, width=1333, height=480.

Iteration 3

Remaining polish [P3]: the 40 px device thumbnail used a standard microphone icon instead of product imagery.
Fix: generated and integrated public/assets/companion-speaker.png. This is non-blocking polish and does not alter layout.

Interaction and runtime checks

Person switcher changed the elder summary from 林秀兰 to 陈建国.
“安排一次陪伴” navigated to ?section=conversations and removed preview mode as intended.
Family narrow-screen view at 531 px had no horizontal overflow; the menu toggle was visible and the closed sidebar translated fully off-canvas.
Maintenance view at 390 px had no horizontal overflow; its desktop view exposes all six top-navigation destinations.
Browser console: no warnings or errors in the final customer and maintenance checks.
npm run build: passed. The existing bundle-size advisory remains non-blocking.

Findings

No actionable P0, P1, or P2 mismatches remain.

Open Questions

Authenticated production data may vary in row length and count; truncation and empty states remain governed by the existing business components.

Implementation Checklist

Selected visual recreated at the desktop target.
Shared family and maintenance design tokens applied.
Primary interactions tested.
Responsive layout checked below the 768 px breakpoint.
Build and browser console verified.

Follow-up Polish

P3: Cal Sans is represented by a Manrope/Inter-compatible fallback because the proprietary font is not bundled.

final result: passed

5.3 KiB Raw Permalink Blame History Unescape Escape