Vibe Code portfolio nhiếp ảnh của bạn

01Điểm khác biệt so với công cụ chọn mẫu giao diện

Các thư viện mẫu cho bạn xem một thiết kế hoàn chỉnh rồi hỏi bạn có thích hay không. Công cụ này đi sâu hơn một lớp: mỗi hướng trong sáu hướng bên dưới dựa trên một portfolio nhiếp ảnh thực đang hoạt động, đã được kiểm tra trực tiếp (ảnh chụp màn hình, bố cục thực, màu sắc và phông chữ được tính toán), chứ không phải bảng màu ai đó bịa ra cho đẹp trên mẫu thử. Chẳng hạn hướng Editorial dùng EB Garamond vì đó đúng là kiểu chữ mà trang web của một nhiếp ảnh gia thời trang thật đang dùng, được khớp bằng cách kiểm tra trực tiếp trang đó.

Có hai mẫu xuất hiện ở hầu hết các trang thực mà công cụ này dựa vào, và chúng được đưa vào mọi hướng ở đây: thanh điều hướng ẩn sau một biểu tượng hamburger duy nhất, không có danh sách liên kết hiện sẵn, kể cả trên máy tính, và mỗi lần chỉ một ảnh lớn thay vì lưới ảnh. Màu của giao diện gần như bằng không: ảnh chụp mang màu sắc, không phải giao diện.

02Bạn nhận được gì ở cuối

Một prompt duy nhất, có cấu trúc, bao gồm hướng thiết kế tổng thể, mã màu hex chính xác, tên phông chữ và cách ghép, danh sách trang, cách hoạt động của điều hướng, bố cục thư viện ảnh và cách đóng khung ảnh, các tính năng cần có, đề xuất nơi lưu trữ kèm chi phí thực tế, và một bộ yêu cầu chất lượng cố định (văn bản thay thế dễ tiếp cận, điểm ngắt responsive, không nhúng bí mật vào mã, ảnh tải lười). Dán nó vào ứng dụng lập trình AI bạn chọn là nó có đủ mọi thứ để bắt đầu.

03Từ prompt đến một trang web hoạt động: hướng dẫn đầy đủ

Prompt là bản mô tả thiết kế, không phải vạch đích. Đây là mọi bước giữa lúc sao chép nó và lúc có một địa chỉ URL thật để bạn in lên danh thiếp, miễn phí hoặc gần như miễn phí.

Sao chép prompt và mở một ứng dụng lập trình AI

Claude, Cursor, Claude Code, Windsurf hay tác nhân AI của Replit đều dùng được, bất cứ thứ gì có thể viết và lưu tệp giúp bạn, không chỉ trò chuyện. Nếu chưa dùng bao giờ, một lựa chọn chạy trên trình duyệt như claude.ai hoặc Replit không cần cài đặt: dán prompt làm tin nhắn đầu tiên.

Để nó dựng, rồi xem kỹ những gì nó làm ra

Yêu cầu nó dựng trang web dưới dạng HTML/CSS/JS tĩnh (hoặc bất cứ thứ gì phần lưu trữ của prompt đã chỉ định) và cho bạn xem bản xem trước. Kiểm tra sáu thứ prompt đã yêu cầu (màu sắc, phông chữ, cách hoạt động của thư viện ảnh, điều hướng, đóng khung, các trang) trước khi đi tiếp. Sửa một màu nhấn sai bây giờ rẻ hơn nhiều so với sau khi đã gắn ảnh vào.

Thay bằng ảnh thật, tiểu sử và thông tin liên hệ của bạn

Thay mọi ảnh giữ chỗ và mọi dòng chữ điền tạm. Hãy nhờ ứng dụng AI viết một thuộc tính alt thật và cụ thể cho từng ảnh ngay khi làm, không phải “image1.jpg” mà là một mô tả thực sự, vì đó vừa là yêu cầu về khả năng tiếp cận vừa giúp SEO một chút. Đây cũng là lúc kiểm tra kỹ biểu mẫu liên hệ có thực sự trỏ tới một địa chỉ email mà bạn có kiểm tra hay không.

