วิธีสร้างเว็บไซต์แอนิเมชันด้วย Claude Code ภายในหนึ่งเย็น

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

ทำไมเว็บไซต์ที่สร้างด้วย AI จึงดูออกตั้งแต่หน้าจอแรก?#

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

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

ในระหว่างนั้น “หน้าตาแบบ AI” ก็เปลี่ยนไปแล้ว ในเอกสารทักษะ frontend-design Anthropic อธิบายรูปลักษณ์แบบใหม่ไว้

ปัญหาต้นตอคือ slop เกิดขึ้นเมื่อไม่มีตัวอย่างเฉพาะให้ลอกเลียน โมเดลจึงเฉลี่ยสไตล์เว็บทั้งหมดเข้าด้วยกัน ส่วน Qt ดูเป็นเอกภาพก็เพราะมันไม่รู้ว่าจะทำให้หน้าตาเป็นอย่างอื่นได้อย่างไร

“Slop” ในที่นี้หมายถึงงานที่เครื่องสร้างขึ้นและนำมาเฉลี่ยจนกลายเป็นผลลัพธ์ทั่วไปที่ไม่มีสไตล์เฉพาะตัว

ข้อสรุปในทางปฏิบัติคือ เอเจนต์ต้องการไวยากรณ์การออกแบบที่แคบและชัดเจน แทนที่จะเป็นงานปลายเปิด หากคุณบอกว่า “ทำให้สวย” มันก็จะเลือกค่าเฉลี่ย หากคุณให้พาเลตสีที่เฉพาะเจาะจง ฟอนต์สักสองแบบ และองค์ประกอบภาพที่เป็นเอกลักษณ์หนึ่งอย่าง มันก็จะสร้างงานจากสิ่งเหล่านั้น

การเคลื่อนไหวเป็นสัญญาณที่เห็นชัดที่สุดในภาพรวมนี้ แม้หน้าเว็บนิ่งที่ใช้ตัวอักษรได้สมบูรณ์แบบก็ยังดูเหมือนเทมเพลต เพราะเว็บไซต์ที่มีชีวิตย่อมหายใจได้: องค์ประกอบปรากฏขึ้นเมื่อเลื่อนหน้า เคอร์เซอร์ทำให้สิ่งต่าง ๆ เปลี่ยนไป และการเปลี่ยนระหว่างหน้าจอไม่สะดุดหยุดกะทันหัน

ต้องมีอะไรบ้างเพื่อสร้างเว็บไซต์แอนิเมชันด้วย Claude Code?#

มาดูเครื่องมือทีละอย่าง เพราะมีความสับสนเรื่องราคากันมาก

GSAP คือไลบรารีแอนิเมชันที่อยู่เบื้องหลังเว็บไซต์ที่ได้รับรางวัลจำนวนไม่น้อย Webflow ซื้อกิจการในเดือนตุลาคม 2024 และข่าวลือว่าทุกอย่างกลายเป็นของฟรีก็เริ่มแพร่ทันที เรื่องนี้ไม่ถูกต้องเสียทีเดียว: ในเวลานั้น Webflow ยืนยันว่าจะคงราคาเดิมไว้ ไลบรารีนี้กลายเป็นของฟรี ในปลายเดือนเมษายน 2025 พร้อมกับเวอร์ชัน 3.13

เอกสารรุ่น 3.13 ระบุโดยเฉพาะว่าปลั๊กอินที่เคยมีค่าใช้จ่ายอย่าง SplitText และ MorphSVG กลายเป็นของฟรีด้วย รวมถึงการใช้งานเชิงพาณิชย์ เวอร์ชันปัจจุบัน ณ เดือนกรกฎาคม 2026 คือ gsap@3.15.0

แต่ฟรีไม่ได้แปลว่าโอเพนซอร์ส ใบอนุญาตยังคงเป็นกรรมสิทธิ์ และห้ามสร้างเครื่องมือแก้ไขแอนิเมชันแบบภาพบน GSAP ที่แข่งขันกับ Webflow ไม่มีข้อจำกัดสำหรับเว็บไซต์ โครงการลูกค้า หรืองานเชิงพาณิชย์

ทักษะ frontend-design ของ Anthropic คือชุดคำสั่งที่เปลี่ยนวิธีทำงานของเอเจนต์กับอินเทอร์เฟซ คำอธิบายในรีโพซิทอรีระบุว่า:

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

โพสต์ระบุว่ามี 75 ทักษะ คำอธิบายในรีโพซิทอรีระบุ 78 ส่วนในรายการไฟล์มี 91 ทักษะ ณ วันนี้ ผู้เขียนพูดเรื่องนี้อย่างตรงไปตรงมา: ใช้คำสั่งค้นหาเพื่อตรวจสอบรีโพซิทอรี เพราะคำอธิบายล้าสมัยแล้ว

