คู่มือการใช้งาน Claude Code: สร้าง Landing Page คุณภาพสูงใน 30 นาที

หากคุณพึ่งพาเครื่องมือ คุณอาจได้สิ่งที่ดู "โอเค" อย่างรวดเร็ว อย่างไรก็ตาม ผลลัพธ์ที่ได้มักจะดูทั่วไป เหมือนที่เคยเห็นมาก่อน นี่คือแก่นแท้ของ "ลุค AI" และเป็นจุดที่สร้างความแตกต่างได้มากที่สุดในตอนนี้

จากประสบการณ์ของฉันในการสร้างเว็บไซต์สามแห่งที่มีบุคลิกแตกต่างกันจากฐานเดียวกัน โดยใช้สายการผลิตที่สร้างบน Claude Code (โปรเจกต์ makeLP) ฉันจะสรุปวิธีการที่ทำซ้ำได้โดยย่อ

โรงงาน ไม่ใช่ลูกเล่นครั้งเดียว

แม้คุณจะสร้างสิ่งที่ดีได้ครั้งหนึ่ง มันจะไม่ใช่ทรัพย์สินหากไม่สามารถทำซ้ำได้ ดังนั้นเราจึงดำเนินการผ่านสี่ขั้นตอน

การผลิต → คุณภาพ → การตรวจสอบ → การปรับปรุง

มีส่วนประกอบสนับสนุนสี่ประเภท:

・ทักษะ: แม่แบบเชิงวิธีการ (motion-lp-builder สำหรับการสร้าง, frontend-design สำหรับหลักการต้าน AI, bulk-categorize สำหรับการจัดหมวดหมู่จำนวนมาก)

・ตัวแทนย่อย: บทบาทเฉพาะทาง (lp-visual-verifier สำหรับการวาดและวิจารณ์, design-reference-analyst สำหรับเปลี่ยนข้อมูลอ้างอิงเป็นสเปก, bulk-classifier สำหรับการจัดหมวดหมู่)

・คลังข้อมูลอ้างอิง: ชั้นวางรายการ SANKOU จำนวน 4,074 รายการที่จำแนกตาม 'ประเภทไซต์ × อุตสาหกรรม'

・กฎที่พัฒนา: CLAUDE.md (กระแส/วินัยมาตรฐาน) + Memory (ทำให้คำวิจารณ์เป็นถาวร)

การเตรียมการและข้อกำหนดเบื้องต้น

ฐานรากถูกกำหนดเป็น Vite + React + GSAP (ScrollTrigger) + Lenis กุญแจสำคัญคือ 'เชื่อมโยงความคืบหน้าของการเลื่อนโดยตรงกับการผลิต' ปริมาณการเลื่อนกลายเป็นอินพุตสำหรับการแสดงออก (การกรุบเฟรมวิดีโอพื้นหลัง, การปักหมุด, พารัลแลกซ์, การเปิดเผยเมื่อเข้าสู่หน้าจอ)

มีทรัพย์สินสองประเภท เลือกตามหัวข้อ:

・AI Generation (Higgsfield): เมื่อต้องการภาพที่เหมือนจริง เช่น รีสอร์ท

・Code Drawing (SVG/Canvas/CSS): วิธีนี้รู้สึก 'ถูกต้อง' กว่าสำหรับ B2B และเทคโนโลยี ไม่ต้องใช้เครดิต

หากไม่แน่ใจ ให้ตัดสินใจจาก 'ควรเป็นภาพถ่ายหรือแผนภาพ?'

ขั้นตอนที่ 1: การผลิต

ลำดับมีความสำคัญ อย่าเริ่มเขียนทันที ขั้นแรกให้ทำให้ข้อมูลสรุปแบรนด์ (คุณสัญญาอะไรกับใคร สี รูปแบบตัวอักษร ความเข้มข้นของการเคลื่อนไหว) เป็นหนึ่งหน้าให้ชัดเจน แม้จะมีฐานเดียวกัน ข้อมูลสรุป ไม่ใช่โค้ด ที่ทำให้ผลลัพธ์แตกต่าง

หากคุณเลือกการสร้างด้วย AI ให้ปฏิบัติตามวินัยการใช้เครดิต:

