การสร้าง LP ด้วย Claude Design และ Claude Code: บทเรียนระหว่างการลงมือทำกับการตัดสินใจ

ฉันสร้างแลนดิ้งเพจโดยไม่ต้องเปิด Figma แม้แต่ครั้งเดียว เครื่องมือหลักที่ใช้คือ Claude Design และ Claude Code ระยะเวลาการผลิตคือหนึ่งสัปดาห์ มีการโต้ตอบกับ AI รวมกันกว่า 300 ครั้ง

สิ่งที่ได้เรียนรู้จากการโต้ตอบ 300 ครั้งนั้นคือ แม้การลงมือสร้างจะง่ายขึ้นอย่างมากด้วย AI แต่ขีดจำกัดสูงสุดของคุณภาพสุดท้ายยังคงถูกกำหนดโดยการตัดสินใจของมนุษย์ AI จัดการทุกอย่างจนถึงขั้นตอนการเสนอทางเลือก จากนั้น การยกระดับให้ถึงโทนที่ตั้งใจไว้คืองานของผู้ที่ตัดสินคุณภาพและส่งกลับไปแก้ไข

ฉันสร้างไซต์เอกสารสำหรับ Design Harness ซึ่งเป็นกรอบงานที่จัดการการออกแบบในสี่ชั้น: ข้อจำกัด, บริบท, การตรวจสอบ และการประเมินผล เนื่องจากเป็นไซต์เกี่ยวกับการออกแบบ ฉันจึงมีแนวคิดรองคือการดูว่าสามารถไปได้ไกลแค่ไหนกับรายละเอียดพื้นผิวและการโต้ตอบต่างๆ

https://x.com/kgsi/status/2072829167285207077

ฉันจะย้อนดูขั้นตอนที่ทำและจุดที่ใช้การโต้ตอบ 300 ครั้งนั้น รวมถึงภาพหน้าจอจริง

ฉันใช้ Claude Design และ Claude Code แตกต่างกันอย่างไร

ฉันสร้าง LP นี้โดยแบ่งบทบาทระหว่างเครื่องมือหลักสองอย่าง Claude Design เป็นเครื่องมือสร้างการออกแบบเชิงสนทนาที่คุณป้อนคำสั่งผ่านแชทแล้วจะได้ต้นแบบ HTML แบบสดทันที Claude Code เป็นเอเจนต์เขียนโค้ดที่ทำงานในเทอร์มินัลและปรับใช้โค้ดเบสโดยตรง

การแบ่งหน้าที่ชัดเจน: Claude Design เหมาะกับการสร้างต้นแบบในช่วงแรก ครั้งนี้ ฉันให้เอกสารสรุปนโยบายการออกแบบและไวร์เฟรม ตอบคำถามสองสามข้อ แล้ว LP แรกก็ถูกสร้างออกมา วิธีนี้ได้ผลในขั้นตอนการลองทิศทางและทดลองอะไรต่างๆ

ในทางกลับกัน สำหรับงานที่ต้องทำให้ถึงคุณภาพระดับโปรดักชัน เช่น การรองรับ responsiveness และรายละเอียดการเข้าถึง ต้องใช้ Claude Code ในการปรับแต่ง

ตัดสินใจเรื่องดีไซน์ด้วย Design และทำให้เสร็จด้วย Code ฉันใช้ตามลำดับนี้

ถ่ายทอดทุกอย่างเป็นคำพูดก่อนลงมือสร้าง

ตอนที่ตัดสินใจสร้างไซต์นี้ ทิศทางก็ถูกกำหนดไว้แล้ว สิ่งที่คิดไว้คือ "จะเกิดอะไรขึ้นถ้าเพิ่มฟอนต์และเอฟเฟกต์แบบโมเดิร์นให้กับโทนสไตล์ต่างประเทศคลาสสิก" แนวคิดนี้มาจากเอกสาร Design Harness

โปรดทราบว่าเนื่องจาก Claude ไม่สามารถสร้างภาพได้เอง ฉันจึงปล่อยให้ ChatGPT Images 2.0 จัดการ ฉันได้แนวคิดอื่นจากภาพตัวอย่างไซต์ สร้างมูดบอร์ดสำหรับไซต์ที่ต้องการ และสร้างภาพพื้นหลัง ฉันใส่ทุกอย่างเป็นคำพูดและภาพล่วงหน้าเพื่อกำหนดทิศทาง 'ที่ดี' การโต้ตอบที่ตามมาทั้งหมดคือการตรวจสอบกับสิ่งนี้

สำรวจโทนสีภาพด้วย Codex (ChatGPT Image 2.0) ค้นหาภาพและมูดบอร์ดต่างๆ

การปรับปรุงต้องใช้การโต้ตอบหลายร้อยครั้ง (อย่างน้อย)

หลังจากเตรียมงานเสร็จ การโต้ตอบกับ Claude Design ก็เริ่มขึ้น ย้อนดูภาพหน้าจอ มีการโต้ตอบทั้งหมดกว่า 200 ครั้ง (ประมาณหนึ่งสัปดาห์ในแง่ของเวลาในการผลิตทั้งหมด) นี่คือรายละเอียดของเซสชัน:

