ทำเว็บด้วย AI จากงานจริง: ใช้ Claude ออกแบบจนขึ้นเว็บใน 3 วัน พร้อม prompt ทุกขั้น (case study)

เว็บนี้ไม่ได้มีบทความใหม่มาตั้งแต่ต้นปี 2025

ทั้งที่โบทำเว็บให้คนอื่นมา 20 กว่าปี (เว็บลูกค้าสวย เว็บตัวเองปล่อยร้าง โอยย 555)

ครั้งล่าสุดที่โบออกแบบเว็บนี้เองคือช่วงปี 2016-2017 ตอนนั้นออกแบบทำเป็น WordPress Theme แล้วให้น้อง Dev ในทีมขึ้นเป็น theme ให้คนในทีม หลังจากนั้นก็ไปทำงาน management ยาวๆ เว็บก็ค่อยๆ เก่าไปตามกาลเวลา

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

ซึ่งที่ผ่านมามีความคิดจะทำเว็บใหม่หลายต่อหลายครั้ง ก็ไม่สำเร็จซักที จนเกือบท้อจะจ้างน้อง designer และ dev มาให้ทำให้แล้ว ดีว่างานลูกค้ายุ่งมาก ก็เลยยังไม่ได้จ้าง 555

พอ 1-2 ปีมานี้ AI เก่งดีไซน์ขึ้นมาก เลยมีความหวัง รอบนี้เลยให้ Claude ช่วยตั้งแต่ออกแบบจนขึ้นเว็บจริง

• ออกแบบบน Claude Design
• ให้ Claude สร้างจริงใน WordPress + Elementor
• ย้ายข้อมูลจากเว็บเดิม หลักๆ คือ บทความ
• ทำ SEO, AEO และ Performance
• นำเว็บขึ้นโดเมนจริง

ทั้งหมดนี้ใช้เวลาทำ 3 วันถ้วน!

บทความนี้โบเลยอยากมาเล่าให้ฟังว่าการทำเว็บด้วย Claude AI ตั้งแต่ต้นจนจบนั้นทำยังไง โบแบ่งเป็น 7 ขั้นตามที่ทำจริง แต่ละขั้นมี prompt ให้ copy ไปลองได้เลย พร้อมตัวเลขประกอบทั้งเวลาและค่าใช้จ่าย และตรงไหนที่ยังต้องใช้คน

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

ทำเว็บด้วย AI ต้องมีอะไรบ้าง?

• Claude: โบใช้แพ็กเกจ Max ส่วน Claude Design ใช้ได้ทุกแพ็กเกจ แต่งานใหญ่ระดับทำทั้งเว็บจะกินโควต้าเยอะ ถ้าใช้แปลนฟรีหรือถูกกว่านี้จะทำให้ติด limit เร็วไม่ทันใจ
• WordPress กับ hosting: เว็บนี้อยู่บน Hostinger สร้างบนโดเมนทดสอบที่ Hostinger ให้มาก่อน เว็บเดิมยังเปิดใช้ได้ตามปกติระหว่างทำ
• Elementor กับ Elementor MCP: MCP คือตัวเชื่อมที่ทำให้ Claude สั่งงานใน Elementor ได้เอง (เว็บนี้ใช้ Elementor Pro ที่มีอยู่แล้ว)
• Novamira: ปลั๊กอินฟรีที่ให้ Claude รันโค้ดในเว็บได้ และไปทำงาน setup อื่นๆ บน WordPress ที่นอกเหนือจาก Elementor
• Claude in Chrome: ให้ Claude เปิดเบราว์เซอร์ทำงานทุกอย่างเอง ดูหน้าเว็บ ทดสอบ และวัดความเร็ว เป็นต้น

ขั้นที่ 1: ตั้งโจทย์ว่าเว็บมีไว้ทำอะไร

