BƯỚC 1 — Xác định thương hiệu và soạn thảo nội dung (yêu cầu tối thiểu).

Trước tiên, hãy tải các công cụ cần thiết cho sau này: gọi hàm toolSearch để lấy generateImage và generateWebpage, đảm bảo chúng sẵn sàng trước Bước 2 và 3.

Sau đó, quét tin nhắn của người dùng và bất kỳ @tham chiếu nào để tìm: tên thương hiệu/studio, lĩnh vực hoạt động của thương hiệu (trọng tâm), khẩu hiệu, tên dự án, danh sách dịch vụ và bất kỳ hình ảnh nào được tải lên/tham chiếu (theo dõi những thông tin này cho Bước 2 — KHÔNG tạo lại các vị trí mà chúng che phủ).

Các quy tắc đặt câu hỏi (hãy tiết chế — người dùng thích tương tác ngắn gọn hơn):

- Nếu cả tên thương hiệu VÀ trọng tâm thương hiệu đều bị thiếu, hãy gọi hàm askUserQuestion MỘT LẦN với hai câu hỏi được nhóm lại:

Câu 1 "Tên studio/thương hiệu?" — các lựa chọn như 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject'.

Câu 2 "Thương hiệu này làm gì?" — các lựa chọn như 'công ty thiết kế', 'studio chụp ảnh', 'công ty kiến ​​trúc', 'nhãn hiệu thời trang', 'danh mục cá nhân'.

- Nếu chỉ thiếu một câu hỏi, hãy chỉ hỏi câu hỏi đó.

- Nếu cả hai yếu tố trên đều xuất hiện trong tin nhắn của người dùng, KHÔNG hỏi thêm gì nữa — hãy tiến hành ngay.

Khi đã xác định được tên thương hiệu và trọng tâm, hãy tự mình soạn thảo phần còn lại mà không cần thắc mắc thêm. Giọng văn: chuyên nghiệp, tự tin, tối giản, cao cấp. Giữ cho nội dung ngắn gọn – phong cách này thể hiện qua khoảng trắng, không phải qua sự dài dòng.

Bản nháp:

- Khẩu hiệu: hai dòng ngắn đọc liền nhau thành một cụm từ, ví dụ: 'Thiết kế / tương lai', 'Định hình / thế giới', 'Xây dựng / sự bền vững', 'Làm cho / nó trường tồn'. Mỗi dòng 1-2 từ. Kết hợp ngắt dòng với kiểu chữ in nghiêng có chân và kiểu chữ thường có chân.

- Về phần mô tả: ~80 từ, hai đoạn ngắn. Đề cập đến thời kỳ thành lập (ví dụ: 'từ những năm 80'), một vài dịch vụ và tạo ấn tượng về khách hàng toàn cầu / giải thưởng trong ngành.

- BA nghiên cứu trường hợp. Đối với mỗi trường hợp: tên dự án được đặt ra phù hợp với trọng tâm (đối với công ty thiết kế, có thể sử dụng lại các tên như 'Schematiq', 'Commercial Co.', 'Sprig & Sky'; đối với các lĩnh vực khác, hãy chọn các tên có ý nghĩa tương đồng), 1-2 thẻ dịch vụ, một câu giới thiệu khoảng 30 từ, một câu giải pháp khoảng 30 từ.

- Sáu thẻ dịch vụ liên quan đến trọng tâm (mặc định: Kích hoạt thương hiệu, Tiếp thị tích hợp, Phát triển website, Sản xuất video, Nhận diện thương hiệu, Chiến lược thương hiệu — điều chỉnh cho các trọng tâm không phải là agency).

- Câu khẩu hiệu kêu gọi hành động cuối cùng (một dòng, khoảng 10-14 từ), ví dụ: 'Nâng tầm thương hiệu của bạn và ghi dấu ấn trong lịch sử.'

- Các mục ở chân trang: tên studio, 'Điều khoản & Hỗ trợ', 'Chính sách bảo mật'.

Giữ toàn bộ nội dung trong bộ nhớ cho Bước 3. CHƯA gọi hàm generateWebpage ngay.

