## Hướng dẫn

### Nhiệm vụ cốt lõi

**Giới thiệu:** Các nhà sáng tạo (nhiếp ảnh gia, họa sĩ minh họa, nhà thiết kế, nghệ sĩ, v.v.) cần một portfolio trực tuyến chuyên nghiệp để trưng bày tác phẩm của mình và thu hút khách hàng hoặc nhà tuyển dụng tiềm năng. Các trang web portfolio truyền thống thường tốn kém, mất nhiều thời gian để tạo ra và khó tùy chỉnh để phản ánh đặc điểm thẩm mỹ cá nhân. Kỹ năng này nhằm mục đích nhanh chóng tạo ra một trang web portfolio kết hợp giữa vẻ đẹp trực quan và tính năng hoàn chỉnh.

**Mục tiêu cụ thể:**

- Tạo một trang web portfolio hoàn chỉnh với chức năng hiển thị tác phẩm, lọc theo danh mục và chi tiết tác phẩm.

- Phong cách hình ảnh phù hợp cao với định hướng thẩm mỹ và tính cách làm việc của người sáng tạo.

- Trải nghiệm tương tác mượt mà, hỗ trợ nhiều phương thức duyệt web (dạng lưới/dạng khối/dạng băng chuyền, v.v.)

- Thiết kế đáp ứng, thích ứng với cả máy tính để bàn và thiết bị di động.

- Tùy chọn: Bao gồm tiểu sử cá nhân, thông tin liên hệ và các mô-đun bổ trợ khác.

**Các ràng buộc chính:**

- Tính thẩm mỹ là lợi thế cạnh tranh cốt lõi; phải tránh thiết kế rập khuôn, tầm thường.

- Phương pháp trình bày công việc nên tập trung vào chính công việc đó, tránh thiết kế quá cầu kỳ làm lu mờ nội dung.

- Tốc độ tải trang và trải nghiệm duyệt web phải mượt mà.

**Trước khi chính thức bắt đầu nhiệm vụ, hãy xác nhận với người dùng xem họ đã cung cấp các mẫu công việc của mình chưa. Chỉ tiếp tục nhiệm vụ sau khi xác nhận rằng các tài liệu đã có sẵn.**

### Bước 1: Hiểu về định vị và sở thích thẩm mỹ của người sáng tạo

**Mục tiêu:** Hiểu sâu sắc phong cách định vị, đối tượng mục tiêu và xu hướng thẩm mỹ của người sáng tạo để thiết lập hướng đi rõ ràng cho các thiết kế tiếp theo.

**Các thao tác:**

- Phân tích các **"{mẫu sản phẩm}" do người dùng cung cấp (liên kết hình ảnh/video hoặc tệp tin), xác định các đặc điểm về phong cách hình ảnh (tông màu, bố cục, tâm trạng, chủ đề, v.v.)

- Đọc kỹ phần **"{mô tả sở thích thẩm mỹ}" do người dùng cung cấp, trích xuất các từ khóa:

- Tổng thể không gian (ví dụ: tối giản, cổ điển, hiện đại, ấm áp, mát mẻ, nghệ thuật, thương mại, v.v.)

- Các phong cách tham khảo (ví dụ: phong cách Nhật Bản hiện đại, thời trang châu Âu/Mỹ, Bauhaus, Fauvism, cyberpunk, v.v.)

- Xu hướng màu sắc (ví dụ: đen/trắng/xám, màu Morandi, độ bão hòa cao, hiệu ứng chuyển màu, v.v.)

- Các tùy chọn bố cục (ví dụ: khoảng trắng rộng, ảnh ghép dày đặc, đối xứng, không đều, v.v.)

- Nếu người dùng cung cấp **"{liên kết trang web tham khảo}"**, hãy truy cập và phân tích ngôn ngữ thiết kế, phương thức tương tác và đặc điểm bố cục của trang web đó.

- Đánh giá toàn diện đối tượng mục tiêu (khách hàng tiềm năng, các tổ chức nghệ thuật, người yêu thích nghệ thuật nói chung, v.v.), xác định điểm cân bằng giữa tính chuyên nghiệp và sự dễ tiếp cận.

