Claude Code ออกแบบหน้าตาแอปให้ดูก่อนได้แล้ว…
วิธีใช้คือพิมพ์ /design แล้วตามด้วยสิ่งที่อยากได้ เช่นขอสามแบบสำหรับหน้าล็อกอิน มันจะไปอ่านโค้ดในโปรเจกต์ของคุณก่อน ดูว่าคุณใช้สีอะไร ฟอนต์อะไร ปุ่มหน้าตาแบบไหน แล้วค่อยร่างแบบออกมาหลายทางเลือกวางเรียงกันบนผืนผ้าใบเดียว
ที่ผมว่าสำคัญคือคำว่าอ่านโค้ดก่อน เพราะปัญหาใหญ่ของงานออกแบบที่ AI ทำให้คือมันสวยแต่ไม่ใช่ของเรา สีไม่ตรง ปุ่มคนละทรง เอาไปใช้จริงไม่ได้ต้องรื้อ พอมันเริ่มจากของที่มีอยู่แล้ว โอกาสที่จะได้ของที่ต่อเข้ากับงานเดิมก็สูงขึ้น
แบบที่ได้ออกมาไม่ใช่รูปนิ่งด้วย มันแก้ได้เหมือนโปรแกรมออกแบบจริง คลิกเลือกชิ้นส่วน ลากย้าย เปลี่ยนสี เปลี่ยนขอบ พิมพ์แก้ข้อความได้เลย เขาบอกว่ายกตัวแก้ไขจาก Claude Design มาใส่ไว้ในนี้เลย พอถูกใจแบบไหนก็สั่งให้ลงมือเขียนเป็นโค้ดจริงต่อได้ทันที ไม่ต้องอธิบายหน้าตาใหม่อีกรอบ
มีคนถามในคอมเมนต์ว่าแบบที่แก้แล้วมันส่งต่อไปตอนเขียนโค้ดจริงไหม หรือต้องพิมพ์อธิบายใหม่ Nate ตอบว่าส่งต่อให้ แต่ตอนนี้ต้องกดบันทึกก่อน เดี๋ยวจะทำให้ไม่ต้องกด แล้วมีคนตอบกลับได้ตรงใจผมมากว่า ปุ่มบันทึกนี่แหละคือสิ่งที่จะลืมกดครั้งหนึ่ง แล้วนั่งงงอีกชั่วโมงว่าทำไมมันไม่ทำตามแบบ
เสียงตอบรับส่วนใหญ่บวกมาก โพสเดียวมีคนเห็นสองแสนห้าหมื่นครั้งในเจ็ดชั่วโมง คนบ่นกันมานานว่าต้องเด้งไปเปิด Claude Design แยกอีกแอปแล้วค่อยเอากลับมา มีคนถึงกับโพสเรียกร้องไปเมื่อสองวันก่อนแล้ววันนี้ได้เลย
แต่ก็มีเสียงค้านที่ผมว่าน่าคิด Rasmus Andersson คนออกแบบฟอนต์ Inter และเคยอยู่ Figma กับ Spotify บอกว่าน่าจะให้มันเปิด Figma ไปเลยดีกว่า เพราะงานที่ออกแบบไว้ในนี้มันจะถูกขังอยู่ข้างใน อายุการใช้งานสั้น และเอาไปต่อยอดที่อื่นไม่ได้
อีกข้อที่คนเตือนคือถ้าไม่ป้อนกติกาการออกแบบกับแนวทางแบรนด์ให้ก่อน ผลลัพธ์ก็ยังออกมาหน้าตาเหมือนงาน AI อยู่ดี และเพราะเป็นของที่เพิ่งปล่อยให้ลอง ก็มีคนเจอบั๊กบ้างแล้ว
ส่วนตัวผมมองว่าคุณค่าจริงของมันไม่ได้อยู่ที่ได้ภาพสวย แต่อยู่ที่มันบังคับให้เราตัดสินใจเรื่องหน้าตาให้จบก่อนที่จะปล่อยให้ AI ลงมือเขียน ที่ผ่านมาเราพิมพ์สั่งลอย ๆ แล้วก็มานั่งลุ้นว่าจะได้อะไร พอต้องเลือกจากแบบที่เห็นด้วยตา ความคาดหวังในหัวเราก็ถูกดึงออกมาวางบนโต๊ะตั้งแต่ก่อนเริ่ม
งานเสียเวลาที่สุดในการทำแอปไม่ใช่การเขียนโค้ด แต่คือการเขียนไปแล้วพบว่ามันไม่ใช่สิ่งที่อยากได้ครับ
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac