สร้าง Website หรือ Application ง่ายๆด้วย Claude Design + Claude Code
🔥ปัจจุบันนักบัญชีอย่างเราที่เขียน Code ไม่เป็นเลย สามารถสร้าง Website หรือ Application ง่ายๆได้เองแล้ว ด้วย AI ✨Website ของกุ๋งกิ๋งใช้เวลาสร้าง 1 ช.ม. แต่ตกแต่งความสวยงามอีก 5-6 ช.ม. แล้วแต่จินตนาการของเพื่อนๆว่าจะเอาสวยแค่ไหน 🎯เพื่อนๆสามารถเข้าไปดูตัวอย่างโปรแกรมต่างๆ ตั้งแต่โปรแกรมจัดการเล็กๆจนถึง ERP ใหญ่ๆ โดยเป็นคนไทยที่ใช้ Claude สร้างAppพวกนี้ขึ้นมา ได้จากกระทู้นี้ค่า : https://www.facebook.com/share/p/1HfjdZVRNr/ 💖หวังว่า Post นี้จะสร้างประโยชน์ต่อวงการนักบัญชีของพวกเรานะคะ ใครทำระบบหรือAppอะไรเจ๋งๆ สามารถเอามา share กันได้ค่า
สร้าง Website หรือ App ง่ายๆ เสร็จภายใน 1 ชั่วโมง ด้วย Claude Design + Claude Code
การสร้างเว็บไซต์หรือแอปพลิเคชันเพื่อธุรกิจในปัจจุบัน ไม่จำเป็นต้องเริ่มต้นเขียนโค้ดเองตั้งแต่ศูนย์อีกต่อไป ด้วยการทำงานร่วมกันระหว่าง Claude Design และ Claude Code ช่วยให้คุณสามารถพัฒนาได้ตั้งแต่ เว็บไซต์บริษัท, โปรแกรมบัญชี, Mobile App ไปจนถึงระบบจัดการงานต่างๆ ได้อย่างสะดวกรวดเร็วและเป็นมืออาชีพ
ขั้นตอนการทำงาน:
ขั้นตอนที่ 1 : เข้าสู่ Claude Design เพื่อเริ่มต้นออกแบบ
1.1 เปิดโปรแกรม Claude Desktop แล้วเลือกเมนู Design ที่แถบเครื่องมือด้านซ้ายล่าง
1.2 ระบบจะแสดงหน้าต่าง Claude Design ซึ่งมีรูปแบบงานให้เลือกหลากหลาย เช่น Website, Mobile app design, Slides, Document หรือ UX mockups
ขั้นตอนที่ 2 : ตั้งค่า Design System และสั่งงานด้วย Prompt
2.1 กำหนด Design System โดยดึงโลโก้หรือ CI สีหลักของบริษัทมาใช้ เพื่อให้หน้าตาของเว็บไซต์คุมโทนภาพลักษณ์แบรนด์ได้อย่างสวยงาม
2.2 พิมพ์คำสั่ง (Prompt) ระบุความต้องการ เช่น "ช่วยสร้าง website บริษัทบัญชีให้หน่อย โดยสร้างแต่ละหน้าตามที่ควรจะมี"
ขั้นตอนที่ 3 : ปรับแต่งรายละเอียดและส่งออกไฟล์
3.1 ระบบจะสร้างหน้าตาเว็บไซต์จำลองออกมา โดยสามารถพิมพ์ Comment เพื่อสั่งแก้ไขได้ทันที เช่น การปรับโทนสี, สลับภาษาไทย/อังกฤษ, เปลี่ยนรูปภาพ หรือจัดวางตำแหน่งปุ่ม
3.2 เมื่อได้ดีไซน์ที่พอใจ ให้แจ้งระบบเพื่อนำไปใช้งานจริง Claude Design จะรวมชุดไฟล์ทั้งหมดเป็น Zip File เพื่อส่งต่อไปยังฝั่งเขียนโค้ด
ขั้นตอนที่ 4 : พัฒนาระบบต่อด้วย Claude Code
4.1 สลับหน้าจอมาที่โหมด Code บนโปรแกรม Claude
4.2 เลือกโฟลเดอร์โปรเจกต์ที่ดาวน์โหลดมาจาก Claude Design
4.3 พิมพ์คำสั่งเพื่อให้ระบบอ่านรายละเอียดในโฟลเดอร์และพัฒนาเป็นโค้ดเว็บไซต์ที่ทำงานได้จริง พร้อมหน้าต่าง Preview แสดงผลลัพธ์แบบเรียลไทม์
ขั้นตอนที่ 5 : Deploy ขึ้นระบบจริงและเชื่อมต่อ Domain
5.1 เมื่อตรวจสอบความถูกต้องเรียบร้อย พิมพ์คำสั่ง เช่น "จะใช้จริงแล้ว ช่วยอัพขึ้นของจริงหน่อย"
5.2 Claude Code จะทำการเชื่อมต่อระบบ Connector และจัดการผูกชื่อ Domain ให้โดยอัตโนมัติ (สามารถเลือกใช้บริการผ่าน Vercel หรือผู้ให้บริการจดโดเมนอื่นๆ ได้ตามสะดวก)
ช่องทางการติดตามและข้อมูลเพิ่มเติม:
Facebook : เพจกุ๋งกิ๋ง สกูล
YouTube : GungGinkk School
LINE : @arichaudit
Website : www.arichauditgroup.com