**Kết quả đầu ra:** Xây dựng một "hồ sơ thẩm mỹ" rõ ràng bên trong hệ thống, bao gồm 3-5 từ khóa thiết kế cốt lõi và mô tả định hướng hình ảnh cụ thể.

**Sau khi hoàn thành sản phẩm, hãy xác nhận lại với người dùng xem sản phẩm đã đạt yêu cầu hay chưa. Nếu chưa hài lòng, hãy điều chỉnh dựa trên phản hồi của người dùng cho đến khi người dùng hài lòng.**

### Bước 2: Lập kế hoạch cấu trúc danh mục đầu tư và phương pháp tương tác

**Mục tiêu:** Thiết kế kiến ​​trúc thông tin và trải nghiệm duyệt web phù hợp nhất dựa trên khối lượng, loại công việc và nhu cầu của người dùng.

**Các thao tác:**

- Đếm số lượng tác phẩm và lập kế hoạch hệ thống phân loại theo **"{thể loại tác phẩm}"** (ví dụ: chân dung/phong cảnh/tĩnh vật, hoặc theo dự án/loạt tranh/năm, v.v.)

- Xác định phương pháp bố cục trang chủ:

- **Bố cục dạng lưới:** Thích hợp cho các công việc có kích thước đồng nhất, yêu cầu sự gọn gàng, ngăn nắp.

- **Kiểu bố trí tường đá (Thác nước):** Phù hợp với nhiều kích thước công trình khác nhau, nhấn mạnh sự phong phú về mặt thị giác.

- **Chế độ trình chiếu toàn màn hình:** Thích hợp cho số lượng tác phẩm ít, mỗi tác phẩm cần hiển thị toàn màn hình.

- **Bố cục kết hợp:** Kết hợp nhiều phương pháp, chẳng hạn như ảnh chính + lưới phía dưới.

- Thiết kế giao diện lọc theo danh mục:

- Thanh điều hướng trên cùng/thanh bên để chuyển đổi danh mục

- Lọc lượt nhấp chuột vào đám mây từ khóa

- Lựa chọn trong menu thả xuống

- Phương pháp hiển thị trang chi tiết kế hoạch công việc:

- **Hiển thị lớp phủ modal** mà không cần điều hướng trang

- **Trang chi tiết riêng biệt** với hỗ trợ điều hướng trái/phải

- Bao gồm các thông tin: tiêu đề tác phẩm, mô tả quá trình sáng tạo, thông số kỹ thuật (tùy chọn), đề xuất các tác phẩm liên quan (tùy chọn)

- Xác định các mô-đun phụ trợ:

- **Trang Giới thiệu:** Ảnh người sáng tạo, lời tự giới thiệu, kinh nghiệm

- **Mô-đun liên hệ:** Email, liên kết mạng xã hội, biểu mẫu yêu cầu hợp tác (tùy chọn)

**Kết quả đầu ra:** Sơ đồ cấu trúc trang web rõ ràng (bao gồm danh sách trang/mô-đun) và mô tả luồng tương tác.

### Bước 3: Thiết kế hệ thống hình ảnh (Bước cốt lõi)

**Mục tiêu:** Dựa trên hồ sơ thẩm mỹ, thiết kế một hệ thống ngôn ngữ hình ảnh hoàn chỉnh, đảm bảo mọi yếu tố của trang web đều phục vụ cho tổng thể thẩm mỹ.

**Các hành động:**

**Thiết kế hệ thống màu sắc:**

- Dựa trên **sở thích thẩm mỹ** và tông màu chủ đạo, hãy xác định màu chủ đạo, màu nhấn, màu nền và màu chữ.

- Nếu tác phẩm có màu sắc rực rỡ, nền nên sử dụng các màu trung tính (trắng/xám/đen) để làm nổi bật tác phẩm.

- Nếu tác phẩm chủ yếu là đen trắng hoặc tông màu lạnh, hãy cân nhắc sử dụng màu nền ấm hoặc màu nhấn để tạo chiều sâu.

- Cung cấp mã màu cụ thể (hệ thập lục phân) và mô tả các trường hợp sử dụng.

**Thiết kế hệ thống kiểu chữ:**

