Dùng AI xây portfolio cá nhân

Làm lần lượt chín bước dưới đây. Sao chép các prompt vào Codex hoặc Claude Code đang mở thư mục dự án; AI sẽ thực hiện phần terminal. Thay phần trong ngoặc vuông bằng thông tin của bạn và kiểm tra kết quả trước khi sang bước tiếp.

01. Chọn ref, chuẩn bị nội dung và công cụ

Chọn hai hoặc ba website tham khảo, chụp đúng phần bạn thích và ghi lý do: bố cục, chữ, khoảng trống, màu hay tương tác. Đừng chỉ gửi link rồi nói “làm giống”. Với KhoaJAK, tôi dùng đúng hai website. Ricardo Chance (ricardochance.com) là ref cho khoảng thở rộng, nhịp bố cục nhẹ và chuyển động mềm. Segerman (segerman.dev) là ref cho typography lớn, mạnh và cách cô đọng nội dung thành những khối rõ. Hướng chốt kết hợp độ thoáng và chuyển động của Ricardo Chance với sức nặng của chữ và bố cục cô đọng của Segerman. Hai ref đặt ra tiêu chí thẩm mỹ; KhoaJAK không sao chép layout, component hay nội dung của họ.

Đây là các ref [link/ảnh] và nội dung của tôi. Tôi thích [đặc điểm] ở ref A và [đặc điểm] ở ref B. Hãy xem ref, chỉ rõ phần nào đã xem và phần nào chưa truy cập được; không đoán. Đề xuất một hướng kết hợp phù hợp với portfolio của tôi: bố cục, chữ, màu và tương tác. Nêu phần nên lấy cảm hứng và phần nên bỏ. Chưa code; tóm tắt ngắn để tôi chốt trước.

Đây là năm mốc thật, không phải mockup dựng lại. Chuỗi hình cho thấy AI không tự nhảy tới bản cuối: mỗi vòng chỉ giải quyết một quyết định đã quan sát trên bản chạy, rồi giữ lại phần đã ổn cho vòng tiếp theo.

Điểm cần học từ chuỗi này không phải là sao chép giao diện cuối. Hãy để mỗi phiên bản trả lời một câu hỏi rõ: cấu trúc đã đúng chưa, nhận diện đã riêng chưa, nội dung có cần một layout mới không, và tương tác có giúp người xem khám phá dễ hơn không.

• Codex hoặc Claude Code: chọn một công cụ có thể đọc, sửa file và chạy terminal trong thư mục dự án. Hướng dẫn dưới đây dùng cú pháp skill của Codex.
• Node.js và npm: chạy Astro và cài thư viện; dùng bản LTS đáp ứng yêu cầu của Astro.
• Git và tài khoản GitHub: Git lưu phiên bản trên máy; GitHub giữ bản repo từ xa.
• Chrome: xem UI và để AI kiểm tra bằng trình duyệt.
• Một thư mục ảnh, mô tả bản thân, ba dự án thật và hai website tham chiếu.

Gửi prompt này để AI kiểm tra công cụ trên máy. Bạn chỉ cần làm các bước cài đặt hoặc đăng nhập mà AI chỉ rõ.

Tôi muốn xây portfolio trên máy [macOS/Windows]. Hãy tự kiểm tra Node.js, npm, Git và trình duyệt đã có chưa; phiên bản có phù hợp với Astro không. Nếu thiếu, cho tôi link cài chính thức và hướng dẫn từng bước cần tôi thao tác. Sau đó kiểm tra lại và báo đã sẵn sàng hay còn thiếu gì.

02. Tạo dự án, bật Git và đưa lên GitHub

KhoaJAK cuối cùng dùng Astro + TypeScript + CSS thuần, nhưng prompt mở đầu thực tế ngắn hơn nhiều. Tôi chỉ nói mục tiêu; AI tự kiểm tra thư mục, chọn cách triển khai và chạy bản local. Một agent đủ năng lực phải tự xử lý các bước kỹ thuật này, chỉ hỏi khi có quyết định thật sự cần tôi.

Xây giúp tôi một website portfolio cá nhân để giới thiệu bản thân, những dự án tôi đã làm và những điều tôi muốn chia sẻ. Làm ngay trong thư mục này và chạy bản local để tôi xem.