แม้ AI จะเก่งแค่ไหน ทำอะไรก็ได้ แต่หากเราไม่มีโจทย์ที่ชัด เราก็จะได้เว็บที่ดูดีออกมาอย่างรวดเร็ว แต่อาจจะไม่ตอบโจทย์

ก่อนเปิด Claude Design เราต้องตอบตัวเองให้ได้ก่อนว่าเว็บนี้มีไว้ทำอะไร?

อย่างของโบเอง ตั้งโจทย์ให้เว็บนี้ว่า:

1. ที่ที่คนมาเช็กหลังได้ยินชื่อโบ
2. เป็นที่เขียนบทความใหม่
3. ที่ที่ทำให้ AI รู้จัก Bow Kraivanich

โบวางไว้ว่าเว็บนี้จะเป็นที่ที่โบใช้กลับมาเขียนบล็อค มาแชร์ไอเดียต่างๆ พอมี 3 ข้อนี้ อะไรที่ไม่ตอบโจทย์ก็ตัดออกได้ง่ายขึ้นเยอะ ทำให้เว็บไม่บวมไปเรื่อยๆ เพราะโน่นก็อยากทำ นี่ก็อยากได้

ซึ่ง 3 ข้อนี้มาจากคำถามที่โบถาม Claude ก่อนเริ่มทำเว็บเลย ว่ายุคนี้ blog ยังต้องเขียนไหม มันมีหน้าที่อะไร คำตอบที่ได้คือหน้าที่ของ blog เปลี่ยนไปแล้ว จากเดิมที่เขียนตาม search volume ให้คนค้นเจอ กลายเป็นที่ที่คนมาเช็กหลังได้ยินชื่อเรา เป็นสิ่งที่ AI อ่านเพื่อรู้จักเรา

ถ้ามีเว็บเดิม: แปะลิงก์เว็บเดิมให้ Claude ดูด้วย แล้วให้แยกว่าอะไรเก็บ อะไรแก้ อะไรตัด เพราะตัว WordPress เดิมนั้นบวมมาก จาก plugin หรือหน้า ที่ไม่ได้ใช้แล้วเป็นสิบปี เลยจะลงใหม่ แล้วใช้ย้ายข้อมูลเฉพาะที่จะใช้จริงๆ มาแทน

ขั้นที่ 2: ให้ Claude ดูเว็บที่ชอบ เพื่อสร้างโครงเว็บไซต์ใหม่

หลังจากได้โจทย์ที่ชัดแล้ว step ที่ designer มืออาชีพทำก็คือการใช้ References (ไม่งั้นเราจะทำงานออกมาตรงใจลูกค้าได้ยาก)

ปกติแล้วเราควรไปเลือกเว็บที่ชอบมา 2-3 เว็บ ไม่ต้องเป็นเว็บในวงการเดียวกันก็ได้ ให้ Claude ช่วยดูว่าแต่ละเว็บมีอะไรที่น่ายืมมาใช้ แล้วค่อยให้เสนอว่าเว็บเราควรมีกี่หน้า แต่ละหน้ามีอะไรบ้าง

โบให้ Claude ดูเว็บที่ชอบ 3 เว็บ: justinwelsh.me, sive.rs และ Medium ทั้ง 3 เว็บเหมือนกันตรงที่ content เป็นพระเอก อ่านง่าย ตัวประกอบหลักคือ text

Claude แยกให้ว่าควรยืมอะไรจากเว็บไหน:

• ลำดับหน้าแรกมาจาก Justin
• ไอเดียเล่าชีวิตเป็นช่วงๆ ใน 10 วินาที และหน้า uses มาจาก sive.rs
• และหน้าบทความที่ typo & layout สวยคลีนอ่านง่ายแบบ Medium

สุดท้ายเว็บโบเหลือ 5 หน้าซึ่งไม่ต่างจากเว็บเดิม ได้แก่ Home, Writing, About, Resources และ Subscribe โดยใช้เมนูหัวข้อเป็นภาษาอังกฤษ ส่วนเนื้อหาเป็นภาษาไทย