BƯỚC 2 — Tập hợp chính xác 6 hình ảnh đơn sắc có sự thống nhất.

Bản đồ vị trí: hero, about, project_1, project_2, project_3, feature.

A) Nếu người dùng đã cung cấp hình ảnh (tải lên, @tham chiếu, URL trong tin nhắn), hãy gán chúng vào các vị trí theo thứ tự nhận được và bỏ qua việc tạo hình ảnh cho những vị trí đó. Chỉ tạo hình ảnh cho các vị trí còn lại.

B) Với mỗi vị trí trống, hãy gọi hàm generateImage. Chạy chúng SONG SONG trong một lô công cụ duy nhất nếu có thể.

Phong cách hình ảnh bắt buộc cho mọi vị trí:

- Chỉ có màu đen trắng thuần túy. Không pha màu, không tông màu nâu đỏ, không hiệu ứng hai tông màu. Chất lượng ảnh chuyên nghiệp/điện ảnh/tạp chí cao cấp. Độ tương phản và độ hạt nhất quán trên cả sáu ảnh. Khoảng trống rộng rãi ở những vị trí cần thiết cho bố cục.

Các mẫu gợi ý dạng ô trống — thay thế [DISCIPLINE] bằng trọng tâm thương hiệu từ Bước 1 (ví dụ: 'công ty thiết kế', 'studio chụp ảnh', 'công ty kiến ​​trúc') và [DISCIPLINE_SUBJECT] bằng một chủ đề phù hợp (ví dụ: đối với thiết kế: điêu khắc giấy / cận cảnh kiểu chữ; đối với kiến ​​trúc: hình học bóng; đối với thời trang: hình bóng; đối với nhiếp ảnh: tĩnh vật):

1. Ảnh chính (tỷ lệ khung hình 16:9): "Ảnh đen trắng mang phong cách điện ảnh về [CHỦ ĐỀ_NGÀNH], bố cục biên tập ấn tượng, thẩm mỹ đơn sắc tối giản tinh tế, ánh sáng dịu nhẹ từ trên cao, không gian trống rộng rãi, chất lượng tạp chí cao cấp, không màu, độ tương phản cao."

2. Giới thiệu (tỷ lệ khung hình 4:3): "Ảnh tư liệu đen trắng về nội thất studio [NGÀNH] đương đại, cửa sổ lớn đón ánh sáng ban ngày dịu nhẹ, bàn làm việc và dụng cụ tối giản, phong cách phóng sự, chỉ có màu đơn sắc, độ tương phản cao."

3. project_1 (tỷ lệ 1:1): "Hình ảnh đen trắng chụp từ trên xuống các mẫu thiết kế nhận diện thương hiệu — danh thiếp, giấy tiêu đề, văn phòng phẩm in ấn — trên một bề mặt trắng sạch, ảnh thiết kế biên tập sắc nét từ trên xuống, chỉ có màu đơn sắc."

4. project_2 (tỷ lệ 1:1): "Tĩnh vật tối giản đen trắng liên quan đến [NGÀNH] (ví dụ: bảng hiệu quay phim, mô hình thu nhỏ, sản phẩm được tạo kiểu), ánh sáng phim trường, bóng đổ sắc nét, chỉ có màu đơn sắc."

5. project_3 (tỷ lệ 1:1): "Nhiếp ảnh phong cách sống biên tập đen trắng, bối cảnh được tạo kiểu tối giản liên quan đến [NGÀNH], thẩm mỹ tạp chí cao cấp, chỉ có màu đơn sắc."

6. Đặc điểm (tỷ lệ khung hình 16:9): "Bố cục trừu tượng đen trắng rộng lớn liên quan đến [NGÀNH HỌC], phối cảnh ấn tượng, hình ảnh biên tập đơn sắc mang tính khí quyển, không màu."

Sau khi đã có đủ sáu URL, hãy gắn nhãn cho từng URL theo vị trí và chuyển sang Bước 3.

BƯỚC 3 — Xây dựng trang web.

Gọi hàm generateWebpage với tham số as_artifact: true. Truyền vào một lời nhắc hướng dẫn chi tiết duy nhất chứa mọi thứ bên dưới một cách chính xác — tác nhân thực hiện generateWebpage phải tuân theo đúng từng chữ.

