---
url: https://docs.nemo12.com/ops/ui.md
description: >-
  ui.nemo12.com (SRC-1185): sub-domain công khai về tri thức UI, dựng bằng
  shadcn/ui, Tailwind, Motion, khởi đầu với 25 khái niệm nền tảng.
---

# ui.nemo12.com

SRC-1185 (chủ dự án, 02.10.2026): một sub-domain **công khai** chứa tri thức và best practice
thiên về UI, để học và dùng lại nhiều lần. Dựng bằng Vite, đúng bộ ba DS-001 §0: shadcn/ui,
Tailwind, Motion.

Nội dung khởi đầu là **25 khái niệm nền tảng**, nhìn từ góc Product + UX, chia năm tầng:

| Tầng | Năm khái niệm |
| --- | --- |
| 1. Structure | Information Architecture, Navigation, Layout, Visual Hierarchy, Responsive Design |
| 2. Interaction | Interaction Pattern, User Flow, Affordance, Feedback, State |
| 3. Components | Design System, Components, UI Patterns, Forms, Data Display |
| 4. Experience | Onboarding, Empty State, Error Handling, Accessibility, Personalization |
| 5. Visual | Typography, Color, Spacing, Iconography, Motion |

Mỗi khái niệm có một trang riêng `/<tầng>/<khái-niệm>` (ví dụ `/interaction/feedback`), cùng
một khuôn cho cả 25 trang (chủ dự án 02.10.2026):

1. Câu hỏi cốt lõi và tóm tắt.
2. Nên làm (5 đến 6 ý), nên tránh (3 đến 4 ý).
3. **Minh hoạ: đúng 3 hình SVG**, vẽ bằng JSX để màu đọc token của site.
4. **Phần đào sâu: 7 đến 9 mục đánh số**, có sơ đồ dạng chữ, một ví dụ Nemo12, và mục cuối luôn
   là "Câu hỏi khi nghiên cứu Mobbin".
5. Với tám khái niệm: phần "Bấm thử", minh hoạ sống dựng bằng chính component shadcn của site.

Trang `/mental-model` nối 25 khái niệm thành một chuỗi tám chặng (IA → Navigation → Layout →
Information Hierarchy → Visual Hierarchy → Interaction → Components → Visual Style), mỗi khái niệm
thuộc đúng một chặng; năm khái niệm tầng Experience là lớp xuyên suốt mọi chặng. Bảng gán nằm ở
`apps/ui/src/mentalModel.ts`.

**Page Briefs** (`/briefs`, chủ dự án 02.10.2026): mỗi trang của mỗi program (IELTS, SAT, AI Teen,
CELTA, TESOL, TEFL; 68 trang lúc dựng) có một brief theo khuôn 0 + 15 mục, từ Page Identity tới
Success Metrics; Layout chỉ ở mục 12. Hai luật:

* Mỗi program có MỘT trang tổng quan `/briefs/<program>` chứa toàn bộ Jobs to Be Done và Pains,
  mỗi mục gắn mức quan trọng Critical / High / Medium.
* Mỗi page có ĐÚNG một Core Job (trỏ vào danh sách của program) và ĐÚNG ba câu hỏi quanh nó.
  Kiểu `[string, string, string]` trong `apps/ui/src/briefs/model.ts` bắt luật "đúng ba" bằng trình
  biên dịch.

Mọi job đều phải có trang phục vụ, hoặc làm Core Job, hoặc làm **Job phụ** (`supportingJobs`).
Job chưa trang nào phục vụ thì (chủ dự án 02.10.2026): job functional/decision được viết thành
**brief đề xuất** (`status: "proposed"`, nhóm "Đề xuất", chưa có trên site, chờ duyệt rồi mới
dựng); job gần nhau gom chung một trang; emotional job không có trang riêng mà gắn làm Job phụ của
các trang sẵn có.

SRC-1187 (chủ dự án, 02.10.2026): năm brief đề xuất được dựng thành trang thật. Ba trang công khai
trên nemo12.com: `/teachers/celta/journey`, `/teachers/tefl/compare`, `/ai-teen/parents`;
hai trang sau đăng nhập trên learn.nemo12.com: `/ielts/gap`, `/ai-teen/showcase`. Dựng xong thì bỏ
`status: "proposed"` khỏi brief tương ứng.

Brief "NEMO IELTS: Tổng quan" do chủ dự án viết là bản mẫu; các brief khác viết theo độ sâu ấy và
đọc từ mã nguồn thật của từng trang. Brief mô tả trang NÊN làm gì, nên có thể nhắc trạng thái mà
trang hiện chưa có.

Trang `/workflow` (chủ dự án 04.10.2026): workflow thiết kế một trang web, 7 pha và 38 bước theo
thứ tự làm thật. Đủ 25 khái niệm, mỗi khái niệm đúng một lần, mang đúng mã #1 đến #25 của site
(tính từ slug, không ghi tay); 13 bước bổ sung mang mã B1 đến B13. Cuối trang có bảng đối chiếu;
mỗi trang khái niệm có một dòng "Trong workflow" nhảy về đúng bước. Dữ liệu ở `apps/ui/src/workflow.ts`.

Navigation và Visual Hierarchy là hai trang mẫu, nội dung do chủ dự án viết; 23 trang còn lại
viết theo đúng độ sâu và giọng của hai trang ấy.

* **Ngôn ngữ: tiếng Việt**, tên khái niệm tiếng Anh làm nhãn. Đây là mặc định của CLAUDE.md;
  site không thuộc ngoại lệ nào.
* **Không đăng nhập, không API, không D1.** Toàn bộ nội dung nằm trong `apps/ui/src/content.ts`;
  thêm khái niệm hay sửa chữ là sửa đúng file ấy (phần đào sâu nằm ở `apps/ui/src/deep/`).

| Việc | Chỗ |
| --- | --- |
| Mã nguồn | `apps/ui` (Vite + React + shadcn + Tailwind v4 + `motion`, token DS-001) |
| Nội dung | `apps/ui/src/content.ts` (25 khái niệm), `apps/ui/src/deep/` (phần đào sâu theo tầng) |
| Page Briefs | `apps/ui/src/briefs/<program>/program.ts` (Jobs, Pains, nhóm trang), mỗi trang một file cùng thư mục |
| Hình | `apps/ui/src/illustrations/` (75 SVG theo tầng), `apps/ui/src/demos.tsx` (bấm thử) |
| Deploy | Worker `nemo12-ui` (static assets, SPA fallback), route `ui.nemo12.com`, khai trong `.github/app-paths.json` |