Claude Code วาด UI ได้แล้ว, /design เปลี่ยนวิธีทำ frontend

5 ฟีเจอร์ UI/UX ใหม่ของ Claude Code ที่เปลี่ยนวิธีทำงาน, จาก /design วาด UI ไปจนถึง /doctor ที่ซ่อมตัวเอง

โดย Nokka (นก-กา) | 26 สิงหาคม 2026

บทความนี้เขียนโดย AI (deepseek-v4-pro via ollama-cloud) ผ่าน Hermes Agent ภายใต้การควบคุมและตรวจสอบคุณภาพโดยมนุษย์, Nokka (นก-กา)

ก่อนอื่น, ทำความเข้าใจศัพท์

ก่อนเข้าเรื่อง ขอปูศัพท์ 3 คำที่คนอ่านบทความนี้ต้องรู้ก่อน:

• CLI (Command Line Interface): หน้าจอเทอร์มินัลที่พิมพ์คำสั่ง, Claude Code เดิมเป็น CLI ล้วนๆ
• Artboard (อาร์ตบอร์ด): พื้นที่วาดแบบ UI ที่นักออกแบบใช้ร่างหน้าตาแอป/เว็บก่อนลงมือทำจริง
• Research Preview: ฟีเจอร์ที่ปล่อยให้ลองก่อน ยังไม่สมบูรณ์ 100%, อาจเปลี่ยนหรือหายไปได้

ถ้าให้อุปมา: Claude Code เดิมคือ "ช่างที่ทำงานในห้องมืด" (เทอร์มินัล), ฟีเจอร์ใหม่เหล่านี้คือการ "เปิดไฟ + ติดกระจก + ให้ช่างตรวจสุขภาพตัวเอง"

ภาพรวม: 5 ฟีเจอร์ที่เปลี่ยน "วิธีใช้" ไม่ใช่ "ความเก่ง"

ฟีเจอร์ทั้ง 5 นี้มีจุดร่วมอย่างหนึ่ง: มันไม่ได้ทำให้ Claude เก่งขึ้น แต่ทำให้ "ใช้สะดวกขึ้น", ซึ่งสำคัญไม่แพ้กัน เพราะเครื่องมือที่ใช้ยาก ต่อให้เก่งแค่ไหนก็ไม่มีคนใช้

ฟีเจอร์	เปิดตัว	แก้ปัญหาอะไร
/design	17–21 ส.ค.	วาด UI ไม่ได้ (เดิมทำได้แค่โค้ด)
Concise output style	17–21 ส.ค.	Claude พูดเยอะเกินไป
In-app browser	6–10 ก.ค.	ต้องสลับไปเปิดเว็บเอง
/doctor	6–10 ก.ค.	setup พังแล้วหาสาเหตุไม่เจอ
Screen reader mode	13–17 ก.ค.	คนตาบอด/สายตาเลือนรางใช้ไม่ได้

1. /design, Claude Code วาด UI ได้แล้ว

นี่คือฟีเจอร์ที่ "น่าตื่นเต้นที่สุด" เพราะมันขยายขอบเขตของ Claude Code จาก "เขียนโค้ด" ไปเป็น "ออกแบบ UI" [1]

มันทำอะไร

/design นำ artboard workflow ของ Claude Design เข้ามาใน CLI และ Desktop, สร้างบน artifacts:

1. รัน /design → Claude สร้าง artboard ที่แก้ไขได้ สำหรับ UI ของคุณ
2. เลือก layout ที่ชอบ → ปรับแต่ง
3. ให้ Claude implement (ลงมือทำจริง) ตัวที่เลือก

ทำไมถึงสำคัญ

เดิม Claude Code ทำได้แค่ "เขียนโค้ด", ถ้าอยากได้ UI ต้องเดาเอาเองหรือใช้เครื่องมือแยก แต่ตอนนี้มัน "วาดแบบให้ดูก่อน" แล้วค่อยทำจริง เหมือนสถาปนิกที่วาดแปลนก่อนสร้างบ้าน

ข้อควรรู้: ยังเป็น research preview, ฟีเจอร์อาจเปลี่ยนได้

2. Concise output style, Claude เลิกพูดเยอะ

นี่คือฟีเจอร์ที่ "คนบ่นกันมานาน" และ Anthropic เพิ่งทำตาม [2]

ปัญหาเดิม

Claude Code มัก "พูดเยอะ", มี preamble, narration, คำอธิบายยาวๆ ก่อนจะลงมือทำ ทำให้อ่านผลลัพธ์ยาก

วิธีแก้

Concise output style ทำให้ Claude:

• นำผลลัพธ์ก่อน, ตอบสิ่งที่คุณถามทันที
• ข้าม preamble + narration, ไม่มีคำเกริ่นยืดยาว
• ตอบสั้นโดย default, แต่ทำงานละเอียดเท่า Default style

จุดสำคัญ

เรื่อง	รายละเอียด
งานละเอียดเท่าเดิม	แค่ "พูดน้อยลง" ไม่ใช่ "ทำงานน้อยลง"
ถามเพิ่มได้	ถ้าอยากได้คำอธิบายเต็ม Claude ตอบเต็ม
เก็บของสำคัญครบ	error report, security warning, คำยืนยัน destructive action ยังครบ

วิธีเปิด: /config → Output style → Concise (หรือตั้ง outputStyle ใน settings)

3. In-app browser บน Desktop, Claude เปิดเว็บเองได้

เปิดตัว 6–10 ก.ค., Claude Code บน Desktop ได้ browser ในตัว [3]

มันทำอะไร

Claude เปิดเอกสาร, design, หรือเว็บอะไรก็ได้ แล้วโต้ตอบกับหน้าเว็บได้ เหมือนที่มันทำกับ local dev server preview

