ai · claude-code · web-design
Build $10,000 Websites using Claude Code (Ultimate Guide)
สร้างเว็บไซต์ระดับ $10,000 ด้วย Claude Code (ฉบับสมบูรณ์)
▶ ดูบน YouTube
⬇ ดาวน์โหลด/อ่าน transcript
แก่นคลิป
สอนทำเว็บไซต์คุณภาพระดับ “ราคา $10,000” (งานฟรีแลนซ์มืออาชีพ) ด้วย Claude Code desktop app ตั้งแต่ติดตั้ง → ติด design skills 2 ตัว → เขียน prompt เดียว → ขัดเงาด้วย motion/cursor → deploy ขึ้นโดเมนจริง โดยจ่ายจริงรวมแค่ ~$60 และไม่ต้องเขียนโค้ดเป็น
🔍 บทวิเคราะห์ฉบับสมบูรณ์
📢 ใจความหลัก
คลิปอ้างว่า “ใครก็ได้” (ไม่ต้องเขียนโค้ดเป็น) สามารถใช้ Claude Code desktop app + 2 design skills สร้างเว็บคุณภาพระดับฟรีแลนซ์ $10,000 ได้ใน prompt เดียว แล้วขัดเงาด้วย motion/cursor จนรู้สึก “แพง” และ deploy ขึ้นโดเมนจริงด้วยงบรวม ~$60
3 ข้อโต้แย้งหลัก
- เว็บแพงต่างจากเว็บถูกที่ 8 องค์ประกอบที่ “เทรนได้” (taste/substance/felt quality) ไม่ใช่งบ — skill + checklist บังคับให้ครบทั้ง 8
- ความได้เปรียบเชิงโครงสร้างของ generative code เหนือ template builder: เขียนใหม่จากศูนย์ = custom 100% ไม่ติดกับดัก “เว็บเหมือนกันหมด”
- จุดตัดระหว่าง pro vs generic อยู่ที่ “คนขับ” ไม่ใช่ AI: เกรดตัวเองตาม checklist + ไล่หา section ที่แบนด้วยสายตามนุษย์ + สั่งด้วยเจตนา
เริ่มยังไง
ติดตั้ง Claude Code Pro → ติด Front-end Design + UI UX Pro Max → เปิด auto mode → เขียน prompt เดียว ปิดท้าย “ask me clarifying questions” → ตอบ 7 คำถามให้ละเอียด → ปล่อยสร้าง
โทนคลิป
โทน tutorial ขายของ (affiliate-driven) — มี sponsor หลายเจ้า (Claude/ElevenLabs/Hostinger) แต่ workflow แกนกลางใช้งานจริงได้ และซื่อสัตย์เรื่องข้อจำกัด (imagery ทำเองไม่ได้, ต้องคนขับ pass สุดท้าย)
⚙️ Use cases ที่ผู้พูด demo
- สร้าง single-page static site (ร้านอาหาร/portfolio/landing) จากศูนย์ด้วย prompt + clarifying questions
- ยกระดับ default AI design ด้วย skills: แบนฟอนต์เกร่อ + ดึง 57 styles/95 palettes/56 font pairings
- Hero scroll cinematic ด้วย component จาก 21st.dev (copy prompt → Claude reimplement ใน stack ของเรา)
- เติม micro-interaction/cursor parallax ทีละ section เพื่อยกจาก “look expensive” เป็น “feel expensive”
- AI asset pipeline: ChatGPT image → ElevenLabs → VO3.1 video → Topaz upscale (ให้ Claude เขียน image prompt ให้)
- Deploy แบบ migrate-existing-site ขึ้น Hostinger พร้อมโดเมนฟรีปีแรก
เครื่องมือเสริม
Claude Code Pro $20/mo · Front-end Design (Anthropic) · UI UX Pro Max · Dribbble/Awwwards/Pinterest · ChatGPT image · ElevenLabs · Google VO3.1 · Topaz · 21st.dev · Hostinger Premium/Business
ข้อควรระวัง
- Imagery เป็นเสาที่ Claude แก้เองไม่ได้ — ต้องเตรียม asset เอง (custom หรือ AI gen)
- React component จาก 21st.dev ลงใน static site ไม่ได้ตรงๆ — Claude จะ push back (ดีแล้ว) ต้องเข้าใจว่า stack ไหนเหมาะโปรเจกต์ไหน
- Responsive ≠ mobile-designed — ต้องสั่ง pass มือถือเฉพาะ ไม่งั้นได้แค่จอย่อ
- Pass หา “section ที่แบน” AI ทำแทนไม่ได้ ต้องมีสายตามนุษย์ขับ
- คลิปมี affiliate หลายเจ้า — ราคา/ดีล (50% ElevenLabs, 10% Hostinger) เป็น promo ต้องเช็คจริงตอนใช้
🎯 เทียบกับงาน TOPMANIDMB
คลิปนี้ “ตรงเป้า” กับ TOPMANIDMB มาก เพราะเรา build เว็บคดี/dashboard ด้วย Claude Code + /web-design + /idmb-style + ui-ux-pro-max อยู่แล้ว (case.topmanidmb.com, withdraw.topmanidmb.net, crypto/news intel). คลิปเป็น “external validation” ของ pipeline เราเอง และมีเทคนิคที่หยิบมาเสริมได้ทันที
เอามาใช้ / ไม่เอา
- เอามาใช้“ask me clarifying questions” ปิดท้าย prompt — บังคับ clarify ก่อนสร้าง ลด rework; เสริมเข้า /web-design + /idmb-style workflow
- เอามาใช้เกรดตัวเองตาม checklist 8 ข้อ ก่อน claim เสร็จ — ตรงกับ feedback ของเราเป๊ะ “screenshot ก่อน claim งาน UI” (เคยโดน 30/100 เพราะ claim โดยไม่ตรวจ)
- เอามาใช้สั่งแก้เป็น batch + นำด้วยเจตนา (“ให้แพงขึ้น/ดูทางการขึ้น”) ประหยัด token — เข้ากับวินัย token ของ fleet (RTK) และ /idmb-style
- เอามาใช้pass หา “section ที่แบน” + micro-interaction ทีละจุด — ยกระดับ dashboard คดี/landing ให้รู้สึก premium
- พิจารณา21st.dev เป็นคลัง component ฟรี — ดึง scroll/hero effect มาใช้ได้ แต่ระวัง stack (เราใช้ static HTML + Tailwind, ระวัง React)
- ระวัง/ไม่เอาตรงๆAI image asset (ChatGPT/VO3.1) — งานคดีห้ามใช้ภาพปลอม/สังเคราะห์แทนหลักฐานเด็ดขาด ใช้ได้เฉพาะ decorative/marketing บน sanitized public เท่านั้น
- ไม่เอาHostinger deploy flow ในคลิป (zip+migrate) — ของเรามี pipeline scp+nginx+CF อยู่แล้ว ดีกว่าและ controlled กว่า
Score card
ความเกี่ยวข้องกับงานเรา9/10
เรา build เว็บด้วย Claude Code + ui-ux-pro-max อยู่แล้ว ตรงสายมาก
ความใหม่ของเทคนิค6/10
หลักการ (clarify/checklist/batch/intent) เรารู้แล้ว แต่ตกผลึกดี + 21st.dev เป็นของใหม่ที่น่าลอง
นำไปใช้ได้ทันที8/10
clarifying-questions + self-grade + batch-by-intent หยิบเข้า workflow ได้เลย
ความน่าเชื่อถือ7/10
workflow จริงใช้ได้ แต่เป็นคลิป affiliate — ตัดส่วนขายของออกแล้วแก่นแข็ง
สรุปคำตัดสิน: ✅ คุ้มดู — ใช้เป็น checklist ยกคุณภาพเว็บ TOPMANIDMB. หยิบ 4 เทคนิคเข้า /web-design + /idmb-style ทันที (clarifying-questions / self-grade 8-point / batch-by-intent / flat-section motion pass). ข้ามส่วน AI image asset สำหรับงานคดี และคงใช้ pipeline deploy ของเราเอง (scp+nginx+CF) ไม่ใช่ zip+Hostinger
⭐ Key Takeaways
1
เว็บ $10,000 = 8 องค์ประกอบที่เทรนได้ (taste/substance/felt quality) ไม่ใช่เรื่องงบ
2
Skills แก้ปัญหา default AI design ที่ generic — Front-end Design (แบนฟอนต์เกร่อ) + UI UX Pro Max (57/95/56)
3
Prompt เดียวคือหัวใจ: ปิดท้าย “ask me clarifying questions” บังคับ clarify 7 ข้อ ก่อนสร้าง
4
Claude push back ปกป้อง architecture (ปฏิเสธ React บน static site) — AI ที่ดีไม่ทำตามคำสั่งทุกอย่าง
5
จุดตัด pro vs generic = คนขับ: เกรดตัวเองตาม checklist + หา section แบน + สั่งด้วยเจตนา
6
“feel expensive” มาจาก motion/cursor ทีละ section ที่ subtle — ไม่ใช่ “look expensive” เฉยๆ
7
Responsive ≠ designed-for-phone — ต้องสั่ง pass มือถือเฉพาะ
8
งบจริงรวม ~$60: Claude Pro $20 + Hostinger ~$43/ปี (hosting+domain+email)
📑 สรุปตาม Section
1. Claude Code คืออะไร + นิยาม “$10,000 website”
0:00–2:15- Claude Code = AI coding assistant ที่เขียนโค้ดเว็บให้จากคำอธิบายภาษาคนแบบ real-time ใช้ผ่าน desktop app จบในหน้าต่างเดียว ไม่ต้องตั้ง dev environment
- นิยามเว็บ $10,000 = 8 องค์ประกอบ: point of view, typography, color, hierarchy, imagery, motion, mobile, และ “ของล่องหน” (ความเร็ว/ความเนียน)
- 8 ข้อจัด 3 กลุ่ม: taste (รสนิยม) · substance (เนื้อหา) · felt quality (ความรู้สึก)
- ทำไม Claude ชนะ Wix/Squarespace: no-code builder เริ่มจากเทมเพลต → เว็บออกมาเหมือนกันหมด; Claude เขียนโค้ดใหม่จากศูนย์ตาม brief = custom 100% โดยไม่ต้องเรียนเขียนโค้ด
2. ติดตั้ง Claude Code
2:15–3:46- สมัครที่ claude.com เลือกแผน Pro ($20/เดือน ขณะถ่ายทำ) ครอบคลุมทุกอย่างในคลิป
- โหลด Claude Code desktop app → ติดตั้ง → sign in → สลับจาก chat mode เป็น code mode (Cmd+3 / Ctrl+3)
- สร้างโฟลเดอร์เปล่าให้โปรเจกต์ แล้วเลือกเป็น workspace — Claude ทำงานดีที่สุดเมื่อมีโฟลเดอร์ของตัวเอง
- หมายเหตุ: UI อาจเปลี่ยนตามเวอร์ชัน — จับ “concept” ไม่ใช่จำตำแหน่งปุ่ม
3. ติด 2 Design Skills + เปิด Auto Mode
3:46–5:59- Skills = คู่มือสอน Claude เฉพาะด้าน ติดครั้งเดียวใช้ตลอด — แก้ปัญหา default design ของ AI ที่ออกมา generic (ฟอนต์ซ้ำ สีซ้ำ layout เดาได้)
- Skill #1 Front-end Design (โดย Anthropic, ฟรี): รันเบื้องหลัง แบนฟอนต์ที่ใช้เกร่อ ดัน Claude ไปทาง bold design + งานเขียน copy แบบยับยั้ง — ติดด้วย “install this skill” ติดแบบ global
- Skill #2 UI UX Pro Max (community, ฟรี): 57 UI styles / 95 palettes / 56 font pairings — เรียกตรงเมื่อต้องการ design ใหญ่ ติดด้วย “install this plugin using npm” (วลีต้องตรงเพื่อให้ลงผ่าน terminal สะอาด)
- เปิด auto mode (มุมซ้ายล่าง) ให้ Claude ทำงานต่อเนื่องโดยไม่หยุดขออนุญาตทุกสเต็ป
4. เขียน Prompt + References + Clarifying Questions
5:59–9:20- ตัวแปรสำคัญคือ “brief” — ยิ่งเฉพาะเจาะจง ผลยิ่งดี ถ้าอธิบายรสนิยมเป็นคำไม่เก่งให้ใช้ references
- References = screenshot เว็บที่ชอบ 3–5 เว็บ ส่งให้ Claude match สไตล์ (โชว์ง่ายกว่าอธิบาย) แหล่ง: Dribbble · Awwwards · Pinterest
- Prompt จริง: “/UI-UX-Pro-Max + brief” ปิดท้ายด้วย “ask me clarifying questions” — บรรทัดนี้บังคับ Claude หยุดคิดก่อนสร้าง
- Claude ถามกลับ 7 ข้อ (ชื่อร้าน/สไตล์/sections/คนเขียน copy/tech stack/ระดับ animation) + เสนอ 3 ทิศทางดีไซน์ — คำตอบช่วงนี้กลายเป็นทั้งเว็บ ตอบละเอียดสุด = สู้กับ Claude ทีหลังน้อยสุด
5. เผยผลงาน + เกรดตาม Checklist (กลุ่ม taste)
9:20–11:40- Claude ใช้เวลา ~3 นาทีอ่าน brief ก่อนเขียนโค้ดบรรทัดแรก แล้วอีก 4–5 นาทีสร้างจริง
- Point of view: มีทิศทางจริงตั้งแต่ตอบคำถาม ไม่ใช่แค่ mood board
- Typography: เลือก Francis (หัวข้อ) + Inter (เนื้อหา) — ภายหลังเปลี่ยน Inter ทิ้งเพราะเป็นฟอนต์ AI ที่เกร่อสุด
- Color: 5 ค่าสี (near black/warm cream/oxblood/brass/slate) ไม่มี rainbow — ความยับยั้งเรื่องสีคือสัญญาณคุณภาพ; Hierarchy: ขนาดบอกตาว่าอ่านอะไรก่อน-หลัง; Copy: “dry-aged ribeye, 16oz, 60-day, hearth-fired” อ่านเหมือนเชฟจริงเขียน
6. Imagery + Assets + 21st.dev + Hero Scroll
11:40–15:53- Imagery คือเสาที่ Claude ทำเองไม่ได้ 100% ต้องเอา asset มาเอง — ดีสุด: custom photo/graphic ของแบรนด์; รองมา: AI generation
- Workflow AI asset: ChatGPT image model (ภาพนิ่ง) → aggregator ElevenLabs รวมทุกโมเดล → Google VO3.1 ทำ image→video → upscale ด้วย Topaz จบในแท็บเดียว
- ทริค: ให้ Claude เขียน image-generation prompt ให้ (มันรู้ทั้งโปรเจกต์อยู่แล้ว) → ได้ภาพ match แบรนด์ตั้งแต่ครั้งแรก
- 21st.dev = คลัง component/animation/scroll effect ฟรี — copy prompt ให้ Claude สร้างซ้ำในโปรเจกต์; Claude “ดันกลับ” (push back) ปฏิเสธ React component เพราะโปรเจกต์เป็น static site เดี่ยว — มันปกป้อง architecture ที่วางไว้ ไม่พังของเพราะถูกสั่ง; แก้ bug 3 ชั้น Claude เปิด browser ตรวจหน้าจริงเองจนได้ hero scroll cinematic
7. ขัดเงา: Motion/Cursor + Copy + Font + Mobile
15:53–21:42- เกรดตัวเองตาม checklist ก่อนขัดต่อ: วาง checklist ให้ Claude แล้วถาม “เว็บนี้ได้แค่ไหนในแต่ละเกณฑ์” — ผล: POV/color/hierarchy แข็ง, typography/imagery/motion/mobile/invisible ยัง mixed
- สั่งแก้เป็น batch ไม่ใช่ทีละข้อ + นำด้วยเจตนาไม่ใช่สเปก (“ทำให้แพงขึ้น ไม่ต้องรกขึ้น”) — Claude แปลง intent→spec เก่งกว่าคนเขียนสเปกเอง; ประหยัด token + งานกลมกว่า
- ไล่ทีละ section หาที่ยัง “แบน” เติม cursor/motion ทีละจุด — Claude รู้สึกแทนไม่ได้ pass นี้ต้องขับเอง (เช่น embers ตามเคอร์เซอร์, candlelit halo lag ตามเมาส์) สั่ง “ให้ subtle ขึ้น” จนพอดี
- Copy: AI ชอบอธิบายเยอะ/คำคุณศัพท์เยอะ — “Six dishes, one fire” = ความยับยั้ง (Front-end Design skill ช่วย); Font: เจอ Inter ให้สั่งเปลี่ยน (→ Geist); Mobile: responsive ≠ designed-for-phone ต้องสั่ง pass มือถือเฉพาะ (ซ่อนอะไร/กระชับอะไร/ย่ออะไร)
8. Deploy บน Hostinger (รวม ~$60)
21:42–26:09- เว็บยังอยู่แค่ในเครื่อง (localhost) ต้องเอาขึ้น hosting จริงให้คนทั้งโลกเข้าถึง
- Static site (ไม่มี login/checkout/database) → Hostinger Premium พอ; ถ้ามี user account/payment/database → Business plan (รองรับ Node.js) — สังเกตจากตอน Claude ปฏิเสธ React = สัญญาณว่าต้องแผนไหน
- ต่อ 12 เดือน = ได้โดเมนฟรีปีแรก รวม ~$43/ปี (hosting + domain + email) + Claude Pro ~$20 = ~$60 ได้เว็บ “$10,000”
- กฎ zip สำคัญ: zip “ไฟล์ข้างใน” folder ไม่ใช่ตัว folder (ไม่งั้น index.html ลึกไป 1 ชั้น = หน้าเปล่า) → เลือก migrate existing site → upload backup → submit → live ที่โดเมนตัวเอง
💬 Pull Quotes
“Claude is better at translating intent into specifics than most people are at writing specifications.”
“By default, Claude makes your site responsive... but responsive isn't the same as designed for phones.”
“Six dishes, one fire. That's restraint, not adjectives. That's what separates a $10,000 menu from a $200 one.”
“The point is that Claude protects the architecture you set up. It doesn't break things just because you asked.”
“You set the bar high at the start, and now you check yourself against it. This is the move that separates a polished result from a generic one.”