ทำอย่างไรให้ Claude Code หยุดสร้างงานแบบเทมเพลต?#

เริ่มจากไฟล์กฎก่อน เพราะมีผลกับทุกคำขอและไม่มีค่าใช้จ่าย

หลักการเรียบง่าย: ระบุตัวเลือกเฉพาะที่โมเดลมักเบี่ยงไปหาโดยอัตโนมัติ แล้วห้ามใช้เป็นชื่อ ๆ ไป

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

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

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

ต่อไปคือทักษะ ทักษะทางการของ Anthropic ติดตั้งผ่านปลั๊กอินได้:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

ข้อควรรู้: ไม่สามารถติดตั้งทักษะออกแบบแยกทีละรายการได้ ปลั๊กอิน example-skills จะติดตั้งทั้งสิบสองรายการพร้อมกัน หากต้องการเพียงรายการเดียว ให้คัดลอกโฟลเดอร์ด้วยตนเอง—Claude Code จะตรวจพบโดยไม่ต้องเริ่มเซสชันใหม่:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

ทักษะอื่นในชุดนี้ที่อาจมีประโยชน์ ได้แก่ theme-factory ซึ่งมีธีมสำเร็จรูปสิบแบบและกำหนดให้มนุษย์ยืนยันก่อนนำไปใช้, web-artifacts-builder สำหรับสร้างงานใน React ด้วยคอมโพเนนต์สำเร็จรูป และ algorithmic-art สำหรับกราฟิกเชิงกำเนิด บทความอีกชิ้นอธิบายอย่างละเอียดเกี่ยวกับการเลือกทักษะให้เหมาะกับงาน: วิธีเลือกทักษะสำหรับ Claude Code

กฎกับทักษะทำงานร่วมกัน: กฎห้ามตัวเลือกที่ไม่ดี ส่วนทักษะกำหนดกระบวนการ—วางระบบก่อน วิจารณ์เป็นลำดับถัดไป แล้วค่อยเขียนโค้ด

สิ่งสำคัญทั้งหมดเกิดขึ้นก่อนส่งคำขอ คุณใส่ข้อจำกัดที่เอเจนต์ต้องยึดถือขณะสร้างงานลงในบริบทไว้ล่วงหน้า ส่วนถ้อยคำในพรอมป์แทบไม่สำคัญอีกต่อไป แนวทางนี้เรียกว่า context engineering และไฟล์ CLAUDE.md คือองค์ประกอบแรกของมัน

จะหาแนวทางด้านภาพและพรอมป์แอนิเมชันสำเร็จรูปได้จากที่ไหน?#

เทคนิคการเคลื่อนไหวที่มี ได้แก่: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling

หากคุณไม่ใช่โปรแกรมเมอร์ แนวทางด้านภาพสำเร็จรูปมีประโยชน์กว่า แทนที่จะสั่งกว้าง ๆ ว่า “ทำให้ดูทันสมัย” ให้เลือกสักแบบแล้วมอบไวยากรณ์ที่แคบและชัดเจนซึ่งโมเดลขาดอยู่:

• clean-minimal-beige-light-mode - มินิมอลลิซึมสีเบจอ่อน
• dark-glass-clean-layout - สไตล์กระจกสีเข้ม
• documentary-brutalist-agency - สไตล์สารคดีบรูทัลลิสต์
• editorial-portfolio-chapters - พอร์ตโฟลิโอแบ่งเป็นบทเหมือนนิตยสาร
• orange-clean-paper-saas - เว็บไซต์บริการสไตล์กระดาษที่มีสีส้มเป็นสีเน้น
• solar-duotone-bold - การใช้สองสีอย่างโดดเด่น
• tech-green-dark-mode-modern - สไตล์เทคโนโลยีโทนมืดและสีเขียว
• light-mode-paper-technical - กระดาษเชิงเทคนิคโหมดสว่าง

ยังมีทักษะทางเทคนิคสำหรับกราฟิก 3D และเอฟเฟกต์ด้วย: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient

ในรีโพซิทอรีไม่มีคำสั่งติดตั้ง—ผู้เขียนระบุชัดเจนในโรดแมปว่าจะเพิ่มให้เมื่อได้ข้อสรุปเรื่องวิธีผสานระบบแล้ว คำแนะนำเดียวสำหรับ Claude Code คือ:

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

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

