ขั้นตอนที่ 1 — กำหนดแบรนด์และร่างเนื้อหา (ขอข้อมูลให้น้อยที่สุด)

ขั้นแรก โหลดเครื่องมือที่จะถูกใช้งานในภายหลังก่อน: เรียกใช้ toolSearch เพื่อสร้างภาพและสร้างเว็บเพจ เพื่อให้พร้อมใช้งานก่อนขั้นตอนที่ 2 และ 3

จากนั้นให้สแกนข้อความของผู้ใช้และ @references ใดๆ เพื่อค้นหา: ชื่อแบรนด์/สตูดิโอ, สิ่งที่แบรนด์ทำ (จุดเน้น), สโลแกน, ชื่อโครงการ, รายการบริการ และรูปภาพที่อัปโหลด/อ้างอิง (ติดตามสิ่งเหล่านี้สำหรับขั้นตอนที่ 2 — ห้ามสร้างช่องใหม่ที่ทับซ้อนกับสิ่งเหล่านี้)

กฎการถามคำถาม (ถามให้กระชับ — ผู้ใช้ชอบการสื่อสารที่สั้นกระชับ):

- หากไม่มีทั้งชื่อแบรนด์และจุดเน้นของแบรนด์ ให้เรียกใช้ askUserQuestion เพียงครั้งเดียว โดยส่งคำถามแบบกลุ่มสองข้อ:

คำถามที่ 1 "ชื่อสตูดิโอ/แบรนด์?" — ตัวเลือกเช่น 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject'

คำถามที่ 2 "แบรนด์นี้ทำอะไร?" — ตัวเลือกต่างๆ เช่น 'บริษัทออกแบบ', 'สตูดิโอถ่ายภาพ', 'บริษัทสถาปัตยกรรม', 'แบรนด์แฟชั่น', 'ผลงานส่วนตัว'

- ถ้าขาดไปเพียงคนเดียว ให้ถามแค่คนนั้นคนเดียว

- หากทั้งสองอย่างปรากฏอยู่ในข้อความของผู้ใช้ อย่าถามอะไรเพิ่มเติม ให้ดำเนินการต่อโดยตรง

เมื่อทราบชื่อแบรนด์และจุดเน้นแล้ว ให้ร่างส่วนที่เหลือด้วยตัวเองโดยไม่ต้องถามเพิ่มเติม โทน: เหมือนบทความบรรณาธิการ มั่นใจ เรียบง่าย และพรีเมียม เขียนให้กระชับ — สไตล์นี้เน้นการเว้นวรรค ไม่ใช่การใช้คำฟุ่มเฟือย

ร่าง:

- สโลแกน: สองบรรทัดสั้นๆ ที่อ่านรวมกันเป็นวลีเดียว เช่น 'ออกแบบ / อนาคต', 'สร้าง / โลก', 'สร้าง / สิ่งที่ยั่งยืน', 'ทำให้ / มันคงอยู่' แต่ละบรรทัดมี 1-2 คำ แบ่งบรรทัดด้วยตัวแบ่งบรรทัดแบบตัวเอียงมีเชิง + ตัวแบ่งบรรทัดแบบปกติมีเชิง

- เกี่ยวกับเนื้อหาโฆษณา: ประมาณ 80 คำ สองย่อหน้าสั้นๆ กล่าวถึงยุคก่อตั้ง (เช่น 'ตั้งแต่ทศวรรษ 1980') บริการสองสามอย่าง และสื่อถึงลูกค้าทั่วโลก/รางวัลในอุตสาหกรรม

- กรณีศึกษา 3 กรณี สำหรับแต่ละกรณี: ตั้งชื่อโครงการที่สอดคล้องกับจุดเน้น (สำหรับบริษัทออกแบบ ให้ใช้ชื่อซ้ำ เช่น 'Schematiq', 'Commercial Co.', 'Sprig & Sky'; สำหรับจุดเน้นอื่นๆ ให้เลือกชื่อที่มีความหมายคล้ายคลึงกัน) แท็กบริการ 1-2 รายการ ประโยคอธิบายภูมิหลังประมาณ 30 คำ และประโยคอธิบายวิธีแก้ปัญหาประมาณ 30 คำ