- Chọn các tổ hợp phông chữ phù hợp với phong cách:

- **Kiểu chữ tiêu đề:** Có thể nổi bật hơn, phản ánh phong cách (ví dụ: kiểu chữ có chân thể hiện sự thanh lịch, kiểu chữ không chân thể hiện sự hiện đại, kiểu chữ viết tay thể hiện sự ấm áp)

- **Kiểu chữ chính:** Ưu tiên khả năng đọc, thường chọn kiểu chữ sans-serif đơn giản.

- Chỉ định chính xác tên phông chữ (ví dụ: Playfair Display, Helvetica Neue, Noto Serif SC, v.v.)

- Xác định thứ tự ưu tiên kích thước phông chữ (ví dụ: tiêu đề 32-48px, phụ đề 18-24px, nội dung chính 14-16px)

**Nguyên tắc bố cục và khoảng trắng:**

- Xác định tỷ lệ khoảng trắng dựa trên sở thích thẩm mỹ:

- **Phong cách tối giản:** Nhiều khoảng trắng, ít tác phẩm trên mỗi màn hình (2-4)

- **Phong cách trang nhã:** Bố cục nhỏ gọn, nhiều tác phẩm hơn trên mỗi màn hình (6-12)

- Xác định các giá trị cụ thể cho lề và khoảng cách (ví dụ: lề trang 80px, khoảng cách làm việc 24px)

- Xác định phương pháp căn chỉnh (căn giữa, căn trái, lệch không đều, v.v.)

**Thiết kế chi tiết trực quan:**

- Kiểu thẻ công việc: góc tròn/góc nhọn, có bóng/không bóng, có viền/không viền

- Hiệu ứng khi rê chuột: phóng to, chồng lớp, hiển thị thông tin, thay đổi màu sắc, v.v.

- Hiệu ứng chuyển cảnh: mờ dần vào/ra, trượt, tốc độ thu phóng và đường cong làm mượt.

- Kiểu thanh điều hướng: cố định/ẩn, trong suốt/đặc, gạch chân/làm nổi bật khối

**Tổng thể tạo nên bầu không khí:**

- **Nếu theo phong cách nghệ thuật:** Thêm các họa tiết tinh tế, các yếu tố bất thường, kiểu chữ sáng tạo.

- **Nếu theo phong cách thương mại:** Hãy giữ thái độ điềm tĩnh, chuyên nghiệp, nhấn mạnh chất lượng công việc và sự rõ ràng của thông tin.

- **Nếu muốn thể hiện phong cách cá nhân:** Thêm các yếu tố vẽ tay, biểu tượng độc đáo, những chi tiết ẩn tương tác đặc sắc.

**Tiêu chuẩn chất lượng:**

- Phối màu hài hòa, không quá 4 màu chủ đạo

- Không sử dụng quá 2-3 kiểu chữ kết hợp, cần có sự phân cấp rõ ràng.

- Các yếu tố hình ảnh thống nhất về phong cách, tránh cảm giác chắp vá.

- Thiết kế tổng thể nên có những "điểm nhấn đáng nhớ" nhưng không nên quá phô trương.

**Kết quả đầu ra:** Một "Tài liệu đặc tả thiết kế trực quan" chi tiết, chứa các thông số cụ thể và hướng dẫn sử dụng cho màu sắc, phông chữ, bố cục và các chi tiết khác.

### Bước 4: Tổ chức nội dung và siêu dữ liệu công việc

**Mục tiêu:** Tổ chức các mẫu công việc do người dùng cung cấp thành dữ liệu có cấu trúc, chuẩn bị nội dung để tạo trang web.

**Các thao tác:**

- Trích xuất/sắp xếp các thông tin sau cho mỗi tác phẩm:

- **Tệp làm việc:** URL hình ảnh hoặc liên kết video (từ **"{mẫu công việc}"**)

- **Tên tác phẩm:** Sử dụng **"{danh sách tên tác phẩm}"** nếu được cung cấp, nếu không, hãy tạo các tiêu đề mô tả ngắn gọn.

- **Danh mục công việc:** Gắn nhãn theo **"{danh mục công việc}"** (hỗ trợ nhiều thẻ)