กล่าวถึงคลังพรอมป์แบบเสียเงินสั้น ๆ เพราะมีคนถามถึงอยู่เรื่อย ๆ บริการ motionsites.ai ขายชุดพรอมป์สำเร็จรูปสำหรับส่วนต่าง ๆ ของหน้าเว็บ: ณ เดือนกรกฎาคม 2026 ราคาอยู่ที่ 239 ดอลลาร์ต่อปี หรือราคาส่งเสริมการขายแบบจ่ายครั้งเดียว 349 ดอลลาร์ แทนราคา 759 ดอลลาร์ และไม่มีแพ็กเกจรายเดือน ไม่ระบุชื่อผู้เขียนและไม่มีหน้า “About” นอกจากนี้ยังมีเว็บไซต์อีกแห่งที่ชื่อเกือบเหมือนกันแต่เป็นรูปเอกพจน์ และมีการกล่าวถึงความเข้ากันได้กับ Claude Code เฉพาะบนเว็บไซต์นั้น แต่ก็ควรรู้ไว้ว่ามีตัวเลือกนี้

จะให้เอกสาร GSAP ฉบับใหม่แก่เอเจนต์ได้อย่างไรในบรรทัดเดียว?#

ปัญหาทั่วไปของไลบรารีแอนิเมชันคือ เอเจนต์จำวิธีเชื่อมต่อแบบเก่าได้ มันเขียน import จากพาธเก่า ลงทะเบียนปลั๊กอินตามวิธีเมื่อสองปีก่อน แล้วโค้ดก็ไม่ทำงาน

วิธีแก้คือใส่เอกสารลงในบริบทด้วยตนเอง GSAP มีเอกสารในรูปแบบที่เครื่องอ่านได้ง่าย:

https://gsap.com/llms.txt

ณ วันนี้ไฟล์มีขนาดประมาณ 25 กิโลไบต์ หน้าเอกสารแต่ละหน้ามีเวอร์ชัน markdown ด้วย—เพียงเติม .md ต่อท้าย URL

ในทางปฏิบัติจะมีหน้าตาแบบนี้:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

ไลบรารี Motion (เดิมชื่อ Framer Motion) มีไฟล์เดียวกันและมีขนาดใหญ่กว่าด้วย Motion เผยแพร่ภายใต้ MIT และยังเป็นโอเพนซอร์สอย่างแท้จริง เวอร์ชันปัจจุบันคือ motion@12.42.2 หากโครงการใช้ React และต้องการเพียงเอฟเฟกต์ปรากฏแบบง่าย ๆ คุณเลือก Motion ได้; ส่วนฉากการเลื่อนที่ซับซ้อนให้ใช้ GSAP กับปลั๊กอิน ScrollTrigger

ยังมีตัวเลือกที่ใช้เฉพาะเบราว์เซอร์โดยไม่ต้องใช้ไลบรารีด้วย การเปลี่ยนสถานะหน้าผ่าน View Transitions API เริ่มได้รับการรองรับระดับ baseline เมื่อวันที่ 14 ตุลาคม 2025—แต่ใช้ได้ภายในหน้าเดียวเท่านั้น; Firefox ไม่รองรับเวอร์ชันข้ามหน้าเลย ส่วนแอนิเมชันการเลื่อนด้วย CSS ยังไม่ได้รับการรองรับระดับ baseline: Chrome รองรับ Safari เพิ่งรองรับเมื่อไม่นานมานี้ แต่ใน Firefox ต้องเปิดใช้ด้วยตนเองในการตั้งค่า จึงใช้งานไม่ได้สำหรับผู้อ่านทั่วไป ให้เอเจนต์ตรวจสอบก่อนว่าเบราว์เซอร์รองรับหรือไม่ และหากไม่รองรับ ให้คงการเปลี่ยนผ่านมาตรฐานไว้

จะเปลี่ยนเว็บไซต์ที่ชอบให้เป็นพรอมป์ได้อย่างไร?#

วิธีที่คนใช้กันมากที่สุดในการอธิบายสิ่งที่ต้องการคือการยกตัวอย่าง แต่วิธีนี้ใช้กับเอเจนต์โดยตรงไม่ได้: เอเจนต์ไม่ได้เห็นเว็บไซต์ แต่เห็นข้อความ

ทักษะ video-to-superprompt ช่วยเชื่อมช่องว่างนี้ คำอธิบายในรีโพซิทอรีระบุว่าให้เปลี่ยนวิดีโออ้างอิงเป็นพรอมป์แบบละเอียดสำหรับการสร้างซ้ำหรือใช้เป็นแรงบันดาลใจ ภายใน ทักษะนี้วิเคราะห์วิดีโอเป็นชั้น ๆ ได้แก่ การเล่าเรื่อง เลย์เอาต์ การเคลื่อนไหว ตัวอักษร และกราฟิก 3D ผลลัพธ์คือพรอมป์พร้อมใช้หนึ่งชุด