--- BẮT ĐẦU NHẮC NHỞ TRANG WEB ---

Hãy xây dựng một trang web portfolio dài, có thể cuộn mượt mà, theo phong cách biên tập đơn sắc trang nhã. Tuân thủ nghiêm ngặt quy tắc thiết kế hình ảnh — không được đi chệch hướng.

BẢNG MÀU (độc quyền — không có màu nào khác ở bất cứ đâu):

- Nền trắng: #FFFFFF

- Mực đen và chữ: #000000

- Một phần tối có thể sử dụng màu gần đen: #0A0A0A

- Áp dụng CSS `filter: grayscale(1) contrast(1.02)` cho mọi như một biện pháp an toàn để đảm bảo mọi tài sản được nhập khẩu đều giữ nguyên màu đơn sắc.

KIỂU CHỮ:

- Hiển thị: Phông chữ Google 'Fraunces' (sử dụng độ đậm 300 và 700, opsz 144). Có phiên bản chữ nghiêng cho từ chính được nhấn mạnh.

- Nội dung: Phông chữ Google 'Inter' (độ đậm 400, 500). Kích thước chữ 16–18px, chiều cao dòng ~1.6.

- Tiêu đề hiển thị rất lớn: clamp(56px, 12vw, 180px). Theo dõi -0.02em trên màn hình.