- **Mô tả công việc (tùy chọn):** Sử dụng **"{mô tả công việc}"** nếu có, nếu không thì để trống hoặc tạo mô tả ngắn gọn.

- **Thời gian tạo/Thông tin dự án (tùy chọn):** Thêm vào nếu người dùng cung cấp

- Sắp xếp các tác phẩm theo thể loại hoặc theo thứ tự thời gian, xác định mức độ ưu tiên hiển thị (tác phẩm nào cần được làm nổi bật trên trang chủ)

- Nếu số lượng công việc lớn (>20 sản phẩm), hãy đề xuất phân trang hoặc tải chậm để tránh tình trạng tải ban đầu chậm.

- Chuẩn bị nội dung tiểu sử cá nhân:

- Tên người sáng tạo/nghệ danh (từ **"{thông tin cá nhân}"**)

- Tuyên bố cá nhân/triết lý sáng tạo (trích từ **"{personal bio}"**, đề xuất người dùng bổ sung nếu chưa có)

- Thông tin liên hệ (email, Instagram, Behance, v.v., từ **"{thông tin liên hệ}"**)

**Kết quả đầu ra:** Danh sách dữ liệu công việc có cấu trúc (định dạng JSON hoặc bảng) chứa tất cả các trường bắt buộc.

---

###

### Bước 5: Tạo trang web portfolio

**Mục tiêu:** Chuyển đổi thiết kế hình ảnh và dữ liệu nội dung thành một trang web tương tác.

**Các hành động:**

- Viết hướng dẫn tạo website chi tiết, bao gồm:

- **Cấu trúc tổng thể:** Bố cục trang (trang chủ, Giới thiệu, Liên hệ, v.v.) và phương thức điều hướng

- **Hệ thống hình ảnh:** Tham khảo đầy đủ màu sắc, phông chữ, bố cục và các thông số chi tiết được thiết kế ở Bước 3.

- **Logic tương tác:**

- Chức năng lọc theo danh mục (nhấp vào thẻ để lọc hoạt động)

- Phương thức hiển thị chi tiết công việc sau khi nhấp chuột (cửa sổ bật lên hoặc điều hướng)

- Chi tiết hiệu ứng di chuột và hoạt ảnh

- Các quy tắc thích ứng (cách thiết bị di động điều chỉnh bố cục)

- **Nội dung cần điền:** Tham khảo Bước 4, dữ liệu công việc được sắp xếp và thông tin cá nhân.

- **Tối ưu hóa hiệu năng:** Tải ảnh chậm, cuộn mượt mà, hiệu ứng chuyển động khi tải, v.v.

- Nêu rõ các yêu cầu về thẩm mỹ trong hướng dẫn, ví dụ:

- "Tổng thể không gian cần thể hiện {các từ khóa thẩm mỹ}, tránh thiết kế rập khuôn."

- "Hiệu ứng rê chuột lên thẻ công việc nên tinh tế và nhẹ nhàng, không nên quá cường điệu."

- "Các chuyển đổi màu sắc nên tự nhiên, hoạt ảnh nên mượt mà (nên sử dụng hiệu ứng làm mượt từ 300-500ms)"

- Gọi công cụ generateWebpage, truyền vào:

- **Hướng dẫn:** Các hướng dẫn chi tiết ở trên

- **Tham chiếu:** Nếu có ID vật liệu/thủ công tham chiếu, hãy truyền chúng để cung cấp ngữ cảnh.

**Tiêu chuẩn chất lượng:**

- Trang web tải và hoạt động bình thường

- Hình thức trình bày trực quan phù hợp với thông số kỹ thuật thiết kế, không có lỗi về kiểu dáng rõ ràng.

- Hiển thị công việc hoàn tất, chức năng lọc danh mục hoạt động bình thường.

- Khả năng tương thích với thiết bị di động tốt

**Kết quả:** Trang web portfolio được tạo tự động (hiển thị trong cuộc trò chuyện).

---

## Thông số kỹ thuật đầu ra

**Sản phẩm cần bàn giao:**

1. **Trang web giới thiệu cá nhân (Sản phẩm chính):**

- Bao gồm trang chủ hiển thị tác phẩm, lọc theo danh mục, chi tiết tác phẩm, tiểu sử cá nhân, thông tin liên hệ và các mô-đun khác.