หน้า Tools เดิม โบมีลังเลอยู่ว่าควรยังมีไหม เพราะคิดว่ามัน low level ไปหรือเปล่า แต่พอเห็นหน้า uses ของ sive.rs ก็ตัดสินใจเก็บไว้ (ลิสต์ของที่เราใช้มันสนุกดีนะ) กลายมาเป็นหน้า Resources ที่ดูง่ายขึ้น

ทิป: ทุกหน้าที่เพิ่มคือดีไซน์ที่ต้องทำเพิ่ม เนื้อหาที่ต้องเขียน และหน้าที่ต้องดูแลต่อ ตัดตั้งแต่ตอนนี้ง่ายที่สุด

ขั้นที่ 3: ออกแบบบน Claude Design เริ่มจากหน้า Home

Claude Design คือเครื่องมือออกแบบของ Claude AI (จาก Anthropic) ที่เราพิมพ์บอกว่าอยากได้อะไร แล้วได้ดีไซน์เวอร์ชันแรกทันที ทั้งหน้าเว็บ หน้าแอป สไลด์ หรือกราฟิก จากนั้นค่อยแก้ต่อด้วยการพิมพ์คุย หรือจะกดแก้ตรงจุดที่ไม่ชอบได้อย่างละเอียดด้วยตัวเอง

ตอนนี้ Claude Design ใช้ได้ทุกแพ็กเกจ รวมแพ็กเกจฟรี และสั่งให้ออกแบบในแชทของ Claude ได้เลย งานที่ได้เก็บเป็น artifact เปิดกลับมาแก้หรือแชร์ลิงก์ได้จากแท็บ Artifacts (ที่มา)

ถามแบบให้ Claude เป็นนักออกแบบมืออาชีพก่อน

นักออกแบบมืออาชีพจะไม่ทำงานทันที แบบข้อมูลไม่ครบ โดยเฉพาะข้อมูลสำคัญ ฉะนั้นเราต้องให้ Claude แปลงร่างเป็นนักออกแบบมืออาชีพซะก่อน ด้วยการสั่งให้ Claude ถามเรากลับ

คำตอบที่ได้มา: ใช้สีเดียว ฟอนต์ใช้แค่ 2 น้ำหนัก ระยะบรรทัดภาษาไทยต้องมากกว่าอังกฤษ (เพราะมีสระบนล่างกับวรรณยุกต์ซ้อนกัน) คอลัมน์เดียวกว้าง 680px และยังบอกด้วยว่าสี coral เดิมของโบ ตัวหนังสือขาวบนปุ่มอ่านยาก ต้องเข้มขึ้นอีกนิด

คำตอบนี้เป็นจุดตั้งต้น เลือกใช้เฉพาะข้อที่ใช่ก็พอ (โบเองก็ไม่ได้ใช้ทุกข้อ)

ทำหน้า Home ให้นิ่งก่อน แล้วค่อยไปหน้าอื่น

เวลาเริ่มแนะนำว่าควรเริ่มที่หน้า Home ก่อน แล้วพอหน้าหลักอย่างหน้า Home นิ่งแล้ว ก็ค่อยๆ ขยับไปทำหน้าที่สำคัญน้อยลงไปเรื่อยๆ ทำแบบนี้จะทำให้ efficient กว่าในการทำงาน เพราะไม่ต้องรอ AI แก้นานเกินไป เราเองก็แก้งาน AI น้อยลง

สุดท้ายได้ออกมา 21 screens ทั้ง desktop และ mobile: Home, Writing, หน้าบทความ, About, Subscribe, Wall of Love (อันนี้ทำไว้แต่แรก แต่ยังไม่ได้ทำเมนู หรือลิงก์เชื่อมไป), Thank you, 404 และหน้า design system

ล็อก design system ก่อนสร้างจริง

