TommyLabsTOMMYLABS
← Playground

LM-04 · คู่มือฟรี · อ่าน 3 นาที

ใช้ Claude Design ให้เว็บแอปหน้าตาดีขึ้นแบบก้าวกระโดด

เรียนรู้วิธีให้ Claude ช่วยออกแบบ UI ปรับหน้าตาเว็บแอปจากธรรมดาให้ดูโปรระดับโปรดักต์จริง

เว็บแอปที่สร้างด้วย AI มักใช้งานได้แต่หน้าตายังธรรมดา Claude Design ช่วยยกระดับ UI ให้ดูเป็นมืออาชีพระดับโปรดักต์จริงได้ในไม่กี่คำสั่ง คู่มือนี้พาดูตัวอย่างการทำงานจริงแบบ before/after

หลายคนสร้างเว็บแอปด้วย AI ได้แล้ว ใช้งานได้จริง แต่พอเปิดดูหน้าตากลับยัง 'ธรรมดา' อยู่ สีไม่ลงตัว ระยะห่างไม่สม่ำเสมอ ดูเหมือนงานทดลองมากกว่าโปรดักต์จริง Claude Design เข้ามาช่วยตรงนี้: บอกมันว่าอยากได้หน้าตาแบบไหน แล้วมันปรับ UI ให้ดูโปรระดับโปรดักต์ได้ในไม่กี่คำสั่ง

เดโม: ปรับหน้าตาเว็บแอปด้วย Claude Design (ก่อน/หลัง)

แนวคิดหลัก

คุณไม่ต้องเป็นดีไซเนอร์ แค่บอก Claude ว่าอยากได้ 'อารมณ์' แบบไหน สะอาดแบบ minimal, หรูแบบ premium, สดใสแบบ friendly แล้วให้มันเสนอ UI มาให้ดู จากนั้นค่อยๆ ปรับ: 'ขยับ spacing ให้โปร่งขึ้น', 'เปลี่ยนโทนสีปุ่มหลัก', 'จัดหน้า hero ใหม่' วนไปจนได้หน้าตาที่พอใจ เหมือนมีดีไซเนอร์นั่งข้างๆ

เคล็ดลับ

ยิ่งบอกอ้างอิงชัดยิ่งดี เช่น 'อยากได้ความรู้สึกแบบเว็บ Linear' หรือ 'สะอาดแบบ Apple' Claude จะจับทิศทางได้แม่นกว่าการบอกลอยๆ ว่า 'ทำให้สวยขึ้น'

เผยแพร่ 7 กรกฎาคม 2569 · TommyLabs

อยากได้เต็มๆ? เรียนสดกับทอมมี่

คู่มือนี้เป็นแค่จุดเริ่ม
ของจริงอยู่ในห้องเรียน

คอร์สสดของทอมมี่ลงมือทำตลอดคลาส จบแล้วกลับบ้านพร้อมของจริงที่ใช้ต่อได้ทันที

IN-HOUSE อยากจัดอบรมให้ทีมในองค์กร? ดูแพ็กเกจ In-house Training →