@leejungkiin/awkit 1.6.5 → 1.6.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -130
- package/bin/awk.js +111 -8
- package/package.json +5 -3
- package/schemas/onboarding-screen.schema.json +108 -0
- package/scripts/__pycache__/openrouter_image_gen.cpython-311.pyc +0 -0
- package/scripts/cockpit-quota.js +93 -0
- package/scripts/openrouter_image_gen.py +772 -0
- package/scripts/video-analyzer.js +172 -0
- package/skills/CATALOG.md +2 -1
- package/skills/ai-sprite-maker/SKILL.md +27 -6
- package/skills/ai-sprite-maker/scripts/__pycache__/remove_chroma_key.cpython-311.pyc +0 -0
- package/skills/ai-sprite-maker/scripts/remove_chroma_key.py +440 -0
- package/skills/awf-caveman/SKILL.md +65 -0
- package/skills/expo-build-optimizer/SKILL.md +33 -0
- package/skills/ios-app-store-audit/SKILL.md +48 -0
- package/skills/ios-expert-coder/SKILL.md +45 -0
- package/skills/mascot-designer/SKILL.md +66 -0
- package/skills/mascot-designer/examples/witny-case-study.md +35 -0
- package/skills/orchestrator/SKILL.md +20 -0
- package/skills/short-maker/scripts/google-flow-cli/README.md +227 -115
- package/skills/short-maker/scripts/google-flow-cli/gflow/api/client.py +32 -3
- package/skills/short-maker/scripts/google-flow-cli/gflow/api/models.py +4 -2
- package/skills/short-maker/scripts/google-flow-cli/gflow/cli/main.py +33 -6
- package/skills/short-maker/scripts/google-flow-cli/pyproject.toml +1 -1
- package/skills/verification-gate/SKILL.md +4 -0
- package/templates/help.html +21 -0
- package/templates/project-identity/android.json +24 -0
- package/templates/project-identity/backend-nestjs.json +24 -0
- package/templates/project-identity/expo.json +24 -0
- package/templates/project-identity/ios.json +24 -0
- package/templates/project-identity/web-nextjs.json +24 -0
- package/templates/specs/design-template.md +71 -161
- package/templates/specs/requirements-template.md +133 -65
- package/workflows/ui/create-spec-architect.md +80 -50
- package/workflows/ui/image-gen.md +118 -0
|
@@ -19,6 +19,12 @@
|
|
|
19
19
|
"indentation": "spaces-2",
|
|
20
20
|
"lineLength": 100
|
|
21
21
|
},
|
|
22
|
+
"communication": {
|
|
23
|
+
"cavemanMode": {
|
|
24
|
+
"enabled": false,
|
|
25
|
+
"level": "full"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
22
28
|
"createdDate": "{{DATE}}",
|
|
23
29
|
"lastUpdated": "{{DATE}}",
|
|
24
30
|
"automation": {
|
|
@@ -46,6 +52,24 @@
|
|
|
46
52
|
"git": {
|
|
47
53
|
"autoCommit": true,
|
|
48
54
|
"autoPush": true
|
|
55
|
+
},
|
|
56
|
+
"obsidian": {
|
|
57
|
+
"enabled": false,
|
|
58
|
+
"path": "",
|
|
59
|
+
"autoSync": false
|
|
60
|
+
},
|
|
61
|
+
"mcp": {
|
|
62
|
+
"pixel-mcp": {
|
|
63
|
+
"enabled": false
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"modelPolicy": {
|
|
68
|
+
"mode": "auto",
|
|
69
|
+
"defaultTier": "STANDARD",
|
|
70
|
+
"tierOverrides": {
|
|
71
|
+
"*.plist|*.json|*.env": "LIGHT",
|
|
72
|
+
"docs/*": "LIGHT"
|
|
49
73
|
}
|
|
50
74
|
}
|
|
51
75
|
}
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
"indentation": "spaces-2",
|
|
23
23
|
"lineLength": 100
|
|
24
24
|
},
|
|
25
|
+
"communication": {
|
|
26
|
+
"cavemanMode": {
|
|
27
|
+
"enabled": false,
|
|
28
|
+
"level": "full"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
25
31
|
"createdDate": "{{DATE}}",
|
|
26
32
|
"lastUpdated": "{{DATE}}",
|
|
27
33
|
"automation": {
|
|
@@ -49,6 +55,24 @@
|
|
|
49
55
|
"git": {
|
|
50
56
|
"autoCommit": true,
|
|
51
57
|
"autoPush": true
|
|
58
|
+
},
|
|
59
|
+
"obsidian": {
|
|
60
|
+
"enabled": false,
|
|
61
|
+
"path": "",
|
|
62
|
+
"autoSync": false
|
|
63
|
+
},
|
|
64
|
+
"mcp": {
|
|
65
|
+
"pixel-mcp": {
|
|
66
|
+
"enabled": false
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"modelPolicy": {
|
|
71
|
+
"mode": "auto",
|
|
72
|
+
"defaultTier": "STANDARD",
|
|
73
|
+
"tierOverrides": {
|
|
74
|
+
"*.plist|*.json|*.env": "LIGHT",
|
|
75
|
+
"docs/*": "LIGHT"
|
|
52
76
|
}
|
|
53
77
|
}
|
|
54
78
|
}
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
"indentation": "spaces-4",
|
|
23
23
|
"lineLength": 120
|
|
24
24
|
},
|
|
25
|
+
"communication": {
|
|
26
|
+
"cavemanMode": {
|
|
27
|
+
"enabled": false,
|
|
28
|
+
"level": "full"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
25
31
|
"createdDate": "{{DATE}}",
|
|
26
32
|
"lastUpdated": "{{DATE}}",
|
|
27
33
|
"automation": {
|
|
@@ -49,6 +55,24 @@
|
|
|
49
55
|
"git": {
|
|
50
56
|
"autoCommit": true,
|
|
51
57
|
"autoPush": true
|
|
58
|
+
},
|
|
59
|
+
"obsidian": {
|
|
60
|
+
"enabled": false,
|
|
61
|
+
"path": "",
|
|
62
|
+
"autoSync": false
|
|
63
|
+
},
|
|
64
|
+
"mcp": {
|
|
65
|
+
"pixel-mcp": {
|
|
66
|
+
"enabled": false
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"modelPolicy": {
|
|
71
|
+
"mode": "auto",
|
|
72
|
+
"defaultTier": "STANDARD",
|
|
73
|
+
"tierOverrides": {
|
|
74
|
+
"*.plist|*.json|*.env": "LIGHT",
|
|
75
|
+
"docs/*": "LIGHT"
|
|
52
76
|
}
|
|
53
77
|
}
|
|
54
78
|
}
|
|
@@ -19,6 +19,12 @@
|
|
|
19
19
|
"indentation": "spaces-2",
|
|
20
20
|
"lineLength": 100
|
|
21
21
|
},
|
|
22
|
+
"communication": {
|
|
23
|
+
"cavemanMode": {
|
|
24
|
+
"enabled": false,
|
|
25
|
+
"level": "full"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
22
28
|
"createdDate": "{{DATE}}",
|
|
23
29
|
"lastUpdated": "{{DATE}}",
|
|
24
30
|
"automation": {
|
|
@@ -46,6 +52,24 @@
|
|
|
46
52
|
"git": {
|
|
47
53
|
"autoCommit": true,
|
|
48
54
|
"autoPush": true
|
|
55
|
+
},
|
|
56
|
+
"obsidian": {
|
|
57
|
+
"enabled": false,
|
|
58
|
+
"path": "",
|
|
59
|
+
"autoSync": false
|
|
60
|
+
},
|
|
61
|
+
"mcp": {
|
|
62
|
+
"pixel-mcp": {
|
|
63
|
+
"enabled": false
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"modelPolicy": {
|
|
68
|
+
"mode": "auto",
|
|
69
|
+
"defaultTier": "STANDARD",
|
|
70
|
+
"tierOverrides": {
|
|
71
|
+
"*.plist|*.json|*.env": "LIGHT",
|
|
72
|
+
"docs/*": "LIGHT"
|
|
49
73
|
}
|
|
50
74
|
}
|
|
51
75
|
}
|
|
@@ -1,166 +1,76 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
[
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
[
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
- **
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
let id: UUID
|
|
58
|
-
let property1: String
|
|
59
|
-
let property2: Int
|
|
60
|
-
let optionalProperty: String?
|
|
61
|
-
let nestedObject: [NestedType]
|
|
62
|
-
let createdAt: Date
|
|
63
|
-
let updatedAt: Date
|
|
64
|
-
|
|
65
|
-
enum CodingKeys: String, CodingKey {
|
|
66
|
-
case id
|
|
67
|
-
case property1 = "property_1"
|
|
68
|
-
// ... mapping for API compatibility
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
```kotlin
|
|
74
|
-
// Android
|
|
75
|
-
data class [ModelName](
|
|
76
|
-
val id: String,
|
|
77
|
-
val property1: String,
|
|
78
|
-
val property2: Int,
|
|
79
|
-
val optionalProperty: String?,
|
|
80
|
-
val nestedObject: List<NestedType>,
|
|
81
|
-
val createdAt: Instant,
|
|
82
|
-
val updatedAt: Instant
|
|
83
|
-
)
|
|
1
|
+
# UI/Visual Design Document — [Tính Năng/Giao Diện]
|
|
2
|
+
> "[Slogan hoặc Nguyên tắc chủ đạo của giao diện: "Ví dụ: Mỗi tab một sứ mệnh – không overlap"]"
|
|
3
|
+
|
|
4
|
+
[⚠️ AI INSTRUCTION: BẮT BUỘC KHÔNG THIẾT KẾ DATA MODELS TẠI ĐÂY. Tập trung 100% vào Đồ Họa, Thông số UI (Hex, Padding), UX (Tap, Hover) và Component UI hierarchy.]
|
|
5
|
+
|
|
6
|
+
## 1. Tổng Quan & Metadata
|
|
7
|
+
* **Phiên bản:** [Ví dụ: 1.0]
|
|
8
|
+
* **Ngày tạo:** [YYYY-MM-DD]
|
|
9
|
+
* **Mục tiêu đồ họa:** [Lý do thay đổi/Kết quả UI mong muốn]
|
|
10
|
+
|
|
11
|
+
## 2. Nguyên Tắc Thiết Kế (Design Principles)
|
|
12
|
+
[Danh sách quy tắc bất biến về mặt đồ họa và trải nghiệm người dùng]
|
|
13
|
+
1. [Nguyên tắc 1: Không overlap chức năng giữa các khu vực].
|
|
14
|
+
2. [Nguyên tắc 2: Tình trạng hiển thị (Visibility) của các thành phần chính].
|
|
15
|
+
3. [Nguyên tắc 3: Hệ thống thông báo/Badge thông minh].
|
|
16
|
+
4. [Nguyên tắc 4: Phân cấp Animation theo tiers (Subtle, Satisfying, v.v.)].
|
|
17
|
+
|
|
18
|
+
## 3. Đặc Tả Hình Ảnh (Component Specs)
|
|
19
|
+
### 3.1 Thông số kỹ thuật (Thẩm mỹ & Layout)
|
|
20
|
+
* **Kích thước:** [Ví dụ: Height: 60px + SafeArea].
|
|
21
|
+
* **Màu sắc & Shadow:**
|
|
22
|
+
- Nền/Border: [Mã màu Background, Border cụ thể].
|
|
23
|
+
- Shadow: [Elevation, Offset, Radius].
|
|
24
|
+
* **Trạng thái (States):**
|
|
25
|
+
- Active: [Màu sắc, font weight, opacity].
|
|
26
|
+
- Inactive: [Màu sắc, font weight, opacity].
|
|
27
|
+
|
|
28
|
+
### 3.2 Danh sách Element
|
|
29
|
+
[Bảng liệt kê các thành phần hiển thị]:
|
|
30
|
+
| # | Tên Item | Mức độ ưu tiên | Icon/Graphic (Màu sắc) | Điều kiện nháy/hiển thị |
|
|
31
|
+
|---|----------|----------------|------------------------|-------------------------|
|
|
32
|
+
| 1 | [Item A] | [Primary] | [Mã Hex / Vector] | [Condition] |
|
|
33
|
+
|
|
34
|
+
## 4. Chi Tiết Các Màn Hình (Screen Breakdown)
|
|
35
|
+
### 4.1 Layout: [Tên Màn Hình]
|
|
36
|
+
* **Vai trò hiển thị:** [Dashboard / Modal / Popup]
|
|
37
|
+
* **Cấu trúc đồ họa (Từ trên xuống):**
|
|
38
|
+
- **Header:** [Nút back, Tiêu đề, Badge]
|
|
39
|
+
- **Hero Section:** [Ảnh chụp, Thông điệp to]
|
|
40
|
+
- **Content Grid:** [Spacing dọc ngang, Padding 2 bên]
|
|
41
|
+
- **CTA Button:** [Stick bottom, Shadow layer]
|
|
42
|
+
|
|
43
|
+
### 4.2 Component Hierarchy (Cấu trúc giao diện)
|
|
44
|
+
[AI: Bắt buộc vẽ sơ đồ Text Tree cho cấu trúc Component React/UI UI-only]
|
|
45
|
+
```text
|
|
46
|
+
FeatureView (Root)
|
|
47
|
+
│
|
|
48
|
+
├── HeaderComponent
|
|
49
|
+
│ └── BackButton
|
|
50
|
+
│
|
|
51
|
+
├── ContentSection
|
|
52
|
+
│ ├── ItemCard
|
|
53
|
+
│ └── ProgressBar
|
|
54
|
+
│
|
|
55
|
+
└── ActionButtons
|
|
56
|
+
└── PrimaryCTA
|
|
84
57
|
```
|
|
85
58
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
case loaded([DataModel])
|
|
93
|
-
case error(Error)
|
|
94
|
-
case empty
|
|
95
|
-
}
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
```kotlin
|
|
99
|
-
// Android - UI State
|
|
100
|
-
sealed interface [Feature]UiState {
|
|
101
|
-
data object Loading : [Feature]UiState
|
|
102
|
-
data class Success(val data: List<DataModel>) : [Feature]UiState
|
|
103
|
-
data class Error(val message: String) : [Feature]UiState
|
|
104
|
-
data object Empty : [Feature]UiState
|
|
105
|
-
}
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## Correctness Properties
|
|
109
|
-
|
|
110
|
-
*Properties serve as the bridge between requirements and verifiable correctness guarantees.*
|
|
111
|
-
|
|
112
|
-
**Property 1: [Property Name]**
|
|
113
|
-
*For any* [scenario/input], the system should [expected behavior across all conditions]
|
|
114
|
-
**Validates: Requirements 1.1, 1.2, 1.3**
|
|
115
|
-
|
|
116
|
-
**Property 2: [Property Name]**
|
|
117
|
-
*For any* [scenario/input], the system should [expected behavior]
|
|
118
|
-
**Validates: Requirements 2.1, 2.2**
|
|
119
|
-
|
|
120
|
-
**Property 3: Error Handling Correctness**
|
|
121
|
-
*For any* error condition, the system should [graceful handling, user feedback, recovery options]
|
|
122
|
-
**Validates: Requirements 3.1, 3.2, 3.3**
|
|
123
|
-
|
|
124
|
-
## UI/UX Design Specifications
|
|
125
|
-
|
|
126
|
-
### Visual Design System
|
|
127
|
-
|
|
128
|
-
**Colors:**
|
|
129
|
-
| Token | Light Mode | Dark Mode | Usage |
|
|
130
|
-
|-------|------------|-----------|-------|
|
|
131
|
-
| Primary | #[hex] | #[hex] | [usage] |
|
|
132
|
-
| Secondary | #[hex] | #[hex] | [usage] |
|
|
133
|
-
| Background | #[hex] | #[hex] | [usage] |
|
|
134
|
-
|
|
135
|
-
**Typography:**
|
|
136
|
-
| Style | Font | Size | Weight | Usage |
|
|
137
|
-
|-------|------|------|--------|-------|
|
|
138
|
-
| Title | [font] | 24pt | Bold | [usage] |
|
|
139
|
-
| Body | [font] | 16pt | Regular | [usage] |
|
|
140
|
-
|
|
141
|
-
**Spacing:**
|
|
142
|
-
| Token | Value | Usage |
|
|
143
|
-
|-------|-------|-------|
|
|
144
|
-
| xs | 4pt | [usage] |
|
|
145
|
-
| sm | 8pt | [usage] |
|
|
146
|
-
| md | 16pt | [usage] |
|
|
147
|
-
|
|
148
|
-
### Animation Specifications
|
|
149
|
-
|
|
150
|
-
| Animation | Duration | Easing | Description |
|
|
151
|
-
|-----------|----------|--------|-------------|
|
|
152
|
-
| Appear | 300ms | easeOut | [description] |
|
|
153
|
-
| Disappear | 200ms | easeIn | [description] |
|
|
154
|
-
| Spring | 0.5s/0.7 | spring | [response/damping] |
|
|
155
|
-
|
|
156
|
-
## Performance Considerations
|
|
59
|
+
## 5. Đặc Tả Chuyển Động (Animation & Graphic Logic)
|
|
60
|
+
* **Logic thông báo (Badge Status):** [Quy định dấu chấm đỏ nổi lên lúc nào, hiệu ứng thở "breathing" ra sao].
|
|
61
|
+
* **Đặc tả chuyển động (Animation Spec):**
|
|
62
|
+
- **Kiểu:** [Spring / Linear / Bounce].
|
|
63
|
+
- **Thông số:** [Duration: X ms, Damping: Y, Stiffness: Z].
|
|
64
|
+
* **Hiệu ứng Haptic (Rung):** [Gõ phím -> Light Haptic; Thành công -> Success Haptic].
|
|
157
65
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
66
|
+
## 6. Sơ Đồ Routing (Đứng từ góc độ UI)
|
|
67
|
+
* **Cấu trúc Thư mục Màn Hình:** [app/(tabs)/home.tsx]
|
|
68
|
+
* **Component tái sử dụng:** [Ví dụ: Dùng chung thẻ UserCard từ design-system sẵn có].
|
|
161
69
|
|
|
162
|
-
##
|
|
70
|
+
## 7. Lộ Trình Triển Khai (Dành riêng cho Frontend/UI)
|
|
71
|
+
* **Giai đoạn 1:** Lên layout tĩnh (CSS + HTML/JSX). Gắn Mock Text.
|
|
72
|
+
* **Giai đoạn 2:** Apply Animations & Haptics.
|
|
73
|
+
* **Giai đoạn 3:** Bọc Component ghép vào Data thật bên ngoài.
|
|
163
74
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
- **Authentication**: [Auth requirements]
|
|
75
|
+
---
|
|
76
|
+
*Tài liệu Đặc Tả Giao Diện (Visual & Graphic Design Only).*
|
|
@@ -1,65 +1,133 @@
|
|
|
1
|
-
# [
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
###
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
1
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
1
|
+
# Concept Document — [Tên Ứng dụng/Dự án]
|
|
2
|
+
> "[Slogan hoặc câu định vị cốt lõi của dự án]"
|
|
3
|
+
|
|
4
|
+
[⚠️ AI INSTRUCTION: You MUST fill out the following sections with EXTREME detail. Use ASCII diagrams (Plain Text boxes) where requested. Do not provide generic overviews. Dive deep into technical mappings, user psychology, and exact layouts as shown in the template structure.]
|
|
5
|
+
|
|
6
|
+
## 1. Tầm nhìn & Lý do tồn tại
|
|
7
|
+
* **Tóm tắt dự án:** [Nêu rõ dự án là gì, tích hợp công nghệ gì để tạo giá trị gì. 2-3 câu.]
|
|
8
|
+
* **Vấn đề được giải quyết:** [Nêu pain points hiện tại của người dùng và lý do giải pháp cũ không hiệu quả.]
|
|
9
|
+
* **Đối tượng người dùng cốt lõi:**
|
|
10
|
+
- [Nhân khẩu học 1]
|
|
11
|
+
- [Tâm lý/Nhu cầu 1]
|
|
12
|
+
- [Hành vi 1]
|
|
13
|
+
|
|
14
|
+
## 2. Triết lý cốt lõi
|
|
15
|
+
### 2.1 Các lớp phân tích / Nền tảng
|
|
16
|
+
[AI: BẮT BUỘC VẼ ASCII DIAGRAM 3-5 block thể hiện các trụ cột dữ liệu/logic của app. Ví dụ: Input -> Database/Sources -> AI Engine -> Output]
|
|
17
|
+
```text
|
|
18
|
+
┌─────────────────────────────────────────────────┐
|
|
19
|
+
│ [LỚP 1] │
|
|
20
|
+
│ [Chi tiết tầng 1] │
|
|
21
|
+
├─────────────────────────────────────────────────┤
|
|
22
|
+
│ [LỚP 2] │
|
|
23
|
+
│ [Chi tiết tầng 2] │
|
|
24
|
+
└─────────────────────────────────────────────────┘
|
|
25
|
+
↓
|
|
26
|
+
[ĐỘNG CƠ XỬ LÝ CHÍNH]
|
|
27
|
+
↓
|
|
28
|
+
[KẾT QUẢ ĐẦU RA]
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 2.2 Nguyên tắc thiết kế tính năng
|
|
32
|
+
1. [Nguyên tắc 1 - Ví dụ: Cá nhân hóa tuyệt đối]
|
|
33
|
+
2. [Nguyên tắc 2 - Ví dụ: Hành động được/Actionable]
|
|
34
|
+
3. [Nguyên tắc 3 - Ví dụ: Gamification nhẹ]
|
|
35
|
+
4. [Nguyên tắc 4]
|
|
36
|
+
5. [Nguyên tắc 5]
|
|
37
|
+
|
|
38
|
+
## 3. Kiến trúc ứng dụng
|
|
39
|
+
### 3.1 Stack kỹ thuật
|
|
40
|
+
| Layer | Công nghệ |
|
|
41
|
+
|-------|-----------|
|
|
42
|
+
| Mobile/Web | [Ví dụ: React Native + Expo] |
|
|
43
|
+
| Frontend State | [Ví dụ: Zustand] |
|
|
44
|
+
| Core Backend | [Ví dụ: Node.js / Firebase] |
|
|
45
|
+
| Database | [Ví dụ: Firestore / SQLite] |
|
|
46
|
+
| AI / 3rd Party | [Ví dụ: Gemini API / MediaPipe] |
|
|
47
|
+
|
|
48
|
+
### 3.2 Cấu trúc màn hình (Routing Tree)
|
|
49
|
+
[AI: BẮT BUỘC vẽ sơ đồ cây thư mục/router cho các màn hình app]
|
|
50
|
+
```text
|
|
51
|
+
app/
|
|
52
|
+
├── onboarding/
|
|
53
|
+
│ ├── step-1
|
|
54
|
+
│ └── step-n
|
|
55
|
+
├── (tabs)/
|
|
56
|
+
│ ├── tab-1 # Vai trò
|
|
57
|
+
│ └── tab-2 # Vai trò
|
|
58
|
+
└── screens/
|
|
59
|
+
├── screen-1
|
|
60
|
+
└── screen-n
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 4. Luồng xử lý cốt lõi (Core Pipeline)
|
|
64
|
+
[AI: BẮT BUỘC vẽ sơ đồ ASCII Flow thể hiện luồng nghiệp vụ từ Action của user đến Dữ liệu đổ ra.]
|
|
65
|
+
```text
|
|
66
|
+
[User Input]
|
|
67
|
+
[Hành động]
|
|
68
|
+
│
|
|
69
|
+
▼
|
|
70
|
+
[Phase 1 — Xử lý A]
|
|
71
|
+
[Logic hàm/Function logic]
|
|
72
|
+
│
|
|
73
|
+
▼
|
|
74
|
+
[Phase 2 — Xử lý B]
|
|
75
|
+
[Logic tổng hợp] -> Output
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## 5. Onboarding — Mindset & Thiết kế
|
|
79
|
+
### 5.1 Triết lý onboarding
|
|
80
|
+
[Giá trị cốt lõi muốn truyền tải trước khi user đăng ký là gì?]
|
|
81
|
+
### 5.2 Cấu trúc các slide
|
|
82
|
+
- **Slide 0 (Hook):** [Mô tả chi tiết ảnh, text, animation lôi kéo]
|
|
83
|
+
- **Slide 1 (Value 1):** [Chức năng 1]
|
|
84
|
+
- **Slide 2 (Personalization):** ...
|
|
85
|
+
- **Slide 3 (CTA):** ...
|
|
86
|
+
### 5.3 Design patterns đặc thù
|
|
87
|
+
- [Ví dụ: Count-up animation cho điểm số, Stagger card entry]
|
|
88
|
+
|
|
89
|
+
## 6. Gợi ý tính năng — Mindset xây dựng
|
|
90
|
+
Mỗi tính năng đều phải đáp ứng cấu trúc [Input -> Core Logic -> Actionable Suggestion -> "Why" Explanation].
|
|
91
|
+
[Đưa ra 1 cặp ví dụ Đúng/Sai về việc recommend nội dung cho user theo quy tắc KHÔNG GENERIC.]
|
|
92
|
+
- ❌ **Sai:** [Câu chung chung]
|
|
93
|
+
- ✅ **Đúng:** [Câu cá nhân hóa sâu theo db/mệnh/sở thích]
|
|
94
|
+
|
|
95
|
+
## 7. Design System
|
|
96
|
+
### 7.1 Palette màu
|
|
97
|
+
| Vai trò | Hex Code | Tên màu |
|
|
98
|
+
|---------|----------|----------|
|
|
99
|
+
| Primary | #Hex | [Tên] |
|
|
100
|
+
| Text/Sub| #Hex | [Tên] |
|
|
101
|
+
|
|
102
|
+
### 7.2 Animation & Icon Convention
|
|
103
|
+
- [Quy tắc animation (Fade, Spring, Duration)]
|
|
104
|
+
- [Quy tắc icon (PNG thực tế hay SVG tint)]
|
|
105
|
+
|
|
106
|
+
## 8. Vòng lặp tăng trưởng (Engagement Loop)
|
|
107
|
+
[AI: Vẽ ASCII text flow mô tả vòng lặp giữ chân user]
|
|
108
|
+
```text
|
|
109
|
+
[Lần đầu sử dụng] -> [Nhận giá trị A] -> [Thực hiện hành động B] -> [Sự kiện C kéo user quay lại] -> [Chia sẻ mạng xã hội]
|
|
110
|
+
```
|
|
111
|
+
| Trigger quay lại | Tần suất |
|
|
112
|
+
|-------------------|----------|
|
|
113
|
+
| [Sự kiện/Push] | [Bao lâu]|
|
|
114
|
+
|
|
115
|
+
## 9. Mô hình kinh doanh (Monetization)
|
|
116
|
+
[AI: Vẽ sơ đồ cây cho Free Tier và Premium Tier]
|
|
117
|
+
|
|
118
|
+
## 10. Nguyên tắc kỹ thuật
|
|
119
|
+
* **Performance:** [Luật xử lý client side vs server side]
|
|
120
|
+
* **Data Flow:** [Service A -> Service B]
|
|
121
|
+
* **Error Handling:** [Mindset khi API lỗi, rớt mạng, thiếu data]
|
|
122
|
+
|
|
123
|
+
## 11. Roadmap tính năng
|
|
124
|
+
* **Phase 1 — Nền tảng (MVP):** ...
|
|
125
|
+
* **Phase 2 — Chiều sâu (Depth):** ...
|
|
126
|
+
* **Phase 3 — Tăng trưởng (Growth):** ...
|
|
127
|
+
|
|
128
|
+
## 12. Điều Không Được Làm (Anti-patterns)
|
|
129
|
+
1. [Luật 1 - Ví dụ: Không để UI lạnh lẽo công nghệ]
|
|
130
|
+
2. [Luật 2 - Ví dụ: Không lưu data raw người dùng lên server]
|
|
131
|
+
3. [Luật 3]
|
|
132
|
+
4. [Luật 4]
|
|
133
|
+
5. [Luật 5]
|