ทำไมถึงสำคัญ

เดิมถ้า Claude อยากดูเอกสาร API หรือ design spec, คุณต้อง "คัดลอกมาแปะให้" หรือสลับหน้าต่างเอง ตอนนี้มันเปิดดูเองได้ในตัว

ผลลัพธ์: ลด "การส่งต่อข้อมูล" ระหว่างคุณกับ Claude, มันหาข้อมูลเองได้

4. /doctor, Claude Code ซ่อมตัวเอง

เปิดตัว 6–10 ก.ค., /doctor คือ "หมอตรวจสุขภาพ" ของ Claude Code [4]

มันทำอะไร

/doctor (มี alias /checkup) ตรวจวินิจฉัยปัญหา setup และ configuration แล้วแก้ให้เองได้:

• หา unused skills, MCP servers, plugins
• เจอ CLAUDE.md ที่ซ้ำซ้อน
• เจอ slow hooks
• เจอ permission prompts ที่คุณ re-approve ซ้ำๆ

ทำไมถึงสำคัญ

เดิมถ้า Claude Code พัง คุณต้องไปค้น Reddit/Stack Overflow เอง, ตอนนี้ /doctor วินิจฉัย + แก้ให้ในคำสั่งเดียว

ข้อควรรู้: /doctor ตรวจ "setup" ไม่ใช่ "performance", ถ้า Claude Code ช้า/แฮงค์/กิน RAM ต้องดูที่ process ไม่ใช่ setup

5. Screen reader mode, เปิดประตูให้ทุกคน

เปิดตัว 13–17 ก.ค., โหมดสำหรับผู้ใช้ screen reader [3]

มันทำอะไร

แทนที่ interface แบบภาพ (visual terminal) ด้วย ข้อความเชิงเส้น (plain linear text) ที่ screen reader อย่าง VoiceOver และ NVDA อ่านได้

ทำไมถึงสำคัญ

นี่คือฟีเจอร์ "accessibility" ที่หลายคนมองข้าม แต่สำคัญมาก, มันทำให้คนตาบอด/สายตาเลือนรางใช้ Claude Code ได้

มุมมอง: ฟีเจอร์นี้สะท้อนว่า Anthropic กำลังทำให้ Claude Code เป็นเครื่องมือ "สำหรับทุกคน" ไม่ได้มีเพียง dev ที่สายตาปกติ

ตารางสรุป: 5 ฟีเจอร์เทียบกัน

ฟีเจอร์	หมวด	ใครได้ประโยชน์	ความเสี่ยง
/design	สร้างสรรค์	คนทำ UI/frontend	ยัง research preview
Concise style	ประสิทธิภาพ	คนรำคาญ Claude พูดเยอะ	ต้อง v2.1.237+
In-app browser	ความสะดวก	คนทำงานกับ docs/design	,
/doctor	บำรุงรักษา	คน setup พังบ่อย	ตรวจแค่ setup ไม่ใช่ performance
Screen reader	accessibility	ผู้ใช้ screen reader	,

ข้อควรระวัง: มุมที่ต้องสมดุล

ก่อนสรุป ขอวางมุมให้ตรง:

ข้อดี	ข้อควรระวัง
ใช้สะดวกขึ้นมาก	/design ยัง research preview (อาจเปลี่ยน)
Concise แก้ pain point จริง	เปลี่ยน output style ต้อง /clear หรือ session ใหม่
/doctor ลดเวลาหา bug	ตรวจแค่ setup ไม่ใช่ทุกปัญหา
accessibility ครบ	บางฟีเจอร์จำกัดเฉพาะ Desktop/บาง platform

สรุปมุมมองของผม

ผมมองว่า 5 ฟีเจอร์นี้บอก "ทิศทาง" ที่ชัดเจนของ Claude Code: จาก "เครื่องมือของ dev ขั้นสูง" ไปเป็น "เครื่องมือของทุกคน"

หลักฐาน:

1. /design, ดึงคนทำ UI/design เข้ามา (ไม่ได้มีเพียง backend dev)
2. Concise style, ฟังเสียงคนที่ "รำคาญ Claude พูดเยอะ"
3. In-app browser, ลด friction ในการทำงาน
4. /doctor, ลดกำแพงสำหรับคน setup ไม่เป็น
5. Screen reader, เปิดให้คนทุกกลุ่มใช้ได้

และมันสอดคล้องกับเทรนด์ที่เราคุยกันตลอด: AI coding tool กำลัง "เป็นประชาธิปไตย", ลดกำแพงลงเรื่อยๆ จนใครก็ใช้ได้

คุณได้ลองฟีเจอร์ไหนใน 5 ตัวนี้แล้วบ้างครับ? แล้วคิดว่า /design จะเปลี่ยนวิธีทำ frontend จริงไหม? คอมเมนต์แลกเปลี่ยนกันได้ครับ

ถ้าชอบบทความแนววิเคราะห์ AI แบบนี้ ติดตาม Nokka ได้ที่ dev.to/sarantoon

แหล่งอ้างอิง

[1] explainx.ai. "Claude Code /design Command: UI Artboards (Aug 2026)". 2026. https://www.explainx.ai/blog/claude-code-design-command-artboards-research-preview-2026

[2] Claude Code Docs. "Output styles". 2026. https://code.claude.com/docs/en/output-styles

[3] Claude Code Docs. "What's new". 2026. https://code.claude.com/docs/en/whats-new

[4] Claude Code Docs. "Commands". 2026. https://code.claude.com/docs/en/commands

---

บทความนี้วิเคราะห์จาก changelog และเอกสารทางการของ Claude Code ข้อมูล ณ 26 สิงหาคม 2026 Nokka