ทำเว็บด้วย Claude
Claude Design คืออะไร ใช้ยังไง อยู่ตรงไหน
Claude Design คืออะไร เข้าใช้ตรงไหน ใช้ฟรีได้ไหม ออกแบบเว็บได้จริงหรือเปล่า สรุปครบทั้งวิธีเข้าใช้ ข้อจำกัดช่วง beta และเรื่องโควตาที่ใช้ร่วมกับ Claude Code
Patrick
อัปเดต 2026-08-12 · อ่าน 22 นาที
คำตอบสั้นๆ
Claude Design คือเครื่องมือของ Anthropic ที่ให้คุณพิมพ์บอกว่าอยากได้หน้าตาแบบไหน แล้วมันร่างออกมาให้เห็นเป็นภาพจริงทันที ใช้ทำหน้าเว็บ prototype สไลด์ และ landing page เข้าใช้ที่ claude.ai/design ต้องเป็นบัญชีเสียเงินตั้งแต่แพลน Pro ขึ้นไป ใช้ฟรีไม่ได้ และตอนนี้ยังเป็น beta
เรื่องที่คนทำเว็บต้องรู้ก่อนใครคือ โควตาของ Claude Design ไม่ได้แยกจาก Claude Code แต่กินกองเดียวกัน
Claude Design คืออะไร
พูดให้ง่ายที่สุดคือ มันคือ Claude ที่ตอบกลับมาเป็นภาพ ไม่ใช่เป็นตัวหนังสือ
ปกติเวลาคุณคุยกับ Claude แล้วบอกว่า "ช่วยออกแบบหน้าแรกของเว็บร้านกาแฟให้หน่อย" สิ่งที่ได้กลับมาคือคำบรรยาย หรือไม่ก็โค้ดที่คุณอ่านไม่ออก คุณต้องเอาไปทำต่อเองถึงจะเห็นว่าหน้าตาจริงเป็นยังไง
Claude Design ตัดขั้นตอนนั้นออก คุณพิมพ์บอกว่าอยากได้อะไร มันร่างหน้าตาออกมาให้เห็นเลย แล้วคุณค่อยแก้ต่อได้สามแบบ คือคุยกับมันต่อ กดคอมเมนต์ชี้จุดที่ไม่ชอบ หรือลากปรับเอง
Anthropic เปิดตัวเมื่อ 17 เมษายน 2026 ภายใต้ทีมที่ชื่อ Anthropic Labs
Claude Design อยู่ตรงไหน เข้ายังไง
คำถามนี้คนถามเยอะที่สุด และคำตอบมี 3 ทาง
| เข้าจากไหน | ทำยังไง |
|---|---|
| เว็บ | เปิด claude.ai/design แล้วล็อกอิน |
| แอปบนคอมพิวเตอร์ | เปิดแอป Claude แล้วดูที่แถบด้านข้าง |
| จาก Claude Code | พิมพ์คำสั่ง /design-sync ในโปรเจกต์ของคุณ (อธิบายละเอียดในหัวข้อ "จากดีไซน์ไปเป็นเว็บจริง") |
ถ้าหาไม่เจอ อย่าเพิ่งคิดว่าเว็บพัง สาเหตุที่พบบ่อยที่สุดคือบัญชีของคุณเป็นแพลนฟรี ซึ่งยังไม่มี Claude Design ให้ใช้ ส่วนคนที่ใช้บัญชีขององค์กร ผู้ดูแลระบบต้องเปิดให้ก่อน เพราะแพลน Enterprise ตั้งค่าปิดไว้ตั้งแต่ต้น
Claude Design ใช้ฟรีได้ไหม ราคาเท่าไหร่
ใช้ฟรีไม่ได้ครับ แต่ข่าวดีคือมันไม่มีค่าใช้จ่ายแยกของตัวเอง
| แพลน | ใช้ Claude Design ได้ไหม |
|---|---|
| Free | ❌ ไม่ได้ |
| Pro | ✅ ได้ |
| Max | ✅ ได้ |
| Team | ✅ ได้ |
| Enterprise | ✅ ได้ แต่ผู้ดูแลระบบต้องเปิดให้ก่อน |
ถ้าคุณจ่ายค่าแพลน Pro อยู่แล้วเพื่อใช้ Claude Code คุณได้ Claude Design มาด้วยโดยไม่ต้องจ่ายเพิ่มแม้แต่บาทเดียว
ส่วนใครที่ยังไม่ได้สมัครและกำลังคิดว่าคุ้มไหม ผมแยกเรื่อง Claude Code ราคา ของแต่ละแพลนไว้ให้อ่านต่างหากแล้ว เพราะมันเป็นคนละคำถามกัน
Claude Design กินโควตาก้อนเดียวกับ Claude Code
เรื่องนี้เพิ่งเปลี่ยน และคนที่เคยใช้ตอนเปิดตัวจะเข้าใจผิดแน่นอน
ตอนเปิดตัวใหม่ๆ Claude Design เคยมีโควตารายสัปดาห์เป็นของตัวเอง แยกจากการใช้งานอย่างอื่น หลายคนยังจำภาพนั้นอยู่และวางแผนงานผิด
ตอนนี้ Anthropic รวมโควตาเข้ากองเดียวกันหมดแล้ว การใช้งาน Claude Design นับรวมกับแชท Claude Code และ Cowork ไม่มีโควตาแยกให้ Claude Design อีกต่อไป
พูดง่ายๆ คือดีไซน์กับการสร้างเว็บแย่งโควตากันเองครับ ลองดีไซน์เล่นยี่สิบแบบตอนเช้า พอบ่ายจะสร้างเว็บจริง โควตาที่เหลือก็ไม่พอแล้ว
และงานดีไซน์กินโควตาหนักกว่าที่คิดครับ ยิ่งโปรเจกต์ใหญ่ ยิ่งแก้หลายรอบ ก็ยิ่งกินเยอะ
ตอนถ่ายคลาส ผมตั้งใจรัน Claude Design แค่รอบเดียวแล้วไม่แตะอีกเลย เหตุผลเดียวคือมันกินโควตาหนักมากจริงๆ ถ้าคุณอยู่แพลน Pro ที่ 20 ดอลลาร์ หมดเร็วกว่าที่คุณคิดแน่นอน ผมถึงเลือกใช้มันเฉพาะตอนสร้างหน้าแรกครั้งเดียว แล้วงานแก้ทั้งหมดหลังจากนั้นผมกลับไปทำใน Claude Code ซึ่งประหยัดกว่ามาก
วิธีวางแผนที่ผมใช้ แยกวันกันไปเลย วันไหนตั้งใจจะออกแบบก็ออกแบบให้จบ วันไหนตั้งใจจะสร้างเว็บก็อย่าเพิ่งไปแตะดีไซน์ อย่าเอามาปนกันในวันเดียว
ถ้าใช้จนเต็มโควตา Claude Design จะใช้ไม่ได้จนกว่าจะรีเซ็ต เว้นแต่คุณเปิดใช้เครดิตเพิ่มไว้
ส่วนเรื่องว่าโควตาที่ว่านี้หายไปไหนหมด ทำไมแชทยาวถึงกินหนัก และมีวิธีประหยัด token ยังไงบ้าง ผมเขียนแยกไว้อีกบทความหนึ่งครับ
Claude Design ทำอะไรได้บ้าง
ไม่ได้มีแค่หน้าเว็บครับ ของที่มันทำได้คือ
- หน้าเว็บและ landing page สำหรับขายของหรือเก็บรายชื่อลูกค้า
- Prototype ที่กดเล่นได้จริง คือหน้าเว็บที่กดปุ่มแล้วเปลี่ยนหน้าได้ ไม่ใช่แค่ภาพนิ่ง
- Wireframe และ mockup ร่างโครงหน้าตาก่อนลงมือทำจริง
- สไลด์นำเสนอและ pitch deck
- แดชบอร์ด ฟอร์ม และหน้าจอแอปมือถือ
- เครื่องมือใช้ภายในบริษัท
สิ่งที่ผมคิดว่ามีประโยชน์กับเจ้าของธุรกิจมากที่สุดคือข้อสอง เพราะคุณเอา prototype ที่กดเล่นได้ไปให้ลูกค้าหรือหุ้นส่วนดูก่อนได้ ว่าเว็บจะออกมาหน้าตาแบบนี้นะ ตกลงไหม ก่อนจะเสียเวลาสร้างจริง
อีกอย่างที่มันทำได้และคนไม่ค่อยรู้คือ ดึงสไตล์จากงานเดิมของคุณมาใช้ ถ้าคุณมีเว็บหรือไฟล์ดีไซน์อยู่แล้ว มันอ่านสี ฟอนต์ และส่วนประกอบต่างๆ ไปทำเป็นชุดมาตรฐาน แล้วใช้กับงานชิ้นต่อไปให้อัตโนมัติ งานที่ออกมาก็จะหน้าตาเป็นแบรนด์เดียวกัน
Claude Design ใช้ยังไง เริ่มต้นทีละขั้น
นี่คือลำดับที่ผมใช้จริงตอนถ่ายคลาส ทำเว็บร้านติดตั้งเครื่องเสียงรถยนต์
- เปิด claude.ai/design แล้วล็อกอินด้วยบัญชีเดียวกับที่คุณจ่ายเงินอยู่ ครั้งแรกหน้าจะว่างเปล่า ไม่ต้องตกใจ
- กด Start a blank project อย่าไปสนใจหน้าแรกมาก เพราะมันเปลี่ยนหน้าตาบ่อยมาก
- กด Codebase แล้วลากโฟลเดอร์โปรเจกต์ของคุณเข้าไป ขั้นนี้คือการบอกมันว่างานเดิมของคุณหน้าตาเป็นยังไง มันจะได้ทำของใหม่ให้เข้ากัน
- กดเครื่องหมาย + เลือก Skills แล้วกด Use ถ้าคุณมีสกิลออกแบบอยู่แล้ว
- วางคำสั่งที่เตรียมไว้ แล้วกดส่ง จากนั้นรอครับ ขั้นนี้ใช้เวลาพอสมควร
ขั้นที่ 3 คือขั้นที่คนข้ามกันมากที่สุด และเป็นขั้นที่ทำให้ผลลัพธ์ต่างกันมากที่สุดด้วย ถ้าไม่แนบโปรเจกต์เดิมเข้าไป คุณจะได้ดีไซน์สวยๆ ที่ไม่เข้ากับอะไรเลยที่คุณมีอยู่
เรื่องที่ควรรู้ก่อนเริ่ม อย่าคาดหวังว่ามันจะถูกตั้งแต่รอบแรก ตอนผมทำ ผมยังต้องสั่งแก้เพิ่มเอง เช่นบอกให้เพิ่มปุ่มติดต่อที่มุมขวาบน เพราะมันไม่ได้ใส่มาให้ AI ชอบเดาเอาเองครับ
Claude Design กับ Claude Code ต่างกันยังไง
สองตัวนี้ชื่อคล้ายกันจนคนสับสน แต่ทำคนละหน้าที่
| Claude Design | Claude Code | |
|---|---|---|
| ทำงานที่ไหน | บนเว็บและแอป | บนเครื่องคอมพิวเตอร์ของคุณ |
| ให้อะไรกลับมา | ภาพที่เห็นได้ทันที | เว็บจริงที่เอาขึ้นออนไลน์ได้ |
| เหมาะกับขั้นตอนไหน | ตอนคิดว่าจะเอาหน้าตาแบบไหน | ตอนลงมือสร้างของจริง |
| ต้องเข้าใจโครงสร้างไฟล์ไหม | ไม่ต้อง | ต้องเข้าใจบ้าง |
ถ้ายังไม่แน่ใจว่า Claude Code คืออะไร ผมแนะนำให้อ่าน Claude Code เบื้องต้น ก่อน แล้วค่อยกลับมาตรงนี้จะเห็นภาพชัดกว่ามาก
สรุปสั้นที่สุด Design คือขั้นตอนคิด Code คือขั้นตอนสร้าง
จากดีไซน์ไปเป็นเว็บจริง
นี่คือส่วนที่ทำให้ Claude Design มีค่ากับคนที่อยากได้เว็บของตัวเอง เพราะงานที่ออกแบบเสร็จแล้ว ส่งต่อไปทำเป็นเว็บจริงได้เลย ไม่ต้องเริ่มใหม่
ส่งต่อได้สองทางหลัก
- กดส่งให้ Claude Code โดยตรง มีปุ่มส่งงานไปให้ Claude Code บนเครื่องคุณ หรือส่งไปเวอร์ชันบนเว็บก็ได้
- โหลดออกมาเป็นไฟล์แล้วค่อยเอาเข้า กด Share แล้วเลือก Export แล้วเลือก Project archive จากนั้นลากไฟล์ที่ได้เข้าไปในโปรเจกต์ของคุณ
วิธีที่ผมใช้จริงในคลาสคือวิธีที่สองครับ เพราะมันเห็นชัดว่าได้ไฟล์อะไรมาบ้าง แล้วค่อยให้ Claude Code จัดการต่อ คือเปิดไฟล์ อ่านโครงสร้าง ย้ายเข้าที่ และเก็บกวาดให้เรียบร้อย
นอกจากนี้ยังส่งต่อไปแอปอื่นได้อีกหลายตัว เช่น Canva, Adobe, Miro, Vercel, Wix, Replit และ Gamma
/design-sync ส่งกลับไปกลับมาได้สองทาง
Anthropic เพิ่มคำสั่ง /design-sync เข้ามาเมื่อ 17 มิถุนายน 2026 ซึ่งไม่ได้อยู่ในเดโมของคลาส ผมจึงเขียนแยกไว้ตรงนี้ให้ อันนี้ไม่ใช่แค่ทางเข้า Claude Design เฉยๆ แต่มันคือสะพานเชื่อมสองทาง
- ดึงเข้า ส่งสไตล์ของโปรเจกต์ที่คุณมีอยู่แล้วเข้าไปใน Claude Design เพื่อให้หน้าที่มันออกแบบมาใหม่ใช้ส่วนประกอบเดิมของคุณจริงๆ ไม่ใช่ของที่มันคิดขึ้นเอง
- ส่งกลับ พอคุณแก้เว็บใน Claude Code จนพอใจแล้ว สั่งให้ดันกลับขึ้นไปบนหน้าจอออกแบบ เพื่อให้ทั้งสองฝั่งตรงกัน
พิมพ์คำสั่งนี้ใน Claude Code ในโฟลเดอร์โปรเจกต์ของคุณ ไม่ต้องตั้งค่าอะไรเพิ่ม มันใช้บัญชีเดียวกับที่คุณล็อกอินอยู่แล้ว
ถ้าพิมพ์แล้วไม่ขึ้น ให้เช็กเวอร์ชัน Claude Code ของคุณก่อนครับ มีคนรายงานว่าบางเวอร์ชันยังไม่มีคำสั่งนี้ ถ้าไม่มีก็ใช้วิธี Export ตามด้านบนได้ตามปกติ ได้ผลเหมือนกัน
ลำดับที่ผมแนะนำสำหรับคนทำเว็บของตัวเองคือ ร่างหน้าตาใน Claude Design ก่อน → พอใจแล้วค่อยส่งให้ Claude Code สร้างจริง เพราะการแก้หน้าตาตอนที่ยังเป็นร่าง ถูกและเร็วกว่าการมาแก้ตอนเว็บสร้างเสร็จแล้วเยอะมาก
ถ้าเว็บคุณเป็นภาษาไทย ต้องเผื่อขั้นตอนแก้เพิ่มเสมอ ดีไซน์ที่ AI สร้างมามักตั้งระยะบรรทัดตามภาษาอังกฤษ พอใส่ข้อความไทยเข้าไป สระบนสระล่างจะชนกัน และหัวข้อยาวๆ จะล้นกรอบ ตอนผมทำก็เจอทั้งสองอย่าง ต้องสั่งให้เพิ่มระยะห่างบรรทัดและปรับหัวข้อไม่ให้ล้น ไม่ใช่เรื่องใหญ่ แต่ต้องรู้ว่าต้องสั่ง
ขั้นตอนเต็มของการทำเว็บไซต์ด้วย Claude Code ตั้งแต่ศูนย์จนขึ้นออนไลน์ ผมเขียนแยกไว้ให้แล้วครับ
ตอนนี้ยังเป็น beta ต้องเผื่อใจเรื่องอะไรบ้าง
Anthropic ระบุเองว่ายังอยู่ในช่วง beta และแก้ไขปรับปรุงอยู่ตลอด
คำว่า "ตลอด" ในที่นี้แปลตรงตัวครับ ช่วงที่ผมถ่ายคลาส หน้าตาของ Claude Design เปลี่ยนสามรอบภายในสัปดาห์เดียว ผมถึงไม่แนะนำให้จำตำแหน่งปุ่มตายตัว ให้จำว่าจะทำอะไรก็พอ แล้วหาปุ่มเอาหน้างาน
สิ่งที่ Anthropic ยอมรับเองว่ายังมีปัญหาคือ
- คอมเมนต์ที่คุณทิ้งไว้บางทีหายไป
- ถ้าโปรเจกต์ใหญ่มาก มันจะเริ่มช้า
- บางครั้งแชทขึ้น error
- การแก้งานพร้อมกันหลายคนยังทำได้ไม่ดี
ข้อสุดท้ายสำคัญกับคนที่ทำงานเป็นทีมครับ อย่าเพิ่งวางแผนให้ทั้งทีมเข้ามาแก้งานชิ้นเดียวกันพร้อมกัน
และเพราะยังเป็น beta ทุกอย่างในบทความนี้เปลี่ยนได้ครับ โดยเฉพาะเรื่องโควตาที่เพิ่งเปลี่ยนไปแล้วหนึ่งรอบ ก่อนวางแผนงานจริง แนะนำให้เปิดหน้าคู่มือทางการของ Claude Design เช็กอีกที
สรุป
- Claude Design คือ Claude ที่ตอบเป็นภาพ ใช้ตอนคิดหน้าตา ไม่ใช่ตอนสร้างของจริง
- เข้าที่ claude.ai/design หรือจากแอปบนคอมพิวเตอร์ หรือสั่ง
/design-syncจาก Claude Code - ใช้ฟรีไม่ได้ ต้องเป็น Pro ขึ้นไป แต่ไม่ต้องจ่ายเพิ่มจากที่จ่ายอยู่
- อย่าลืมแนบโปรเจกต์เดิมด้วย Codebase ไม่งั้นได้ดีไซน์สวยที่ไม่เข้ากับงานเดิมของคุณ
- โควตาใช้ร่วมกับ Claude Code และมันกินหนัก ใช้สร้างหน้าแรกครั้งเดียวพอ แล้วกลับไปแก้ใน Claude Code
- ส่งต่อให้ Claude Code สร้างเว็บจริงได้เลย ไม่ต้องเริ่มใหม่
ถ้าจำได้แค่ข้อเดียว ให้จำข้อ 5 ครับ เพราะเป็นข้อที่ทำให้คนงงว่าทำไมโควตาหมดเร็วโดยไม่รู้ตัว
อ่านจบแล้วไปต่อตรงไหน
ถ้าคุณอยากได้เว็บของธุรกิจตัวเองจริงๆ ไม่ใช่แค่ภาพร่าง ขั้นต่อไปคือทำความรู้จักตัวที่สร้างเว็บจริง แล้วลงมือทำตามทีละขั้น
คำถามที่พบบ่อย
Claude Design คืออะไร?
เป็นเครื่องมือของ Anthropic สำหรับงานที่ต้องเห็นภาพ เช่น ออกแบบหน้าเว็บ ทำ prototype ที่กดเล่นได้ ทำสไลด์ หรือทำ landing page คุณพิมพ์บอกว่าอยากได้อะไร มันร่างออกมาให้เห็นเป็นภาพจริง แล้วคุณค่อยแก้ต่อด้วยการคุย เปิดตัวเมื่อ 17 เมษายน 2026 และตอนนี้ยังอยู่ในสถานะ beta
Claude Design อยู่ตรงไหน เข้ายังไง?
เข้าได้ 3 ทางครับ หนึ่งคือเปิดเว็บไปที่ claude.ai/design สองคือเปิดจากแถบด้านข้างในแอป Claude บนคอมพิวเตอร์ และสามคือเรียกจาก Claude Code ด้วยคำสั่ง /design-sync ถ้าหาไม่เจอ สาเหตุที่พบบ่อยที่สุดคือบัญชีคุณเป็นแพลนฟรี ซึ่งยังไม่มีให้ใช้
Claude Design ใช้ฟรีได้ไหม?
ไม่ได้ครับ ต้องเป็นบัญชีแบบเสียเงินตั้งแต่แพลน Pro ขึ้นไป คือ Pro, Max, Team หรือ Enterprise แพลนฟรีของ Claude ยังไม่มีให้ใช้ และไม่มีค่าใช้จ่ายแยกต่างหาก ถ้าคุณจ่ายค่า Pro อยู่แล้ว ก็ใช้ได้เลยโดยไม่ต้องจ่ายเพิ่ม
Claude Design ราคาเท่าไหร่?
ไม่มีราคาแยกของตัวเองครับ มันรวมอยู่ในค่าสมาชิก Claude ที่คุณจ่ายอยู่แล้ว แพลนถูกที่สุดที่ใช้ได้คือ Pro ที่ 20 ดอลลาร์ต่อเดือน หรือราว 700 บาท
Claude Design ใช้ยังไง?
ห้าขั้นครับ หนึ่งเปิด claude.ai/design แล้วล็อกอินด้วยบัญชีที่จ่ายเงินอยู่ สองกด Start a blank project สามกด Codebase แล้วลากโฟลเดอร์โปรเจกต์เดิมของคุณเข้าไป สี่กดเครื่องหมายบวกแล้วเลือกสกิลที่จะใช้ ห้าวางคำสั่งแล้วกดส่ง ขั้นที่สามคือขั้นที่คนข้ามกันมากที่สุด ถ้าไม่แนบโปรเจกต์เดิมเข้าไป คุณจะได้ดีไซน์ที่ไม่เข้ากับงานเดิมของคุณเลย
Claude Design กินโควตาเยอะไหม?
เยอะครับ ตอนผมถ่ายคลาส ผมตั้งใจรันมันแค่รอบเดียวแล้วไม่แตะอีกเลยเพราะเหตุผลนี้ ถ้าคุณอยู่แพลน Pro ที่ 20 ดอลลาร์ โควตาหมดเร็วกว่าที่คิดมาก วิธีที่ผมใช้คือให้ Claude Design สร้างหน้าแรกครั้งเดียว แล้วงานแก้ทั้งหมดหลังจากนั้นกลับไปทำใน Claude Code ซึ่งประหยัดกว่า
โควตาของ Claude Design แยกกับ Claude Code ไหม?
ไม่แยกครับ และข้อนี้เพิ่งเปลี่ยน ตอนเปิดตัวใหม่ๆ Claude Design เคยมีโควตารายสัปดาห์เป็นของตัวเอง แต่ตอนนี้ Anthropic รวมเข้ากองเดียวกับแชท Claude Code และ Cowork หมดแล้ว แปลว่าวันไหนคุณนั่งลองดีไซน์เพลินๆ โควตาที่จะเอาไว้ทำเว็บก็หายไปด้วย
Claude Design กับ Claude Code ต่างกันยังไง?
Claude Design ทำงานบนเว็บและเน้นให้คุณเห็นภาพก่อนว่าหน้าตาจะออกมาเป็นแบบไหน ส่วน Claude Code ทำงานบนเครื่องคุณและสร้างเว็บจริงที่เอาขึ้นออนไลน์ได้ ใช้คู่กันได้ครับ ออกแบบใน Design แล้วกดส่งต่อให้ Claude Code เอาไปทำเป็นเว็บจริง
ออกแบบใน Claude Design แล้วเอาไปทำเว็บจริงได้เลยไหม?
ได้ครับ มีปุ่มส่งงานต่อให้ Claude Code โดยตรง หรือจะโหลดออกมาเป็นไฟล์ HTML, PDF, PPTX หรือ .zip ก็ได้ และส่งต่อไปแอปอื่นอย่าง Canva, Adobe, Miro, Vercel หรือ Wix ได้ด้วย
