Không biết lập trình cũng không sao! Từ thiết kế đến triển khai với Claude Design: ứng dụng web đầu tiên của tôi

1. Bạn sẽ học được gì (những gì bạn nhận được sau khóa học)

• Cách sử dụng Claude Chat làm trợ lý lập kế hoạch để tạo bản ghi chú lập kế hoạch cho ứng dụng gồm 3 màn hình.

• Cách tìm giao diện ứng dụng thực tế trên Mobbin và sử dụng làm tài liệu tham khảo thiết kế

• Cách viết prompt để chốt màn hình đầu tiên và thiết lập tiêu chuẩn thiết kế bằng Claude Design

• Trò chuyện, bình luận nội tuyến, chỉnh sửa trực tiếp, điều chỉnh canvas, 4 cách chỉnh sửa tùy theo tình huống

• Tạo prototype tương tác kết nối các màn hình bằng thao tác nhấp chuột.

• Bàn giao cho Claude Code để chuyển nguyên vẹn ý đồ thiết kế và cấu trúc sang phần code.

• Triển khai web app hoạt động thực tế bằng prompt gồm 3 phần: yêu cầu kỹ thuật, tính năng và kiểm tra.

• Xây dựng chức năng Firebase Authentication cho phép đăng nhập Google và đăng ký thành viên

• Lưu dữ liệu của bạn vào bộ sưu tập Firestore và tải dữ liệu theo từng người dùng đã đăng nhập.

• Cách mô tả chính xác lỗi cho AI và triển khai URL ứng dụng của tôi bằng GitHub + Vercel

2. Tổng quan khóa học

Không biết lập trình hay sử dụng công cụ thiết kế cũng không sao.
Trong khóa học này, tôi và Claude cùng lên kế hoạch, Claude Design phụ trách thiết kế, còn Claude Code đảm nhận phát triển. Với sự phân chia thành ba vai trò này, chúng ta sẽ hoàn thiện từ đầu đến cuối ứng dụng web ghi chép đọc sách “Kệ sách của tôi”.
Mục tiêu không chỉ là thiết kế giao diện rồi dừng lại, mà còn tạo ra một URL hoạt động thực sự và có thể mở trên điện thoại, tích hợp đăng nhập và đăng ký bằng Google với Firebase, đồng thời lưu dữ liệu của bạn vào bộ sưu tập Firestore.
Khi đã nắm được quy trình này, bạn cũng có thể tạo những ý tưởng của riêng mình theo cách tương tự, chẳng hạn như ứng dụng ghi chép quán ăn ngon, theo dõi luyện tập hay sổ từ vựng.

Hãy tự mình xem trực tiếp trong bản hoàn chỉnh.

3. Các điểm học tập theo từng phần

Phần 1. Thiết kế bằng Claude Design — Từ khâu lên kế hoạch đến nguyên mẫu có thể nhấp vào

① Ba vai trò và bắt đầu với Claude Design (bài 1–2)

Phân chia vai trò của người lên kế hoạch (tôi + Claude Chat), nhà thiết kế (Claude Design) và nhà phát triển (Claude Code), đồng thời làm quen với giao diện làm việc của Claude Design và cách đưa ra yêu cầu để tiết kiệm mức sử dụng.

② Lên kế hoạch với Claude Chat và thu thập tài liệu tham khảo bằng Mobbin (Bài 3)

"Trước tiên, hãy chỉ hỏi tôi 3 câu" Hoàn thiện ghi chú lên kế hoạch chỉ bằng một câu trò chuyện với Claude.
Tìm các màn hình ứng dụng thực tế như Goodreads, Apple Books và Blinkist trên Mobbin, rồi tổng hợp "nên tham khảo những gì".

③ Chốt màn hình đầu tiên và 4 cách tinh chỉnh (bài 4~5)

