ช่อง Kyle Skelly เผยแพร่คลิปทดสอบ Claude Design ฟีเจอร์ใหม่ที่ Anthropic เพิ่งปล่อยใน Claude โดยตั้งโจทย์ตรงไปตรงมาว่า เครื่องมือที่หลายคนยกให้เป็นจุดจบของอาชีพนักออกแบบเว็บ ทำงานจริงได้ดีแค่ไหน Kyle Skelly เป็นนักออกแบบเว็บสาย UI มากว่า 15 ปี แต่ในคลิปนี้เขาสมมติว่าตัวเองไม่มีความรู้ด้านดีไซน์เลย เพื่อดูว่าคนเพิ่งเริ่มต้นจะใช้ Claude Design สร้างเว็บไซต์ได้ถึงขั้นไหน บทความนี้สรุปและเล่าตามโครงของคลิป Kyle Skelly ตั้งแต่การพิมพ์บรีฟภาษาคนธรรมดา ไปจนถึงการนำเว็บขึ้นออนไลน์จริง พร้อมข้อจำกัดที่ Kyle พูดไว้ตรงๆ และบทสรุปว่าเครื่องมือนี้พาผู้เริ่มต้นไปได้ไกลแค่ไหน

Claude Design คืออะไร และทำไม Kyle Skelly ถึงหยิบมาทดสอบ

ในคลิป Kyle Skelly อธิบายว่า Claude Design เป็นแท็บใหม่ชื่อ Design ใน Claude และใช้งานได้แม้กับแพ็กเกจพื้นฐานที่สุด เมื่อเข้าไปจะเห็นตัวเลือกในแถบด้านซ้าย เช่น prototype, wireframe, high-fidelity UI, สไลด์จากเทมเพลต หรือรูปแบบอื่นๆ Kyle ชี้ว่าจุดที่ Anthropic ให้ความสำคัญมากคือ design system หรือพิมพ์เขียวของภาษาการออกแบบทั้งหน้า ครอบคลุมตั้งแต่สีแบรนด์ ฟอนต์ที่ใช้ ไปจนถึง gradient เส้น stroke ความหนา และองค์ประกอบอื่นที่รวมกันเป็นเอกลักษณ์ของแบรนด์

อย่างไรก็ตาม Kyle บอกตามตรงว่าโปรเจกต์ของผู้เริ่มต้นส่วนใหญ่ยังไม่มี design system เพราะแบรนด์ยังไม่เกิด คลิปจึงข้ามขั้นตอนนั้น แล้วเริ่มจาก wireframe เปล่าๆ แทน เหตุผลที่ Kyle หยิบเครื่องมือนี้มาทดสอบคือกระแสที่มักเกิดทุกครั้งเมื่อมีเครื่องมือใหม่เข้าสู่วงการ นั่นคือคำพูดว่านักออกแบบเว็บจะไม่จำเป็นอีกต่อไป Kyle จึงตั้งใจลองสร้างงานจริงทั้งชิ้น เพื่อดูว่าคำกล่าวนั้นจริงแค่ไหน

จากบรีฟภาษาคนธรรมดา สู่ wireframe และเว็บจริงในไม่กี่นาที

ขั้นตอนแรกที่ Kyle Skelly สาธิตคือพิมพ์บรีฟด้วยภาษาคนธรรมดาเข้าไปตรงๆ เขาสั่งให้สร้าง wireframe สำหรับเกมแนว cyberpunk ที่มี video hero ขนาดใหญ่ มี H1 และปุ่ม call to action อยู่มุมซ้ายล่าง ตั้งชื่อเกมว่า City Punks จากนั้นกำหนดให้ section ที่สองเป็นฟีเจอร์ของเกมสองอย่าง ตามด้วย section ข่าว แล้วปิดท้ายด้วย call to action แบบเต็มความกว้างและ footer Kyle อธิบายว่าบรีฟชุดนี้แต่งขึ้นเองทั้งหมด แต่ถ้าผู้ใช้มีบรีฟจากลูกค้าจริง ก็สามารถคัดลอกมาวางใน Claude Design ได้ทันที

ผลลัพธ์ในคลิปคือ wireframe สามแบบให้เลือก ตั้งแต่ hero แบบชิดซ้าย แบบกึ่งกลาง ไปจนถึง split screen ที่แบ่งซ้ายขวา จุดที่ Kyle ชี้ว่าน่าสนใจคือมีแผงควบคุมให้ปรับแต่งได้ทันที ตัวอย่างเช่น เปลี่ยนสไตล์ของ navigation จาก minimal nav เป็น full nav แล้วเห็นเมนูด้านบนเปลี่ยนตามทันที จากนั้น Kyle เลือกแบบ A พร้อม full nav แล้วสั่งให้พัฒนาต่อเป็น high-fidelity UI ผลที่ได้คือหน้าเว็บธีม cyberpunk ที่มี glitch effect บน H1 มีครบทุก section ตามบรีฟ รวมถึง section call to action ขนาดใหญ่ท้ายหน้าและ footer โดยตอนนี้ยังไม่มีรูปภาพจริงในงาน