- แท็กบริการ 6 รายการที่เกี่ยวข้องกับหัวข้อหลัก (ค่าเริ่มต้น: การสร้างแบรนด์, การตลาดแบบบูรณาการ, การพัฒนาเว็บไซต์, การผลิตวิดีโอ, เอกลักษณ์ของแบรนด์, กลยุทธ์แบรนด์ — ปรับเปลี่ยนได้สำหรับธุรกิจที่ไม่ใช่เอเจนซี่)

- สโลแกนปิดท้าย (หนึ่งบรรทัด ประมาณ 10-14 คำ) เช่น 'ยกระดับแบรนด์ของคุณและสร้างชื่อเสียงให้เป็นที่จดจำ'

- รายการส่วนท้าย: ชื่อสตูดิโอ, 'ข้อกำหนดและเงื่อนไขการสนับสนุน', 'นโยบายความเป็นส่วนตัว'

เก็บเนื้อหาทั้งหมดไว้ในหน่วยความจำสำหรับขั้นตอนที่ 3 อย่าเพิ่งเรียกใช้ฟังก์ชัน generateWebpage ในตอนนี้

ขั้นตอนที่ 2 — รวบรวมภาพขาวดำที่สอดคล้องกันให้ได้ 6 ภาพ

แผนผังช่อง: ฮีโร่, เกี่ยวกับ, โปรเจกต์ 1, โปรเจกต์ 2, โปรเจกต์ 3, คุณสมบัติ

A) หากผู้ใช้ได้ส่งภาพมาแล้ว (ภาพที่อัปโหลด, @references, URL ในข้อความ) ให้กำหนดภาพเหล่านั้นลงในช่องตามลำดับที่ได้รับ และข้ามการสร้างภาพสำหรับช่องเหล่านั้น สร้างภาพเฉพาะในช่องที่เหลือเท่านั้น

B) สำหรับช่องว่างแต่ละช่อง ให้เรียกใช้ฟังก์ชัน generateImage และเรียกใช้ฟังก์ชันเหล่านี้พร้อมกันในชุดเครื่องมือเดียว หากเป็นไปได้

รูปแบบภาพที่ไม่สามารถเปลี่ยนแปลงได้สำหรับทุกช่อง:

- ภาพขาวดำล้วน ไม่มีสีเจือปน ไม่มีสีซีเปีย ไม่มีสีดูโอโทน คุณภาพระดับนิตยสารชั้นนำ/ภาพยนตร์/สิ่งพิมพ์ ความคมชัดและเกรนสม่ำเสมอทั้งหกภาพ มีพื้นที่ว่างเหลือเฟือในส่วนที่การจัดวางเหมาะสม

แม่แบบสำหรับใส่หัวข้อ — แทนที่ [DISCIPLINE] ด้วยจุดเน้นของแบรนด์จากขั้นตอนที่ 1 (เช่น 'บริษัทออกแบบ', 'สตูดิโอถ่ายภาพ', 'บริษัทสถาปัตยกรรม') และแทนที่ [DISCIPLINE_SUBJECT] ด้วยหัวข้อที่เหมาะสม (เช่น สำหรับงานออกแบบ: ประติมากรรมกระดาษ / ภาพระยะใกล้ของตัวอักษร; สำหรับงานสถาปัตยกรรม: รูปทรงเรขาคณิตของเงา; สำหรับงานแฟชั่น: ภาพเงา; สำหรับงานถ่ายภาพ: ภาพนิ่ง):

1. ภาพหลัก (อัตราส่วน 16:9): "ภาพถ่ายขาวดำแบบภาพยนตร์ของ [หัวข้อวิชา] องค์ประกอบภาพแบบบรรณาธิการที่น่าทึ่ง ความสวยงามแบบมินิมอลเรียบหรู แสงด้านบนนุ่มนวล พื้นที่ว่างกว้างขวาง คุณภาพระดับพรีเมียมแบบนิตยสาร ไม่มีสี ความคมชัดสูง"

2. เกี่ยวกับ (อัตราส่วน 4:3): "ภาพถ่ายสารคดีขาวดำของภายในสตูดิโอ [สาขาวิชา] ร่วมสมัย หน้าต่างบานใหญ่รับแสงธรรมชาติอ่อนๆ โต๊ะทำงานและอุปกรณ์เรียบง่าย สไตล์รายงานเชิงบรรณาธิการ ขาวดำเท่านั้น ความคมชัดสูง"

