สร้างเว็บทูลขนาดเล็กด้วย Claude Code

อธิบายเครื่องมือเบราว์เซอร์เล็ก ๆ ในหนึ่งย่อหน้า แล้วให้ Claude Code สร้างมันเป็นไฟล์ HTML เดียว เครื่องมือฟรีทุกตัวบนเว็บไซต์นี้สร้างขึ้นด้วยวิธีนี้

เลือกขอบเขตที่ agent ทำเสร็จได้

เครื่องมือที่ใช้งานได้ผลมักเล็กโดยตั้งใจ: ทำหน้าที่เดียว ทำงานในเบราว์เซอร์ล้วน ไม่ต้องมีบัญชี ไม่ต้องมี backend ไม่มีอะไรถูกอัปโหลด ลองนึกถึงเครื่องมือเปรียบเทียบข้อความ เครื่องมือสร้างลวดลาย หรือเครื่องคิดเลข ขอบเขตแบบนี้พอดีกับไฟล์ HTML เดียว ซึ่งหมายความว่า agent สามารถสร้าง ทดสอบ และแก้ไขได้ในลูปเดียว และการโฮสต์ก็ฟรีทุกที่

สิ่งที่ต้องเตรียม

  • Claude Code — มาพร้อมแพ็กเกจ Claude Pro ($17 ต่อเดือนเมื่อจ่ายรายปี, $20 หากจ่ายรายเดือน) ใช้งานได้ทั้งใน terminal, แอป Claude เดสก์ท็อป หรือเบราว์เซอร์
  • โฟลเดอร์ว่าง และเบราว์เซอร์สำหรับทดสอบ
  • ความตั้งใจหนึ่งย่อหน้า — ดูตัวอย่างบรีฟในขั้นตอนที่สอง

จากไอเดียสู่การเผยแพร่ใน 6 ขั้นตอน

  1. ติดตั้ง Claude Code และลงชื่อเข้าใช้ด้วยบัญชี Claude ของคุณ จากนั้นเปิดในโฟลเดอร์ว่าง
  2. เขียนบรีฟ: เครื่องมือนี้ทำอะไร ทำเพื่อใคร และมีข้อจำกัดอะไร — ไฟล์ index.html เดียว CSS และ JavaScript แบบ inline ทุกอย่างคำนวณในเบราว์เซอร์ ไม่มีอะไรส่งไปยังเซิร์ฟเวอร์
  3. ให้ agent สร้างเวอร์ชันแรก จากนั้นเปิดไฟล์ในเบราว์เซอร์แล้วใช้งานเหมือนเป็นคนแปลกหน้า
  4. รายงานสิ่งที่ผิดพลาดด้วยภาษาธรรมดา — agent แก้ไขไฟล์โดยตรง ดังนั้น "ปุ่มคัดลอกไม่ทำงานบน Safari" ก็เป็นคำสั่งที่ครบถ้วนแล้ว
  5. ตรวจสอบเลย์เอาต์ที่สามความกว้างด้วยเครื่องมือ Responsive Preview ฟรี
  6. เผยแพร่ไฟล์ไปยังโฮสต์ static ฟรีที่ไหนก็ได้ และรัน Launch Checklist Prompt ก่อน — คู่มือตรวจสอบก่อนเปิดตัว อธิบายวิธีการไว้

ค่าใช้จ่ายจริง

เครื่องมือเล็ก ๆ หนึ่งตัวมีค่าใช้จ่ายเท่ากับค่าสมัครสมาชิก ไม่ใช่งบพัฒนาซอฟต์แวร์ ทั้งเว็บไซต์นี้ — ทุกเครื่องมือและทุกหน้าที่ฟรี — มีบันทึกการสร้างแบบเปิดเผยต่อสาธารณะ รวมค่าใช้จ่าย AI ทั้งหมดอยู่ที่ราว $565 ถึง $825 (ดูที่release notes) เครื่องมือหนึ่งตัวเป็นเพียงเศษเสี้ยวเล็ก ๆ ของจำนวนนั้น Claude Pro รวม Claude Code ไว้ในราคา $17 ต่อเดือนเมื่อจ่ายรายปี — ลิงก์แนะนำ Claude นี้ ช่วยให้คุณเริ่มต้นได้

เมื่อเครื่องมือเล็ก ๆ ไม่ใช่ทางเลือกที่เหมาะ

บัญชีผู้ใช้ การชำระเงิน ข้อมูลผู้ใช้ที่จัดเก็บไว้ หรืออะไรก็ตามที่อ่อนไหว ทำลายโมเดลแบบเบราว์เซอร์ล้วน สิ่งเหล่านี้ต้องการ backend จริงและงานวิศวกรรมจริง และหากสิ่งที่คุณต้องการจริง ๆ คือ landing page มากกว่าเครื่องมือ เทมเพลต Carrd คือเส้นทางที่สั้นกว่า