- Phong cách hình ảnh phù hợp tối đa với sở thích thẩm mỹ của người dùng.

- Tương tác mượt mà, thiết kế đáp ứng

- Liên kết trang web có thể chia sẻ trực tiếp

2. **Giải thích về thiết kế hình ảnh (phần bổ trợ):**

- Giải thích ngắn gọn về tư duy thiết kế: lý do lựa chọn các màu sắc, phông chữ, bố cục này.

- Liệt kê các thông số thiết kế cốt lõi (mã màu, tên phông chữ, kích thước chính)

- Giúp người dùng hiểu logic thiết kế hoặc thực hiện các điều chỉnh trong tương lai.

**Yêu cầu về định dạng:**

- Trang web là một trang HTML tương tác, tự động hiển thị trong cuộc trò chuyện.

- Phần giải thích thiết kế được trình bày dưới dạng văn bản ngắn gọn, có thể bao gồm danh sách các thông số chính.

**Tiêu chuẩn chất lượng:**

- **Mức độ thẩm mỹ:** Trang web thể hiện hiệu ứng hình ảnh chuyên nghiệp, tinh tế, ấn tượng, tránh cảm giác rập khuôn và tầm thường.

- **Hoàn thiện chức năng:** Các chức năng cốt lõi như hiển thị công việc, lọc theo danh mục, xem chi tiết hoạt động bình thường.

- **Trải nghiệm người dùng:** Tải mượt mà, tương tác tự nhiên, khả năng tương thích tốt với thiết bị di động.

- **Độ chính xác nội dung:** Tất cả các tác phẩm và thông tin văn bản đều chính xác, không thiếu sót hoặc sai sót.

---

## Phong cách & Trình bày (Phần cốt lõi)

### Triết học thẩm mỹ

Thiết kế website portfolio phải tuân theo nguyên tắc "tác phẩm là vua, thiết kế là phụ trợ". Tất cả các yếu tố thiết kế (màu sắc, phông chữ, bố cục, hiệu ứng động) đều phải phục vụ việc trình bày tác phẩm, không được làm lu mờ nó. Đồng thời, bản thân thiết kế phải có đủ tính thẩm mỹ và chi tiết, phản ánh tiêu chuẩn chuyên nghiệp của người sáng tạo.

### Các điểm thiết kế trực quan

**Ứng dụng màu sắc:**

- Màu nền thường sử dụng các màu trung tính (trắng/xám nhạt/xám đậm/đen), làm nổi bật màu sắc chủ đạo trong tác phẩm.

- Màu nhấn (nút bấm, liên kết, điểm nhấn) nên được sử dụng một cách tiết chế, hài hòa với tông màu chủ đạo của bài viết.

- Tránh các sự kết hợp màu sắc quá chói hoặc xung đột.

- Có thể tự động điều chỉnh màu sắc giao diện dựa trên màu sắc chủ đạo của công việc (kỹ thuật nâng cao)

**Lựa chọn phông chữ:**

- Ưu tiên lựa chọn phông chữ có tính thẩm mỹ nhưng không quá phô trương.

- **Gợi ý phông chữ tiếng Anh:** Playfair Display (thanh lịch), Montserrat (hiện đại), Lora (cổ điển), Raleway (sạch sẽ)

- **Gợi ý phông chữ tiếng Trung:** Source Han Serif (thanh lịch), Source Han Sans (hiện đại), LXGW WenKai (ấm áp), Zcool QingKe HuangYou (mạnh mẽ)

- Các kiểu chữ kết hợp nên có sự tương phản (chữ có chân + chữ không chân, hoặc chữ đậm + chữ mảnh), nhưng không quá 3 kiểu chữ.

**Tính thẩm mỹ của bố cục:**

- **Phong cách tối giản:** Nhiều khoảng trắng, 2-4 tác phẩm trên mỗi màn hình, căn giữa, nhấn mạnh không gian thoáng đãng.

- **Phong cách tạp chí:** Bố cục dạng lưới, kích thước tác phẩm đồng nhất, gọn gàng và ngăn nắp, nhấn mạnh tính chuyên nghiệp.