1. ตรวจสอบยอดคงเหลือ
2. ขอประมาณการเบื้องต้นด้วย get_cost
3. สร้างภาพฮีโร่หนึ่งภาพก่อน
4. สร้างภาพอื่นโดยใช้ภาพนั้นเป็นข้อมูลอ้างอิงเพื่อรวมพื้นผิว
5. รอให้เสร็จและดาวน์โหลด

สำหรับการนำไปใช้ ให้เชื่อมโยงการผลิตโดยตรงกับการเลื่อน (การกรุบเฟรม/ปักหมุด/พารัลแลกซ์/เปิดเผย) และทำให้มันแข็งแกร่งเสมอ: การสำรองแบบคงที่ด้วย prefers-reduced-motion, ตรวจสอบให้ npm run dev ทำงานแม้ไม่มีทรัพยากรบางส่วน และพิจารณาการประหยัดพลังงานสำหรับหน้าจอสัมผัสและ canvas

ขั้นตอนที่ 2: คุณภาพ - หลุดพ้นจากการออกแบบที่ผลิตจำนวนมาก

แยกและกำจัด 'ลุค AI' ออกเป็นหกส่วน:

1. การใช้เกรเดียนต์มากเกินไป (โดยเฉพาะข้อความและเกรเดียนต์สีม่วง) → จำกัดให้เป็นสีเดียว + หนึ่งสีเน้น

1. การเรียงส่วนมาตรฐานในลำดับมาตรฐาน → สร้างด้วยแนวคิดเฉพาะสำหรับโครงสร้างเอง (เช่น ทั้งหน้าเป็นผืนผ้าใบเวิร์กโฟลว์)

1. ตัวเลขที่ถูกปัดเป็น 'ตัวเลขเกินจริง' → ระบุเฉพาะเจาะจง (เช่น '600 ใบแจ้งหนี้/เดือน → 0' ก่อน/หลัง)

1. ไอคอนอิโมจิ → อย่าใช้ วาด SVG ถ้าจำเป็น

1. แถบสีเฉพาะที่ขอบซ้ายของบล็อก → อย่าใช้ ใช้สีในพื้นผิว ระยะขอบ และรูปแบบตัวอักษร

1. ทุกอย่างสมมาตร สม่ำเสมอ โค้งมน และมีเงาอ่อน → แนะนำความไม่สมมาตรและความแปรผันในความแข็งแรงของระยะขอบ

หลักการคือ: โทนสีคือสีเดียว + หนึ่งสีเน้น รูปแบบตัวอักษรถูกผลักด้วยฟอนต์ที่มีลักษณะเฉพาะหนึ่งตัว ความแข็งแรงในระยะขอบ และการเคลื่อนไหวเพื่อ 'จุดสนใจ'

ขั้นตอนที่ 3: การตรวจสอบ - การผ่านการสร้าง ≠ ดี

แม้โค้ดจะผ่าน การปักหมุด การกรุบเฟรม และการเปิดเผยอาจเสียบนหน้าจอจริง ดังนั้น lp-visual-verifier จะเริ่มเซิร์ฟเวอร์สำหรับพัฒนา เรียกใช้ Chrome/Edge ที่มีอยู่ผ่าน puppeteer-core เรนเดอร์และจับภาพแต่ละส่วน จากนั้น 'วิจารณ์ด้วยสายตา'

สามประเด็นสำคัญ:

・ผู้ตรวจสอบไม่แก้ไขโค้ด (เพื่อแยกสาเหตุ)

・การจับภาพด้วย prefers-reduced-motion ช่วยให้เห็นภาพคงที่ของพื้นที่ที่ปักหมุดและส่วนล่างที่รอการเปิดเผย

・จับภาพที่ความกว้างมือถือเสมอ

เพียงรอบเดียวของการวิจารณ์ → การแก้ไขช่วยยกระดับคุณภาพอย่างมาก อย่าพอใจกับการสร้างที่สำเร็จ

ขั้นตอนที่ 4: การปรับปรุง + คลังข้อมูลอ้างอิง