Design system คือการกำหนดว่าเว็บเราใช้สีอะไร ฟอนต์อะไร ขนาดเท่าไหร่ เว้นระยะแค่ไหน ถ้าไม่ล็อกตรงนี้ก่อน พอสร้างจริงแต่ละหน้าจะค่อยๆ เพี้ยนไปคนละทาง

ส่วนที่โบใช้เวลามากที่สุดคือฟอนต์ (เรื่องนี้โบจุกจิกเป็นพิเศษ เปลือง Token จากตรงนี้ไปหลายล้านแน่ๆ) ลองฟอนต์หัวข้อหลายตัว ทั้ง Noto Serif Thai, Taviraj, Maitree ตอนแรกบอกไปเลยว่าไม่เอา IBM Plex เพราะก็อยากได้อะไรใหม่ๆ สุดท้ายกลับมาจบที่ IBM Plex Sans Thai ในวันเดียวกันนั่นแหละ 555

สีแดงก็เช่นกัน เริ่มที่ #E30613 ลอง #C21D2E ตอนนี้ใช้ #CA0511 และบอกตรงๆ ว่ายังไม่แน่ใจ (แต่ใช้ไปก่อนละกัน!)

ข้อดีคือทุกสี ฟอนต์ และขนาดถูกเก็บเป็น variable ไว้ที่เดียว วันไหนเปลี่ยนใจเรื่องสีแดงอีกรอบ ก็แก้แค่ 4 ตัว ทั้งเว็บก็จะเปลี่ยนตามเลย ไม่ต้องตามแก้ทุกหน้า

หากใครพลาดไม่สรุป design system ตรงนี้ให้ดี จะเจอปัญหาตามมาคือ เวลาสร้างเว็บจริงจะมีรูปแบบตัวอักษร สี ปุ่มหลากหลายเกินจะ Maintain

Claude Design ทำอะไรได้ดี

• เห็นภาพเร็ว ได้ดูทั้ง desktop และ mobile ในที่เดียว ไม่ต้องนั่งจินตนาการเอาเอง
• ลองหลายทางได้โดยไม่เปลืองแรง อยากเห็นฟอนต์อีกตัว ปรับเฉดสี ก็พิมพ์บอก แป๊บเดียวเห็นภาพ ตัดสินใจได้
• ได้ design system ที่เอาไปใช้ต่อตอนสร้างจริงได้เลย ไม่ต้องแปลงจากภาพอีกทอด

ขั้นที่ 4: เลือกระบบที่เราแก้เองได้

Claude Design ให้ดีไซน์ แต่เว็บจริงต้องมีบทความ ฟอร์มสมัครอีเมล SEO และระบบหลังบ้านที่เราเข้าไปแก้เองได้

ซึ่งตอนแรกวางแผนไว้ว่าจะใช้ default editor ของ WordPress แต่สุดท้ายโปรเจกต์นี้ก็เลือก Elementor เพราะ:

ข้อ 1: อยากให้หลังจากนี้เข้าไปแก้เองได้ง่ายๆ ไม่ต้องค่อยสั่ง AI ทุกครั้งที่จะเปลี่ยนแค่คำๆ เดียว หรือดีเทลเล็กๆ น้อยๆ

ข้อ 2: หลังๆ เว็บลูกค้าโบเกือบทั้งหมดใช้ Elementor คนใช้ทั่วโลกก็เยอะ ยังไง Stack นี้ก็น่าจะอยู่ไปอีกซักพัก

ข้อ 3: ประกอบกับอยากจะลองทำแบบ hands-on ด้วยตัวเอง ให้รู้เข้าใจแจ่มแจ้ง จะได้เอาไปแนะนำเวลาทำเว็บให้ลูกค้าต่อได้จริง

ข้อ 4: Basicmagic ก็ subscribe Elementor Pro อยู่แล้ว จึงอยาก utilize สิ่งที่มีอยู่ให้เต็มที่