Đạt khi: mở được URL local mà AI cung cấp. Tiếp theo gửi prompt lưu phiên bản bên dưới. Tài liệu Astro để AI đối chiếu.

Kiểm tra thư mục hiện tại là dự án Astro của tôi. Khởi tạo Git nếu chưa có. Tạo .gitignore cho node_modules, dist, .astro và .env chứa secret; giữ file lock và .env.example không có giá trị bí mật. Chạy local và cho URL. Khi build đạt, kiểm diff, commit các file dự án rồi tạo repo GitHub private tên [my-portfolio] và push. Nếu cần đăng nhập, hướng dẫn tôi đăng nhập; không yêu cầu dán token vào chat.

Đạt khi: mở được trang local, thấy commit trên GitHub và repo không chứa secret. Có commit trên máy chưa có nghĩa đã push lên GitHub. Cách đưa repo local lên GitHub.

03. Cài hai skill có việc cụ thể

Skill là bộ hướng dẫn cho AI, không phải thư viện của website. Đề xuất cho hướng dẫn này: frontend-design để dựng UI; playwright để thao tác, chụp và kiểm tra bản chạy. Đọc nguồn trước khi cài và chỉ lấy đúng thư mục skill, không cần clone toàn bộ repo vào website.

• frontend-design của Anthropic: dùng khi dựng bố cục và chi tiết giao diện.
• playwright của OpenAI: dùng khi kiểm tra UI thật.

$skill-installer kiểm tra skill đã có. Cài những skill còn thiếu từ hai nguồn: anthropics/skills, đường dẫn skills/frontend-design; openai/skills, đường dẫn skills/.curated/playwright. Không ghi đè skill đã có. Sau đó cho biết cách gọi từng skill và dependency còn thiếu để Playwright mở được trình duyệt.

Mở phiên mới và yêu cầu AI xác nhận đã nhận hai skill. Skill Playwright có thể cần CLI và browser riêng; việc cài skill chưa tự chứng minh trình duyệt chạy được. Yêu cầu nó mở URL local và chụp một ảnh trước khi giao QA. Cơ chế skill-installer.

04. Tạo bộ nhớ dự án bằng file

Không cần dựng database memory. Bắt đầu với năm file dưới đây và commit cùng code. Tài liệu chỉ có tác dụng khi AI đọc trước khi làm và cập nhật sau mỗi mốc.

• AGENTS.md: mục tiêu, giới hạn, file cần đọc, lệnh kiểm tra và quy tắc commit/deploy.
• README.md: cách cài, chạy local, build và cấu trúc thư mục.
• docs/design.md: màu, chữ, spacing, component và ref đã chọn.
• docs/decisions.md: quyết định, lý do, ngày và phần không được tự thay đổi.
• docs/progress.md: đã xong, đang dở, lỗi còn lại, bằng chứng và bước tiếp theo.

Tạo năm file trên, ngắn gọn và đúng source hiện tại. Trong AGENTS.md yêu cầu đọc README, decisions và progress trước khi sửa; giữ thay đổi chưa commit; không bịa nội dung; kiểm bản chạy; chỉ push/deploy khi tôi yêu cầu. Sau mỗi mốc cập nhật quyết định và bước tiếp theo, không chép toàn bộ chat. Nếu dùng Claude Code, thêm CLAUDE.md trỏ tới cùng bộ tài liệu, không tạo bộ luật thứ hai.

Trong KhoaJAK: quyết định thiết kế được ghi trong docs/design/direction.md; nhật ký giữ yêu cầu, quyết định, kiểm chứng và ảnh của từng mốc. Khi một phiên AI lỗi, phiên tiếp theo đọc lại source và nhật ký để tiếp tục. Git lưu phiên bản code; snapshot giữ source và bản build để mở lại UI cũ. Hai việc này bổ sung cho nhau.

Một phần cách KhoaJAK định tuyến context trong AGENTS.md được tham khảo từ một cổng AI nội bộ ở nơi làm cũ: mỗi loại việc ghi rõ phần nào tự đủ và khi nào cần thêm source. Cách định tuyến này chỉ là lối vào, không thay thế năm file nguồn của project.

05. Giao UI theo ba lượt, không giao cả website một lần