กฎหลักระบุไว้อย่างหนักแน่นว่า:

ทักษะที่สอง html-to-interaction-prompts ใช้ซอร์สโค้ด: ค้นหาทุกสิ่งที่เคลื่อนไหว—การตอบสนองต่อเคอร์เซอร์ กราฟิก 3D เอฟเฟกต์การเลื่อน และเลเยอร์ที่เคลื่อนด้วยความเร็วต่างกัน—แล้วแยกหน้าเว็บออกเป็นพรอมป์ย่อย หนึ่งชุดสำหรับแต่ละส่วน ปุ่ม สถานะ hover หรือเอฟเฟกต์ หลักการคือถือว่าพฤติกรรมในซอร์สเป็นความจริง และไม่แต่งเอฟเฟกต์ขึ้นจากภาพหน้าจอเมื่อมีโค้ดให้ดู

ทักษะที่สาม stitched-full-page-capture แก้ปัญหาในทางปฏิบัติ ภาพหน้าจอเต็มหน้าตามปกติของเว็บไซต์ที่ใช้การโหลดแบบ lazy และกราฟิก 3D มักออกมาเป็นสีเทาและว่างเปล่า เพราะจับภาพก่อนที่ทุกอย่างจะเรนเดอร์ ทักษะนี้เลื่อนหน้าทีละจอ รอให้ทุกอย่างหยุดนิ่ง แล้วนำภาพมาต่อกัน

นอกจากนี้ยังมีวิธีที่ไม่ต้องใช้วิดีโอบันทึกหน้าจอ: เชื่อมเอเจนต์เข้ากับคลังตัวอย่างอินเทอร์เฟซจริงผ่าน MCP สามารถติดตั้งเซิร์ฟเวอร์ทางการของ Mobbin ด้วยคำสั่งเดียว:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

จากนั้นเปิดเซสชันใหม่ เลือกเซิร์ฟเวอร์จากรายการ และลงชื่อเข้าใช้ผ่านเบราว์เซอร์ เอเจนต์จะเข้าถึงภาพหน้าจอของแอปจริงที่ใช้งานได้ ซึ่งมีรายการมากกว่า 621,500 หน้าจอ ภาพเหล่านี้เป็นของผลิตภัณฑ์ที่เสร็จสมบูรณ์ ไม่ใช่คอมโพเนนต์หรือโค้ด ข้อควรทราบสำคัญ: เซิร์ฟเวอร์ Mobbin ใช้กับแพ็กเกจฟรีไม่ได้ ต้องใช้แพ็กเกจแบบเสียเงิน (ณ เดือนกรกฎาคม 2026) มีบทความแยกเกี่ยวกับ Google Stitch ว่าด้วยการเชื่อมบริการภายนอกเข้ากับเอเจนต์ โดยใช้วิธีเดียวกันเพื่อนำระบบออกแบบเข้ามาใน Claude Code

ทีละขั้นตอน: สร้างเว็บไซต์แอนิเมชันภายในหนึ่งเย็น#

1. ตั้งค่าโครงการ

   หากยังไม่มีโครงการ ให้เริ่มจากโฟลเดอร์ว่าง สร้างโฟลเดอร์ เปิดในเทอร์มินัล แล้วเรียกใช้ claude ที่นั่น สำหรับพรอมป์แรก ให้ขอสร้างโครงร่าง: “สร้างโครงเว็บไซต์หน้าเดียวสำหรับธุรกิจของฉัน (อธิบายว่าทำอะไร) โดยใช้ HTML และ CSS ปกติ ไม่ใช้ไลบรารี” ไฟล์ชุดหนึ่งจะปรากฏขึ้น—นั่นคือรูทของโครงการ ซึ่งทุกอย่างจะเกิดขึ้นที่นั่นนับจากนี้

2. ใส่กฎลงใน CLAUDE.md

   คัดลอกบล็อก Anti-Generic Guardrails ไปใส่ในไฟล์ CLAUDE.md ที่รูทโครงการ หากยังไม่มี ให้ขอให้เอเจนต์สร้างขึ้น กฎนี้เขียนไว้สำหรับ Tailwind; หากโครงร่างของคุณใช้ CSS ปกติ ให้บอกเอเจนต์ว่า “ปรับใช้หลักการเหล่านี้กับ CSS ปกติ”—ความหมายของกฎยังเหมือนเดิม ดูคำอธิบายกฎสี่ข้อสำหรับ CLAUDE.md เพื่อทำความเข้าใจการทำงานของไฟล์และสิ่งอื่นที่ควรใส่ไว้

3. ติดตั้งทักษะ frontend-design

   ใช้ปลั๊กอิน example-skills หรือคัดลอกโฟลเดอร์ frontend-design ตามที่อธิบายไว้ข้างต้น คุณตรวจสอบได้ว่าทักษะโหลดแล้วหรือยังด้วยคำสั่ง /doctor