ตัดสินใจเลือก stack ได้ ก็ลุยต่อได้!

ถ้ามีเว็บเดิม: ถ้าเว็บเดิมเป็น WordPress อยู่แล้ว ใช้ต่อจะง่ายที่สุด บทความเดิมย้ายมาได้โดยลิงก์ไม่เปลี่ยน แต่ก็ไม่ใช่ว่าจะย้ายจากระบบอื่นไม่ได้ Claude จัดให้ได้หมด

ขั้นที่ 5: ต่อ Claude เข้ากับ WordPress และ Elementor ให้สร้างจริง

โบให้ Claude สร้างบนเว็บทดสอบก่อนทั้งหมด เว็บเดิมยังเปิดใช้ได้ตามปกติ พอเสร็จและตรวจครบแล้วค่อยย้ายขึ้นโดเมนจริง

Claude ทำเว็บขึ้น WordPress ยังไง

• ดูดีไซน์จาก Claude Design แล้วขึ้นหน้าเว็บใน Elementor ผ่าน MCP (ตัวเชื่อมที่ทำให้ Claude สั่งงานใน Elementor ได้เอง)
• เขียนโค้ดเสริมเท่าที่จำเป็น เช่น สารบัญบทความ และตัวนับเวลาอ่าน ส่วนมากเป็น Functions ที่เราสร้างขึ้นที่ไม่มีใน default ของ WordPress (ข้อนี้ดีมาก เพราะเราแทบจะไม่ใช้ plugin เล็กๆ ที่ไม่จำเป็นเลย ทำให้เว็บเบา และ maintain ได้ง่าย)
• เปิดเบราว์เซอร์ดูหน้าจอจริง ทดสอบ และวัดความเร็วและประสิทธิภาพต่างๆ

งานที่ต้องทำในระบบหลังบ้าน เช่น ย้ายบทความ ตั้ง redirect หรือตั้งค่าต่างๆ โบให้ Claude ใช้ Novamira ซึ่งให้สิทธิ์ AI เท่ากับ admin เลยใช้บนเว็บทดสอบเท่านั้น พอเว็บเสร็จ โค้ดที่ Claude เขียนไว้ก็ย้ายไปเก็บใน Code Snippets (ปลั๊กอินที่เราเปิดดู แก้ หรือปิดโค้ดแต่ละชิ้นได้เอง) แล้วปิด Novamira ไป (จะให้ AI แก้ก็ค่อยเปิดใหม่)

กฎที่โบตั้งให้ Claude

ตรงนี้คือส่วนที่คนทำเว็บมานานอย่างโบอดไม่ได้ 555 เพราะถ้าไม่บอก AI ก็จะทำให้ “ออกมาหน้าตาเหมือน” แต่ข้างในต๊ะติ๊งโหน่ง คือเขียน Hard code แล้วคนทั่วไปแก้ content เองไม่ได้

• ใช้ element ที่ Elementor มีให้ ไม่เขียนโค้ดเองถ้าไม่จำเป็น
• ทุกสี ฟอนต์ ขนาด เป็น variable และ class ต้องใช้ซ้ำได้
• หากเขียนโค้ดเพิ่ม ต้องรวมไว้ที่เดียว และเก็บเป็น record

วางกติกานี้ตั้งแต่ตอนเริ่มให้ Claude สร้าง:

ย้ายบทความเดิม 66 บท แบบทำให้บทความดีขึ้น

บทความเก่ายังมีคนเข้ามาจาก Google ทุกเดือน สิ่งสำคัญในการย้ายคือ ลิงก์ห้ามเปลี่ยน ถ้าเปลี่ยนคือเสียอันดับที่สะสมมาหลายปี

Claude ย้ายทั้ง 66 เรื่องพร้อมรูป ซ่อมส่วนที่เสียระหว่างย้าย 69 จุด รวมถึง improve สิ่งที่โบอยากจะเข้าไปแก้ไขในทุกบทความมานานแต่ไม่มีเวลา เช่น

