TỪ KHẢ NĂNG CỦA SẢN PHẨM ĐẾN NGÔN NGỮ THIẾT KẾ
Cơ thể là trung tâm.
Giao diện tạo sự tự tin.
Active X nên mang cảm giác của một không gian vận động cá nhân: có sự hiện diện của cơ thể, phản hồi rõ ràng từ camera và niềm vui khi hoàn thành động tác.
Phân tích dựa trên README, đặc tả MVP/UX, cấu hình, view-model, adapter và các màn Vue trong repository. Đây là khảo sát tĩnh mã nguồn, chưa chạy hoặc nghiệm thu ứng dụng thật, camera, model AI hay backend. Nghiên cứu tham chiếu bên ngoài giới hạn ở tài liệu chính thức; chưa có phỏng vấn người dùng hay đo khả dụng. Mockup là HTML/CSS/SVG độc lập để lựa chọn thiết kế, chưa thay giao diện production.
01 / Sản phẩm đang có gì?
Đây là ứng dụng Web/PWA với Vue 3, TypeScript, MediaPipe/YOLO cho tư thế, Three.js cho hình thể và IndexedDB cho dữ liệu cục bộ. Giá trị cốt lõi nằm ở việc biến chuyển động thành phản hồi: đếm lần tập, kiểm tra điều kiện động tác, đo và xem hình thể, tạo mẫu tư thế, chơi game vận động. Theo spec, MVP còn phục vụ trình diễn năng lực kỹ thuật và gọi vốn.
| Nhóm | Bằng chứng trong dự án | Hệ quả thiết kế |
|---|---|---|
| Tập luyện · E5 | S01–S05, cấu hình 6 bài; checklist, đếm ngược, valid/rejected reps, tạm dừng/kết thúc. | Đường chính ngắn: Chọn bài → Chuẩn bị → Tập → Kết quả. Một cue chủ đạo và số lần thật lớn. |
| Cơ thể · E2 | S06–S10; số đo, snapshot, chỉ số dẫn xuất, mô hình 3D, timeline. | Sheet có phân tầng thông tin; đơn vị luôn đi cùng giá trị; ghi rõ nguồn và ngày; mô hình có nhãn mô phỏng. |
| Mẫu tư thế · E6 | S11–S14; nguồn camera/file, chỉnh khớp, so khớp trực tiếp. | Editor tách khỏi màn tập. Hiện selection, nhãn khớp, vùng sai lệch và kiểm tra trước khi lưu. |
| Trò chơi · E12 | S15–S17; Né vật cản, Chạm mục tiêu, Đập bong bóng. Cấu hình luật còn ghi provisional. | Mục tiêu và vùng chơi phải rõ; vui bằng phản hồi chuyển động. Không thêm quest, ví tiền, XP hay leaderboard. |
| Tạo bài từ video | S02 có CTA tạo bài; S19/S20 đã có trong route và mã nguồn, ngoài bảng 18 màn UX cũ. | Giữ một lối vào phụ ở thư viện. Thiết kế editor theo công việc chuyên sâu, không đưa ngưỡng góc ra màn tập thường ngày. |
Những điểm lệch quan trọng
| Phát hiện | Bằng chứng | Quyết định trong bản thiết kế |
|---|---|---|
| Lời hứa “mọi thứ trên thiết bị” không còn đúng cho mọi luồng. | measurement.ts gửi ảnh front qua HTTP; real-adapters.ts nối adapter này. Overlays.vue vẫn nói ảnh không gửi ra ngoài thiết bị. | Tách quyền camera, truyền ảnh lên dịch vụ và lưu ảnh cục bộ. S08 minh họa consent truyền ảnh riêng; đây là đề xuất mới, chưa có trong logic hiện tại. Không dùng badge “100% riêng tư/offline” cho toàn ứng dụng. |
| README mô tả phép đo fake/unavailable; mã mới đã dùng HTTP. | adapter-profiles.ts: dev-local/production/demo dùng real; fallback unavailable khi thiếu URL trong measurement.ts. | Thông báo theo năng lực thực tế: chưa cấu hình / chưa sẵn sàng / đang xử lý / lỗi / kết quả. Có đường nhập tay rõ ràng. |
| Quy trình scan trong tài liệu và backend khác nhau. | UX cũ mô tả ảnh chính diện + nghiêng. API hiện tại nhận một ảnh front. | Không khẳng định luồng hai ảnh trong mockup. Cần đồng bộ frontend/spec trước thiết kế chi tiết bước capture; bản này tập trung vào thông báo trước quét. |
| PWA chưa bảo đảm khởi động và chạy toàn bộ offline. | README và sw.js: fallback trang ngoại tuyến, không cache app/model đầy đủ. | Không gắn nhãn “Sẵn sàng ngoại tuyến”. Chỉ mô tả dữ liệu đã lưu trên thiết bị ở nơi có cơ sở. |
| Phong cách Modernist đã có nền tảng nhưng khá cứng. | tokens.css: đỏ #EC3013, radius 0, font Archivo, nhiều viền 2px, camera nền lưới. | Đề xuất thay đổi có chủ đích: giảm nhiễu viền, phân biệt CTA với cảnh báo, tạo không gian cho nhân vật. Đây là đánh giá thiết kế, chưa phải kết quả usability test. |
| HUD đang có nhiều thông tin kỹ thuật. | S04.vue hiện confidence, khớp đang đo, checklist động tác và số lần. | Giữ thông tin phục hồi ngay trên màn; đưa diagnostics vào lớp chi tiết. Cue, rep và Pause/End đứng đầu thứ bậc thị giác. |
| Điểm kỹ thuật chưa luôn sẵn sàng. | exercise view-model hiển thị “Chưa có công thức” khi formScore null. | Không tự thêm 92/100, calories hay phần trăm chính xác. Kết quả mẫu giữ trạng thái thiếu công thức. |
| Lối tắt mẫu tư thế có trong UX nhưng không thấy ở template S01 hiện tại. | UX README yêu cầu E6/E12 truy cập từ S01; S01.vue hiện có game, không có nút thư viện mẫu. | Bổ sung lối tắt “Mẫu tư thế” trong concept. Cần map command hiện có khi triển khai hướng đã chọn. |
Người dùng và hoàn cảnh sử dụng — giả thuyết cần kiểm chứng
Người tập tại nhà
Muốn bắt đầu nhanh, biết camera đã thấy mình chưa, hiểu vì sao lần tập không được tính. Tay bận, thường đứng xa màn hình.
Người theo dõi cơ thể
Muốn xem số đo qua thời gian, sửa dữ liệu và hiểu giới hạn của mô phỏng. Cần ngôn ngữ trung tính, tránh phán xét ngoại hình.
Người tạo mẫu / demo
Cần chọn video, kiểm tra khớp và chỉnh điều kiện chính xác. Chấp nhận giao diện nhiều chi tiết khi chủ động vào editor.
Tham chiếu có chọn lọc
Tempo mô tả phản hồi tư thế theo thời gian thực. Bài học đề xuất cho Active X: phản hồi phải gắn với một hành động sửa được ngay; không suy diễn Active X có độ chính xác hoặc khả năng hướng dẫn tương đương.
Nex Active Arcade dùng chuyển động cơ thể làm bộ điều khiển. Bài học đề xuất: màn hình cần cho thấy hành động cơ thể nào tác động đến mục tiêu nào. Chỉ kế thừa nguyên tắc tương tác, không sao chép thương hiệu hoặc mở rộng sang hệ thống game mới.
02 / Kiến trúc UX
Giữ một màn gốc Tập luyện. Không onboarding chặn đường, không năm tab. Cơ thể ở trung tâm; “Chọn bài tập” là CTA nổi bật; Thiết lập cơ thể, Quét cơ thể và Cài đặt là hành động hỗ trợ. Game và Mẫu tư thế là lối tắt cấp hai.
Luồng chính: S01 → S02 (lọc tại chỗ) → S03 (quyền + hướng dẫn + tự kiểm tra) → đủ điều kiện liên tục → countdown → S04 → xác nhận kết thúc → S05.
Cơ thể: S01 → S06 sheet → nhập số đo hoặc S08 scan → xem/sửa → xác nhận lưu → cập nhật mô hình. Timeline mở từ S06.
Tạo nội dung: S01 → S11 → nguồn mẫu → S13 → S14; hoặc S02 → S19 → S20 → quay về bản nháp.
Chơi: S01 → S15 sheet → S16 (hướng dẫn, checklist, chơi cùng ngữ cảnh) → S17 xem kết quả/media → xác nhận chia sẻ.
Hai khoảng cách, hai mức ưu tiên
- Ở gần máy: chọn bài, nhập số đo, chỉnh mẫu. Chữ nội dung 14–16 px, thông tin có thứ bậc, form có đơn vị và lỗi tại trường.
- Đứng xa 2–3 m: rep 96–120 px, cue 28–32 px, countdown 120 px; một lời nhắc mỗi thời điểm. Nút tạm dừng/kết thúc cùng vị trí, có nhãn chữ và chiều cao 56–64 px. Khả năng đọc ở khoảng cách này cần thử trên thiết bị thật.
- Camera: khung preview phải chứa đủ khớp cần theo dõi. Letterbox tốt hơn crop mất khớp. Guide/skeleton không đè lên counter, cue hoặc điều khiển.
- Sheet: ưu tiên cho số đo/cài đặt/chọn game, max-height 92dvh. Nếu nhập form dài thì mở rộng toàn màn; giữ focus và vị trí cuộn khi quay lại.
03 / Ba art direction
| 01 / PULSE | 02 / FORM | 03 / PLAY | |
|---|---|---|---|
| Ý tưởng | Sân tập kỹ thuật số, chính xác và có năng lượng. | Studio cá nhân, hiểu cơ thể bằng nhịp độ bình tĩnh. | Sân chơi chuyển động, dễ tiếp cận và giàu phản hồi. |
| Màu / chất liệu | Graphite #141916; lime #D5F77B; ánh sáng mềm, bề mặt matte. | Ivory #F5F1E8; forest #245347; đất nung chỉ để trang trí; bề mặt ấm. | Sky #E9F1FF; cobalt #2545CA; yellow #FFCB64; hình khối đục, vui. |
| Typography | Sans mạnh, số tabular; tiêu đề ngắn, không nghiêng hàng loạt. | Serif ở tiêu đề cảm xúc, sans ở nội dung và mọi số liệu. | Sans đậm, khoảng trống rộng, câu ngắn như lời mời vận động. |
| Bố cục | Sân khấu mở và vòng sàn mảnh; thông số hai bên cơ thể; CTA lime ngang rộng. | Hốc studio hình vòm; danh sách bài kiểu editorial với đường phân cách mảnh. | Sân khấu bo lớn; vòng tròn trang trí lệch trục; thẻ bài đậm hình khối; CTA có đế màu. |
| 3D / minh họa | Hình thể trung tính matte, một key light, bóng nền nhẹ; không lưới sci-fi dày. | Hình thể chất liệu clay, ánh sáng tán xạ; tránh biểu đạt giải phẫu “chuẩn” hoặc y khoa. | Hình thể màu đơn, silhouettes dễ đọc, khối tròn làm đạo cụ; không biến số đo thành avatar phi thực tế. |
| Chuyển động đề xuất | Feedback rep 120 ms; thay cue 160 ms; trạng thái không nhấp nháy liên tục. | Sheet 220 ms; thay dữ liệu 160 ms; không chạy hiệu ứng trang trí khi inference đang hoạt động. | Phản hồi chạm mục tiêu 160–180 ms; co giãn tối đa 1,04; tắt bounce khi reduced-motion. |
| Điểm mạnh | Phù hợp demo công nghệ và tập luyện, làm nổi bật mô hình. | Dễ chịu khi xem số đo, phù hợp người mới tập và sử dụng dài. | Truyền tải game vận động mạnh nhất, dễ tạo dấu ấn. |
| Đánh đổi | Nền tối cần kiểm tra ngoài trời; lime chỉ dùng có kiểm soát. | Sắc thái thể thao nhẹ hơn; cần giữ tương phản cao ở màn tập. | Dễ lấn át dữ liệu hoặc khiến sản phẩm có cảm giác quá trẻ; cần giới hạn trang trí. |
| Chi phí tương đối | Vừa — tận dụng shell tối và thành phần camera hiện có. | Vừa — điều chỉnh theme sáng, kiểu chữ và vật liệu 3D. | Cao hơn — thêm ngôn ngữ minh họa và motion để hoàn thiện bản sắc. |
Hướng này phù hợp nhất với quyết định đặt cơ thể ở trung tâm và mục tiêu trình diễn năng lực camera. Có thể dùng một biến thể nền sáng theo FORM cho form/sheet dài, và mượn sắc vàng của PLAY cho mục tiêu trò chơi. Giữ chung hình dáng nút, icon, spacing và thứ bậc; không trộn ba bộ nhận diện thành ba ứng dụng.
Đây là nhận định thiết kế dựa trên repository, chưa phải quyết định được người dùng phê duyệt.
04 / UI design system đề xuất
Token semantic tách khỏi màu thô; cùng component API cho ba theme. File tokens.json chứa palette, typography, layout, motion và component sizes để chuyển sang CSS variables/Figma Variables sau khi chốt hướng. Prototype dùng font hệ thống sẵn có, không phụ thuộc Google Fonts để mở offline.
Màu và ngữ nghĩa
| Token | PULSE | FORM | PLAY | Công dụng |
|---|---|---|---|---|
| background | #141916 | #F5F1E8 | #E9F1FF | Nền ứng dụng. |
| surface | #222B24 | #FFFDF7 | #FFFFFF | Thẻ/sheet phân lớp. |
| text.primary | #F3F5EF | #243D33 | #182B65 | Tiêu đề, dữ liệu. |
| text.secondary | #B6C0B4 | #596B61 | #4D6087 | Đơn vị, ngày, mô tả. |
| action.primary / on-primary | #D5F77B / #17200F | #245347 / #FFFDF7 | #2545CA / #FFFFFF | Hành động tiến tới của luồng. |
| status.success | #B7EDAC | #245347 | #246044 | Luôn đi kèm ✓ và text. |
| status.danger | #FFB7AD | #A33424 | #A32C39 | Lỗi, kết thúc/hủy; tránh dùng như màu thương hiệu. |
| camera.background / text | #17211C / #FFFFFF · badge nền gần đục #152219 | Giữ tương phản khi hình camera thay đổi; không đặt chữ trực tiếp lên video. | ||
Typography, khoảng cách, bố cục
- Font: đề xuất triển khai dùng Archivo đã có ở dự án cho PULSE; nếu giữ, đóng gói WOFF2 có đủ dấu tiếng Việt. FORM dùng serif chỉ ở tiêu đề; số và điều khiển luôn sans. Prototype dùng Segoe UI/Arial và Georgia để tự chứa, nên cần kiểm tra lại line-wrap khi đổi font.
- Type scale: display 36/40, title 28/34, section 20/26, body 16/24, label 14/20, meta 12/18. Camera: rep 96–120/1, cue 28–32/1,2. Không all-caps cho đoạn văn; tabular numbers cho bộ đếm.
- Spacing: 4, 8, 12, 16, 24, 32, 48. Layout production: lề 16–24, grid một cột, safe-area trên/dưới. Artboard 390 × 844; min 360 × 800; CTA không nằm dưới bàn phím.
- Radius: PULSE 8/12/18/28; FORM 6/8/12/24; PLAY 12/16/24/32; pill 999. Border phân lớp 1 px; không dùng shadow làm tín hiệu duy nhất.
- Responsive: form/list tối đa 480 px ở desktop; camera có thể mở rộng trong vùng chuyên dụng nhưng giữ đủ khớp. Editor ở desktop có thể hai cột preview + thuộc tính. Không kéo giãn vô hạn một card mobile.
Component contract
| Component | Biến thể / trạng thái | Quy tắc |
|---|---|---|
| AxButton | primary, secondary, ghost, danger; default, focus, pressed, busy, disabled. | Min 48 px; CTA 56 px; camera 64 px đề xuất. Busy giữ width, có nhãn “Đang lưu…”. Disabled có lý do gần đó, không chỉ giảm opacity. |
| ExerciseCard / CategoryChip | Selected, filtered, empty, custom. | Toàn thẻ chạm được; một tiêu đề và metadata ngắn. Chip là bộ lọc aria-pressed; không mở route danh mục. |
| CameraStage / TrackingStatus | Permission, warming up, ready, low light, no person, multiple people, lost tracking. | Preview contain khi cần toàn thân; overlay cùng hệ tọa độ. Badge tương phản ổn định, trạng thái có text/icon. |
| RepCounter / Cue / Stepper | Đếm đúng, chưa đủ biên độ, tracking chưa đủ. | Một cue đang có hiệu lực; không tự suy ra “sai tư thế” khi thiếu confidence. Không aria-live cho từng frame; chỉ thông báo thay đổi có ý nghĩa. |
| Checklist / Countdown | Waiting, passed, reset, completed. | Tự đánh giá; không checkbox người dùng. Countdown reset khi điều kiện mất; chỉ chuyển bước một lần. |
| LayerToggle | Skeleton on/off; real body on/off độc lập. | aria-pressed/switch đúng; không tắt inference; không đồng nghĩa consent lưu ảnh. S01 không áp preferences camera lên mô hình chính. |
| MetricField / MetricCard | Trống, hợp lệ, cảnh báo bất thường, lỗi; nhập tay / ước lượng. | Label và đơn vị riêng; giữ dữ liệu đã nhập. Lỗi nêu cách sửa. Không biến giá trị thiếu thành 0. |
| Sheet / Dialog | Bottom sheet; full-height form; confirm destructive. | Focus trap, Escape/Back theo ngữ cảnh, return focus, background inert. Không đóng mất dữ liệu khi vô tình chạm nền. |
| SaveStatus / Result | Saving, saved, failed, retry. | Chỉ hiện “Đã lưu” sau commit thành công. Điểm chưa có công thức hiện nhãn rõ. Chia sẻ có preview/consent, lưu file khi share thất bại. |
| JointEditor | Selected joint, invalid interval, unsaved draft. | Selection có nhãn và outline; điều chỉnh bằng số/nút ngoài kéo-thả. Ghi rõ khoảng góc, khớp, checkpoint; ngưỡng lấy từ cấu hình. |
Khả năng tiếp cận và chuyển động
Mục tiêu là chữ thường tối thiểu 4,5:1, chữ lớn 3:1 theo WCAG Contrast (Minimum). WCAG 2.2 quy định target tối thiểu 24 CSS px với các ngoại lệ; Active X chủ động đặt mục tiêu lớn hơn 48–64 px theo bối cảnh tập luyện. Chưa thể tuyên bố toàn ứng dụng đạt WCAG chỉ từ kiểm tra token.
Focus rõ ràng trên cả nền sáng/tối; lỗi luôn có text. Tôn trọng prefers-reduced-motion, không giật nháy thành tích; âm thanh có điều khiển riêng và không phải kênh duy nhất. Không animate avatar idle trong khi camera đang inference. “Xoay cơ thể” có thao tác reset và phương án điều khiển đơn giản ngoài drag.
Giọng nói và microcopy
| Tình huống | Nội dung đề xuất |
|---|---|
| Thiếu khớp trong khung | “Đứng lùi lại để thấy đủ cơ thể.” |
| Thiếu sáng | “Hướng về nguồn sáng để camera thấy bạn rõ hơn.” |
| Đủ điều kiện | “Giữ nguyên vị trí. Tự bắt đầu sau 3 giây.” |
| Hoàn thành | “Thêm một bước cho chính mình.” + số lần hợp lệ. |
| Chưa có số đo | “Đây là mô hình minh họa. Thêm số đo khi bạn sẵn sàng.” |
| Quét không khả dụng | “Dịch vụ đo chưa sẵn sàng. Bạn có thể nhập số đo bằng tay.” |
| Lỗi lưu | “Chưa lưu được kết quả. Thử lại.” Không khẳng định dữ liệu đã an toàn. |
05 / Ma trận trạng thái cần hoàn thiện khi triển khai
| Bề mặt | Trạng thái cần có | Đã dựng trong prototype |
|---|---|---|
| S01 | Chưa có snapshot; có dữ liệu; 3D đang tải/lỗi; thiết bị không hỗ trợ. | Có dữ liệu minh họa, nhãn mô phỏng, điều hướng chính. |
| S02 | Tất cả/lọc; rỗng; lỗi thống kê; custom exercise. | 6 bài và 7 bộ lọc hoạt động; lối vào tạo bài. |
| S03/S04 | Quyền, loading model, checklist, countdown/reset, active, paused, lost tracking, confirm end. | Luồng mô phỏng quyền lỗi, checklist → countdown/reset → tập; pause, mất tracking, kết thúc, toggle lớp, tăng rep. |
| S05 | Saving, saved, failed/retry, thiếu điểm kỹ thuật. | Kết quả minh họa, thiếu công thức, tập lại/đổi bài; không có persistence thật. |
| S06/S07/S10 | Trống, dữ liệu mới, nguồn đo, validation, lỗi DB, timeline/export. | Sheet có số đo và chart minh họa; form nhập ngắn; S10 chỉ mô tả phạm vi tiếp theo. |
| S08/S09 | Quyền truyền ảnh, service unavailable, capture, queued, processing, timeout, edit/confirm result. | Thông báo trước quét, consent tách biệt, trạng thái chưa nối dịch vụ. Chưa dựng pipeline scan/backend. |
| S11–S14/S19/S20 | Nguồn trống, file lỗi, editor, khớp thiếu, khoảng sai, unsaved, so khớp. | S20 gồm preview, joint selector, khoảng góc và validation; các bước nguồn/thư viện là bản mô tả. |
| S15–S17 | Chọn game, vùng chơi, ready, running, pause, result, export/share failure. | Sheet chọn game, Chạm mục tiêu, mô phỏng điểm, pause/end và kết quả dialog. Chưa có physics hoặc xuất video. |
06 / Cách sử dụng và bước tiếp theo
Mở index.html bằng trình duyệt, không cần cài dependency hay chạy backend. “Bộ màn hình” hiển thị 9 bề mặt cho hướng đang chọn; “So sánh 3 hướng” đặt cùng màn cạnh nhau. Số liệu và hình thể đều là minh họa, không dùng để kiểm chứng AI. Các artboard thu nhỏ theo khung review; đây không phải kiểm chứng layout production ở kích thước thật.
Để chọn hướng: đánh giá S01 về bản sắc, S04 về đọc nhanh và S06 về độ dễ chịu của dữ liệu. Phản hồi theo cấu trúc: “Chọn A/B/C; giữ …; đổi …; màn ưu tiên …”. Không cần quyết định từng token trước khi chọn ngôn ngữ tổng thể.
- Chọn một hướng chính. Chốt material/lighting 3D và bộ font tiếng Việt.
- Đồng bộ quyết định scan một/hai ảnh, quyền gửi ảnh, chính sách máy chủ, năng lực offline và danh mục route với mã hiện tại.
- Dựng toàn bộ trạng thái của luồng S01–S05 trước; tiếp theo cơ thể, editor, rồi game. Nếu giữ quy trình design-tool review trong spec, chuyển hướng đã chọn sang Figma/Claude Design để duyệt chi tiết.
- Map token/component vào
src/web/ui, giữ command/view-model của ứng dụng; không chuyển logic nghiệp vụ vào giao diện. - Thử thực tế: 360×800, 390×844, landscape/desktop editor; font tăng 200%; bàn phím form; người dùng đứng 2–3 m; thiếu sáng/mất tracking; thiết bị chậm; lưu thất bại.
Tiêu chí chấp nhận đề xuất: vào chọn bài từ màn gốc bằng một lần chạm; hiểu cue đang có hiệu lực khi đứng xa; phân biệt “chưa thấy đủ cơ thể” với “động tác chưa đạt”; không mất countdown/reset; không nhầm lưu ảnh cục bộ với gửi ảnh; có thể hoàn thành nhập tay khi dịch vụ đo không hoạt động. Cần quan sát người dùng thật để xác nhận.
Đã tạo ba bộ direction với 27 artboard render được, token machine-readable, phân tích truy vết và tương tác mô phỏng. Không tạo file Figma; không thay mã sản phẩm; không chạy AI/backend; các SVG là minh họa giao diện, không phải mesh 3D production. Những màn/phần tương tác chưa dựng đầy đủ được liệt kê ở ma trận trên.
Kiểm tra bàn giao
Đã chạy Chromium bằng Playwright: 33 kiểm tra đạt cho render 27 artboard, các cặp màu chữ chính/phụ/CTA, lọc bài, countdown và reset, toggle lớp độc lập, pause/Escape, mất theo dõi, giữ số lần khi kết thúc, consent scan và validation khoảng góc. Trang review không tràn ngang ở 360, 390 và 768 px; không có lỗi JavaScript chưa bắt. Xem kết quả kiểm tra; chạy lại bằng python docs/design-direction/verify.py khi có Python Playwright và Chromium.
Đã xem ảnh render để rà soát bố cục. Sheet và danh sách dài được cuộn trong artboard; ảnh tĩnh chỉ thể hiện vùng nhìn ban đầu. Kiểm tra này không thay thế accessibility audit toàn diện hoặc kiểm thử ứng dụng thật.
Ảnh xem nhanh: Tập luyện — ba hướng · Đang tập — ba hướng · Cơ thể — ba hướng · Toàn bộ PULSE · Toàn bộ FORM · Toàn bộ PLAY.
Nguồn và truy vết
- README.md — nền tảng, chế độ chạy, giới hạn PWA; một số mô tả measurement đã cũ so với code.
- MVP specs §0, §0.7, §1 — một màn gốc, cơ thể trung tâm, mục tiêu MVP và giới hạn scope.
- UX README, camera automation, settings — flows, chuẩn artboard, các lớp hiển thị.
- screens.ts, App.vue — 20 destination và sheet mapping.
- tokens.css, S01, S02, S04, S05, S06, S20 — hiện trạng UI.
- measurement.ts, profiles, real adapters, 4D Humans API — capability scan hiện tại.
- games.ts, exercise view-model — game catalog và điểm chưa có công thức.
- Tempo: 3D Vision & Form Feedback; Nex: Active Arcade — tham chiếu nguyên tắc sản phẩm, truy cập 05.11.2026.
- W3C: Contrast Minimum; W3C: Target Size Minimum — tham chiếu accessibility, truy cập 05.11.2026.