4. เลือกแนวทางด้านภาพหนึ่งแบบ

   เลือกแนวทางด้านภาพหนึ่งแบบ ไม่ใช่สองหรือสามแบบ การผสมสไตล์สารคดีบรูทัลลิสต์กับมินิมอลลิซึมสีเบจจะทำให้ได้ผลลัพธ์แบบเฉลี่ยที่คุณกำลังพยายามหลีกเลี่ยง

5. สร้างหน้าเว็บนิ่ง

   อย่าใส่แอนิเมชันแม้แต่รายการเดียว ควรเริ่มจากตัวอักษร ระยะห่าง และกริด ขอให้เอเจนต์เริ่มพรีวิวในเครื่อง แล้วเปิดที่อยู่ที่เอเจนต์ให้มา หากต้องการดูบนโทรศัพท์ ให้พูดว่า “รันให้เปิดได้บนอุปกรณ์อื่นในเครือข่ายของฉัน” แล้วเอเจนต์จะให้ที่อยู่มา

6. เพิ่มฉากการเคลื่อนไหวหนึ่งฉาก

   เพียงฉากเดียว โดยปกติจะเป็นหน้าจอแรก: พาดหัวปรากฏขึ้น และเลเยอร์พื้นหลังเคลื่อนช้ากว่าข้อความ ส่งไฟล์ llms.txt ของไลบรารีให้เอเจนต์ พร้อมอธิบายฉากอย่างเป็นรูปธรรมว่าอะไรเคลื่อนไหว ตรงไหน และใช้เวลากี่มิลลิวินาที อย่าใช้ opacity บนหน้าจอแรก; ส่วนด้านล่างอธิบายเหตุผลไว้โดยเฉพาะ

7. เพิ่มกฎ reduced-motion

   ใช้กฎ CSS และการตั้ง reduced-motion ใน JavaScript จากส่วนการเข้าถึง แล้วตรวจหน้าเมื่อเปิดลดการเคลื่อนไหวก่อนเผยแพร่

8. เผยแพร่และตรวจสอบความเร็ว

   เผยแพร่ไปยังบริการโฮสต์แบบสแตติกฟรีที่ใดก็ได้ เช่น Vercel, Netlify หรือ GitHub Pages ขอให้เอเจนต์ว่า “เผยแพร่โครงการนี้บน Vercel แล้วส่งลิงก์มาให้ฉัน” หลังเผยแพร่แล้วเท่านั้น จึงนำ URL ไปตรวจด้วย PageSpeed Insights: บริการนี้ทำงานกับ URL สาธารณะและมองไม่เห็นหน้าเว็บในเครื่อง ดูค่า “Largest Contentful Paint”—เวลาที่ใช้เรนเดอร์องค์ประกอบที่ใหญ่ที่สุด; โซนสีเขียวคือไม่เกิน 2.5 วินาที เอเจนต์วัดเวอร์ชันในเครื่องก่อนเผยแพร่ได้เช่นกัน: Chrome DevTools MCP จะเปิดหน้าเว็บใน Chrome และแสดงเมตริกเดียวกัน

ขั้นตอนที่หกเป็นจุดที่ทำให้งานจากห้าขั้นตอนก่อนหน้าเสียได้ง่ายที่สุด

ทำไมแอนิเมชันที่มากเกินไปจึงทำให้เว็บไซต์ดูเหมือนสร้างด้วย AI มากขึ้น?#

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

คำเตือนนี้อยู่ในทักษะ frontend-design ที่คุณติดตั้งเพื่อปรับปรุงงานออกแบบ Anthropic เตือนเรื่องการทำมากเกินไปในเครื่องมือที่เอเจนต์ใช้ตกแต่งหน้าเว็บ

ยังมีเทคนิคสำเร็จรูปอื่นที่ระบุไว้ด้วย: ตัวเลขขนาดใหญ่พร้อมคำบรรยายเล็ก ๆ และสีเน้นแบบไล่ระดับซึ่งถูกใช้เป็นคำตอบมาตรฐานกับทุกงาน; กล่องลำดับเลขอย่าง 01 / 02 / 03 ซึ่งเหมาะเฉพาะเมื่อมีลำดับขั้นจริง ๆ