Trước tiên, chốt màu sắc, phông chữ và phong cách tổng thể chỉ với một màn hình danh sách; sau đó linh hoạt sử dụng chat, nhận xét nội tuyến, chỉnh sửa trực tiếp và điều chỉnh canvas để nâng cao độ hoàn thiện.
Đặt tên cho các thành phần như BookCard, StarRating để thiết kế và mã nguồn sử dụng cùng một ngôn ngữ.

④ Kết nối nguyên mẫu và kiểm tra trước khi bàn giao (Bài 6–7)

Chỉ với một câu “dùng cùng phong cách”, bạn có thể tạo màn hình thêm mới và màn hình chi tiết, rồi hoàn thiện prototype cho phép chuyển qua lại giữa các màn hình bằng cách nhấp chuột.
Bạn cũng sẽ kiểm tra cả trạng thái trống (Empty State) dễ bị bỏ sót và giao diện trên PC.

Mục 2. Triển khai và xuất bản bằng Claude Code — từ bàn giao đến chia sẻ URL ứng dụng của bạn

⑤ Yêu cầu bàn giao và triển khai theo cấu trúc 3 phần (bài 8–9)

Dùng Export → Hand off to Claude Code để chuyển thiết kế sang Claude Code Web, rồi bắt đầu triển khai từ màn hình danh sách bằng prompt được chia thành các phần: điều kiện kỹ thuật, chức năng và yêu cầu xác nhận.

⑥ Tích hợp Firebase và gỡ lỗi (bài 10–11)

Tạo dự án Firebase và kết nối với ứng dụng, tích hợp đăng nhập bằng Google và đăng ký bằng email.
Lưu thông tin sách vào collection Firestore, rồi kiểm tra theo từng màn hình các thao tác thêm, xem chi tiết, xóa theo từng người dùng đã đăng nhập và khả năng duy trì dữ liệu sau khi tải lại trang.
Thay vì nói "không chạy được", bạn sẽ học cách mô tả lỗi bằng việc đã làm · điều đã thấy · điều mong muốn.

⑦ Vòng lặp triển khai và chỉnh sửa (bài 12~13)

Đưa ứng dụng lên GitHub, triển khai bằng Vercel, rồi đăng ký địa chỉ triển khai trong Firebase để mở ứng dụng của mình và thử đăng nhập Google ngay trên điện thoại.
Cuối cùng, thêm tính năng “ngày đã đọc” và trải qua một vòng chỉnh sửa gồm sửa thiết kế → bàn giao lại → cập nhật mã → tự động triển khai lại.

4. Lý do bạn nên tham gia khóa học này

🧭 1. Lập kế hoạch → Thiết kế → Phát triển → Triển khai, trọn quy trình chỉ trong một lần

Đây không phải là bản demo chỉ dừng lại ở việc tạo ra một giao diện đẹp mắt. Khóa học bắt đầu từ ghi chú lên kế hoạch và đưa bạn đến bước chia sẻ URL của ứng dụng thực sự hoạt động.

🤝 2. Phân chia vai trò để sử dụng AI hiệu quả

Chat với Claude đảm nhận khâu lên kế hoạch, Claude Design phụ trách thiết kế, Claude Code đảm nhận phát triển. Học cách giao đúng việc cho từng công cụ sẽ giúp nâng cao chất lượng sản phẩm.

🎨 3. Thiết kế dựa trên tài liệu tham khảo, không phải cảm tính.

Làm theo phương pháp thực tiễn: tìm các màn hình ứng dụng thực tế đã được kiểm chứng trên Mobbin, xác định rõ “nên tham khảo điều gì” rồi lồng ghép vào prompt.

🧩 4. Prompt sao chép và dùng ngay

Cung cấp các prompt theo từng bước, từ lên kế hoạch, màn hình đầu tiên, chỉnh sửa, tạo nguyên mẫu, triển khai đến gỡ lỗi. Bạn chỉ cần thay đổi vài từ để áp dụng ngay cho dự án của mình.

⏱️ 5. 13 bài học ngắn gọn, rõ ràng, mỗi bài kéo dài 10–15 phút

