Buổi 11: Freehand Design với Pencil.dev & Google Stitch MCP

Mục tiêu buổi học

Làm thế nào để tạo ra một giao diện (UI) tuyệt đẹp với tương tác mượt mà nếu bạn không hề biết dùng Figma?

Buổi học này phá vỡ rào cản truyền thống giữa Product Manager/UX Designer và Frontend. Thay vì cặm cụi kéo thả trên phần mềm thiết kế, bạn sẽ học cách "điều khiển" trí tuệ nhân tạo (AI) bằng các Prompt Thiết Kế (Design Prompt). Sử dụng Google Stitch MCP và Pencil.dev, bạn sẽ sinh ra những bản "UI Previews" hoạt động được (Interactive) ngay lập tức!

---

Nội dung chi tiết

1. Kỷ nguyên Thiết kế Giao diện Điền Ngữ (Prompt-driven Design)

• "Vibe Design": Kéo thả đã lỗi thời, giờ là lúc bạn miêu tả ý tưởng thiết kế chi tiết bằng văn bản.
• Vì sao Google Stitch MCP + Pencil.dev lại mạnh mẽ hơn Figma & FigJam trong quá trình Lên ý tưởng (Ideation phase)?
• Giới thuyết các Framework thiết kế UI theo yêu cầu (như Shadcn UI, Halo, Lunaris, Tailwind). Bạn chọn Framework nào, AI thiết kế theo framework đó.

2. Sử dụng Google Stitch / Pencil.dev (Môi trường & Cài đặt)

• Kết nối Model Context Protocol (MCP) của nhóm công cụ UI/UX (Google Stitch) vào Gemini-CLI/AI Desktop.
• Quy trình Sinh UI/UX (The Stitch Build Loop):
  • Tạo Design System Basis: Cấu hình Bảng màu (Color Palette), Chữ viết (Typography, vd. Inter/Outfit), Kiểu dáng (Border Radius) thông qua công cụ create_design_system.
  • Giai đoạn Concept: Đưa AI thông tin "Tôi muốn thiết kế màn hình Dashboard chứa Card chỉ số và Biểu đồ Doanh thu", chờ vài giây lấy Mockup về.
  • Chỉnh sửa / Biến thể (Variants): Sửa từng cụm chi tiết ngay trên giao diện mà không phá vỡ cấu trúc CSS tổng.

3. Nguyên tắc "Premium UI" bằng Lệnh (Prompting)

• Để tạo ra một UI xịn (Premium) thay vì trông rẻ tiền (Basic), bạn phải cung cấp instruction rõ ràng cho Agent:
  • "Sử dụng độ trong suốt của kính (Glassmorphism), bóng đổ mượt mà (soft drop-shadows), và giao diện Tối (Dark mode)."
  • "Tránh nền xám nhạt nhàm chán, dùng gradient tinh tế (Subtle gradients)."
  • "Tạo Micro-animations cho các nút bấm Hover...".
• Chắc chắn mọi thành phần đều nhất quán (Consistency) bằng cách áp dụng bộ Design System Tokens qua công cụ (apply_design_system).

4. Bàn giao Thiết kế (Hand-off tới Engineers)

• Bỏ qua các khâu đo lường lắt nhắt, cung cấp nguyên bản kết quả hoạt động trên web về cho dev, bao gồm CSS/JS layout. (Designer giờ review UI thật trên Browser).
• Chỉnh sửa (Tweak) các thông số UX Laws trực quan (Visual Heuristics).

---

🚀 Thực hành (Thao tác Thiết kế Tự động)

Bài tập 1: Xây dựng Bộ Token (Design System)

1. Chọn một phong cách từ một thương hiệu bạn yêu thích (vd: Apple, Stripe, Linear).
2. Dùng AI thiết lập mã màu (Primary, Secondary, Background), font chữ và Corner Roundness.
3. Xuất ra tài liệu thiết kế tóm tắt bằng update_design_system.

Bài tập 2: Sinh Giao diện App Real-time

1. Nhận đề bài: [Thiết kế giao diện Đăng ký bằng Số điện thoại cho Ứng dụng Bất Động Sản].
2. Sử dụng lệnh để Stitch MCP tự động sinh Màn hình (Screen From Text).
3. Yêu cầu tạo 3 biến thể (Variants) khác nhau (generate_variants), so sánh và chọn bản có UI bóng bẩy, cao cấp nhất.

---

Tài liệu tham khảo

• Documentation của Google Stitch MCP.
• Kho thư viện lệnh Prompt mảng Design (Từ Skill cm-ui-preview và ux-master).