- Sử dụng chữ in hoa nhỏ (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`) cho các thẻ điều hướng, thẻ dịch vụ và liên kết chân trang.

BỐ CỤC NHỊP ĐIỆU:

- Khoảng đệm dọc của phần: clamp(80px, 12vh, 200px).

- Chiều rộng tối đa của container: 1280px, khoảng cách giữa các cạnh được kẹp (24px, 6vw, 96px).

- Khoảng trắng rộng rãi; tránh làm cho mọi thứ quá chật chội.

SỰ TƯƠNG TÁC:

- Thanh điều hướng trên cùng cố định với hiệu ứng làm mờ nền tinh tế khi cuộn chuột.

- Nút hình viên thuốc: màu đặc 1px #000, nền trong suốt, bán kính viền: 9999px, khoảng cách lề 14px 28px. Khi rê chuột sẽ đảo ngược màu nền thành #000 + màu #FFF, hiệu ứng chuyển động mượt mà 200ms.

- Hiệu ứng mờ dần tinh tế khi cuộn chuột + dịch chuyển 24px về phía trục dọc trên mỗi khối chính (Intersection Observer).

- Các hàng chức năng: khi rê chuột, văn bản và mũi tên trượt sang phải khoảng 12px, độ mượt 200ms.

PHẢN HỒI:

- Dưới 768px: tiêu đề thu nhỏ xuống còn khoảng 64–88px, lưới hai cột thu gọn thành một cột, hình ảnh vẫn hiển thị tràn lề trong phần đệm của chúng.

CÁC PHẦN (theo đúng thứ tự này):

1. Thanh điều hướng (cố định): Tên studio ở góc trên bên trái, viết hoa nhỏ; nút "Làm việc với chúng tôi" ở góc trên bên phải.

2. HERO (toàn màu trắng): Tiêu đề hiển thị chia làm hai dòng — dòng 1 kiểu chữ nghiêng Fraunces, dòng 2 kiểu chữ thường Fraunces — sử dụng khẩu hiệu của người dùng. Chữ cỡ lớn. Hình ảnh nhấn nhá đơn sắc nhỏ tùy chọn ở góc dưới bên phải (sử dụng hình ảnh hero cỡ nhỏ ở đây HOẶC dành hình ảnh hero cho phần tiếp theo). Dấu hiệu cuộn tinh tế ở phía dưới.

3. GIỚI THIỆU: tiêu đề 'Giới thiệu về [studio]' trong phông chữ Fraunces 700. Bố cục 6 cột: phần giới thiệu ở bên trái (cột 1–3), hình ảnh giới thiệu tỷ lệ 4:3 ở bên phải (cột 4–6). Hai đoạn văn ngắn.

4. TIÊU ĐỀ PHẦN: 'Công việc của chúng tôi' bằng phông chữ Fraunces 700, khổ lớn.

5. NGHIÊN CỨU TRƯỜNG HỢP 1: Tên dự án (phông chữ Fraunces cỡ lớn), hàng thẻ dịch vụ viết hoa nhỏ (phân cách bởi dấu chấm ở giữa · hoặc bằng dấu cách). Bên dưới tên: hình ảnh dự án toàn chiều rộng (sử dụng project_1, tỷ lệ 1:1 được cắt thành khung hình 16:9). Bên dưới hình ảnh: lưới hai cột — cột bên trái hiển thị số '01' cỡ lớn (Fraunces 300, clamp(100px, 18vw, 220px)), nhãn 'Background' viết hoa nhỏ, sau đó là nội dung khoảng 30 từ. Cột bên phải tương tự với '02' và 'Solution'.

6. NGHIÊN CỨU TRƯỜNG HỢP 2: Cấu trúc tương tự như CS1 nhưng sử dụng hình ảnh project_2. Có thể đảo ngược hình ảnh để nó nằm trên một dải màu trắng nhạt – giữ màu sắc hoàn toàn trong bảng màu.

7. NGHIÊN CỨU TRƯỜNG HỢP 3: Cấu trúc tương tự, sử dụng hình ảnh project_3.

8. DẢI NỔI BẬT: hình ảnh tràn viền khổ rộng (sử dụng vị trí hình ảnh nổi bật 16:9). Không có văn bản phủ lên.

9. CHÚNG TÔI LÀM GÌ: Tiêu đề 'Chúng tôi làm gì' bằng phông chữ Fraunces 700. Bên dưới là danh sách dọc gồm 6 thẻ dịch vụ. Mỗi hàng: đường phân cách mảnh 1px phía trên (#000), tên dịch vụ bên trái bằng phông chữ Fraunces ~clamp(36px, 6vw, 80px), mũi tên '→' bên phải. Con trỏ chuột. Di chuột sang phải.

10. CTA: Phần tối tràn lề, nền #000. Tiêu đề lớn Fraunces căn giữa bằng #FFF sử dụng khẩu hiệu CTA cuối cùng. Khoảng đệm clamp(120px, 20vh, 240px). Nút hình viên thuốc 'Làm việc với chúng tôi' bên dưới tiêu đề (viền trắng, nền trong suốt, khi rê chuột sẽ đảo ngược thành nền trắng + chữ đen).

11. CHÂN TRANG: nền trắng, chữ in hoa cỡ nhỏ kiểu Grotesk. Tên studio ở bên trái, các liên kết ở bên phải ('Điều khoản & Hỗ trợ', 'Chính sách bảo mật'). Viền trên mỏng (#000, 1px). Dòng chữ bản quyền nhỏ in ở dòng thứ hai.

HÌNH ẢNH — Chèn các URL được cung cấp trong phần dữ liệu bên dưới vào các ô tương ứng. Áp dụng thuộc tính object-fit: cover và bộ lọc an toàn thang độ xám cho mọi thẻ . Không thêm hình ảnh trang trí bổ sung.

DỮ LIỆU — hãy thay thế những dữ liệu này vào trang:

- studio_name:

- Khẩu hiệu:

- about_copy:

- case_studies: mảng gồm ba phần tử { name, tags[], background, solution } từ Bước 1

- dịch vụ: mảng gồm sáu chuỗi thẻ dịch vụ từ Bước 1

- cta_tagline:

- hình ảnh: { hero, about, project_1, project_2, project_3, feature } từ Bước 2

- footer_links: ['Điều khoản & Hỗ trợ', 'Chính sách bảo mật']

--- KẾT THÚC THÔNG BÁO TRANG WEB ---

Khi gọi hàm generateWebpage, hãy truyền tham số as_artifact: true. Sau khi hàm trả về, hãy cung cấp cho người dùng một bản tóm tắt ngắn gọn bằng ngôn ngữ họ ưa thích và cho họ biết rằng họ có thể yêu cầu thay đổi bất kỳ hình ảnh nào, chỉnh sửa nội dung hoặc đổi tên dự án.