ในทางปฏิบัติ การทำมากเกินไปมีหน้าตาแบบนี้: เอเจนต์ได้รับงาน “เพิ่มแอนิเมชัน” แล้วใส่เอฟเฟกต์เผยองค์ประกอบตอนเลื่อนหน้าให้ทุกส่วน หัวข้อเลื่อนเข้ามา การ์ดสามใบเด้งขึ้นทีละใบ คำรับรองเลื่อนเข้าจากด้านข้าง และส่วนท้ายค่อย ๆ ปรากฏ แต่ละเอฟเฟกต์เมื่อแยกกันก็ใช้ได้ดี เมื่อนำมารวมกัน กลับได้หน้าเว็บที่เคลื่อนไหวไม่หยุดและไม่เน้นอะไรเลย

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

เรื่องนี้ทำให้ได้กฎสำหรับพรอมป์ ให้เขียนแบบนี้: “ทำฉากหนึ่งฉากบนหน้าจอแรก แล้วปล่อยทุกอย่างที่เหลือให้นิ่ง” ต่างจาก “เพิ่มแอนิเมชัน” เพียงไม่กี่คำ แต่ผลลัพธ์ดีกว่ามากหลายเท่าตัว

แอนิเมชันทำให้เว็บไซต์ช้าลงได้อย่างไร?#

เมตริกสามค่าที่ Google ใช้ประเมินหน้าเว็บ ได้แก่ เวลาที่ใช้เรนเดอร์องค์ประกอบที่ใหญ่ที่สุด—ไม่เกิน 2.5 วินาที; การตอบสนองต่อการโต้ตอบ—ไม่เกิน 200 มิลลิวินาที; และการขยับของเลย์เอาต์—ไม่เกิน 0.1 โดยวัดจากเปอร์เซ็นไทล์ที่ 75 ของการเข้าชมจริง

มาดูว่าทำไมเรื่องนี้จึงสำคัญในที่นี้ โดยค่าเริ่มต้น เอเจนต์สร้างเอฟเฟกต์เผยองค์ประกอบแบบนี้: ตั้ง opacity ของส่วนหนึ่งเป็นศูนย์ แล้วลบค่านั้นออกเมื่อส่วนดังกล่าวเข้าสู่พื้นที่แสดงผล หากเอฟเฟกต์นั้นอยู่บนหน้าจอแรก รูปภาพอาจโหลดและถอดรหัสเสร็จสมบูรณ์แล้ว แต่เมตริกก็ยังไม่นับจนกว่าการเรนเดอร์จะเริ่มขึ้น ยิ่งแย่ไปกว่านั้น หากสคริปต์ลบ opacity หลังโหลด เมตริกก็ต้องรอจนสคริปต์ทำงานเสร็จทั้งหมด

มีสองวิธีแก้ เริ่มเอฟเฟกต์เผยองค์ประกอบด้วย opacity ที่ไม่เป็นศูนย์แต่มีค่าน้อย แทนที่จะเริ่มจากศูนย์ เพื่อให้การเรนเดอร์เริ่มต้นถูกนับ หรือปล่อย opacity บนหน้าจอแรกไว้ตามเดิม แล้วแอนิเมตเฉพาะการเลื่อนตำแหน่ง

ประเด็นที่สองคืออะไรแอนิเมตได้โดยมีต้นทุนต่ำ และอะไรมีต้นทุนสูง

พูดง่าย ๆ คือ เบราว์เซอร์ประกอบภาพขึ้นจากเลเยอร์ การเปลี่ยนตำแหน่งและ opacity เกิดขึ้นในขั้นสุดท้ายซึ่งมีต้นทุนต่ำที่สุด ส่วนอย่างอื่นทำให้ต้องคำนวณหน้าใหม่ เอกสารเดียวกันระบุผลการวัดว่า การแอนิเมตด้วยค่า offset top และ left ใช้เวลา 37 มิลลิวินาทีสำหรับเลย์เอาต์ และ 79 มิลลิวินาทีสำหรับการเรนเดอร์; ส่วนเอฟเฟกต์ภาพเดียวกันที่ทำผ่าน transform ใช้เวลาเป็นศูนย์ทั้งสองขั้นตอน

และนี่คือความขัดแย้งที่ควรจำไว้: opacity มีต้นทุนต่ำในการ composite แต่ทำให้องค์ประกอบหมดสิทธิ์ถูกนับในเมตริกความเร็ว ดังนั้น แอนิเมชันที่เบราว์เซอร์ทำได้ในต้นทุนต่ำกับแอนิเมชันที่ปลอดภัยต่อประสิทธิภาพจึงเป็นคนละเรื่องกัน

อีกเรื่องหนึ่งเกี่ยวกับคุณสมบัติ will-change ซึ่งเอเจนต์ชอบใส่ไว้พร่ำเพรื่อ “เพื่อเพิ่มประสิทธิภาพ” เอกสาร MDN ระบุไว้ตรงกันข้าม:

