Quy Chuẩn Phát Triển Giao Diện React Khi Làm Việc Với AI
Sử dụng AI để hỗ trợ xây dựng giao diện React từ Google AI Studio, ChatGPT đến các công cụ hỗ trợ lập trình khác.
Quy chuẩn phát triển giao diện
Tech Stack
React + TypeScript.
TailwindCSS.
Component rõ ràng, dễ tách module.
Code sạch, dễ bảo trì.
Không gọi API thật.
Chỉ sử dụng mock data.
Không cần backend.
Không tích hợp Facebook API thật ở giai đoạn này.
Kiến trúc project
Chỉ sửa giao diện, không thay đổi logic backend/API nếu không được yêu cầu.
Giữ cấu trúc project theo feature-based architecture.
Component dùng chung đặt trong
src/components.Màn hình theo nghiệp vụ đặt trong
src/features.Layout dùng chung đặt trong
src/layouts.Hook dùng chung đặt trong
src/hooks.Mock data đặt trong
src/mockshoặcsrc/constants.Utility đặt trong
src/utils.Types đặt trong
src/types.Không viết toàn bộ giao diện trong một file lớn.
Tách riêng:
Layout
Sidebar
Header
Toolbar
Search
Filter
Form
Table
Card
Modal
Drawer
Toast
Empty State
Loading Skeleton
Không hardcode dữ liệu trong JSX.
Dữ liệu demo phải import từ file mock.
Nếu cần thêm component mới thì đặt đúng thư mục theo chức năng.
Không tự ý đổi route.
Không đổi package.json nếu không cần.
Không xóa file quan trọng của project.
Coding Style
Sử dụng TypeScript đầy đủ.
Có interface/type rõ ràng.
Props được định nghĩa đầy đủ.
Component dễ tái sử dụng.
Hạn chế lặp code.
Tách logic và UI rõ ràng.
Ưu tiên composition thay vì component quá lớn.
Đặt tên biến, function và component rõ nghĩa.
Code dễ đọc, dễ mở rộng.
Thiết kế UI
Ưu tiên giao diện theo phong cách SaaS Dashboard hiện đại.
Sạch.
Thoáng.
Chuyên nghiệp.
Đồng nhất.
Dễ mở rộng.
Sử dụng hệ thống design thống nhất:
Border Radius nhất quán.
Shadow nhất quán.
Font Size nhất quán.
Spacing nhất quán.
Color Palette nhất quán.
Hover State.
Active State.
Disabled State.
Focus State.
Ưu tiên:
Card Dashboard
Data Table
Statistics Card
Tabs
Badge
Avatar
Dropdown
Breadcrumb
Pagination
Tooltip
Popover
Modal
Drawer
Responsive
Thiết kế theo hướng Mobile First.
Mobile (<768px)
Layout 1 cột.
Sidebar chuyển thành Drawer.
Menu thu gọn.
Form tự xuống dòng.
Button dễ bấm.
Input tối thiểu 44px.
Table chuyển thành Card List hoặc Horizontal Scroll.
Không bị tràn màn hình.
Tablet (768px–1023px)
Sidebar thu gọn.
Dashboard chia 2 cột.
Form responsive.
Table co giãn.
Card tự sắp xếp.
Desktop (>=1024px)
Sidebar đầy đủ.
Dashboard nhiều cột.
Tận dụng không gian ngang.
Table đầy đủ.
Khoảng trắng hợp lý.
Sử dụng breakpoint Tailwind:
sm
md
lg
xl
2xl
Ưu tiên:
Grid
Flex
gap
min-w-0
overflow-x-auto
Không dùng:
Width cố định quá lớn.
Height cố định không cần thiết.
Padding cứng gây vỡ layout.
UX
Luôn ưu tiên trải nghiệm người dùng.
Có đầy đủ:
Empty State
Loading Skeleton
Toast Notification
Confirm Dialog
Error State
Success State
Hover Animation nhẹ
Transition mượt
Không để:
Màn hình trắng khi chưa có dữ liệu.
Loading giật.
Component bị nhảy layout.
Mock Data
Tạo mock data đầy đủ bằng tiếng Việt.
Dữ liệu phải đủ lớn để test:
Search
Filter
Sort
Pagination
Empty State
Không sử dụng Lorem Ipsum.
Component
Ưu tiên xây dựng component tái sử dụng.
Ví dụ:
Button
Input
Textarea
Select
Checkbox
Radio
Switch
Badge
Avatar
Card
Table
DataTable
Modal
Drawer
Tabs
Pagination
Breadcrumb
Search Box
Empty State
Skeleton
Toast
Khi sửa giao diện
Chỉ sửa phần được yêu cầu.
Không tự ý:
sửa backend
sửa API
đổi business logic
đổi route
đổi tên folder
đổi cấu trúc project
Nếu cần tạo component mới thì tạo đúng nơi.
Ưu tiên:
Code sạch.
Component tái sử dụng.
Responsive hoàn chỉnh.
Dễ bảo trì.
Dễ mở rộng.
Gần với chất lượng sản phẩm thực tế, không phải giao diện demo.
Nhận xét
Đăng nhận xét