• แก้ข้อมูลที่ outdated
• แก้ลิงก์เสียต่างๆ
• แก้ CTA
• แก้ Structure ของบทความ เช่น H2, H3 เพื่อให้อ่านง่าย

นอกจากนั้นทำ template บทความใหม่ที่มีฟังก์ชันเน้นเรื่องประสบการณ์การอ่านโดยเฉพาะ

• Outline เนื้อหาในบทความ
• “สรุป 30 วิ” ซึ่งแน่นอนว่าสรุปด้วย AI
• ประเมินเวลาอ่านที่นับภาษาไทยตามจำนวนตัวอักษร ที่ค่อนข้าง accurate

ขั้นที่ 6: ทำ SEO, AEO และความเร็ว

เว็บสวยแต่ไม่มีใครเจอ (ทั้งคนและ AI) ก็เท่านั้น ส่วนนี้ Claude ทำเกือบทั้งหมด

SEO

• ทำ redirect ลิงก์เก่าที่หน้าหายไป ให้ไปหน้าใหม่ที่ใกล้ที่สุด
• ส่ง sitemap ให้ Google Search Console และต่อ GA4
• ใส่ title กับ description ทุกหน้า
• แก้ outdated content ต่างๆ ในหน้าที่จำเป็น

AEO (Answer Engine Optimization: ทำให้ AI อย่าง ChatGPT หยิบเว็บเราไปตอบ)

• ใส่ schema บอก Google และ AI ว่าโบคือใคร ทำอะไร ทำงานที่ไหน
• ทำไฟล์ llms.txt สรุปเว็บและบทความทั้งหมดให้ AI อ่าน และอัปเดตเองทุกครั้งที่มีบทความใหม่

ความเร็ว

ก่อนแก้ หน้า Home บนมือถือทำผลการทดสอบผ่าน PageSpeed Insights ได้ 82 / 95 / 73 / 100

ซึ่งถือว่าค่อนข้างจะดีอยู่แล้ว ด้วยความที่ nature ของเว็บโบมันเป็น text based รูปน้อย

และแผนที่วางไว้แต่แรกว่าจะใช้ plugin ที่น้อยที่สุด แต่ให้ Claude เขียนโค้ดเองในรายละเอียด ก็ช่วยได้มากๆ

แต่แน่นอนว่าก็ยังมี room for improvement อยู่

ฉะนั้นพอติด cache และ optimized มาทดสอบอีกครั้งก็ได้คะแนนเต็ม 100 หรือเกือบเต็มเกือบทุกช่อง

หน้า	Mobile (Performance / Accessibility / Best Practices / SEO)	Desktop
Home	97 / 100 / 100 / 100	99 / 100 / 100 / 100
บทความ	99 / 97 / 100 / 100	98 / 97 / 100 / 100
About	93 / 100 / 100 / 100	97 / 100 / 100 / 100

ปล. ใครบอกว่าใช้ Elementor แล้วเว็บบวม หนัก โหลดช้า อยากให้ลองปรับโครงสร้างใหม่

ขั้นที่ 7: ทดสอบและนำเว็บขึ้นโดเมนจริง

การทดสอบในขั้นนี้ โบให้ Claude ทดสอบสิ่งที่ตัวเองทำ (ทำเองตรวจเอง) โดยบอกให้ไล่ตรวจในทุกมุม ทั้ง design, performance, SEO/AEO ซึ่งโบแนะนำเป็นอย่างยิ่ง

เพราะตั้งแต่ลงมือทำเองจนโตมาดูแลทีม โบตรวจงานน้องๆ และทีมอื่นมาเยอะมาก ซึ่งกินเวลามากๆ การให้ AI มาแบ่งเบาตรงนี้คือชีวิตดีจริงๆ