เอกสารยังระบุด้วยว่าคุณสมบัตินี้มีไว้เป็นทางเลือกสุดท้ายสำหรับปัญหาประสิทธิภาพที่เกิดขึ้นแล้ว ไม่ได้ใช้ป้องกันล่วงหน้า การใส่บรรทัดอย่าง will-change: transform, opacity ให้กับองค์ประกอบห้าสิบรายการเป็นสัญญาณชัดเจนที่พบได้ทั่วไปในโค้ดที่สร้างขึ้น

เรื่องการขยับของเลย์เอาต์เข้าใจง่ายกว่า เอกสารของ Google ไม่ได้กล่าวโทษแอนิเมชัน ตรงกันข้าม การเปลี่ยนผ่านที่คิดมาอย่างดีช่วยปรับปรุงเนื้อหาได้โดยไม่ทำให้ผู้อ่านตกใจ สูตรก็เหมือนเดิม: เปลี่ยนขนาดด้วย transform แทน width และ height และเลื่อนด้วย offset แทนพิกัด

แล้วผู้ที่ได้รับผลกระทบทางร่างกายจากการเคลื่อนไหวล่ะ?#

ส่วนนี้สำคัญกว่าแค่เรื่องมารยาท กลุ่มเป้าหมายที่ซื้อสินค้าจากเจ้าของธุรกิจก็คือผู้ที่มีอายุ 40 ปีขึ้นไป

คุณจัดการเรื่องนี้ได้ด้วยสไตล์สามบรรทัด:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

มีสามประเด็นที่ควรจำไว้

กำหนดให้แอนิเมชันเป็นพฤติกรรมเริ่มต้น แล้วปิดใช้งานภายในกฎนี้—หน้าเว็บจะเสื่อมสภาพอย่างปลอดภัยกว่าการทำกลับกัน

ข้อกำหนดระบุว่า “ลบ ลด หรือแทนที่”—การลบออกทั้งหมดไม่ได้เป็นตัวเลือกแรกด้วยซ้ำ การแทนภาพเลื่อนเข้าที่กระชากด้วยการค่อย ๆ ปรากฏสั้น ๆ ได้ผลดีกว่าการตัดออกไปเลย: การปิดแอนิเมชันทั้งหมดจะทำให้ตัวบ่งชี้กำลังโหลดและแถบความคืบหน้าเสียไปด้วย

แอนิเมชันที่ขับด้วย JavaScript ต้องจัดการ preference เอง การแก้ duration ใน CSS ไม่ยกเลิก GSAP timeline แค่เก็บ matchMedia(...).matches ในตัวแปรไม่เกิดผลหากการตั้งค่าไม่แยกตามค่า สำหรับ GSAP ให้ element เห็นได้ใน HTML/CSS ปกติ แล้วสร้างการเคลื่อนไหวเฉพาะเมื่อผู้ใช้อนุญาต:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

title ต้องไม่มี base style ที่ซ่อนหรือเลื่อนตำแหน่ง เมื่อเปิดลดการเคลื่อนไหวจะอยู่กับที่และมองเห็น หาก preference เปลี่ยนขณะเปิดหน้า GSAP ย้อนแอนิเมชันเมื่อ query ไม่ตรง mm.revert() ลบแอนิเมชันที่รวบรวมตอน teardown ด้วย สำหรับ Motion ให้ทำเงื่อนไขเทียบเท่าใน setup ของไลบรารี CSS อย่างเดียวไม่พอ ดูเอกสาร lifecycle และ cleanup ของ GSAP matchMedia.

GSAP มีกลไกในตัวสำหรับเรื่องนี้: gsap.matchMedia()

ยังมีเกณฑ์การเข้าถึงอย่างเป็นทางการที่ควรคำนึงถึง WCAG 2.2.2 ซึ่งเป็นเกณฑ์ระดับ A กำหนดว่า หากมีสิ่งใดเคลื่อนไหว กะพริบ หรือเลื่อนโดยอัตโนมัติ นานเกินห้าวินาที และแสดงพร้อมเนื้อหาอื่น ผู้ใช้ต้องสามารถหยุดสิ่งนั้นได้ ข้อกำหนดนี้ใช้กับคารูเซลที่หมุนอัตโนมัติและมาร์คีแบบไม่มีที่สิ้นสุด ซึ่งเป็นสิ่งที่เอเจนต์มักแทรกเข้ามา

เจ็ดจุดที่ทำให้งานพัง#

1. ซ่อนหน้าจอแรกไว้จนกว่าจะค่อย ๆ ปรากฏ องค์ประกอบที่มี opacity เป็นศูนย์ไม่นับเป็นตัวเลือกสำหรับเมตริกการเรนเดอร์ นี่คือข้อผิดพลาดที่มีต้นทุนสูงที่สุด เพราะส่งผลต่อเมตริกที่มีผลต่ออันดับการค้นหา

