"Mình không làm Dashboard trước. Mình làm Chat trước — vì đó là màn dùng nhiều nhất và khó nhất. Nếu Chat đẹp, các màn còn lại theo pattern đó dễ dàng."
Đây là câu chuyện về cách mình dùng Claude Design để redesign toàn bộ giao diện ZaloCRM theo phong cách Snov.io — từ 11 câu hỏi đầu tiên tới prototype tương tác + tài liệu handoff cho Vuetify 3.
Dưới đây là toàn bộ quy trình, từ lúc nhận yêu cầu cho đến khi có prototype tương tác hoàn chỉnh + tài liệu handoff cho đội dev. Bài này dài — vì đây là cách mình thực sự làm việc, không phải slide marketing ,
1. Prompt yêu cầu Claude Design thực hiện:
Anh muốn tìm hiểu theo giao diện website https://app.snov.io/home ( Anh đang mở ở tab chrome bên cạnh) từ màu sắc chức năng, nút bấm, thanh menu, menu xổ, cách bố trí, phong cách, phông chữ... để thiết kế lại giao diện app ZaloCRM của anh, em hãy lên ý tưởng để anh có bản thiết kế và chuyển qua #Claude #code thực hiện code giao diện và chức năng tương ứng.
2. Tiếp đến mình đã import source code của ZaloCRM
3. Cuối cùng là Claude Design sẽ làm việc như sau:
Phần 1 — Hiểu bài toán trước khi vẽ
1.1. Đọc context có sẵn
Trước khi chạm vào một pixel nào, Claude Design sẽ dành thời gian đọc:
- Giao diện ZaloCRM hiện tại (screenshots được gửi): dark theme, sidebar trái chiếm ~240px, nav phẳng không phân nhóm, nhiều màu đậm.
- Snov.io reference: light theme, primary teal
#00BE82, card-based, typography rõ hierarchy, nhiều whitespace, icon-forward.
1.2. Hỏi đúng câu hỏi
Claude đã hỏi 11 câu qua form, trong đó có 3 câu quyết định hướng đi:
| Câu hỏi | Tại sao quan trọng |
|---|---|
| Theme mode (light/dark/cả hai)? | Quyết định toàn bộ palette |
| Primary color giữ Zalo blue hay đổi sang Snov green? | Quyết định brand identity |
| Điều gì đặc biệt của Snov.io bạn muốn học? | Giúp khoanh vùng "style" — không phải clone 100% |
Và câu trả lời đã khóa hướng:
- Light theme (giống Snov)
- Giữ Zalo Blue
#0068FF(giữ brand) - Học: màu sáng, sidebar có icon + submenu, typography, card mềm, empty state
- Điều đặc biệt: "Click menu trên top bar → submenu hiện ở sidebar trái" — đây là viên gạch vàng định hình toàn bộ navigation.
Phần 2 — Thiết kế hệ thống trước khi vẽ màn hình
Đây là bước không bao giờ được skip. Làm màn trước sẽ dẫn đến vá víu sau.
2.1. Token layer — tokens.css
Định nghĩa TẤT CẢ các biến ở một nơi duy nhất:
/* Primary scale — Zalo Blue */
--color-primary-50: #E6F0FF;
--color-primary-500: #0068FF; /* base */
--color-primary-600: #0056D6; /* hover */
--color-primary-700: #0044AD; /* active */
/* Accent — Snov green cho success */
--color-accent-500: #00BE82;
/* Neutrals — xám Snov */
--text-strong: #1B2130;
--text-body: #2E3748;
--text-muted: #6B7585;
/* Surfaces */
--surface-app: #FAFBFC;
--surface-card: #FFFFFF;
--border-default: #E1E6ED;
/* Spacing — 4px baseline */
--space-1: 4px; --space-4: 16px; --space-8: 32px;
}
#0068FF trong component.
2.2. Reactive tokens qua data-* attributes
Đây là trick để Tweaks panel hoạt động không cần React state phức tạp:
body[data-density="cozy"] { --row-h: 44px; --space-y: 12px; }
body[data-radius="square"] { --radius-md: 2px; }
body[data-radius="soft"] { --radius-md: 8px; }
body[data-radius="pill"] { --radius-md: 16px; }
body[data-primary="zalo"] { --color-primary-500: #0068FF; }
body[data-primary="teal"] { --color-primary-500: #00BE82; }
body[data-primary="violet"] { --color-primary-500: #7C3AED; }
Khi user bấm swatch trên Tweaks panel, mình chỉ cần document.body.dataset.primary = 'teal' — CSS tự render lại toàn app. Zero re-render cost.
Phần 3 — Giải quyết navigation đặc biệt
Yêu cầu: click module trên top bar → submenu của module đó hiện ở sidebar trái.
3.1. Data model — tách nav khỏi UI
{ id: 'home', label: 'Tổng quan', icon: 'home',
items: [
{ id: 'dashboard', label: 'Dashboard' },
{ id: 'inbox', label: 'Hộp thư tổng hợp', badge: 12 },
{ kind: 'divider' },
{ id: 'tasks', label: 'Việc cần làm' }
]
},
{ id: 'chat', label: 'Hội thoại', items: [...] },
{ id: 'customer', label: 'Khách hàng', items: [...] },
{ id: 'automation', label: 'Tự động hóa', items: [...] },
// analytics, integration, settings...
];
3.2. State đơn giản, persist vào localStorage
() => localStorage.getItem('zcrm_mod') || 'home'
);
const [itemId, setItemId] = useState(
() => localStorage.getItem('zcrm_item') || 'dashboard'
);
// Persist mỗi lần đổi — refresh không mất chỗ
useEffect(() => localStorage.setItem('zcrm_mod', moduleId), [moduleId]);
Phần 4 — Xây màn hình theo thứ tự độ khó
Mình không làm Dashboard trước. Mình làm Chat trước vì đó là màn dùng nhiều nhất và khó nhất — nếu Chat đẹp, các màn còn lại theo pattern đó dễ dàng.
4.1. Thứ tự build
Flagship, 3 pane, nhiều state
KPI + chart + feed
Table phức tạp
Kanban drag-look
4.2. Pattern layout 3-pane cho Chat
│ Thread │ Messages │ Context │
│ list │ Header (khách + 🏷️) │ (pipeline │
│ (320px) │ Bubble messages │ + AI │
│ │ Composer + quick reply │ summary) │
└──────────┴────────────────────────┴───────────┘
Các điểm đắt giá:
- AI Summary panel bên phải — feature đặc thù CRM thời nay, không có trong app cũ.
- Pipeline badge ngay header thread → 1 click đổi status.
- Quick replies trên composer → tăng tốc agent 3×.
Phần 5 — Tweaks panel: explore-in-place thay vì tạo N file
Thay vì tạo v1.html, v2.html, v3.html, mình dùng Tweaks panel: một control room để user tự thử mọi kết hợp.
| Dimension | Options |
|---|---|
| Primary color | Zalo blue · Teal Snov · Violet |
| Sidebar | Full (240px) · Rail (72px, icon-only) |
| Density | Compact · Cozy · Comfortable |
| Radius | Square · Soft · Pill |
| Card style | Flat · Outlined · Shadow |
| Dashboard layout | KPI top · KPI side · Split |
Phần 6 — Tài liệu handoff cho dev Vuetify 3
Vì đội dev build bằng Vue 3 + Vuetify 3, mình viết spec tập trung vào mapping giữa prototype và component Vuetify.
6.1. Theme config Vuetify
theme: { themes: { zalocrm: {
colors: {
primary: '#0068FF',
success: '#00BE82',
surface: '#FFFFFF',
background: '#FAFBFC',
}
} } },
defaults: {
VBtn: { rounded: 'lg', flat: true },
VCard: { rounded: 'lg', variant: 'outlined' },
VTextField: { variant: 'outlined', density: 'compact' },
}
});
6.2. Component map
| Prototype class | Vuetify component |
|---|---|
.btn.btn-primary | <v-btn color="primary" flat> |
.card | <v-card variant="outlined"> |
.input | <v-text-field variant="outlined" density="compact"> |
.badge | <v-chip size="small" variant="tonal"> |
Phần 7 — Những bài học rút ra
11 câu hỏi đầu tiết kiệm 10× thời gian sửa về sau.
Đừng hard-code. Mọi thứ phải có thể tweak qua 1 biến.
Ý tưởng "top bar → sidebar submenu" chính là bản sắc redesign.
Chat thành công, 9 màn còn lại chỉ là áp pattern.
User kiểm soát, mình không phải đoán.
HTML đẹp mà không build được thì vô nghĩa.
Claude Design không phải là "AI vẽ hộ UI". Nó là một thiết kế-partner giúp bạn đi qua toàn bộ pipeline — từ hỏi đúng câu → dựng design system → build prototype tương tác → xuất spec cho dev. Tiết kiệm 80% thời gian nếu dùng đúng cách.
— Viết bởi Pip 🐙 & Lộc Nguyễn · locnguyendata.com