Claude Code ได้คำสั่ง /design — วาด UI mockup เป็น artboard บนแคนวาสได้ในเทอร์มินัล ก่อนจะเขียนโค้ดสักบรรทัด

Anthropic เพิ่มความสามารถด้าน ภาพ เข้าไปใน Claude Code แล้ว — คำสั่ง /design ที่ให้นักพัฒนาสั่งร่างหน้าจอ UI ออกมาเป็น mockup ได้จากในเทอร์มินัล โดยไม่ต้องสลับไปเปิด Claude Design บนเว็บแล้ววางโค้ดกลับมา The Decoder รายงานเมื่อ 18 ส.ค. 2026 โดยฟีเจอร์นี้ยังอยู่ในสถานะ early preview และเข้าถึงได้ด้วยการรัน claude update

รูปแบบการใช้งานตรงไปตรงมา: พิมพ์ /design ตัวเลือกสองสามแบบสำหรับ {ฟีเจอร์} แล้ว Claude จะร่างออกมาหลายแบบพร้อมกัน วางเรียงเป็น artboard บนแคนวาสเดียวที่ pan/zoom ได้ จากนั้นเลือกแบบที่ชอบ แก้ แล้วส่งต่อไปให้ Claude Code เขียนโค้ดจริงในเซสชันเดียวกัน จุดขายคือ Claude อ่านโค้ดเบสที่มีอยู่ก่อน แล้วร่างให้เข้ากับสไตล์ UI ปัจจุบันของโปรเจกต์

ของจริงคืออะไร — ตรวจจากตัวติดตั้งเอง

เนื่องจากตอนนี้ Anthropic ยังไม่มีหน้าประกาศทางการหรือรายการใน เอกสารคำสั่งของ Claude Code (ที่นั่นยังมีแต่ /design-sync และ /design-login ซึ่งเป็นคนละเรื่อง) เราจึงตรวจจากตัวโปรแกรมที่ติดตั้งจริงบนเครื่อง — ในไบนารีของ Claude Code v2.1.234 มีสกิลชื่อ design อยู่จริง พร้อมคำอธิบายที่ระบุชัดว่าเป็น “early preview ของ Claude Design ภายใน Claude Code” สาระสำคัญที่อ่านได้จากตรงนั้น:

• ผลลัพธ์คือ design canvas — artboard หลายชิ้นในไฟล์ .dc.html วางบนแคนวาสเดียว เผยแพร่ออกมาเป็น Artifact ที่รัน canvas editor ของ Claude Design ได้
• ถ้าบัญชีของผู้ใช้เปิดสิทธิ์ save ไว้ จะแก้ได้ทีละอิลิเมนต์แบบภาพ: คลิกเลือก, properties panel, แก้ข้อความในที่, undo/redo และกด Save เพื่อเผยแพร่เวอร์ชันใหม่
• ถ้าไม่เปิดสิทธิ์ จะได้เป็น พรีวิวแบบดูและ export (PNG/PDF) ของร่างเท่านั้น
• ขอบเขตการใช้งานกว้างกว่าที่คิด — ไม่ใช่แค่ UI mockup กับ screen flow แต่รวมถึงแลนดิงเพจ, กราฟิกการตลาด, โปสเตอร์/ใบปลิว/โบรชัวร์ และเอกสารแบบไหลยาวหนึ่งแผ่น
• มีไฟล์ canvas.json เก็บตำแหน่งของ artboard และแบ่งเป็น “page” ได้ (เพดานที่พบในโค้ดคือ 40 หน้า)

พูดง่าย ๆ คือ Anthropic ไม่ได้ยัดโปรแกรมวาดรูปเข้าเทอร์มินัล แต่ยก canvas editor ของ Claude Design ทั้งชั้น มาเป็นปลายทางของ Artifact ที่ Claude Code สร้าง

ต่างจาก /design-sync ที่มีอยู่แล้วยังไง

อย่าสับสนสองตัวนี้ เพราะมันทำคนละหน้าที่และมีมาคนละช่วง:

	/design-sync (มีในเอกสารแล้ว)	/design (early preview)
ทำอะไร	แปลง design system แบบ React ในรีโปแล้วอัปโหลดขึ้น Claude Design	สร้างแคนวาสงานออกแบบใหม่เป็น artboard
ผลลัพธ์	Claude Design ใช้คอมโพเนนต์จริงของคุณตอนออกแบบ	Artifact ที่เป็นแคนวาสแก้ไขได้
ข้อจำกัด	ต้องล็อกอิน claude.ai; ใช้ไม่ได้ บน Bedrock, Google Cloud Agent Platform, Microsoft Foundry, Claude Platform บน AWS	ยังไม่มีเอกสารทางการ; การ save ขึ้นกับสิทธิ์บัญชี

ทั้งคู่ประกอบกันได้ตรง ๆ — sync design system เข้าไปก่อน แล้วให้ /design ร่างโดยใช้คอมโพเนนต์ของจริง จะได้ mockup ที่ไม่หลุดจากระบบดีไซน์