• "ข้อกำหนดการสร้างไซต์ LP": ประมาณ 80 เทิร์น
• "แอนิเมชัน Design Harness": ประมาณ 80 เทิร์น
• "แอนิเมชันแสดงพื้นหลังข้อความ KV": ประมาณ 50 เทิร์น
• "ปรับปรุงคำอธิบาย Design Harness": ประมาณ 10 เทิร์น

แอนิเมชันโหลดเปิดหน้าและเอฟเฟกต์ KV (Key Visual) ต้องใช้การโต้ตอบจำนวนมากเป็นพิเศษ เอฟเฟกต์ไม่ได้ทำเสร็จในครั้งเดียว ฉันสั่งงานเป็นชั้นๆ เพื่อปรับแต่ง (เช่น เอฟเฟกต์ที่มาจากด้านล่าง, เอฟเฟกต์เบลอซ้อนทับ ฯลฯ)

ภาพจับของ Claude Design เนื่องจากความแม่นยำลดลงเมื่อบริบทเพิ่มขึ้น ฉันจึงสร้างเซสชันใหม่สำหรับงานสำคัญแต่ละงานเพื่อสำรวจ

แยกกัน ฉันกำลังปรับปรุงการรองรับ responsiveness และการเข้าถึงด้วย Claude Code ดังนั้นจึงรวมแล้วประมาณ 300 ครั้ง ในแง่ของความรู้สึก คิดว่าส่วน Hero ใช้เวลามากที่สุด

เมื่อส่งต่อจาก Claude Design ไปยัง Claude Code ฉันใช้ฟังก์ชัน Share แต่แนะนำให้ส่งไฟล์ zip ทั้งหมดผ่าน "Export" แม้ว่า "Send to" จะง่ายกว่า แต่มีข้อจำกัดในการส่งภาพและความแม่นยำในการสร้างซ้ำไม่สูงเท่า

เมื่อดูตัวเลข อาจดูเหมือนเป็นงานน่าเบื่อ แต่การให้คำแนะนำนั้นง่ายขึ้นแล้ว คุณไม่จำเป็นต้องเข้าใจ HTML และ CSS อย่างถ่องแท้อีกต่อไป Claude Design มีฟีเจอร์คำอธิบายประกอบที่คุณสามารถเพิ่มความคิดเห็นลงในองค์ประกอบบนหน้าจอได้โดยตรง หากคุณชี้ไปที่ส่วนที่ต้องการแก้ไข คำแนะนำโดยละเอียดแทบทั้งหมดจะผ่าน ดังนั้นคำแนะนำที่ฉันให้ส่วนใหญ่จึงอยู่ในสามประเภท:

ชี้ไปที่องค์ประกอบด้วยคำอธิบายประกอบเพื่อแก้ไขรายละเอียด สื่อสารถึงการเคลื่อนไหวเป็นคำพูด เช่น การแสดงพื้นหลังข้อความ KV ปรับโทนให้เข้ากับ "สไตล์ต่างประเทศคลาสสิก" อีกครั้ง... ทักษะที่จำเป็นเท่านั้นที่เหลืออยู่คือความสามารถในการถ่ายทอดการเคลื่อนไหวและโทนเป็นคำพูด

ลองใช้เนวิเกชันเป็นตัวอย่างของการโต้ตอบไปมา

ตอนแรก เป็นเอฟเฟกต์ที่เส้นใต้เลื่อนเมื่อวางเมาส์ มันเข้าใจยาก ฉันจึงให้ URL การใช้งานอ้างอิงและเปลี่ยนเป็นเอฟเฟกต์สับเปลี่ยนตัวอักษร จากนั้น ความกว้างของตัวอักษรเปลี่ยนไปเมื่อสับเปลี่ยน ทำให้ตำแหน่งเมนูขยับ เมื่อฉันให้กำหนดความกว้าง ระยะห่างก็ไม่เท่ากัน ส่งกลับไปบอกว่า "ก็ยังไม่เท่ากัน" ก็ไม่ถูกแก้ไข สุดท้าย ฉันเลิกปรับความกว้างและจบด้วยการเปลี่ยนฟอนต์เนวิเกชันเป็น monospace แบบความกว้างคงที่ หากความกว้างของตัวอักษรคงที่ ก็ไม่มีอะไรขยับเมื่อสับเปลี่ยน ใช้เวลา 5 การโต้ตอบ

การโต้ตอบ 300 ครั้งส่วนใหญ่เป็นการวนซ้ำแบบนี้ การให้ URL ของไซต์หรือการใช้งานที่ต้องการอ้างอิงเพื่อแสดงทิศทาง การบอกความรู้สึกไม่สบายใจกับสิ่งที่ออกมาสั้นๆ เช่น "ระยะห่างไม่เท่ากันอีกแล้ว" และส่งกลับไป หากการแก้ไขเดิมล้มเหลวสองครั้ง ฉันก็หยุดการปรับละเอียดและเปลี่ยนสมมติฐาน สุดท้าย ฉันไม่เคยเขียนเอกสารข้อกำหนดยาวๆ เลย

