เวิร์กช็อป
เวิร์กช็อป›สร้างแอป & โค้ด
6 · สร้างแอป & โค้ด

สร้างเว็บแอปแรกด้วย Claude Code

ได้เว็บแอปง่าย ๆ ที่รันได้จริง

0%
ความคืบหน้าเวิร์กช็อป
รู้ใน 30 วิ

เปิดเทอร์มินัล พิมพ์ claude แล้วบอกเป็นภาษาคนว่าอยากได้เว็บแอปแบบไหน Claude Code สร้างไฟล์และรันให้ดูได้จริง ในไม่กี่นาที

โฟลเดอร์ว่าง ก็เริ่มได้บอกเป็นภาษาคน ไม่ต้องโค้ดเองรันดูจริง ที่ localhost

ดู Claude Code สร้างเว็บแอปให้

กดรัน แล้วดูมันสร้างทีละไฟล์จนเปิดดูได้

ดู Claude Code ทำงาน
คุณสร้างเว็บแอป To-Do ง่าย ๆ เพิ่ม/ลบ/ติ๊กเสร็จได้ เก็บข้อมูลใน localStorage
  • ›สร้าง index.html วางโครงหน้าและช่องเพิ่มงาน
  • ›เขียน style.css จัดหน้าให้สะอาดตา รองรับมือถือ
  • ›เขียน app.js ผูกเพิ่ม ลบ ติ๊กเสร็จ และเก็บใน localStorage
  • ›รัน python3 -m http.server เปิดดูที่ localhost
  • ✓เสร็จ เปิดเบราว์เซอร์เพิ่มงานได้เลย รีเฟรชแล้วข้อมูลยังอยู่

ไม่ต้องเขียนโค้ดเป็นก็เริ่มได้ หน้าที่คุณคือ อธิบายสิ่งที่อยากได้ให้ชัด แล้วให้ Claude Code ลงมือสร้างและรันให้

3 ขั้นจากไอเดียสู่เว็บที่รันได้

ทุกโปรเจกต์เริ่มเหมือนกันหมด

1

เปิดโฟลเดอร์แล้วเรียก claude

สร้างโฟลเดอร์ใหม่ เปิดเทอร์มินัลในนั้น แล้วพิมพ์ claude เพื่อเริ่มเซสชัน

2

บอกสิ่งที่อยากได้

พิมพ์เป็นภาษาคนว่าอยากได้แอปอะไร มีฟีเจอร์อะไรบ้าง Claude Code จะสร้างไฟล์ให้เอง

3

ขอให้รันแล้วดูผล

บอกให้มันรันเซิร์ฟเวอร์ แล้วเปิดดูที่ localhost ถ้าอยากแก้ก็พิมพ์บอกต่อได้เลย

ลองเลยจับมือทำ
  1. สร้างโฟลเดอร์ใหม่ mkdir my-app && cd my-app แล้วพิมพ์ claude เพื่อเปิดเซสชัน
  2. ก๊อป Prompt นี้ไปวางในเทอร์มินัล แก้ไอเดียให้เป็นของคุณ แล้วกด Enter
    พิมพ์ Prompt นี้
    ช่วยสร้างเว็บแอป [ไอเดียของคุณ เช่น To-Do list] ด้วย HTML, CSS, JavaScript ล้วน ไม่ต้องใช้ framework ฟีเจอร์ที่อยากได้: [เพิ่ม/ลบรายการ, ติ๊กเสร็จ, เก็บข้อมูลไว้แม้รีเฟรช] ทำให้หน้าตาสะอาด ใช้บนมือถือได้ แล้วบอกวิธีเปิดดูในเครื่องด้วย
  3. เมื่อ Claude Code ถามขอสิทธิ์สร้างไฟล์หรือรันคำสั่ง ให้กด Yes เพื่ออนุญาต
  4. พิมพ์ รันเซิร์ฟเวอร์ให้หน่อย แล้วเปิดเบราว์เซอร์ไปที่ http://localhost:8000
  5. อยากปรับอะไรก็พิมพ์ต่อได้เลย เช่น เปลี่ยนสีปุ่มเป็นเขียว และเพิ่มตัวนับงานที่เหลือ
ลองใช้ Prompt นี้
ช่วยสร้างหน้า Landing Page สำหรับ [ชื่อโปรเจกต์/ร้าน] ด้วย HTML และ CSS มีส่วน: หัวเรื่องใหญ่พร้อมสโลแกน, 3 จุดเด่นของบริการ, ปุ่ม Call to action, และส่วนติดต่อ โทนสี [เช่น ฟ้า-ขาว สะอาดตา] ใช้บนมือถือได้ แล้วรันเปิดดูให้ผมด้วย
สรุปเวิร์กช็อป
  • เริ่มที่โฟลเดอร์ว่างแล้วพิมพ์ claude ก็สร้างเว็บแอปได้เลย ไม่ต้องตั้งค่าอะไรเยอะ
  • อธิบายฟีเจอร์ให้ชัดในภาษาคน แล้วให้ Claude Code สร้างไฟล์และรันให้ดูจริง
  • อยากแก้ตรงไหนพิมพ์บอกต่อในเซสชันเดิมได้ทันที ไม่ต้องเริ่มใหม่
← ก่อนหน้าถอดเสียง & สรุปประชุมเวิร์กช็อปถัดไป →ดีบักด้วย Claude Code