Dùng hướng ref đã chốt ở bước 1, ghi lại trong docs/design.md ở bước 4 rồi triển khai. Dùng frontend-design cho UI. Ba prompt dưới đây chạy lần lượt; mở bản chạy và phản hồi sau mỗi lượt, không yêu cầu AI làm lại toàn bộ khi chỉ một chi tiết chưa đúng.

Lượt 1 - Khung: Dùng frontend-design dựng trang chủ, danh sách dự án và một trang chi tiết từ nội dung tôi gửi. Ref là [link/ảnh]; giữ tinh thần [chữ lớn/khoảng thở/màu]. Ưu tiên hierarchy và mobile, chưa thêm animation. Dùng component chung cho header, card và footer. Chạy local để tôi xem.

Lượt 2 - Chi tiết: Giữ cấu trúc đã chốt. Chỉnh typography, spacing, màu và trạng thái hover/focus theo docs/design.md. Kiểm trang chủ và trang chi tiết ở desktop/mobile. Không thêm section hoặc nội dung chưa được cung cấp.

Lượt 3 - Motion: Thêm chuyển động nhẹ cho [thành phần cụ thể]. Ưu tiên CSS transform/opacity, không làm nhảy bố cục. Có reduced-motion và touch fallback. Kiểm vào/ra hover nhanh, chuyển trang rồi quay lại. Chỉ thêm thư viện nếu CSS không đủ và giải thích vì sao.

Trên bản hiện tại, tôi đã chấp nhận [phần cần giữ]. Ở [trang/thành phần], vấn đề là [mô tả + ảnh]; tôi muốn [kết quả cụ thể], dựa trên [chi tiết ref nếu có]. Hãy kiểm tra bản chạy, sửa đúng phạm vi này và giữ phần đã chốt. So sánh trước/sau trên desktop và mobile, ghi quyết định cùng việc còn dở vào tài liệu. Chưa thêm tính năng khác hoặc deploy.

Ví dụ một vòng cải tiến thật: reaction ban đầu hiện sáu icon, sau đó thu về một nút Like mở bộ chọn khi hover. Phần thống kê được gộp vào cùng nút. Khi chuyển động làm icon và số đếm đè nhau, phản hồi bằng ảnh dẫn tới cách sửa: ẩn thống kê gọn trước, rồi lần lượt hiện sáu icon và số đếm. Mỗi lượt giải quyết một vấn đề nhìn thấy trên bản chạy.

Thư viện nên bắt đầu: Astro cho trang và nội dung, TypeScript để kiểm kiểu, CSS cho layout/motion, Playwright cho QA. Lenis chỉ thêm nếu thực sự cần cuộn mượt; chưa cần React, GSAP hay backend chỉ để có một portfolio. Đây là bộ khởi đầu đề xuất, không phải mọi website đều cần đủ. Lenis, Playwright.

06. Đưa nội dung vào cấu trúc có thể sửa

Để bài viết trong content collection, không nhét tất cả vào component. Chỉ thêm CMS, tài khoản hoặc database khi có nhu cầu cụ thể. Với website KhoaJAK, CMS xuất hiện sau khi việc sửa bài thường xuyên trở thành một nhu cầu thật.

Tạo schema dự án/bài viết có ID ổn định, slug, title, summary, cover và topic. Nhập nội dung từ [thư mục/nguồn], không bịa số liệu. Dùng cùng topic cho filter và tag trong bài. Ghi trong README file nào là nguồn và cách thêm/sửa bài. Nếu có VI/EN, mỗi ngôn ngữ giữ nội dung riêng, không tự lấy ngôn ngữ khác khi thiếu.

Trong KhoaJAK: tag trong bài và bộ lọc được nối bằng cùng topicIds từ 11/09. Khi làm CMS ngày 19/09, mỗi bài giữ một ID và cấu trúc chung, còn nội dung VI/EN độc lập. CMS được phát triển tiếp từ màn hình sửa nguồn sang thư viện Grid/List và vùng biên tập bài viết trực tiếp. Nhu cầu sửa bài thật quyết định phần nào cần xây thêm.

07. Kiểm tra rồi lưu từng phiên bản

Nhờ AI tạo npm run verify từ những lệnh thực sự có trong dự án: check, build và các test cần thiết. Astro có thể cần cài @astrojs/check và TypeScript cho lệnh kiểm kiểu; script verify không có sẵn chỉ vì bạn gọi tên nó.