Mỗi bài học đều tạo ra một sản phẩm cụ thể, nên bạn có thể nghe từng bài trên đường đi làm mà không bị mất mạch.

Những người như vậy có thể áp dụng ngay sau khi học xong.

• Những người làm công tác hoạch định, marketer và nhà sáng lập muốn tự mình kiểm chứng ý tưởng bằng nguyên mẫu mà không cần lập trình viên.

• Nhà thiết kế muốn nhanh chóng biến bản thiết kế thành giao diện hoạt động thực tế.

  
  

5. Lưu ý trước khi tham gia khóa học

📌 Cần gói Claude trả phí

Claude Design và Claude Code có thể sử dụng với các gói Claude trả phí (Pro trở lên). Mức sử dụng được tính vào cùng hạn mức với chat và Claude Code, vì vậy hãy làm theo thói quen yêu cầu “gộp lại, cụ thể” mà chúng tôi hướng dẫn trong khóa học.

📌 Claude Design là dịch vụ thường xuyên được cập nhật.

Claude Design đang ở giai đoạn xem trước nghiên cứu nên tên hoặc vị trí các mục trong menu có thể hơi khác so với trên màn hình bài giảng. Nếu có thay đổi lớn, chúng tôi sẽ thông báo qua [Tin mới về khóa học / Video bổ sung].

📌 Cung cấp tài liệu bài giảng

• Slide bài giảng theo từng buổi (PDF)

• Tổng hợp prompt theo từng bước

• Danh sách liên kết tham khảo được gợi ý trên Mobbin

  
  

  
  

📌 Thực hành với gói miễn phí Firebase (Spark)

Chỉ cần có tài khoản Google là bạn có thể bắt đầu sử dụng Firebase miễn phí; với quy mô thực hành, bạn không cần cung cấp thông tin thanh toán. Tuy nhiên, giao diện Firebase Console có thể thay đổi nên chúng tôi có thể cung cấp hướng dẫn bổ sung.

📌 Tài khoản miễn phí của Mobbin là đủ dùng

Tài khoản miễn phí bị giới hạn số màn hình có thể xem trong mỗi ứng dụng, nhưng vẫn đủ cho buổi thực hành.

6. Môi trường thực hành

• Hệ điều hành: Windows, macOS (chỉ cần có trình duyệt là được)

• Trình duyệt: Khuyến nghị dùng Chrome

• Công cụ AI: Claude (Pro trở lên) — Claude Chat, Claude Design, Claude Code Web

• Tài liệu tham khảo: tài khoản Mobbin miễn phí

• Lưu trữ và triển khai mã nguồn: tài khoản GitHub, tài khoản Vercel (khuyến nghị đăng ký bằng GitHub)

• Backend: Firebase (tài khoản Google) — Authentication, Firestore

• Công cụ cần cài đặt: Node.js (LTS) — cần để tích hợp GitHub và thiết lập Firebase

  
  

7. Dành cho ai / Kiến thức cần có trước khi bắt đầu

Đối tượng phù hợp nhất

• Dành cho những người mới bắt đầu lập trình nhưng muốn biến ý tưởng của mình thành ứng dụng.

• Những người tò mò về Claude Design nhưng chưa biết nên bắt đầu từ đâu

• Nhà thiết kế muốn vượt khỏi bản thiết kế mẫu để tạo ra giao diện thực sự hoạt động

• Nhà hoạch định và nhà sáng lập muốn nhanh chóng tạo mẫu thử để kiểm chứng mà không cần lập trình viên.

• Dành cho những ai muốn trải nghiệm toàn bộ quy trình tạo ứng dụng web bằng AI.

Kiến thức tiên quyết

• Không cần. Chỉ cần biết sử dụng trình duyệt web là đủ.

• Nếu biết một chút HTML/CSS, bạn sẽ hiểu rõ hơn mã được tạo ra trong bài 9~10.