flowchart — สาย pipeline การสร้างเว็บด้วย Claude Design 5 ขั้น เรียงซ้ายไปขวา: บรีฟภาษาคน (prompt) → Wireframe 3 ตัวเลือก → ปรับ nav/hero/สี ในตัว → High-fidelity UI (responsive) → ดึง AI asset เข้ามา

Kyle ยังสาธิตการแก้ไขในตัวเว็บโดยตรง เพราะไม่มี design system ตั้งต้น เครื่องมือจึงเปิดแผงให้ปรับ accent color และสีแบรนด์ได้ทันที รวมถึงมีสไตล์ H1 ให้เลือกหลายแบบ ถ้าผู้ใช้มีข้อความ H1 ในใจอยู่แล้ว ก็คลิกปุ่ม edit แล้วแก้ข้อความให้ตรงตามต้องการได้ Kyle สรุปว่าแค่นี้ก็ได้จุดเริ่มต้นที่ดี โดยปล่อยให้ Claude Design รับงานหนักส่วนใหญ่ไปก่อน

ดึง AI asset เข้ามา และแก้ทั้งเว็บให้รองรับมือถือด้วยพรอมต์เดียว

หลังได้โครงเว็บแล้ว Kyle Skelly สาธิตการเติมชีวิตให้งานด้วย AI asset เขาไปสร้างภาพตัวละครหญิงสาวแนว cyberpunk บนพื้นหลังสีแดงด้วย Midjourney และตั้งสัดส่วนภาพเป็น 16 ต่อ 9 จากนั้นลากภาพที่ได้เข้ามาวางใน Claude Design แล้วสั่งให้ใช้เป็นภาพ hero แบบเต็มจอ Kyle ชี้ว่าเครื่องมือไม่ได้แค่วางภาพให้ แต่ยังเติมเส้น grid พาดผ่านภาพและใส่ gradient ที่ด้านล่างให้อัตโนมัติ เพื่อให้ตัวหนังสือที่ทับอยู่บนภาพยังอ่านออก

ในคลิป Kyle ระบุว่าเมื่อนำเว็บไปแสดงผลในแท็บใหม่แล้วย่อขนาดลง เว็บยังพอรองรับการย่อได้บ้างแต่มีจุดเพี้ยน เขาจึงสั่งแก้ด้วยพรอมต์เดียว ให้เว็บ responsive เต็มรูปแบบ และให้ navigation กลายเป็นไอคอนเบอร์เกอร์ที่เปิดเมนูเต็มจอบนมือถือ ผลที่ได้คือเมนูบนมือถือทำงานถูกต้อง และทุก section แสดงผลบนมือถือดีขึ้นมาก Kyle สรุปขั้นตอนนี้ว่าสามารถสร้างเว็บไซต์ responsive ทั้งหน้าด้วย Claude Design ได้ในเวลาไม่กี่นาที โดยสั่งทีละขั้นแบบ one shot เกือบทั้งหมด สำหรับคนที่ไม่มีความรู้ด้านดีไซน์เลย ผลระดับนี้ถือว่าดี

Kyle ยังสาธิตการต่อยอด asset เพิ่ม โดยกลับไปที่ Midjourney เพื่อทำภาพ hero ให้ขยับเป็นวิดีโอพื้นหลัง เขาทดลองทั้งแบบ low motion และ high motion แล้วเลือกแบบที่ตัวละครหันตัว เพราะวิดีโอจาก Midjourney ความละเอียดยังต่ำ Kyle จึงนำไปอัปสเกลเป็น 4K ด้วยเครื่องมือเสริมตัวหนึ่ง ซึ่ง Kyle เองระบุว่าเป็นขั้นตอนที่ข้ามได้ ไม่บังคับ จากนั้นสั่งให้ Claude เปลี่ยนภาพ hero เป็นวิดีโอพื้นหลังและบีบอัดวิดีโอให้เหมาะกับการใช้งานบนเว็บ พร้อมเติมภาพจาก Midjourney ลงในส่วนฟีเจอร์และส่วน blog เพิ่ม Kyle ชี้ว่าการปรับย่อยทีละจุดแบบนี้ คือจุดที่เปลี่ยนงานจากผลลัพธ์ของ Claude Design ให้กลายเป็นงานที่เรียกได้ว่าเป็นของตัวเองจริงๆ

ข้อจำกัดที่ Kyle พูดตรงๆ กิน usage หนัก แล้วต้องส่งต่อให้ Claude Code

จุดที่ Kyle Skelly พูดไว้ตรงๆ ในคลิปคือข้อเสียใหญ่ที่สุดของ Claude Design ตอนนี้ นั่นคือกิน usage หนักมาก Kyle ระบุว่าแค่ทำตามขั้นตอนข้างต้นก็ใช้ไปแล้วราว 50% ของลิมิตรายสัปดาห์ ทำให้แพ็กเกจที่ใช้อยู่ไม่สามารถทำงานต่อใน Claude Design ได้อีกในทางเทคนิค ทางออกที่ Kyle เสนอคือใช้ปุ่ม handoff to Claude Code ซึ่งจะคัดลอกคำสั่งชุดหนึ่งมาให้ แล้วนำไปวางใน Claude Code เพื่อสลับไปใช้โควตาฝั่ง Claude Code แทนโควตาของ Claude Design

