1. Workflow thực hiện Mình chia quy trình làm 4 bước, kết hợp nhiều công cụ Al để đẩy nhanh tốc độ:

-

Phase 1: Brainstorm ý tưởng (Claude 4.6)

• Thay vì tự nghĩ nát óc, mình chat với Claude để tìm concept.

• Input: "Muốn làm web tặng bạn gái, kỷ niệm các mốc thời gian, thích sự nhẹ nhàng. 2 người ngồi trên con xe (hoạt ảnh animation) chạy lên xuống qua các timeline." Cùng với đó là mẫu PRD của anh Nguyen Nhat Quang.

• Output: Idea về chiếc xe máy chạy trên địa hình đồi núi (SVG), đi qua các cột mốc là ảnh kỷ niệm.

• Kết quả: Có được bản PRD (yêu cầu sản phẩm) cơ bản để bắt đầu.

-

Phase 2: Dựng FE (Google Al Studio)

Dùng prompt từ PRD ném vào Google Al Studio. Al generate ra bộ khung code khá ổn, chạy được animation xe máy và timeline cơ bản ngay lập tức. Tiết kiệm được rất nhiều thời gian setup ban đầu.

Đã thử dùng Antigravity để tạo FE nhưng thất vọng :(((

-

Phase 3: Tối ưu & Refactor (Antigravity + AWF Skills) - BTVN #3

Đây là phần bài tập về nhà số 3 của mình: Dùng Antigravity để hiểu và tối ưu code Al sinh ra.

• Tải codebase từ Google Al Studio về Antigravity

• Kêu Caude Al hiểu codebase và đồng bộ với github site code hiện tại

• Dùng AWF (Antigravity Workflow Framework) - bộ skill được ae trên nhóm share, chuyên dụng để development với Antigravity.

• Cụ thể, dùng skill /brainstorming để hiểu codebase và nghĩ ý tưởng tiếp

• Dùng /debug khi có các code issue Note: Dùng Gemini Flash cho các hoạt động đơn giản (git branch, push, review code), và luôn dùng Claude Sonnet cho coding. Còn brainstorming và plannning thì dùng luôn Caude Opus 4.6 (trí tuệ giáo sư).

-

Phase 4: Security Check

Đảm bảo sản phẩm "nhà làm" cũng phải an toàn.

• Dù là web tĩnh (static site) nhưng mình vẫn thêm một lớp Password Gate đơn giản để hạn chế public thông tin cá nhân.

• Review lại code để đảm bảo không hardcode các thông tin nhạy cảm khác trước khi push lên Github Pages.

Love Road Story