3. project_1 (aspect 1:1): "ภาพถ่ายขาวดำแบบจัดวางราบของแบบจำลองเอกลักษณ์แบรนด์ — นามบัตร หัวจดหมาย เครื่องเขียนที่พิมพ์แล้ว — บนพื้นผิวสีขาวสะอาด ถ่ายภาพแบบมุมมองด้านบนที่คมชัด สไตล์บรรณาธิการ ขาวดำเท่านั้น"

4. project_2 (aspect 1:1): "ภาพนิ่งขาวดำแบบมินิมอลที่เกี่ยวข้องกับ [สาขา] (เช่น แผ่นกระดานถ่ายทำภาพยนตร์ โมเดลจำลอง ผลิตภัณฑ์จัดแต่งทรง) แสงไฟในสตูดิโอภาพยนตร์ เงาคมชัด ขาวดำเท่านั้น"

5. project_3 (aspect 1:1): "ภาพถ่ายไลฟ์สไตล์ขาวดำเชิงบรรณาธิการ ฉากจัดแต่งน้อยชิ้น เกี่ยวข้องกับ [สาขา] สุนทรียภาพแบบนิตยสารระดับพรีเมียม ขาวดำเท่านั้น"

6. คุณลักษณะ (อัตราส่วนภาพ 16:9): "ภาพขาวดำแบบนามธรรมมุมกว้างที่เกี่ยวข้องกับ [สาขาวิชา] มุมมองที่น่าทึ่ง ภาพขาวดำเชิงบรรณาธิการที่สร้างบรรยากาศ ไม่มีสี"

เมื่อได้ URL ทั้งหกรายการแล้ว ให้ติดป้ายกำกับแต่ละรายการตามช่อง และดำเนินการต่อในขั้นตอนที่ 3

ขั้นตอนที่ 3 — สร้างเว็บเพจ

เรียกใช้ฟังก์ชัน generateWebpage โดยกำหนด as_artifact เป็น true ส่งคำสั่งแบบละเอียดเพียงคำสั่งเดียวที่มีทุกอย่างด้านล่างนี้อย่างครบถ้วน เอเจนต์ที่ทำหน้าที่เรียกใช้ generateWebpage ต้องปฏิบัติตามคำสั่งนี้อย่างเคร่งครัด

--- เริ่มข้อความแจ้งเตือนของเว็บเพจ ---

สร้างเว็บไซต์พอร์ตโฟลิโอแบบยาวที่เลื่อนดูได้ทั้งหมดในสไตล์เรียบหรูแบบขาวดำ ปฏิบัติตามกฎการออกแบบอย่างเคร่งครัด ห้ามฝ่าฝืน

พาเล็ตต์ (พิเศษเฉพาะ — ไม่มีสีอื่นจำหน่ายที่ไหนอีกแล้ว):

- พื้นหลังสีขาว: #FFFFFF

- หมึกสีดำและข้อความ: #000000

- ส่วนสีเข้มส่วนหนึ่งอาจใช้สีดำสนิท: #0A0A0A

- ใช้ CSS `filter: grayscale(1) contrast(1.02)` กับทุก เพื่อเป็นมาตรการป้องกัน เพื่อให้สินทรัพย์ที่นำเข้าทั้งหมดคงเป็นสีขาวดำอย่างเคร่งครัด

การจัดพิมพ์ตัวอักษร:

- แสดงผล: ใช้ฟอนต์ Google 'Fraunces' (ใช้ความหนา 300 และ 700, ขนาดตัวอักษร 144) มีแบบตัวเอียงสำหรับคำสำคัญที่เน้น

- เนื้อหา: ฟอนต์ Google 'Inter' (น้ำหนัก 400, 500) ขนาดตัวอักษร 16–18 พิกเซล ความสูงบรรทัดประมาณ 1.6

- หัวข้อแสดงผลมีขนาดใหญ่มาก: clamp(56px, 12vw, 180px). การติดตาม -0.02em บนจอแสดงผล