flowchart — เส้นทางหลังชน usage limit: Claude Design (กิน ~50% ของลิมิตรายสัปดาห์) → Handoff to Claude Code → แก้ละเอียดในเครื่อง (micro adjustments) → push ขึ้น GitHub repo → deploy ผ่าน Cloudflare + ผูกโดเมน

ตามที่ Kyle นำเสนอ หลังส่งงานเข้า Claude Code แล้วจะได้เว็บเวอร์ชันที่อยู่ในเครื่อง Kyle เปิดเว็บไว้ใน Chrome และเปิด Claude Code แบบ terminal ไว้อีกฝั่งเพื่อแก้ไขรายละเอียด เขาเล่าว่าได้ปรับหลายอย่างจากดีไซน์เดิม ทั้งเปลี่ยนโลโก้ ย้ายตำแหน่ง navigation สลับสีเล็กน้อย เพิ่มเอฟเฟกต์ parallax ให้ภาพ และเพิ่ม hover effect ให้การ์ด blog Kyle ชี้ว่าสิ่งที่ Claude Design ไม่ได้ทำให้ตั้งแต่แรกเหล่านี้ คือการตัดสินใจที่ทำให้คนทำกลายเป็นนักออกแบบที่ดีในการใช้เครื่องมือ AI ชุดนี้

Kyle ยังพูดถึงประเด็น AI slop ตรงๆ ว่าเว็บตัวอย่างนี้ใช้โทนสีฟ้า แดง ม่วงที่ดูเป็นงาน AI มาก และสร้างขึ้นด้วย AI ทั้งหมดจริง แต่สิ่งที่ Kyle อยากให้ผู้ชมได้จากคลิปคือ เครื่องมือนี้พางานไปได้ราว 80% ส่วนอีก 20% ที่นักออกแบบทำเองคือส่วนที่ยกระดับงานให้ดีขึ้นอีกระดับ Kyle ย้ำว่าวงการยังต้องการคนที่รู้วิธีใช้เครื่องมือเหล่านี้ มีรสนิยม และรู้วิธีพางานจากพรอมต์อย่างเดียวไปสู่สิ่งที่สร้างขึ้นเองได้

จากเครื่องมือสู่เว็บออนไลน์จริง และบทสรุปของ Kyle

สำหรับการนำเว็บที่อยู่ในเครื่องขึ้นออนไลน์จริง Kyle Skelly อธิบายไว้แบบกระชับว่า ให้ถาม Claude ว่าจะเพิ่มงานนี้เข้า GitHub repo อย่างไร แล้ว push ขึ้นไป จากนั้นเขาใช้ Cloudflare เป็นโฮสต์สำหรับงานส่วนใหญ่ จึงถาม Claude ต่อว่าจะนำงานไป host บน Cloudflare อย่างไร แล้วผูกชื่อโดเมนเข้าไป Kyle ระบุว่า Claude จะช่วยตลอดทาง ขอเพียงผู้ใช้ถามทีละขั้น

ในช่วงสรุป Kyle Skelly ให้ความเห็นตรงไปตรงมาว่า ในฐานะนักออกแบบ เขาจะหันไปใช้ Figma MCP กับดีไซน์ที่ทำเองตั้งต้นแล้วส่งเข้า Claude Code มากกว่าจะใช้ Claude Design เป็นหลัก แต่ Kyle ระบุชัดว่า Claude Design เป็นเครื่องมือที่มีประโยชน์มากสำหรับนักออกแบบมือใหม่ หรือคนที่อยากขึ้นคอนเซ็ปต์งานเร็วๆ แล้วได้ wireframe หรือชิ้นงานที่เริ่มทำงานได้ทันที Kyle ปิดท้ายว่าเครื่องมือนี้ไม่ใช่ปุ่มเดียวจบที่กดพรอมต์ครั้งเดียวแล้วได้เว็บระดับรางวัล ใครที่พูดแบบนั้นก็แค่เล่นกับ clickbait Kyle จึงสรุปว่าอนาคตของนักออกแบบยังสดใส เพราะคนที่ใช้เครื่องมือเป็นและมีรสนิยมยังคงเป็นที่ต้องการ

Note: ตัวเลข usage ราว 50% ต่อสัปดาห์เป็นค่าที่ Kyle Skelly วัดจากแพ็กเกจของตัวเอง ณ เวลาที่ทดสอบ ผู้ที่ใช้แพ็กเกจต่างกันหรือทดสอบในช่วงเวลาอื่นอาจเห็นตัวเลขไม่เท่านี้

ที่มา: Kyle Skelly: Claude Design = Easy Websites for Beginners (YouTube, 21 เม.ย. 2026)