เมื่อไม่กี่สัปดาห์ก่อน ผมตัดสินใจลองดูว่า Claude Design จะไปได้ไกลแค่ไหนในโปรเจกต์จริงๆ
ตอนแรกผมคิดว่าคงใช้เวลาแค่ไม่กี่ชั่วโมงในการทดสอบฟีเจอร์ สร้างแลนดิ้งเพจสักหน้า แล้วก็เลิก
แต่ก็ไม่ใช่แบบนั้น
ผมกลับสร้างแบรนด์ทั้งหมดตั้งแต่เริ่มต้น
- โลโก้
- อัตลักษณ์แบรนด์
- แลนดิ้งเพจ
- พิตช์เด็ค
- ต้นแบบแอปมือถือ
- สื่อการตลาด
สิ่งที่ทำให้ผมประหลาดใจที่สุดไม่ใช่คุณภาพ
แต่มันคือค่าใช้จ่ายที่เพิ่มขึ้นอย่างรวดเร็วเมื่อผมใช้เครื่องมืออย่างผิดวิธี
หลังจากทดสอบ สร้างใหม่ และลองเวิร์กโฟลว์ต่างๆ มาหลายวัน ผมก็รู้ว่าคนส่วนใหญ่จะเสียเครดิตการใช้ไปมหาศาลก่อนที่จะค้นพบว่า Claude Design ถนัดอะไรจริงๆ
https://x.com/claudeai/status/2045156267690213649
ดังนั้นในบทความนี้ ผมจะพาคุณไปดูขั้นตอนที่ผมใช้จริง ความผิดพลาดที่ทำให้ผมเสียเวลามากที่สุด และเวิร์กโฟลว์ที่ผมแนะนำถ้าคุณจะเริ่มวันนี้
Claude Design จริงๆ แล้วคืออะไร
คนส่วนใหญ่ได้ยินชื่อก็คิดว่ามันเป็น AI สร้างภาพอีกตัวหนึ่ง
นั่นไม่ถูกต้องนัก
Claude Design ให้ความรู้สึกเหมือนสภาพแวดล้อมการผลิตภาพมากกว่าเครื่องมือออกแบบทั่วไป
คุณแค่อธิบายสิ่งที่ต้องการด้วยภาษาธรรมชาติ แล้วมันจะสร้างชิ้นงานภาพที่สมบูรณ์ตามคำขอนั้น
- แลนดิ้งเพจ
- งานนำเสนอ
- ภาพจำลองผลิตภัณฑ์
- ระบบแบรนด์
- อินเทอร์เฟซมือถือ
- สื่อการตลาด
- แม้แต่คอนเทนต์แบบเคลื่อนไหว
สิ่งที่น่าสนใจคือ Claude ไม่ได้แค่สร้างผลงานแล้วหยุด
มันจะประเมินสิ่งที่สร้างขึ้นอย่างต่อเนื่อง ตรวจสอบความไม่สอดคล้อง และมักจะแก้ไขปัญหาก่อนที่คุณจะสังเกตเห็นด้วยซ้ำ
วงจร feedback นั้นเป็นหนึ่งในเหตุผลสำคัญที่ทำให้ผลลัพธ์สุดท้ายดูดีขึ้นมากกว่าการออกแบบที่สร้างโดย AI ส่วนใหญ่
ความผิดพลาดครั้งใหญ่ที่สุดที่ผมทำ
เมื่อเริ่มแรก ผมปฏิบัติต่อ Claude Design เหมือนเครื่องมือระดมสมอง
นั่นแพงมาก
ผมจะเปิดโปรเจกต์ใหม่ ขอไอเดีย เปลี่ยนทิศทางกลางคัน สร้างเลย์เอาต์ใหม่ และทดลองแนวคิดที่ต่างกันไปหมด
ผลลัพธ์ก็คาดเดาได้
ผมเสียเครดิตไปมากมายกับงานที่ไม่เคยได้เข้าสู่ผลิตภัณฑ์สุดท้าย
ในที่สุดผมก็รู้บางสิ่งที่สำคัญ
Claude Design ทำงานได้ดีที่สุดเมื่อความคิดได้ถูกวางไว้แล้ว
ทุกวันนี้เวิร์กโฟลว์ของผมต่างออกไปโดยสิ้นเชิง
ผมระดมสมองนอก Claude Design
ผมกำหนดตำแหน่งแบรนด์
ผมกำหนดกลุ่มเป้าหมาย
ผมตัดสินใจเรื่องทิศทางภาพ
ผมเลือกสี
หลังจากที่ทุกอย่างถูกบันทึกไว้เท่านั้น ผมถึงก้าวเข้าสู่ขั้นตอนการออกแบบ
ความแตกต่างในประสิทธิภาพนั้นมหาศาล
สร้าง Design System ก่อน
ถ้ามีบทเรียนหนึ่งที่ควรจำไว้ ให้เริ่มด้วย design system:
- ไม่ใช่แลนดิ้งเพจ
- ไม่ใช่งานนำเสนอ
- ไม่ใช่ภาพจำลองแอป
design system ที่ดีจะกลายเป็นรากฐานของทุกอย่างอื่น
- สี
- ตัวพิมพ์
- ระยะห่าง
- ปุ่ม
- การ์ด
- ช่องกรอกข้อมูล
- ไอคอน
- พฤติกรรมของคอมโพเนนต์
- ลำดับชั้นภาพ
เมื่อตัดสินใจเรื่องพวกนั้นแล้ว ทุกชิ้นงานในอนาคตจะสร้างได้ง่ายขึ้น
สำหรับโปรเจกต์ของผม ผมให้ Claude Design มี brand brief สั้นๆ ที่ประกอบด้วยภารกิจ กลุ่มเป้าหมาย ภาพอ้างอิง ความชอบเรื่องสี และทิศทางสไตล์โดยรวม
เวอร์ชันแรกยังไม่สมบูรณ์แบบ
องค์ประกอบบางอย่างดูไม่สอดคล้อง
คอมโพเนนต์สองสามตัวดูไม่ค่อยตรงแบรนด์
แต่หลังจาก feedback สองสามรอบ ระบบก็กลายเป็นมั่นคงอย่างน่าประหลาดใจ
จากจุดนั้นเป็นต้นมา ทุกสิ่งที่ผมสร้างขึ้นใช้ภาษาเดียวกัน
นั่นคือจุดที่คุณค่าที่แท้จริงเริ่มปรากฏ
เวิร์กโฟลว์การสร้างแบรนด์ของผม
เมื่อ design system เสร็จแล้ว ผมทำตามขั้นตอนเดียวกันทุกชิ้นงาน
ขั้นตอนที่ 1: สร้างรากฐานแบรนด์
ก่อนออกแบบอะไร ผมเขียนเอกสารโดยละเอียดอธิบาย
- ผลิตภัณฑ์นี้มีไว้เพื่อใคร
- แก้ปัญหาอะไร
- ควรให้ความรู้สึกแบบไหน
- ควรดึงดูดผู้ชมกลุ่มไหน
เอกสารนี้กลายเป็นแหล่งข้อมูลหลักสำหรับทุกการตัดสินใจในอนาคต
ขั้นตอนที่ 2: สร้าง Design System
จาก brand brief, Claude Design สร้างกรอบภาพ
- ลำดับชั้นตัวพิมพ์
- สีหลักและสีรอง
- คอมโพเนนต์
- กฎระยะห่าง
- รูปแบบการโต้ตอบ
- ทุกอย่างเริ่มจากตรงนี้
ขั้นตอนที่ 3: สร้างพิตช์เด็ค
เมื่อ design system ตั้งค่าไว้แล้ว การสร้างงานนำเสนอก็ง่ายขึ้นมาก
แทนที่จะออกแบบทุกสไลด์ทีละสไลด์ ผมแค่เน้นเรื่องราว
ความสม่ำเสมอทางภาพได้รับการจัดการแล้ว
ผลลัพธ์สุดท้ายดูมืออาชีพกว่าสิ่งที่ผมจะสามารถประกอบเองด้วยมือในเวลาเท่ากันมาก
ขั้นตอนที่ 4: สร้างแลนดิ้งเพจ
แลนดิ้งเพจคือที่ที่ทุกอย่างเริ่มมารวมกัน
- ส่วน Hero
- การอธิบายฟีเจอร์
- ตารางเปรียบเทียบ
- คำรับรอง
- ส่วน Call-to-Action
เพราะภาษาภาพมีอยู่แล้ว หน้าเว็บจึงดูกลมกลืนแทบจะทันที
แทนที่จะออกแบบจากศูนย์ ผมกำลังประกอบชิ้นส่วนจากระบบที่มีอยู่
ขั้นตอนที่ 5: สร้างหน้าจอมือถือ
ต่อมาคือประสบการณ์มือถือ
แทนที่จะสร้าง wireframe ก่อน ผมย้ายไปที่หน้าจอที่มีความละเอียดสูงขึ้นทันที
ซึ่งประหยัดเวลาได้มากอย่างน่าประหลาดใจ
design system มีบล็อกพื้นฐานส่วนใหญ่ที่จำเป็นสำหรับอินเทอร์เฟซอยู่แล้ว
ขั้นตอนที่ 6: สร้างสื่อการตลาด
สุดท้าย ผมใช้กรอบแบรนด์เดียวกันเพื่อสร้างสื่อส่งเสริมการขาย
- กราฟิกโซเชียลมีเดีย
- ภาพผลิตภัณฑ์
- สื่อเปิดตัว
- กราฟิกงานนำเสนอ
ทุกอย่างเข้ากันเพราะทุกอย่างมาจากแหล่งเดียวกัน
ความสม่ำเสมอนั้นทำได้ยากเมื่อคุณต้องกระโดดข้ามเครื่องมือหลายตัวและเวิร์กโฟลว์ที่ไม่เชื่อมต่อกัน
พลังซ่อนเร้น
คนส่วนใหญ่โต้ตอบกับ Claude Design ผ่าน prompts เท่านั้น
นั่นเป็นวิธีทำงานที่ช้าที่สุดวิธีหนึ่งจริงๆ
ข้อได้เปรียบที่แท้จริงมาจากการปรับแต่งเล็กๆ น้อยๆ โดยตรงภายในโปรเจกต์
- เปลี่ยนข้อความ
- ปรับระยะห่าง
- ปรับปรุงเลย์เอาต์
- อัปเดตสี
การปรับปรุงแบบเจาะจงแทนที่จะสร้างส่วนทั้งหมดใหม่
ทุกครั้งที่สร้างโดยไม่จำเป็น ทั้งเสียเวลาและเครดิต
ทุกการแก้ไขโดยตรงช่วยประหยัดทั้งสองอย่าง
เมื่อเวลาผ่านไป การประหยัดเล็กๆ น้อยๆ เหล่านั้นก็กลายเป็นสิ่งสำคัญ
วิธีประหยัดเครดิต
หลังจากใช้จ่ายมากกว่าที่ตั้งใจไว้มาก ในที่สุดผมก็พัฒนากฎง่ายๆ ชุดหนึ่ง
- ระดมสมองนอก Claude Design
- สร้าง brief โดยละเอียดก่อนสร้างอะไร
- ใช้ภาพอ้างอิงทุกครั้งที่ทำได้
- อธิบายสิ่งที่คุณต้องการอย่างแม่นยำ
- อธิบายสิ่งที่คุณไม่ต้องการ
หลีกเลี่ยงการขอหลายคำขอใหญ่ใน prompt เดียว
ตรวจสอบผลลัพธ์ตั้งแต่เนิ่นๆ แทนที่จะปล่อยให้การสร้างยาวดำเนินไปโดยไม่ตรวจสอบ
ที่สำคัญที่สุด ตัดสินใจก่อนเปิดโปรเจกต์
ความไม่แน่ใจเป็นวิธีที่เร็วที่สุดวิธีหนึ่งที่จะเผาผลาญเครดิต
การเผยแพร่ผลิตภัณฑ์สุดท้าย
การสร้างดีไซน์เป็นเพียงครึ่งหนึ่งของกระบวนการ
ในที่สุด ทุกอย่างต้องขึ้นสู่โลกออนไลน์
หลังจากปรับแต่งชิ้นงานภาพเสร็จ ผมก็ย้ายพวกมันไปสู่การพัฒนาและการ deploy
นี่คือจุดที่ design system มีค่ามากยิ่งขึ้น
แทนที่จะส่งมอบไฟล์ที่ไม่เชื่อมต่อกันหลายสิบไฟล์ ผมมีภาษาภาพที่เป็นหนึ่งเดียวที่สามารถนำไปใช้อย่างสม่ำเสมอกับผลิตภัณฑ์สุดท้าย
การเปลี่ยนผ่านจากแนวคิดไปสู่เว็บไซต์ที่ใช้งานได้จริงราบรื่นกว่าที่ผมคาดไว้มาก
ความคิดสุดท้าย
Claude Design ไม่ได้แทนที่นักออกแบบ
มันไม่ได้กำจัดงานสร้างสรรค์อย่างน่าอัศจรรย์
สิ่งที่มันทำคือลดระยะห่างระหว่างความคิดกับผลิตภัณฑ์สำเร็จรูปอย่างมาก
เวิร์กโฟลว์ที่ดีที่สุดสำหรับผมนั้นง่ายอย่างน่าประหลาดใจ
- วางแผนก่อน
- ออกแบบทีหลัง
- สร้างเป็นลำดับสุดท้าย
คนที่ได้รับคุณค่าสูงสุดจาก Claude Design ไม่ได้ปฏิบัติต่อมันเหมือนแชทบอท
พวกเขาปฏิบัติต่อมันเหมือนเครื่องมือเฉพาะทางที่มีบทบาทเฉพาะภายในกระบวนการสร้างสรรค์ที่ใหญ่กว่า
เมื่อผมเริ่มเข้าถึงมันแบบนั้น ทุกอย่างก็เร็วขึ้น ถูกกว่า และสม่ำเสมอกว่ามาก
และนั่นคือตอนที่ผมเข้าใจในที่สุดว่าทำไมคนจำนวนมากถึงตื่นเต้นกับมัน
GIF