- **Phong cách nghệ thuật:** Bố cục không đều, kích thước tác phẩm đa dạng, có thể phá vỡ lưới, nhấn mạnh tính sáng tạo.

- **Phong cách trải nghiệm nhập vai:** Trình chiếu toàn màn hình, hiển thị từng tác phẩm một, nhấn mạnh hiệu quả.

- Bất kể phong cách nào, hãy duy trì sự cân bằng và nhịp điệu thị giác.

**Chi tiết tương tác:**

- **Hiệu ứng rê chuột nên tinh tế và nhẹ nhàng:**

- Phóng to hình ảnh nhẹ (tỷ lệ: 1.05) + lớp phủ bán trong suốt + hiệu ứng mờ dần tiêu đề

- Hoặc: thay đổi độ bão hòa/độ sáng + làm nổi bật viền

- Tránh các hiệu ứng hoạt hình quá lố (xoay, lật, nhấp nháy)

- Thời lượng hoạt ảnh chuyển tiếp được đề xuất là 300-500ms, sử dụng hiệu ứng làm mượt khi bắt đầu và kết thúc (ease-in-out easing).

- Trải nghiệm cuộn trang cần mượt mà, có thể thêm hiệu ứng thị sai để tạo chiều sâu.

- Hiệu ứng hoạt ảnh khi tải trang nên đơn giản và trang nhã, tránh các biểu tượng tải trang lòe loẹt.

**Thiết kế đáp ứng:**

- **Máy tính để bàn:** Tận dụng tối đa lợi thế của màn hình rộng, lưới nhiều cột hoặc hiển thị hình ảnh lớn.

- **Máy tính bảng:** Điều chỉnh thành 2-3 cột, duy trì sự cân bằng trực quan.

- **Phiên bản di động:** Hiển thị một hoặc hai cột, tăng diện tích vùng chạm, đơn giản hóa việc điều hướng.

- Thông tin quan trọng (tiêu đề, điều hướng, liên hệ) phải hiển thị rõ ràng trên tất cả các thiết bị.

### Các tham chiếu kiểu dáng phổ biến

- **Chủ nghĩa tối giản:** Nhiều khoảng trắng, màu chủ đạo đen/trắng/xám, phông chữ không chân, biểu tượng đơn giản, loại bỏ mọi chi tiết trang trí.

- **Phong cách Nhật Bản tươi mới:** Tông màu nhẹ nhàng (trắng nhạt, gỗ sáng màu, xanh lam mờ), phông chữ viết tay, những chi tiết tinh tế ấm áp.

- **Biên tập thời trang:** Độ tương phản cao, phông chữ đậm, bố cục bất đối xứng, phong cách nhiếp ảnh đen trắng.

- **Cổ điển:** Chất liệu cũ kỹ, tông màu vàng ấm áp, phông chữ serif, hiệu ứng hạt, chất lượng phim.

- **Công nghệ/Tương lai:** Nền tối, màu nhấn huỳnh quang, hình học, hiệu ứng động, yếu tố cyberpunk

- **Phòng trưng bày nghệ thuật:** Nền trắng tinh khiết, khoảng trắng cực lớn, tác phẩm được trưng bày ở trung tâm, điều hướng tối giản, mô phỏng trải nghiệm phòng trưng bày thực tế.

### Những lỗi thiết kế cần tránh

- ❌ Lạm dụng hiệu ứng chuyển màu, đổ bóng, hiệu ứng đặc biệt, tạo cảm giác rẻ tiền.

- ❌ Quá nhiều hoặc quá cầu kỳ các kiểu chữ, ảnh hưởng đến khả năng đọc

- ❌ Xung đột màu sắc hoặc độ bão hòa quá mức, gây mỏi mắt.

- ❌ Bố cục chật chội, thiếu không gian thoáng đãng giữa các tác phẩm

- ❌ Hoạt ảnh quá phức tạp hoặc chậm, ảnh hưởng đến trải nghiệm

- ❌ Khả năng tương thích với thiết bị di động kém, chữ quá nhỏ hoặc các nút khó chạm vào.

- ❌ Thiết kế quá cầu kỳ, để thiết kế lấn át tác phẩm