design-reference-analyst อ่านเว็บไซต์อ้างอิงและแปลเป็น 'รูปแบบทั่วไป' และ 'ข้อกำหนดการปรับปรุง (ที่ไหนและอย่างไร)' ไม่ใช่แค่ความประทับใจ คลังข้อมูล sankou-reference มี 4,074 รายการที่จำแนกบนสองแกน ทำให้คุณสามารถดึง 'เฉพาะตัวอย่างการท่องเที่ยว × แลนดิ้งเพจพิเศษ' ได้ทันที (เนื้อหาชัดเจนจากหมายเหตุในแต่ละแถว)

การจัดหมวดหมู่จำนวนมากเองก็เป็นแม่แบบเช่นกัน (bulk-categorize: แยก → การทำงานขนานของตัวแทนย่อย → รวม → แก้ไข)

กฎที่เติบโต

นี่คือการค้นพบที่ใหญ่ที่สุด อย่าให้คำวิจารณ์ของลูกค้าจบลงด้วยการแก้ไขครั้งเดียว ยกระดับเป็นกฎถาวร

ตัวอย่าง: 'ไอคอนอิโมจิดูเหมือน AI' 'แถบสีทางซ้ายดูเหมือน AI' → เปลี่ยนเป็นข้อห้ามในหน่วยความจำและ CLAUDE.md → หลีกเลี่ยงโดยอัตโนมัติในทุกไซต์ตั้งแต่นั้น

กล่าวคือ ยิ่งใช้มาก 'ลุค AI' ก็ยิ่งหายไป การมีทักษะและตัวแทนย่อยยังช่วยให้ขยายแนวนอนได้ง่าย

การสร้างสามเว็บไซต์ที่แตกต่าง

・AZURE BAY (แลนดิ้งเพจสระว่ายน้ำฤดูร้อน / B2C): สีเทอร์ควอยซ์ + ทอง สร้างด้วย Higgsfield การกรุบเฟรมวิดีโอสระว่ายน้ำเมื่อเลื่อน

・FLOWGEAR (สนับสนุนการใช้งาน n8n / B2B): สีคอรัลเดียว + แบน ไม่สร้างภาพ ทั้งหน้าเป็นผืนผ้าใบเวิร์กโฟลว์ n8n ระบุก่อน/หลังเฉพาะเจาะจงแทนตัวเลขเกินจริง

・STATIK (ห้องแล็บทดลองสำหรับสตูดิโอสมมติ): เกือบดำ + โมโน + สีแอซิดหนึ่งสี Canvas kinetic text grid + เคอร์เซอร์ที่กำหนดเอง ประสบการณ์ที่ดื่มด่ำมากกว่าแค่แลนดิ้งเพจ

สิ่งที่เหมือนกันคือ 'สีเดียว + หนึ่งสีเน้น' 'การพูดด้วยสิ่งที่เฉพาะเจาะจง' และ 'การก้าวกระโดดผ่านแนวคิดเดียว' การเลือกวิธีการตามหัวข้อเป็นก้าวแรกที่ออกจากค่าเฉลี่ย

การกำหนดค่าขั้นต่ำเพื่อสร้างด้วยตัวเอง

1. ทำแม่แบบฐานรากที่เชื่อมโยงกับการเลื่อน (ไม่ต้องเขียนใหม่ทุกครั้ง)

1. ใส่หลักการต้านการผลิตจำนวนมากลงในแผ่นกฎเดียว (ไม่มีเกรเดียนต์/อิโมจิ/แถบซ้าย...)

1. จับภาพและดูหน้าจอจริงเสมอหลังจากสร้าง

1. ยกระดับคำวิจารณ์เป็นกฎทุกครั้ง

ข้อผิดพลาดทั่วไปและมาตรการ: การเสียเครดิต (ฮีโร่ก่อน + ประมาณการเบื้องต้น) การละเว้นการตรวจสอบ (จับภาพหน้าจอจริง) การเข้าถึงการเคลื่อนไหว (reduced-motion) และการพังบนมือถือ (จับภาพที่ความกว้างต่างๆ เสมอ)

สรุป

AI คือ 'มือที่เร็ว' ไม่ใช่ 'ตา'

ช่วงเวลาที่คุณรวมตา (การตรวจสอบ) และกฎ (การเรียนรู้) เข้าสู่ระบบ เว็บไซต์ที่สร้างโดย AI จะหลุดพ้นจากลุค AI