ข้อควรระวังก่อนเอาไปใช้จริง

ประเด็นที่ยังคาอยู่มีสามข้อ หนึ่ง — ยังไม่มีประกาศทางการ แหล่งข่าวหลักที่รายงานอ้างโพสต์ของ Nate Parrott ดีไซเนอร์ของ Anthropic บน X ไม่ใช่หน้าประกาศของบริษัท ซึ่งแปลว่าเงื่อนไขการใช้งานและการนับโควตายังไม่ชัด สอง — ตัว /design ยังไม่ปรากฏใน changelog หรือหน้า commands reference อย่างเป็นทางการ การพึ่งพามันในเวิร์กโฟลว์ทีมตอนนี้จึงเสี่ยงต่อการเปลี่ยนแปลงโดยไม่แจ้งล่วงหน้า สาม — The Decoder ระบุว่าตอนนี้ยังต้องกด save เอง งานออกแบบไม่ได้บันทึกอัตโนมัติ

มุมมอง AI Curator

สิ่งที่น่าสนใจกว่าตัวฟีเจอร์ คือทิศทางที่มันบอก

ตลอดปีที่ผ่านมา coding agent แข่งกันที่ “เขียนโค้ดได้ดีแค่ไหน” แต่ปัญหาจริงของทีมเล็ก ๆ ไม่ค่อยอยู่ตรงนั้น — มันอยู่ตรงช่วงก่อนหน้า ตอนที่ยังไม่มีใครรู้ว่าหน้าจอควรหน้าตายังไง แล้วคนก็เริ่มเขียนโค้ดไปพลาง ๆ เดาไปพลาง ๆ จนได้ของที่ต้องรื้อ การให้ agent ร่างสามแบบให้เลือกก่อน แล้วค่อยลงมือ เป็นการย้ายจุดตัดสินใจกลับไปอยู่ในที่ที่มันควรอยู่ และที่สำคัญคือมันถูกกว่ามาก — ทิ้ง artboard สามอันไม่เจ็บเท่าทิ้งโค้ดสามเวอร์ชัน

สำหรับบริบทไทย/SEA ผมว่านี่ตรงกับความจริงของตลาดบ้านเรามากผิดคาด ทีมซอฟต์แวร์ไทยจำนวนมากไม่มีดีไซเนอร์ประจำ — เอเจนซีเล็ก, ทีมในองค์กรที่ทำระบบหลังบ้าน, สตาร์ตอัประยะเริ่ม ล้วนให้โปรแกรมเมอร์ออกแบบ UI เองทั้งนั้น และผลลัพธ์ที่ได้มักจะ “ใช้ได้แต่ไม่มีใครอยากใช้” เครื่องมือที่ยกคุณภาพขั้นต่ำของงานออกแบบขึ้นมาให้พอใช้ได้โดยไม่ต้องจ้างเพิ่ม มีมูลค่าจริงกับตลาดแบบนี้มากกว่าตลาดที่มีดีไซเนอร์เต็มทีมอยู่แล้ว

แต่ผมจะเตือนสองข้อ ข้อแรก — อย่าสับสนระหว่าง mockup กับการออกแบบ สิ่งที่ /design ให้คือหน้าจอที่ดูเรียบร้อย ไม่ใช่คำตอบว่าผู้ใช้ต้องการอะไร ทีมที่ไม่มีดีไซเนอร์อยู่แล้วมีแนวโน้มจะเอาผลลัพธ์แรกไปใช้เลยเพราะ “ก็ดูดีนี่” ซึ่งอันตรายกว่าการไม่มี mockup เสียอีก ข้อสอง — สังเกตว่าคำอธิบายของสกิลนี้พูดถึงโปสเตอร์ โบรชัวร์ และกราฟิกการตลาดด้วย นั่นคือสัญญาณว่า Anthropic กำลังทดลองผลัก Claude Code ออกนอกกรอบ “เครื่องมือของโปรแกรมเมอร์” ไปเป็นเครื่องมือทำงานทั่วไปที่บังเอิญอยู่ในเทอร์มินัล ใครที่วางแผนทีมระยะยาวควรจดสัญญาณนี้ไว้ เพราะมันจะเปลี่ยนคำถามจาก “ซื้อ seat ให้ dev กี่คน” เป็น “ใครในบริษัทควรมี seat บ้าง”

ในทางปฏิบัติวันนี้ คำแนะนำของผมคือ: ลองในโปรเจกต์ที่ไม่เร่ง ใช้คู่กับ /design-sync ถ้ามี design system เป็น React อยู่แล้ว และอย่าเพิ่งเขียนมันเข้าไปในกระบวนการทำงานที่มีคนอื่นพึ่งพา จนกว่าจะมีเอกสารทางการออกมา

แหล่งข่าว

• Claude Code gets a /design command that lets developers create UI mockups right in the terminal — The Decoder (18 ส.ค. 2026)
• Claude Code commands reference — Anthropic (มี /design-sync และ /design-login)
• Introducing Claude Design by Anthropic Labs — Anthropic
• Claude Code CHANGELOG — GitHub