อย่างไรก็ตาม แม้ครั้งนี้แทบไม่ได้ใช้ แต่มีเอกสารที่เรียกว่า Animation Vocabulary and Skills ซึ่งน่าจะทำให้คำแนะนำมีประสิทธิภาพมากขึ้นหากใช้ https://animations.dev/vocabulary

การลงมือสร้างและการตัดสิน

ย้อนดูเนื้อหาของการโต้ตอบ มันเป็นกระบวนการตัดสินคุณภาพของสิ่งที่ออกมาและส่งกลับไปแก้ไขซ้ำแล้วซ้ำเล่า การลงมือสร้างตอนนี้ AI สามารถจัดการได้เกือบทั้งหมดแล้ว ถ้าคุณให้คำแนะนำ ผู้สมัครก็ปรากฏขึ้นทันที แต่จังหวะแอนิเมชันถูกต้องหรือไม่? มีพื้นที่ว่างเพียงพอหรือไม่? อะไรดีอะไรไม่ดี? AI ไม่สามารถตัดสินสิ่งนี้ได้ ยังเป็นไปไม่ได้ที่จะทำให้ AI ส่งออกโทนที่ตั้งใจไว้ในครั้งเดียว ถ้าคุณต้องการยกระดับคุณภาพ คุณไม่มีทางเลือกอื่นนอกจากตัดสินและส่งกลับไป

นี่อาจเป็นสาเหตุว่าทำไมเอาต์พุตง่ายๆ ถึงไม่มีคุณภาพถึงระดับนี้ การศึกษา โดย UC Berkeley School of Information ซึ่งสังเกตดีไซเนอร์ 13 เซสชันที่ใช้เครื่องมือ AI เจนเนอเรทีฟ เรียกปรากฏการณ์ที่เอาต์พุตโน้มเอียงไปทางสไตล์ที่ดู "คุณภาพสูง" แต่คุ้นเคยว่า "กับดักการลู่เข้า (Convergence Trap)"

https://x.com/kgsi/status/2074250174986362999

หากไม่มีการตัดสินเพื่อส่งกลับไปเอาต์พุตจะจบลงที่ความเรียบร้อยทั่วไปที่ไม่มีเอกลักษณ์เป็นของใคร การโต้ตอบ 300 ครั้งส่วนใหญ่ใช้เพื่อดึงมันกลับไปสู่โทนที่ตั้งใจไว้จากจุดนั้น

จะเกิดอะไรขึ้นกับคนที่ตัดสินได้?

มีมุมมองว่าในที่สุด AI จะสามารถจัดการกับการตัดสินด้านสุนทรียศาสตร์และคุณภาพเหล่านี้ได้อย่างเต็มที่ ฉันคิดว่ามันจะเกิดขึ้นในบางด้าน

อย่างไรก็ตาม ในการโต้ตอบกว่า 300 ครั้งแต่ละครั้ง ฉันคือคนที่สังเกตเห็นความไม่สบายใจและส่งกลับไป และไม่มีวี่แววว่าสิ่งนั้นจะเป็นอัตโนมัติในกระบวนการนั้น แน่นอนว่านี่เป็นเพียง n=1 จากการสร้าง LP หนึ่งอัน ฉันยังไม่รู้ว่าสิ่งเดียวกันนี้จะเกิดขึ้นกับงานออกแบบอื่นหรือไม่

หลังจากเสร็จสิ้นกระบวนการนี้ การคาดการณ์ของฉันคือ "ที่นั่ง" สำหรับคนที่ลงมือสร้างจะลดลง งานที่ต้องออกแบบ LP ใช้เวลาหนึ่งสัปดาห์จะถูกแทนที่ด้วยงานที่ใช้เวลาครึ่งวันในการโต้ตอบกับ AI ในเวลานั้น คนที่ยังคงอยู่ในที่นั่งจะเป็นผู้ที่มีความรู้และเกณฑ์การตัดสินที่จะพูดภายในไม่กี่วินาทีว่า "เลือกข้อเสนอที่ถูกต้อง แต่ทำการเคลื่อนไหวใหม่" ต่อหน้าผู้สมัครที่เรียงรายอยู่ ฉันคิดว่าความต้องการคนที่สามารถตัดสินในขณะที่เชี่ยวชาญ AI จะเพิ่มขึ้นจริงๆ

สิ่งที่นักออกแบบควรฝึกฝนจะเปลี่ยนจากมือไปสู่ดวงตา การตัดสินที่ฉันทำในการโต้ตอบ 300 ครั้งนั้นท้ายที่สุดแล้วอาศัยประสบการณ์การสร้างสิ่งต่างๆ ด้วยมือของฉันเอง ถ้าเป็นเช่นนั้น ในโลกที่จำนวนครั้งที่เราสร้างสิ่งต่างๆ ลดลง มีวิธีพัฒนาแค่ดวงตาหรือไม่?

หมายเหตุ: ไซต์คัดสรร "Parascope" ที่คุณสามารถเรียนรู้ทักษะ "การออกแบบ" ได้ กำลังดำเนินการได้ดี 👉 http://parascope.design/