Clickable prototype
Hướng dẫn bước prototype: self-contained hi-fi clickable prototype per module, các HARD gates, 8 nguyên tắc, và verify.
Clickable prototype
Từ v2.1.0, Bakit sinh self-contained hi-fi clickable prototype per module — một file HTML duy nhất, click được, có states thật, không cần server hay backend. Dùng để demo flow cho stakeholder trước khi dev.
Vị trí trong pipeline
wireframe → prototype → packageux-designer sinh prototype, controller verify bằng verify-prototype-html.py.
Cách gọi
/ba-start prototype --slug <slug> --module <module_slug>Điều kiện tiên quyết (HARD gates)
| Điều kiện | Thiếu thì sao |
|---|---|
ascii-wireframe/index.md (ascii canon) | Từ chối, route về srs (ascii stage) |
srs/userflow.md với stage: flow-approved | Từ chối, route về userflow |
DESIGN.md tokens | Dùng generic neutral palette + cảnh báo explicit |
Device lấy từ userflow primary_device (mobile 375 / tablet 768 / desktop 1024) — không hỏi lại khi đã có.
Nguồn dữ liệu (bounded)
- ascii canon 5-column tables — nguồn element duy nhất, không bao giờ tự suy diễn lại
- userflow Mục 2/3 — screens + flow grouping
DESIGN.mdtokens — màu sắc, typographymessage-list.md— wording cho toasts/errors
8 nguyên tắc cốt lõi
- State-driven render từ single store; persist
localStoragekeyproto:{module}:v{N} - FAB → panel TOC + flow map + demo triggers (bước ngoài màn hình nằm trong panel)
- Two-layer CSS: neutral chrome / app tokens từ DESIGN.md (raw → semantic, light + dark)
- Mọi submit có loading (disable + spinner, deterministic 500-800ms)
- Entry screens clear input DOM khi re-entry; flow context giữ trong store
- Form lifecycle pristine → touched → submitted; format trước validation
- Dropdown value ≠ display text
- Real empty states; single
const DEMOsource; reset flow
Mỗi screen từ userflow Mục 2 xuất hiện như <section data-screen="{slug}">. Exclusive states là screens riêng ({screen}-{state}).
Verify
ba-kit run-script verify-prototype-html.py <prototype_html> <module_root>Kiểm tra: emoji gate, determinism, localStorage pattern, DEMO single-source, screen coverage. Failures block; tối đa 2 vòng producer sửa, sau đó escalate.
Guardrails
- Không external CDN, không network calls — self-contained single file
- Không real backend/API — mock store only. Technical codes không bao giờ hiện trong UI
- Comment layer (external pin service) out of scope cho v1
Kết quả tạo ra
03_modules/{module}/prototype.html # 1 file duy nhất, click đượcMở bằng browser, click qua các flow, demo cho stakeholder.
Lỗi thường gặp
- Tự suy diễn element ngoài ascii canon → chỉ dùng canon làm nguồn element
- Thiếu screen từ userflow → verify fail; mọi screen Mục 2 phải có
<section data-screen> - Dùng CDN/network → vi phạm self-contained; verify block
Tiếp theo
- ba-start — toàn bộ pipeline
- Hướng dẫn từng bước — flow thực tế