แต่ถึงอ่านมาถึงตรงนี้จะดูเหมือนราบรื่น จริงๆ แล้วมีหลายจุดที่ถ้าไม่ตามเช็กเอง เว็บจะขึ้นไปพร้อมปัญหาแบบไม่รู้ตัว

4 จุดที่พลาด

1. ฟอร์มสมัครอีเมล: Claude รายงานว่าเชื่อม Kit สำเร็จ ระบบก็ตอบว่าส่งได้ แต่จริงๆ Kit กักข้อมูลไว้เพราะมองว่าเป็นบอท ถ้าไม่เจอก่อนขึ้นเว็บ คนที่สมัครเข้ามาจะหายหมด สุดท้ายเปลี่ยนมาใช้ฟอร์มของ Kit เอง
2. ย้ายโดเมนแล้วฟอนต์หาย: ไฟล์ฟอนต์ที่เก็บไว้ยังชี้ไปที่โดเมนทดสอบ พอเปลี่ยนเป็นโดเมนจริงเบราว์เซอร์ก็ไม่ยอมโหลด
3. สคริปต์จากโดเมนเก่า: ปลั๊กอินของ Kit โหลดสคริปต์จากโดเมนสินค้าเก่าที่ไม่ปลอดภัยแล้ว คะแนน Best Practices เลยตกเหลือ 73 ปิดสคริปต์นั้นแล้วกลับมา 100
4. ชื่อบทความใน Google: มี 2 บทความที่ชื่อขึ้นว่า “Loading…” ติดมาจากเว็บเก่า

บทเรียนที่ใหญ่ที่สุดคือข้อ 1:

อย่าเชื่อแค่คำว่า “เสร็จแล้ว” ให้ทดสอบกับของจริงเสมอว่าข้อมูลเข้าไหม ใช้ได้จริงไหม เช่น สมัครอีเมลเองแล้วเข้าไปดูใน Kit ว่าชื่อเราเข้าไหม หรือสั่งให้ AI โชว์หลักฐานทุกครั้ง

ส่วนการย้ายขึ้นโดเมนจริง โบยังกดใน hosting เอง (ใครทำไม่เป็น เดี๋ยว Claude บอกขั้นตอนให้ได้)

ใช้เวลาและค่าใช้จ่ายเท่าไหร่?

ตัวเลขจริงจากบันทึกการทำงาน ณ วันที่เว็บใหม่ขึ้นจริง (28 ต.ค. 2026)

• ใช้เวลา: 3 วัน (ออกแบบ 26 ต.ค. สร้างและขึ้นจริง 27-28 ต.ค.)
• เวลาที่ Claude ทำงานจริงช่วงสร้าง: ประมาณ 13 ชั่วโมง จากทั้งหมด 32 ชั่วโมง ที่เหลือคือรอโบตอบ ตรวจงาน และกดตั้งค่าใน hosting ต่างๆ
• ขนาดงาน: ดีไซน์ 21 หน้า, element ใน Elementor 6,045 ชิ้น, variable 74 ตัว, บทความ 66 เรื่อง, ไฟล์รูป 347 ไฟล์
• Token: ราว 1,077 ล้าน เกือบทั้งหมดคือการอ่าน context เดิมซ้ำทุกครั้งที่ตอบ ไม่ใช่การเขียนใหม่ (ทำงานยาวๆ ในแชทเดียว context ก็จะสะสมไปเรื่อยๆ)
• ถ้าคิดเป็นราคา API: ประมาณ USD 304
• ที่จ่ายจริง: โบใช้ Package Max เดือนละ $100 ซึ่งหลังจากที่ทำเว็บนี้เสร็จ (และทำเว็บอื่นต่อจนเสร็จ) usage สัปดาห์ยังแค่ 50% ถ้าคำนวนเป็นรายจ่าย โบน่าจะจ่ายค่าทำเว็บนี้ให้ Claude แค่ไม่ถึง 1,000 บาท!