- ใช้ตัวพิมพ์เล็ก (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`) สำหรับเมนูนำทาง แท็กบริการ และลิงก์ในส่วนท้ายของเว็บไซต์

จังหวะการจัดวาง:

- ระยะห่างแนวตั้งของส่วน: clamp(80px, 12vh, 200px)

- ความกว้างสูงสุดของคอนเทนเนอร์: 1280 พิกเซล, รางด้านข้างแบบจำกัด (24 พิกเซล, 6 ความกว้างด้านข้าง, 96 พิกเซล)

- เว้นระยะห่างให้เหมาะสม อย่าจัดวางสิ่งของแน่นเกินไป

ปฏิสัมพันธ์:

- แถบนำทางด้านบนแบบคงที่ พร้อมเอฟเฟ็กต์เบลอพื้นหลังเล็กน้อยเมื่อเลื่อนหน้าจอ

- ปุ่มรูปทรงแคปซูล: 1px ทึบ #000, เติมสีโปร่งใส, ขอบโค้งมน: 9999px, ระยะห่างภายใน 14px 28px เมื่อวางเมาส์เหนือปุ่ม สีพื้นหลังจะกลับเป็น #000 + สี #FFF, ความเร็วในการเปลี่ยนภาพ 200ms

- การเฟดอัพแบบละเอียดอ่อนเมื่อเลื่อนหน้าจอ + การเลื่อนขึ้นลง 24 พิกเซลในแต่ละบล็อกหลัก (Intersection Observer)

- แถวบริการ: เมื่อวางเมาส์เหนือข้อความและลูกศรจะเลื่อนไปทางขวาประมาณ 12 พิกเซล โดยมีระยะเวลาหน่วง 200 มิลลิวินาที

ตอบสนองต่อทุกขนาดหน้าจอ:

- สำหรับขนาดหน้าจอต่ำกว่า 768 พิกเซล: หัวข้อข่าวจะย่อขนาดลงเหลือประมาณ 64–88 พิกเซล ตารางแบบสองคอลัมน์จะยุบเหลือคอลัมน์เดียว และรูปภาพจะยังคงแสดงผลเต็มขอบภายในระยะขอบที่กำหนด

ส่วนต่างๆ (เรียงตามลำดับนี้):

1. แถบนำทาง (คงที่): ชื่อสตูดิโออยู่ด้านบนซ้าย ตัวพิมพ์เล็กทั้งหมด; ปุ่ม "ร่วมงานกับเรา" อยู่ด้านบนขวา

2. ส่วนหัวเรื่องหลัก (สีขาวล้วน): แบ่งหัวเรื่องออกเป็นสองบรรทัด — บรรทัดที่ 1 ใช้แบบอักษร Fraunces แบบตัวเอียง บรรทัดที่ 2 ใช้แบบอักษร Fraunces แบบปกติ — โดยใช้สโลแกนของผู้ใช้ ตัวอักษรขนาดใหญ่ อาจมีภาพเน้นขนาดเล็กสีขาวดำลอยอยู่ด้านล่างขวา (ใช้ภาพส่วนหัวเรื่องขนาดเล็กที่นี่ หรือเก็บภาพส่วนหัวเรื่องไว้สำหรับส่วนถัดไป) มีแถบเลื่อนแสดงคำแนะนำอย่างละเอียดที่ด้านล่าง

3. เกี่ยวกับ: หัวข้อ 'เกี่ยวกับ [สตูดิโอ]' ในแบบอักษร Fraunces 700 จัดวางแบบตาราง 6 คอลัมน์: ข้อความเกี่ยวกับอยู่ทางซ้าย (คอลัมน์ 1–3) ภาพเกี่ยวกับแบบ 4:3 อยู่ทางขวา (คอลัมน์ 4–6) มีสองย่อหน้าสั้นๆ

4. หัวข้อส่วน: 'ผลงานของเรา' ใน Fraunces 700 ขนาดใหญ่

5. กรณีศึกษาที่ 1: ชื่อโครงการ (Fraunces ขนาดใหญ่), แถวแท็กบริการเป็นตัวพิมพ์เล็ก (คั่นด้วยจุดกลาง · หรือเว้นวรรค) ใต้ชื่อ: ภาพโครงการเต็มความกว้าง (ใช้ project_1, อัตราส่วน 1:1 ครอปเป็นเฟรม 16:9) ใต้ภาพ: ตารางสองคอลัมน์ — คอลัมน์ซ้ายแสดงหมายเลข '01' ขนาดใหญ่ (Fraunces 300, clamp(100px, 18vw, 220px)), ป้ายกำกับ 'Background' เป็นตัวพิมพ์เล็ก จากนั้นเป็นเนื้อหาประมาณ 30 คำ คอลัมน์ขวาเหมือนกัน แต่แสดง '02' และ 'Solution'

6. กรณีศึกษาที่ 2: โครงสร้างเหมือนกับกรณีศึกษาที่ 1 แต่ใช้ภาพจากโปรเจกต์ที่ 2 สามารถกลับภาพเพื่อให้ภาพอยู่บนแถบสีขาวนวลได้ — ต้องใช้สีที่อยู่ในจานสีที่กำหนดไว้เท่านั้น

7. กรณีศึกษาที่ 3: โครงสร้างเหมือนกัน ใช้ภาพจากโปรเจกต์_3

8. แถบภาพเด่น: ภาพกว้างแบบเต็มขอบ (ใช้ช่องภาพเด่นขนาด 16:9) ห้ามวางข้อความซ้อนทับ

9. สิ่งที่เราทำ: หัวข้อ 'สิ่งที่เราทำ' ในแบบอักษร Fraunces 700 ด้านล่างเป็นรายการแนวตั้งของแท็กบริการ 6 รายการ แต่ละแถว: เส้นแบ่งบางๆ 1 พิกเซลด้านบน (#000) ชื่อบริการอยู่ทางซ้ายในแบบอักษร Fraunces ~clamp (36px, 6vw, 80px) ลูกศร '→' ทางขวา เคอร์เซอร์ชี้เมาส์ เมื่อวางเมาส์เหนือเคอร์เซอร์จะเลื่อนไปทางขวา

10. CTA: ส่วนสีเข้มแบบเต็มพื้นที่ พื้นหลังสี #000 หัวข้อข่าว Massive Fraunces จัดกึ่งกลางด้วยสี #FFF โดยใช้แท็กไลน์ CTA ปิดท้าย ระยะห่างภายใน (Padding clamp) (120px, 20vh, 240px) ปุ่ม "ร่วมงานกับเรา" อยู่ด้านล่างหัวข้อข่าว (ขอบสีขาว, โปร่งใส, เมื่อวางเมาส์เหนือปุ่มจะเปลี่ยนเป็นพื้นหลังสีขาว + ข้อความสีดำ)

11. ส่วนท้ายเว็บไซต์: พื้นหลังสีขาว ตัวอักษรพิมพ์เล็กแบบ Grotesk ชื่อสตูดิโออยู่ทางซ้าย ลิงก์อยู่ทางขวา ('ข้อกำหนดและเงื่อนไขการสนับสนุน', 'นโยบายความเป็นส่วนตัว') เส้นขอบด้านบนบางมาก (#000, 1px) ข้อความลิขสิทธิ์ขนาดเล็กมากอยู่บรรทัดถัดไป

รูปภาพ — แทรก URL ที่ให้ไว้ในส่วนข้อมูลด้านล่างลงในช่องที่ตรงกัน ใช้ object-fit: cover และตัวกรองความปลอดภัยแบบขาวดำกับทุก ห้ามเพิ่มรูปภาพตกแต่งเพิ่มเติม

ข้อมูล — โปรดนำข้อมูลเหล่านี้ไปแทนที่ในหน้าเว็บ:

- studio_name: <ชื่อสตูดิโอจากขั้นตอนที่ 1>

- สโลแกน: <สโลแกนสองบรรทัดจากขั้นตอนที่ 1 โดยใช้เครื่องหมาย '/' คั่นระหว่างสองบรรทัด>

- about_copy: <ย่อหน้าเกี่ยวกับขั้นตอนที่ 1>

- case_studies: อาร์เรย์ของสามรายการ { name, tags[], background, solution } จากขั้นตอนที่ 1

- บริการ: อาร์เรย์ของสตริงแท็กบริการหกรายการจากขั้นตอนที่ 1

- cta_tagline: <คำกระตุ้นการตัดสินใจปิดท้ายจากขั้นตอนที่ 1>

- รูปภาพ: { hero, about, project_1, project_2, project_3, feature } จากขั้นตอนที่ 2

- footer_links: ['ข้อกำหนดและเงื่อนไขการสนับสนุน', 'นโยบายความเป็นส่วนตัว']

--- สิ้นสุดข้อความแจ้งเตือนบนเว็บเพจ ---

เมื่อเรียกใช้ฟังก์ชัน generateWebpage ให้ส่งค่า as_artifact: true เข้าไปด้วย หลังจากที่ฟังก์ชันส่งค่ากลับมาแล้ว ให้แสดงสรุปสั้นๆ หนึ่งบรรทัดในภาษาที่ผู้ใช้ต้องการ และแจ้งให้ผู้ใช้ทราบว่าสามารถขอเปลี่ยนรูปภาพ เปลี่ยนข้อความ หรือเปลี่ยนชื่อโปรเจ็กต์ได้