Triển khai lên dịch vụ lưu trữ miễn phí

Nếu bạn chọn gói “Tĩnh & miễn phí”, hãy nhờ ứng dụng AI hướng dẫn bạn kết nối thư mục dự án hoặc kho GitHub với một trong các dịch vụ lưu trữ ở trang Lưu trữ trong menu phía trên. Cả bốn đều tự động dựng và triển khai mỗi khi bạn đẩy một thay đổi lên; không còn bước tải lên thủ công sau khi đã kết nối.

Kết nối tên miền riêng (không bắt buộc, nhưng đáng làm)

Một tên miền phụ miễn phí (như yourname.netlify.app) dùng ổn để bắt đầu. Khi bạn sẵn sàng cho yourname.com, đó là việc mua tên miền cộng với một thay đổi DNS, được nói chi tiết ở phần dưới.

04Nên dùng dịch vụ lưu trữ miễn phí nào?

Bất kỳ dịch vụ nào trong số này cũng đưa được một trang web tĩnh lên mạng miễn phí, có HTTPS miễn phí và gói miễn phí dư sức đáp ứng lưu lượng của một portfolio cá nhân. Giới hạn của gói miễn phí thay đổi khá thường xuyên, nên hãy coi các con số ở trang Lưu trữ là bức tranh chung chứ không phải số liệu chính xác hiện tại, và kiểm tra trang giá của từng nhà cung cấp trước khi quyết định.

Hãy nhờ ứng dụng lập trình AI làm cùng bạn các bước triển khai thực tế: “kết nối dự án này với Netlify” là một yêu cầu hoàn toàn bình thường, và thường nó có thể hướng dẫn bạn tạo tài khoản và triển khai lần đầu trong vài phút.

05Kết nối tên miền riêng

Tên miền là một khoản phí nhỏ hằng năm (thường $10 đến 20/năm tùy đuôi tên miền), tách biệt với phần lưu trữ vốn vẫn miễn phí. Ba phần việc:

1. Mua tên miền. Namecheap, Cloudflare Registrar, hoặc dịch vụ kế nhiệm Google Domains (Squarespace Domains).
2. Thêm một bản ghi DNS. Một CNAME (hoặc bản ghi A) trỏ tên miền của bạn tới dịch vụ lưu trữ, thêm trong bảng điều khiển của nhà đăng ký tên miền. Đó là hai dòng trong bảng của nhà đăng ký: một CNAME cho www trỏ tới địa chỉ mà dịch vụ lưu trữ cung cấp, chẳng hạn your-portfolio.netlify.app, và một bản ghi A cho tên miền gốc trỏ tới IP của dịch vụ lưu trữ.
3. Thêm nó vào dịch vụ lưu trữ. Dán cùng tên miền đó vào phần cài đặt “tên miền riêng” của dịch vụ lưu trữ; HTTPS tự được thiết lập.

Mọi dịch vụ lưu trữ ở trang Lưu trữ đều có một tab “Tên miền riêng” hoặc “Tên miền” cho bạn bản ghi chính xác cần thêm: sao chép vào, thêm ở nhà đăng ký tên miền, rồi chờ. Thay đổi DNS thường mất vài phút đến vài giờ để có hiệu lực, thỉnh thoảng đến 24 đến 48 giờ. Ứng dụng lập trình AI của bạn có thể hướng dẫn bạn qua bảng điều khiển của nhà đăng ký cụ thể nếu bạn bị kẹt; hãy chụp màn hình trang cài đặt và hỏi nó phải bấm vào đâu. Hiện ổ khóa, không có cảnh báo “không an toàn”: đó là vạch đích.

06Danh sách kiểm tra trước khi ra mắt

Năm phút với danh sách này bắt được hầu hết những thứ khiến portfolio trông chưa hoàn thiện. Các mục kiểm tra nằm ở trang Trước khi ra mắt trong menu phía trên; hãy đánh dấu từng mục khi làm.

07Câu hỏi thường gặp