ถ้าจะเทียบกัน: ตอนทำเว็บแรกของ basicmagic.co เมื่อปี 2024 โบออกแบบเอง พัฒนาเองบน Webflow เขียนบล็อกเอง ใช้เวลาเกือบ 2 เดือน เพราะว่าเรียนไปทำไป (เคยเล่าไว้โพสต์นี้) พอเห็นว่าเวลาที่เคยหมดไปกับการลงมือทำเอง ตอนนี้ย้ายมาอยู่ที่การวางแผน ตัดสินใจ และตรวจงานแทน โอโห มันทำอะไรได้เยอะมากๆ

งานที่คนยังต้องทำเอง

• กดย้ายโดเมนใน hosting: เอาจริงๆ Claude ทำได้นะ แต่เรื่องแบบนี้โบอยาก Make sure ว่ามันเวิร์ค จริงๆ ด้วยตัวเอง
• ล็อกอินและ verify กับ Google: อันนี้เป็นทุกงานปกติอยู่แล้ว
• ตั้งค่าใน Kit: Claude ช่วยได้ แต่โบยึดหลักว่าถ้าอะไรไม่เคยทำมาก่อน หรือทำมานานจนลืมไปแล้ว ก็จะขอทำเองก่อนให้ AI ทำให้
• ตัดสินเรื่องรสนิยม ภาษา และอะไรควรเล่าบนเว็บ

ซึ่งโบว่าเรื่องที่ยากที่สุดมันคือ “direction” นี่ล่ะ ก่อนที่โบจะทำเว็บใหม่ โบก็ต้องไปนั่งคิดมาก่อนว่าแล้ว personal brand เราจะเป็นอะไร ซึ่งนี่คือจุดที่แก้ไปมาเยอะสุด

Checklist ทำเว็บด้วย AI 7 ขั้น

1. ตั้งโจทย์ว่าเว็บมีไว้ทำอะไร 3 ข้อ และอะไรที่ไม่ต้องทำ
2. ให้ Claude ดูเว็บที่ชอบ 2-3 เว็บ แล้วเสนอโครงเว็บ ให้มีหน้าน้อยที่สุด
3. ออกแบบบน Claude Design: ถาม direction ก่อน ทำหน้า Home ให้นิ่ง แล้วล็อก design system
4. เลือกระบบที่เราแก้เองได้
5. ต่อ Claude เข้ากับเว็บทดสอบ ตั้งกติกา แล้วให้สร้าง (ถ้ามีเว็บเดิม ย้ายบทความโดยลิงก์ไม่เปลี่ยน)
6. ทำ SEO, AEO และวัดความเร็ว
7. ทดสอบและนำเว็บขึ้นโดเมนจริง

ถ้าวันนี้ยังตอบข้อ 1 ไม่ได้ เครื่องมือเก่งแค่ไหนก็จะได้เว็บสวยๆ ที่ไม่รู้จะเอาไปทำอะไรต่อ

คำถามที่พบบ่อย

สรุป

ตอนนี้ AI สร้างเว็บแทนได้เกือบทั้งระบบ ตั้งแต่ร่างดีไซน์ ขึ้นหน้าเว็บ ย้ายบทความ ไปจนถึงปรับแต่งความเร็ว และ SEO/AEO

ส่วนที่ยังเป็นของเราคือการตัดสินใจ

เว็บนี้มีไว้ทำอะไร / หน้าตาแบบไหนคือเรา / อะไรที่ใช้ได้จริง

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

ปล. (ช่วงฝากร้านแล้วนะ! 😁) ถ้าอยากได้เว็บที่ทั้งสวย ทั้งติด Google ทั้งได้ลูกค้า แต่ไม่อยากนั่งคุม AI เอง Basicmagic เราทำแบบนี้ให้ธุรกิจบริการอยู่ค่ะ ทักมาคุยได้เลย