Claude Design คืออะไร? คู่มือฉบับสมบูรณ์เกี่ยวกับราคา 7 วิธีการสร้าง และตัวอย่าง Prompt [อัปเดตล่าสุดปี 2026]

เมื่อวันที่ 18 มิถุนายน 2026 Claude Design ได้รับการอัปเดตครั้งใหญ่

ฟีเจอร์เพิ่มขึ้น และอินเทอร์เฟซก็เปลี่ยนไป

ฉันได้ลองใช้งานด้วยตัวเองแล้ว เลยจะเขียนลำดับการคลิกบนหน้าจอให้ดูตามไปทีละขั้น

บทความนี้ตั้งใจให้ "เรียนรู้ไปพร้อมกัน"

กรุณาอ่านไปพร้อมกับการเปิด [claude.ai/design](//claude.ai/design) จริงๆ

ใช้ฟรีได้ไหม?

ไม่ สามารถใช้ฟรีไม่ได้

Claude Design สงวนไว้สำหรับผู้ใช้แผนชำระเงินเท่านั้น

คุณสามารถใช้งานได้หากมีแผน Pro ($20/เดือน) ไม่มีค่าใช้จ่ายเพิ่มเติม

Claude Design คืออะไร?

เป็นเครื่องมือ AI ที่ช่วยให้คุณสร้างสไลด์ แลนดิ้งเพจ ต้นแบบแอป ข้อเสนอ และอื่นๆ เพียงแค่ให้คำแนะนำคร่าวๆ เป็นภาษาไทย

Anthropic ปล่อยออกมาเมื่อวันที่ 17 เมษายน 2026 การอัปเดตนี้ทำให้ฟังก์ชันการทำงานเพิ่มขึ้นอย่างมาก

ผลลัพธ์ที่ได้คือ "Live HTML" ไม่ใช่ภาพนิ่ง แต่สร้างดีไซน์ที่คลิกได้และมีการเคลื่อนไหว

วิธีอ่านหน้าจอ

เมื่อคุณเปิด [claude.ai/design](//claude.ai/design) จะเห็นหน้าจอนี้

แท็บด้านบน

พื้นที่ "Make something new"

เลือกประเภทของสิ่งที่คุณต้องการสร้างได้ตรงนี้ มีการ์ดเรียงอยู่ 7 ใบ

ภายใต้ "Designs" จะแสดงรายการดีไซน์ที่คุณเคยสร้างไว้

เมื่อ Claude ถามคำถามเพิ่มเติม (ใช้ร่วมกันทุกการ์ด)

หลังจากเลือกการ์ดและส่ง prompt หาก Claude พิจารณาว่าข้อมูลไม่เพียงพอ อาจแสดงคำถามเพิ่มเติมทางด้านขวาของหน้าจอ

เนื้อหาของคำถามจะเปลี่ยนไปตาม prompt

มีทั้งรายการที่จำเป็นและไม่จำเป็น

ตอบคำถามแล้วกด "Continue" เพื่อเริ่มสร้าง

วิธีสร้างสไลด์ (สื่อนำเสนอ)

สร้างเอกสารสัมมนา สไลด์สรุปข้อมูล และพิตช์เด็คได้จากตรงนี้

ขั้นตอนที่ 1. คลิก "Slides" บนหน้าจอหลัก

คลิกการ์ดที่写着 "Presentations & pitch decks"

ขั้นตอนที่ 2. กรอกเนื้อหาของสไลด์ที่ต้องการสร้าง

เมื่อคลิกแล้วจะมาที่หน้าจอนี้

"What's the presentation about?" จะแสดงที่แถบด้านข้างซ้าย

คุณสามารถเลือกวิธีการป้อนข้อมูลได้ 3 แบบ:

• Upload a doc: สร้างสไลด์จากเอกสารที่มีอยู่ เช่น Word หรือ PDF
• Paste your notes: วางบันทึกหรือข้อความ แล้วให้จัดโครงสร้างให้
• Existing deck: สร้างใหม่จากสไลด์ที่มีอยู่

หากไม่แนบอะไร ให้พิมพ์เนื้อหาในช่องข้อความด้านล่างแล้วกดส่ง

ตัวอย่าง Prompt

1กรุณาสร้างสไลด์แนะนำบริการให้คำปรึกษาด้าน AI
2กลุ่มเป้าหมาย: เจ้าของกิจการคนเดียวและฟรีแลนซ์ที่ไม่ถนัดคอมพิวเตอร์
3ระยะเวลา: สำหรับสัมมนา 20 นาที
4โครงสร้าง: ปัญหาปัจจุบัน → สิ่งที่ AI แก้ได้ → รายละเอียดบริการ → ค่าธรรมเนียม → วิธีการสมัคร
5บรรยากาศ: เป็นกันเอง ไม่ใช้ศัพท์เทคนิค
6รูปลักษณ์: เรียบง่าย อ่านง่าย พื้นหลังสีขาว

1กรุณาสร้างสไลด์แนะนำตัว
2อดีตวิศวกรระบบ ปัจจุบันสอนวิธีใช้ AI
3ผลงาน: ทำให้การทำงานอัตโนมัติด้วย Claude Code, สร้างระบบมูลค่า 300,000 เยน/เดือน
4กลุ่มเป้าหมาย: เจ้าของกิจการคนเดียวที่เป็นมือใหม่ด้าน AI
5จำนวนสไลด์: 5-7 แผ่น มีพื้นที่ว่างเยอะๆ มองเห็นง่าย

1กรุณาสร้างสไลด์แนะนำวิธีใช้ Claude Code เบื้องต้น
2ผู้ฟัง: มือใหม่ที่ไม่เคยเขียนโค้ดมาก่อน
3ระยะเวลา: 10 นาที
4เนื้อหา: Claude Code คืออะไร → ขั้นตอนการติดตั้ง → คำสั่งแรก → ข้อผิดพลาดทั่วไปและวิธีแก้
5โทน: สุภาพ อ่อนโยน ไม่น่ากลัว

Deck options (ไม่จำเป็น)

• Optimize for Google Slides: ใช้เฉพาะ Google Fonts (สะดวกเมื่อเปิดใน Google Slides)
• Add speaker notes: เพิ่มบันทึกคำพูดลงในแต่ละสไลด์โดยอัตโนมัติ

ขั้นตอนที่ 3. รอการสร้าง

ใช้เวลาไม่กี่นาที คุณสามารถดูความคืบหน้าได้จากแผงด้านซ้าย

เมื่อเสร็จแล้วจะมีลักษณะดังนี้

ขั้นตอนที่ 4. ปรับแต่งด้วยปุ่มมุมขวาบน

เมื่อสร้างเสร็จ ปุ่มต่างๆ จะปรากฏที่มุมขวาบน

"Tweaks" ถูกใช้มากที่สุด แค่พิมพ์เช่น "ทำให้ชื่อเรื่องในสไลด์แรกใหญ่ขึ้น" เหมือนแชท มันก็จะแก้ไขให้

ข้อควรระวัง

ควรตัดสินใจสไตล์ภาพของสไลด์ก่อน

ถ้าพูดว่า "เปลี่ยนสีทั้งหมด" ระหว่างทาง ความสม่ำเสมอมักจะเสียไป

การกำหนดกรอบกว้างๆ ก่อนแล้วค่อยแก้ไขรายละเอียดจะเร็วกว่า

วิธีสร้าง Product Prototype (ต้นแบบที่เคลื่อนไหวได้)

คุณสามารถสร้างหน้าจอแอป ลำดับการจองบริการ และ mockup เว็บเซอร์วิสได้

เมื่อเสร็จแล้วจะอยู่ในสถานะที่คุณสามารถคลิกและใช้งานได้จริง

ขั้นตอนที่ 1. คลิก "Product prototype" บนหน้าจอหลัก

คลิกการ์ดที่เขียนว่า "Interactive app mockups"

ขั้นตอนที่ 2. กรอกเนื้อหาของหน้าจอแอปที่ต้องการสร้าง

เมื่อคลิกแล้วจะมาที่หน้าจอนี้

เช่นเดียวกับ Slides ให้พิมพ์เนื้อหาในช่องข้อความแล้วกดส่ง

Prototype จะมีความแม่นยำมากขึ้นเมื่อเขียนรายละเอียดมากขึ้น การรวมสิ่งต่อไปนี้จะช่วยเพิ่มคุณภาพ:

• แอปประเภทไหน: ระบบจอง, จัดการงาน, หน้าชำระเงิน ฯลฯ
• จำนวนหน้าจอ: กี่หน้าจอ
• เนื้อหาแต่ละหน้าจอ: มีอะไรแสดงบ้าง
• ลำดับการทำงาน: กดที่ไหนเพื่อไปขั้นตอนถัดไป
• ขนาดอุปกรณ์: สำหรับสมาร์ทโฟน (390×844px) หรือ PC
• สี/สไตล์: Dark theme, โทนสีสด ฯลฯ

ตัวอย่าง Prompt

1กรุณาสร้าง prototype แอปจองร้านเสริมสวย
2บนหน้าจอสมาร์ทโฟน (390×844px)
34 หน้าจอ:
41. หน้าแรก: ชื่อร้าน, รายการเมนู (ตัด/ทำสี/ทรีทเมนต์)
52. เลือกเมนู: เลือกแล้วดำเนินการต่อ
63. เลือกวันที่/เวลา: ปฏิทินและช่วงเวลา
74. ยืนยัน/เสร็จสิ้น: รายละเอียดการจองและปุ่ม "จอง"
8สไตล์: พื้นหลังสีขาว, เน้นสีชมพู, ดีไซน์โค้งมน
9เมื่อแตะปุ่ม "จอง" ให้เปลี่ยนไปที่หน้าจอ "จองสำเร็จ!"

ขั้นตอนที่ 3. รอการสร้าง

ใช้เวลาไม่กี่นาที เมื่อเสร็จแล้วจะมีลักษณะดังนี้

อยู่ในสถานะที่คุณสามารถคลิกใช้งานได้จริง การกดปุ่ม "จอง" จะเปลี่ยนไปยังหน้าจอถัดไป

ขั้นตอนที่ 4. ปรับแต่งด้วยปุ่มมุมขวาบน

เมื่อสร้างเสร็จ ปุ่มต่างๆ จะปรากฏที่มุมขวาบน

"Tweaks" ถูกใช้มากที่สุด แค่พิมพ์เช่น "ทำให้สีพื้นหลังเป็นสีขาว" หรือ "ทำให้ฟอนต์ใหญ่ขึ้น" เหมือนแชท มันก็จะแก้ไขให้

หากต้องการเพิ่ม Animation

Claude Design ไม่ได้เพิ่ม animation โดยอัตโนมัติ

หากต้องการให้มีการเคลื่อนไหว ให้ระบุอย่างชัดเจน

1ขยายปุ่มเป็น 1.05 เท่าเมื่อวางเมาส์บน ด้วย transition 200ms
2ให้การ์ด fade in + slide up เมื่อโหลดหน้า โดยแสดงตามลำดับห่างกัน 150ms

วิธีสร้าง Product Wireframe (การออกแบบโครงร่าง)

ใช้เมื่อต้องการกำหนด "โครงสร้างหน้าจอ" ก่อน

มันจะสร้างเฉพาะโครงร่างของเค้าโครง ไม่ใช่ดีไซน์โดยละเอียด

เหมาะสำหรับการยืนยันลำดับว่า "ผู้ใช้ดำเนินการตามลำดับนี้"

ขั้นตอนที่ 1. คลิก "Product wireframe" บนหน้าจอหลัก

คลิกการ์ดที่เขียนว่า "Lo-fi screens & flows"

### ขั้นตอนที่ 2. กรอกโครงสร้างของหน้าจอที่ต้องการสร้าง

เมื่อคลิกแล้วจะมาที่หน้าจอนี้

พิมพ์เนื้อหาในช่องข้อความแล้วกดส่ง หากมีหน้าจอที่ต้องการใช้เป็นตัวอย่าง แนบด้วย "Add a screenshot" จะช่วยเพิ่มความแม่นยำ

ตัวอย่าง Prompt

1กรุณาสร้าง wireframe สำหรับขั้นตอนการสมัครบริการให้คำปรึกษา
2ขั้นตอน: หน้าแรก → คำอธิบายบริการ → ค่าธรรมเนียม → ฟอร์มสมัคร → เสร็จสิ้น
3ขอแค่เห็นว่าต้องวางอะไรในแต่ละหน้าจอก็พอ ไม่ต้องออกแบบละเอียด

1กรุณาสร้าง wireframe สำหรับ LP สมัครสัมมนา
2ส่วน: Hero section → แนะนำวิทยากร → เนื้อหา → ค่าเข้าร่วม → ฟอร์มสมัคร
3ในมุมมองสมาร์ทโฟน

ขั้นตอนที่ 3. รอการสร้าง

เมื่อเสร็จแล้วจะมีลักษณะดังนี้

โครงร่างหน้าจอแสดงด้วยกล่องสีเทา ใช้เพื่อยืนยันตำแหน่งเช่น "ปุ่มตรงนี้" และ "ภาพตรงนี้" การออกแบบรายละเอียดจะทำด้วย Product prototype หรือ Document

ขั้นตอนที่ 4. ปรับแต่งด้วยปุ่มมุมขวาบน

เมื่อสร้างเสร็จ ปุ่มต่างๆ จะปรากฏที่มุมขวาบน

การสั่งเช่น "เพิ่มการแสดงค่าธรรมเนียมในหน้าจอที่ 3" ใน "Tweaks" จะช่วยแก้ไขเพิ่มเติม

วิธีสร้าง Document (LP, ข้อเสนอ, เอกสาร)

สร้างแลนดิ้งเพจ ข้อเสนอ รายงาน และเรซูเม่ได้จากตรงนี้

ในบรรดาการ์ด 7 ประเภท การ์ดนี้ใช้งานได้หลากหลายที่สุด

ขั้นตอนที่ 1. คลิก "Document" บนหน้าจอหลัก

คลิกการ์ดที่เขียนว่า "Resumes, PDFs, etc."

### ขั้นตอนที่ 2. กรอกเนื้อหาที่ต้องการสร้าง

เมื่อคลิกแล้วจะมาที่หน้าจอนี้

ฟีเจอร์เฉพาะของการ์ด Document คือ "Talk it out"

หากคุณป้อนความคิดราวกับกำลังพูดคุยเพื่อจัดระเบียบ มันจะอ่านโครงสร้างตามนั้น

หากมี PDF หรือเอกสาร คุณสามารถอัปโหลดด้วย "Upload a PDF or notes"

ตัวอย่าง Prompt

1กรุณาสร้าง LP สำหรับบริการให้คำปรึกษาด้าน AI สำหรับบุคคล
2วัตถุประสงค์: เพิ่มการลงทะเบียน LINE
3โครงสร้าง:
4- Hero section: คำโปรย + ปุ่มลงทะเบียน
5- คุณมีปัญหาเหล่านี้หรือไม่? (3 ข้อ)
6- สิ่งที่แก้ไขได้ด้วยบริการ (3 ข้อ)
7- ค่าธรรมเนียม
8- คำถามที่พบบ่อย (3 ข้อ)
9- CTA ท้ายสุด: ปุ่มลงทะเบียน LINE
10กลุ่มเป้าหมาย: เจ้าของกิจการคนเดียวที่ไม่ถนัดคอมพิวเตอร์, ผู้หญิงอายุ 50 ปีขึ้นไป
11สไตล์: เรียบง่ายอบอุ่น, ขาว + เน้นสีคอรัล

1กรุณาสร้างข้อเสนอสำหรับบริการให้คำปรึกษาสำหรับองค์กร
2โครงสร้าง: ปัญหาปัจจุบัน → เนื้อหาข้อเสนอ → ผลที่คาดหวัง → ค่าธรรมเนียม → ขั้นตอนดำเนินการ → เกี่ยวกับการประชุมครั้งถัดไป
3สไตล์: เรียบง่ายน่าเชื่อถือ, น้ำเงินเข้ม x ขาว

1กรุณาสร้างเอกสารแนะนำตัว (พอร์ตโฟลิโอ) ในฐานะฟรีแลนซ์
2เนื้อหาที่ต้องการรวม: ประวัติ, ทักษะ, ผลงาน, ค่าธรรมเนียม, ข้อมูลติดต่อ
3สไตล์: ขาวดำ + สีเน้น 1 สี, ทันสมัยและสะอาดตา

ขั้นตอนที่ 3. รอการสร้าง

ใช้เวลาไม่กี่นาที เมื่อเสร็จแล้วจะมีลักษณะดังนี้

คุณสามารถเลื่อนดูส่วนที่เหลือได้ สำหรับ LP ทุกอย่างตั้งแต่ค่าธรรมเนียม คำถามที่พบบ่อย ไปจนถึงส่วนท้ายจะถูกสร้างขึ้น

ขั้นตอนที่ 4. ปรับแต่งด้วยปุ่มมุมขวาบน

เมื่อสร้างเสร็จ ปุ่มต่างๆ จะปรากฏที่มุมขวาบน

แค่สั่งแก้ไขข้อความหรือสีใน LP ใน "Tweaks" มันก็จะแก้ไขให้ทันที

วิธีสร้าง Animation

คุณสามารถสร้างแบนเนอร์แบบเคลื่อนไหวและโมชันกราฟิกได้

ขั้นตอนที่ 1. คลิก "Animation" บนหน้าจอหลัก

คลิกการ์ดที่เขียนว่า "Motion graphics & loops"

ขั้นตอนที่ 2. กรอกเนื้อหาของ animation ที่ต้องการสร้าง

เมื่อคลิกแล้วจะมาที่หน้าจอนี้

หากมีสตอรีบอร์ดหรือรูปภาพ คุณสามารถอัปโหลดด้วย "Drop a storyboard or images"

หากมีสคริปต์ (ข้อความ) คุณสามารถวางด้วย "Paste a script"

ตัวอย่าง Prompt

1กรุณาสร้างแบนเนอร์เคลื่อนไหวสำหรับแนะนำบริการ
2เนื้อหา: ข้อความ "AI x Systemization" ค่อยๆ fade in → ชื่อบริการปรากฏจากด้านล่าง → ปุ่ม CTA กระพริบ
3พื้นหลัง: สีเข้ม, เส้นเน้นสีคอรัล
4ขนาด: 1200×630px
5เล่นซ้ำแบบ loop

1กรุณาสร้าง animation ตัวเลขนับจำนวน
2ด้วยข้อความ "มีผู้ลงทะเบียน 3,000 คน" นับจาก 0 ถึง 3,000 ภายใน 2 วินาที
3เริ่มเมื่อหน้าเว็บแสดง

เมื่อเสร็จแล้วจะมีลักษณะดังนี้

ขั้นตอนที่ 3. ปรับแต่งด้วยปุ่มมุมขวาบน

เมื่อสร้างเสร็จ ปุ่มต่างๆ จะปรากฏที่มุมขวาบน

ต่างจากการ์ดอื่นๆ ตรงที่ไม่มีปุ่ม "Edit" เนื่องจาก animation ทำงานด้วยโค้ด (CSS/JavaScript) คุณจึงไม่สามารถแก้ไของค์ประกอบโดยตรงโดยคลิกได้ การแก้ไขทำได้เฉพาะการสั่ง AI ใน "Tweaks" เท่านั้น

หากส่งออก animation เป็น PDF การเคลื่อนไหวจะหายไป หากต้องการคงการเคลื่อนไหว ให้เลือกรูปแบบ HTML

วิธีใช้ Blank Canvas (สร้างจากศูนย์)

ไม่มีเทมเพลต ไม่มีคำถาม ใช้เมื่อต้องการเริ่มจากผืนผ้าใบที่ว่างเปล่าอย่างสมบูรณ์

ให้เลือกสิ่งนี้สำหรับ "สิ่งที่เข้ากับการ์ดใดไม่ได้" หรือ "เมื่อต้องการตัดสินใจทุกอย่างด้วยตัวเอง"

เพียงพิมพ์สิ่งที่ต้องการสร้างในช่องป้อนข้อความแล้วกดส่ง

วิธีใช้ Start with a File (สร้างจากไฟล์)

การ์ดนี้ใช้แปลงไฟล์ที่มีอยู่เป็นดีไซน์ เพียงให้ไฟล์ Word, PDF หรือ PPTX แก่ Claude มันจะสร้างดีไซน์ให้คุณ

ขั้นตอนที่ 1. คลิก "Start with a file"

คลิกการ์ดที่เขียนว่า "Turn it into a design" กล่องเลือกไฟล์จะเปิดขึ้น

รูปแบบไฟล์ที่รองรับคือ DOCX, PPTX, XLSX, PDF, JPG และ PNG

ขั้นตอนที่ 2. อัปโหลดไฟล์และป้อนคำแนะนำ

เมื่อคุณเลือกไฟล์ ไฟล์จะถูกอัปโหลด และช่องป้อนข้อความขนาดใหญ่จะปรากฏขึ้น ป้อนสิ่งที่คุณต้องการสร้างเป็นภาษาไทยแล้วกดปุ่ม "Start project"

การ์ดอื่นๆ มีปุ่ม "Send" แต่การ์ดนี้มี "Start project"

ตัวอย่าง Prompt

1กรุณาแปลงเอกสารข้อเสนอ Word ที่แนบมาเป็นสไลด์ข้อเสนอที่เห็นภาพ
2ทำให้เป็นรูปแบบ 5-7 สไลด์ด้วยดีไซน์เรียบง่ายอ่านง่าย

1กรุณาแปลงแนวคิดในโน้ตที่เขียนด้วยมือนี้เป็นข้อเสนอ LP
2กลุ่มเป้าหมาย: เจ้าของกิจการคนเดียวที่เป็นมือใหม่ด้าน AI
3เป้าหมาย: การสมัครรับคำปรึกษา

เมื่อเสร็จแล้วจะมีลักษณะดังนี้

ขั้นตอนที่ 3. ปรับแต่งด้วยปุ่มมุมขวาบน

หลังจากสร้างเสร็จ คุณสามารถปรับแต่งด้วยแถบเครื่องมือที่มุมขวาบน การกดปุ่ม "+ Tweaks" จะเปิดช่องป้อนข้อความแชทสำหรับคำแนะนำเพิ่มเติมสำหรับการเปลี่ยนแปลงเล็กน้อย

วิธีใช้ Design Systems [ใหม่ในการอัปเดตนี้]

มีปุ่ม "Set up design system" ใต้รายการการ์ดบนหน้าจอหลัก

โดยการลงทะเบียนสีแบรนด์ ฟอนต์ และโลโก้เพียงครั้งเดียว สิ่งเหล่านี้จะถูกสะท้อนไปยังดีไซน์ถัดไปโดยอัตโนมัติ

ช่วยแก้ปัญหาที่ว่า "สีไม่สม่ำเสมอทุกครั้ง"

การกดปุ่มจะแสดงโมดัล "Add a design system"

มีวิธีการลงทะเบียน 2 แบบ

① Create here (สำหรับมือใหม่)

คุณสามารถตั้งค่าได้โดยเพียงป้อนข้อมูลที่จำเป็นในฟอร์ม

สิ่งที่สามารถลงทะเบียนได้:

• ชื่อบริษัท/คำอธิบายแบรนด์ (ป้อนข้อความ)
• URL ที่เก็บ GitHub
• ไฟล์ Figma (อัปโหลดไฟล์ .fig)
• ไฟล์ฟอนต์ โลโก้ และทรัพยากรอื่นๆ

คุณสามารถใช้งานได้โดยไม่ต้องเขียนโค้ด หากลองใช้ครั้งแรก แนะนำวิธีนี้

② Create using Claude Code (BEST FIDELITY)

นี่คือฟีเจอร์ที่ให้ Claude Code เรียนรู้ข้อมูลแบรนด์

เมื่อลงทะเบียนแล้ว คุณไม่จำเป็นต้องระบุ "ด้วยสีนี้และฟอนต์นี้" ทุกครั้งที่สร้าง LP, โฮมเพจ หรือสไลด์ ดีไซน์ที่เป็นเอกภาพของแบรนด์จะออกมาโดยอัตโนมัติ

ส่วนใหญ่สำหรับทีมพัฒนาองค์กร นี่คือฟีเจอร์สำหรับอ่านข้อมูลแบรนด์จากโค้ดบริการที่สร้างด้วย React rules โดยอัตโนมัติ แทบไม่มีกรณีการใช้งานสำหรับบุคคลทั่วไป

วิธีการใช้งาน

คุณสามารถสร้างตั้งแต่ต้นด้วยขั้นตอนต่อไปนี้

ขั้นตอนที่ 1. ตรวจสอบ Node.js

ขั้นตอนที่ 2. สร้างโฟลเดอร์และไฟล์

1โฟลเดอร์ใดก็ได้/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (เขียนทับสีและฟอนต์เป็นของแบรนด์คุณ)

1export const colors = {
2  primary: "#DA7756",      // สีหลัก
3  background: "#F5F4F0",   // สีพื้นหลัง
4  text: "#1C1917",         // ข้อความเนื้อหา
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

ขั้นตอนที่ 3. รัน /design-sync

รันคำสั่งต่อไปนี้ใน Claude Code:

1/design-sync

เมื่อเสร็จสิ้น แบรนด์จะถูกลงทะเบียนในแท็บ "Design systems" สีและฟอนต์นี้จะถูกใช้โดยอัตโนมัติในการสร้างดีไซน์ครั้งต่อๆ ไป

วิธีการส่งออก

ดีไซน์ที่เสร็จแล้วสามารถส่งออกได้หลายรูปแบบ

หากมี animation การเคลื่อนไหวจะหายไปหากส่งออกเป็น PDF

หากต้องการคงการเคลื่อนไหว ให้เลือกรูปแบบ HTML

เคล็ดลับการปรับแต่ง (Tweaks Panel)

หลังจากสร้างเสร็จ การกดปุ่ม "Tweaks" จะช่วยให้คุณสั่งการปรับแต่งเล็กน้อยให้ AI

ตัวอย่างคำแนะนำที่ได้ผล:

• "ทำให้ข้อความหัวข้อใหญ่ขึ้น"
• "ทำให้ปุ่มเด่นขึ้น"
• "ทำให้เรียบง่ายขึ้นโดยรวม"
• "ตรวจสอบเค้าโครงเมื่อดูบนสมาร์ทโฟน"

แทนที่จะพยายามเปลี่ยนทุกอย่างพร้อมกัน การให้คำแนะนำทีละข้อจะทำให้ได้ผลลัพธ์ตามต้องการง่ายขึ้น

สิ่งที่เปลี่ยนไปในการอัปเดตนี้

สรุป — เลือกการ์ดตามสิ่งที่ต้องการสร้าง

Claude Design ใช้งานได้กับแผน Pro ($20/เดือน) ขึ้นไป ไม่สามารถใช้ฟรีได้

เลือกการ์ดตามสิ่งที่ต้องการสร้าง

ความแม่นยำจะเพิ่มขึ้นเมื่อ prompt มีสี่ประเด็น: "วัตถุประสงค์ โครงสร้าง กลุ่มเป้าหมาย และสไตล์"

อย่าพยายามทำให้สมบูรณ์แบบตั้งแต่แรก การสร้างกรอบกว้างๆ แล้วค่อยแก้ไขทีละจุดจะเร็วกว่า

หากคุณชอบบทความนี้ ฉันจะดีใจถ้าคุณกด "Like"

▼ คุณสามารถรับวิธีใช้ Claude ที่แม้แต่คนที่ไม่ถนัดคอมพิวเตอร์ก็เริ่มต้นได้ผ่าน LINE

การลงทะเบียนจะได้รับคู่มือการติดตั้ง Claude Code เป็นของขวัญ

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso