Wizard tạo thương hiệu KiteClass — redesign output-first

Thiết kế lại theo bộ bước hội tụ từ 3 audit (persona / benchmark / failure-mode 2026-06-11): ≤5 bước nhập liệu, AI tạo bản xem trước thật ngay sau bước Phong cách (output-first), các bước sau là tinh chỉnh. Chế độ AI (TEMPLATE/FULL_AI) lên đầu, logo không bắt buộc, escape-ramp "Tạo ngay với mặc định". Chạy ở kiteclass-frontend :3000 (KC nghiệp vụ trường).

Bắt đầu + Chế độ Phong cách (gộp) Hình ảnh (tùy chọn) Tạo & Duyệt THẬT Triển khai (SSE) Hoàn tất + landing

17

màn hình v3

≤5

bước nhập liệu

9

trạng thái Generate/Deploy

~114

avg /128 (≥105 ✓)

Luồng chính — bắt đầu click ở đây (GAP-1233)

Walk được trọn bằng click cho cả 2 nhánh TEMPLATE (BASIC) và FULL_AI (PREMIUM).

1 · Bắt đầu + Chế độ AI (escape-ramp) 116 2 · Phong cách — gộp Đối tượng + Phong cách + facts (GAP-1234) 115 3 · Hình ảnh — Logo + favicon (tùy chọn, GAP-1229) 113 4 · Tạo & Duyệt THẬT — multi-variant + quality gate + approve 119 5 · Triển khai — SSE progress (GAP-1021) 113 Hoàn tất + link landing tenant (GAP-1108) 116

Trạng thái Tạo & Triển khai — đủ states (failure-mode audit 23/42 vỡ)

Mỗi trạng thái có lối thoát rõ — không dead-end (GAP-1216).

Tạo · GENERATING + SSE (GAP-1135/1021) 112 Tạo · FAILED + phục hồi (retry/fallback/back — GAP-1216) 114 Tạo · Quality gate <70 + hướng dẫn (GAP-1217) 113 Tạo · Hết hạn mức FULL_AI (GAP-1218) 112 Triển khai · FAILED + phục hồi (GAP-1108/1216) 113

Nhánh FULL_AI — biến thể PREMIUM (GAP-1147/1137)

FULL_AI mở khóa ở PREMIUM (5 lượt GPT-5.5/tháng) + ENTERPRISE (không giới hạn). Chỉ trừ lượt khi giữ bản thật (GAP-1218).

1 (PREMIUM) · Bắt đầu + FULL_AI mở khóa + quota meter 114 3 (FULL_AI) · Ảnh chân dung → AI vẽ banner (GAP-1134) 111 4 (FULL_AI) · Multi-variant AI vẽ + quality gate + quota 116

Nội dung landing — editor 7 section (GAP-815, giữ nguyên)

Facts thật thu ở bước 2 (progressive-disclosure) → AI soạn nội dung không bịa. Editor Cài đặt → Trang giới thiệu chỉnh đầy đủ sau onboard. Liên kết 2 chiều với wizard.

Editor · Tổng quan 7 section (GAP-815) 110 Editor · AI soạn nháp + GV duyệt (About/FAQ/Pricing) 111 Editor · Đánh giá thật — KHÔNG nút AI 110

4-layer coverage (per design-layer-coverage §2.2)

Layer	Artifact pointer
要件定義 (Requirements)	GAP-1212 §AC + 3 audit 2026-06-11 (persona/benchmark/failure-mode) · GAP-1147/1134/1135/1021/1108/1216/1217/1218 (cụm AI chain) · ADR-037 Context/Decision · benchmark "output-first ≤5 bước"
基本設計 (External design)	17 màn hình v3 trong `v3/screens/*.html` — luồng output-first (Welcome+Mode → Personality → Assets → Generate{generating/ready/failed/quality-fail/quota-empty + fullai variant} → Deploy{progress/failed} → Done) + 3 màn editor GAP-815
詳細設計 (Internal design)	`BrandingWizard.tsx` + `wizard-machine.ts` · ADR-037 generation route · GenerationMode.forTier · FullAiQuotaService · quality-score aggregator (GET /branding/jobs/{id}/quality-score) · SSE `GET /api/v1/branding/{id}/events` · outbox branding.deployed → KC-core consumer
コンポーネント設計 (Component design)	WelcomeStep/ModeSelectorStep/BrandPersonalityStep(Audience+Tone)/LogoStep/PortraitUploadStep/PreviewStep · VariantPicker/QualityGateWidget/QuotaMeter/approve-row/switch · BannerGenerateStage{generating/ready/failed}/FailedRecoveryActions · DeployingStep/Lifecycle/SseLog/DeployDoneCard · TenantInfoDetails/FaviconUploadField