Dùng playwright kiểm trang chủ, danh sách và bài chi tiết ở 1440px và 390px. Thử menu, link, filter, bàn phím và Back; kiểm ảnh lỗi, tràn ngang, console. Chụp lỗi trước khi sửa, sửa đúng nguyên nhân rồi kiểm lại. Chạy npm run verify. Báo điều chưa kiểm; chưa deploy.

Khi bạn đã xem và chấp nhận một mốc, gửi prompt lưu phiên bản riêng. Nếu có lỗi mới, yêu cầu AI so diff với commit tốt trước đó; đừng yêu cầu xoá sạch thư mục hoặc reset toàn bộ repo.

Lưu mốc này: kiểm git status và diff, cập nhật progress, stage đúng các file của việc vừa làm, commit với mô tả rõ rồi push lên repo đã chốt. Giữ nguyên WIP khác. Trả branch, commit và xác nhận remote đã có commit. Chưa deploy.

08. Đưa website lên mạng

Với Astro tĩnh, có thể dùng Cloudflare Pages Direct Upload: build tạo thư mục dist, Wrangler gửi bản đó lên Pages. Chọn cách này nếu muốn GitHub chỉ lưu code và deploy là thao tác riêng. Đăng nhập bằng công cụ chính thức; không để token trong repo. Astro trên Cloudflare Pages.

Tôi xác nhận phát hành portfolio lên Cloudflare Pages project [tên-project]. Kiểm đúng account/project, chạy verify và build production. Deploy đúng artifact vừa kiểm, rồi mở URL public để kiểm trang, ảnh, link và mobile. Ghi URL, deployment ID, commit nguồn, kết quả kiểm tra và cách quay về deployment trước vào docs/progress.md. Không thay DNS nếu tôi chưa yêu cầu.

Đạt khi: URL public mở được trên một trình duyệt khác và các thao tác chính chạy đúng. Build thành công hoặc lệnh upload thành công chưa đủ. Nếu thay bằng Git integration, nhớ rằng push vào nhánh production có thể tự kích hoạt deploy.

Trong KhoaJAK: reaction chạy được ở local chưa đồng nghĩa đã lưu được lượt tương tác trên website. Sau đó mới có bước nối lưu trữ Cloudflare D1 và kiểm tra trên tên miền thật. CMS cũng đi từ lưu và xem thử local tới chuẩn bị bản xuất bản, xem thay đổi, xác nhận và xác minh online. Có lần upload xong nhưng kiểm tra bị ngắt mạng; phải đối chiếu đúng deployment, không gửi lại ngay.

09. Mở phiên AI mới mà không làm lại từ đầu

Tiếp tục dự án này. Đọc AGENTS.md, README.md, docs/design.md, docs/decisions.md và docs/progress.md. Kiểm branch, git status và source hiện tại trước khi kết luận. Tóm tắt việc đã xong, việc còn dở và bước tiếp theo; giữ WIP. Sau đó làm [mục tiêu cụ thể]. Không tự đổi quyết định đã chốt hoặc deploy.

Như vậy, Git giữ phiên bản, GitHub giữ bản từ xa, tài liệu giữ quyết định, còn skill giúp AI thực hiện từng loại việc. Bạn không cần bắt AI nhớ toàn bộ cuộc trò chuyện để tiếp tục xây website.

KhoaJAK đã phát triển theo nhiều vòng như vậy: từ ref và hướng minimal, tới bố cục, menu, theme và hiệu ứng ASCII; tiếp theo là đưa dự án/bài viết thật vào, hoàn thiện bộ lọc và Snapshots; rồi chỉnh trải nghiệm đọc với mục lục, reaction, copy link và chế độ xem ảnh. CMS và luồng xuất bản được bổ sung khi cần tự sửa nội dung. Phiên bản hiện tại là kết quả của các vòng xem bản chạy → chỉ rõ vấn đề → sửa có phạm vi → kiểm tra → lưu mốc, không phải một prompt tạo xong toàn bộ website. Bạn có thể lặp lại vòng này ở bước 5-8 mỗi khi có nhu cầu mới.

Xem UI của KhoaJAK. Các nguồn công cụ và skill trong bài được đối chiếu ngày 22/09/2026; prompt là mẫu đề xuất để dùng lại.