2. แอนิเมตทุกอย่าง ทุกส่วนเลื่อนเข้ามา ทุกการ์ดเด้งขึ้น Anthropic ระบุชัดเจนว่าวิธีนี้เพิ่มความรู้สึกว่าเป็นงานออกแบบที่สร้างขึ้น

3. Scrolljacking คือการที่เว็บไซต์แทนที่พฤติกรรมปกติของล้อเมาส์ด้วยตรรกะ “แบบภาพยนตร์” ของตัวเอง

ในการศึกษาเดียวกัน ผู้เข้าร่วมส่วนใหญ่มีอาการสับสนทิศทางอย่างน้อยระดับเล็กน้อย

4. แอนิเมตคุณสมบัติเลย์เอาต์ ใช้พิกัดและขนาดแทน transform ผลคือ 37 และ 79 มิลลิวินาที เทียบกับศูนย์

5. แอนิเมชันยาวเกินไป ช่วงเวลาที่เหมาะสมคือ 100 ถึง 400 มิลลิวินาที โดย 400 มิลลิวินาทีถือว่าช้ามากแล้วและเหมาะเฉพาะกับการเคลื่อนไหวขนาดใหญ่ เอเจนต์มักตั้งค่าเริ่มต้นไว้เต็มหนึ่งวินาที

จากผลการศึกษาของเขา ช่วงเวลาที่เหมาะสมคือ 100 ถึง 400 มิลลิวินาที โดย 400 มิลลิวินาทีก็ช้ามากแล้ว และเหมาะเฉพาะการเคลื่อนไหวขนาดใหญ่ เอเจนต์มักตั้งค่าเริ่มต้นไว้เต็มหนึ่งวินาที

6. ไม่มีกฎ reduced-motion เอเจนต์จะไม่เพิ่มให้เอง

7. เว็บไซต์ช้าลงทุกครั้งที่มีการโต้ตอบ ปัญหานี้เฉพาะกับ React: แอนิเมชันที่สร้างโดยไม่มีการอ้างอิงถึงองค์ประกอบและไม่มีการล้างข้อมูล จะเพิ่มทวีคูณเมื่อมีการอัปเดตคอมโพเนนต์แต่ละครั้ง หน้าเว็บจะค่อย ๆ ช้าลงโดยไม่มีสาเหตุชัดเจน

มีจุดพลาดข้อที่แปด วิธีที่ “เอเจนต์จับภาพหน้าจอแล้วแก้สิ่งที่เห็น” ใช้ได้ดีมากกับหน้าเว็บนิ่ง แต่เมื่อมีองค์ประกอบแอนิเมชัน วิธีนี้จะทำให้เอเจนต์ติดอยู่ในวงจรแก้ไขไม่รู้จบ: มันเห็นเฟรมระหว่างการเคลื่อนไหว คิดว่าเป็นบั๊ก แก้ไข แล้วก็เห็นเฟรมระหว่างการเคลื่อนไหวอีกเฟรม แถมภาพหน้าจอแต่ละครั้งยังกินบริบท

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

เรื่องที่พบได้ทั่วไปในชุมชน vibe coding ภาษาอังกฤษคือ มีคนสร้างหน้าเว็บหวือหวาที่เลื่อนผ่านอวกาศ โพสต์ผลงาน แล้วบทสนทนาเผยว่าเว็บไซต์เดียวใช้โควตารายเดือนจนหมด

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

สิ่งที่ช่วยได้:

สร้างทีละฉากและยืนยันผลให้เรียบร้อย คำขอครั้งเดียวให้ “เพิ่มแอนิเมชันทั่วทั้งเว็บไซต์” รับประกันว่าจะใช้จ่ายเกินจำเป็น คุณปิดการตรวจสอบด้วยภาพหน้าจอสำหรับองค์ประกอบแอนิเมชัน แล้วตรวจดูด้วยตนเองได้ ทำ CLAUDE.md ให้สั้นเพื่อไม่ให้กฎกินบริบทในทุกคำขอ และส่ง llms.txt ของไลบรารีให้เอเจนต์ล่วงหน้า ไม่เช่นนั้นมันจะคิดวิธีเชื่อมต่อที่ล้าสมัยขึ้นมาเอง แล้วแก้ปัญหาจากสิ่งที่แต่งขึ้นนั้น

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

แล้วต่อไปทำอะไร?#

สร้างหน้าแรกของคุณตามแปดขั้นตอน เลือกแนวทางด้านภาพหนึ่งแบบ สร้างฉากเดียวบนหน้าจอแรก แล้วตรวจสอบความเร็ว

สำหรับขั้นตอนถัดไป—Ailoot.