# วิธีสร้างเว็บไซต์แอนิเมชันด้วย Claude Code ภายในหนึ่งเย็น
> กฎเพื่อหลีกเลี่ยงการออกแบบที่ดูเหมือนเทมเพลต แนวทางด้านภาพ GSAP การเข้าถึง และการทดสอบประสิทธิภาพสำหรับเว็บไซต์แอนิเมชันใน Claude Code
Source: https://ailoot.ai/blog/th/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/th/animated-website-claude-code/
Language: th
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-a567c4c8fdb22bf0d9b50a2e5eda0bd5ccf8358c98750586b26abbdfbbbfa619
ประเด็นสำคัญ
Claude Code สร้างเว็บไซต์แอนิเมชันได้ภายในหนึ่งเย็น แต่ผลลัพธ์มักดูเป็นแบบทั่วไป เพราะหากไม่มีข้อกำหนดที่ชัดเจน โมเดลจะเอนเอียงไปหาค่าเฉลี่ยจากข้อมูลฝึกของมัน สามสิ่งที่ช่วยแก้ปัญหานี้ได้คือ กฎต่อต้านเทมเพลตใน `CLAUDE.md` แนวทางด้านภาพที่เตรียมไว้แทนคำสั่งกว้าง ๆ และเอกสารไลบรารีแอนิเมชันฉบับปัจจุบันที่อยู่ในบริบทโดยตรง กับดักหลักคือการใส่การเคลื่อนไหวมากเกินไป: แอนิเมชันที่มากเกินเผยให้เห็นว่าเป็นงานที่สร้างขึ้นมากกว่าการไม่มีแอนิเมชันเสียอีก และยังทำให้ความเร็วของเนื้อหาส่วนบนลดลง
ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับโมเดลได้ใน[เอกสารประกอบ Ailoot](https://ailoot.ai/docs/)
## ทำไมเว็บไซต์ที่สร้างด้วย AI จึงดูออกตั้งแต่หน้าจอแรก?
ประเด็นสำคัญ
เมื่อไม่มีขอบเขตที่กำหนดไว้ โมเดลจะหาค่าเฉลี่ยจากทุกสิ่งที่เคยเห็นในข้อมูลฝึกของมัน แต่ก่อนจึงได้ปุ่มสีม่วงและฟอนต์ Inter; ตอนนี้กระแสเปลี่ยนไปเป็นพื้นหลังสีครีม ตัวอักษรแบบเซอริฟ และสีเน้นดินเผา Anthropic อธิบายรูปลักษณ์มาตรฐานสามแบบนี้ไว้ในเอกสารทักษะของตนเอง และเรียกอย่างชัดเจนว่านี่คือพฤติกรรมเริ่มต้น
คุณขอให้เอเจนต์ทำหน้าแลนดิ้งเพจให้ สี่สิบนาทีต่อมา คุณก็ได้เว็บไซต์ที่ใช้งานได้: มีส่วนต่าง ๆ ครบ เลย์เอาต์ตอบสนองตามหน้าจอ และปุ่มทำงานได้ แต่แทบจะทันที คุณก็รู้สึกเหมือนเคยเห็นเว็บนี้ที่ไหนมาก่อน
บทเรียนและเทมเพลตเริ่มต้นนับพันคัดลอกสีนั้น ทำให้ชุดตัวอย่างเบ้ไป และโมเดลก็เรียนรู้ว่าปุ่มต้องเป็นสีม่วง กลไกเดียวกันนี้ยังใช้กับฟอนต์ มุมโค้งมน และเงาได้ด้วย
ในระหว่างนั้น “หน้าตาแบบ AI” ก็เปลี่ยนไปแล้ว ในเอกสารทักษะ `frontend-design` Anthropic อธิบายรูปลักษณ์แบบใหม่ไว้
การออกแบบที่สร้างด้วย AI ในตอนนี้มักกระจุกอยู่ในสามรูปแบบ: พื้นหลังสีครีมอบอุ่น (ประมาณ #F4F1EA) กับพาดหัวแบบเซอริฟที่ตัดกันและสีเน้นดินเผา; พื้นหลังเกือบดำพร้อมสีเน้นสว่างเพียงสีเดียว เช่น เขียวแอซิดหรือแดงชาด; และเลย์เอาต์หนังสือพิมพ์แผ่นใหญ่ที่ใช้เส้นบางเฉียบ ไม่มีรัศมีมุม และมีคอลัมน์ข่าวแน่นขนัด ทั้งสามแบบเหมาะกับงานบางประเภท แต่สิ่งเหล่านี้เป็นพฤติกรรมเริ่มต้น ไม่ใช่ตัวเลือกที่ตั้งใจเลือก และปรากฏขึ้นไม่ว่าจะใช้ธีมใดก็ตาม
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
ปัญหาต้นตอคือ slop เกิดขึ้นเมื่อไม่มีตัวอย่างเฉพาะให้ลอกเลียน โมเดลจึงเฉลี่ยสไตล์เว็บทั้งหมดเข้าด้วยกัน ส่วน Qt ดูเป็นเอกภาพก็เพราะมันไม่รู้ว่าจะทำให้หน้าตาเป็นอย่างอื่นได้อย่างไร
“Slop” ในที่นี้หมายถึงงานที่เครื่องสร้างขึ้นและนำมาเฉลี่ยจนกลายเป็นผลลัพธ์ทั่วไปที่ไม่มีสไตล์เฉพาะตัว
ข้อสรุปในทางปฏิบัติคือ เอเจนต์ต้องการไวยากรณ์การออกแบบที่แคบและชัดเจน แทนที่จะเป็นงานปลายเปิด หากคุณบอกว่า “ทำให้สวย” มันก็จะเลือกค่าเฉลี่ย หากคุณให้พาเลตสีที่เฉพาะเจาะจง ฟอนต์สักสองแบบ และองค์ประกอบภาพที่เป็นเอกลักษณ์หนึ่งอย่าง มันก็จะสร้างงานจากสิ่งเหล่านั้น
การเคลื่อนไหวเป็นสัญญาณที่เห็นชัดที่สุดในภาพรวมนี้ แม้หน้าเว็บนิ่งที่ใช้ตัวอักษรได้สมบูรณ์แบบก็ยังดูเหมือนเทมเพลต เพราะเว็บไซต์ที่มีชีวิตย่อมหายใจได้: องค์ประกอบปรากฏขึ้นเมื่อเลื่อนหน้า เคอร์เซอร์ทำให้สิ่งต่าง ๆ เปลี่ยนไป และการเปลี่ยนระหว่างหน้าจอไม่สะดุดหยุดกะทันหัน
## ต้องมีอะไรบ้างเพื่อสร้างเว็บไซต์แอนิเมชันด้วย Claude Code?
ประเด็นสำคัญ
ชุดเครื่องมือทั้งหมดนี้ใช้ฟรี คุณต้องมี Claude Code ไลบรารีแอนิเมชัน GSAP (ตั้งแต่ปลายเดือนเมษายน 2025 เป็นต้นมาใช้ฟรีทั้งหมด รวมถึงปลั๊กอินที่เคยมีค่าใช้จ่ายอย่าง SplitText และ MorphSVG) ทักษะ `frontend-design` ของ Anthropic และบริการโฮสต์ฟรีสักแห่งสำหรับเผยแพร่ คุณจ่ายเพียงค่าใช้จ่ายในการทำงานของเอเจนต์เท่านั้น
มาดูเครื่องมือทีละอย่าง เพราะมีความสับสนเรื่องราคากันมาก
**GSAP** คือไลบรารีแอนิเมชันที่อยู่เบื้องหลังเว็บไซต์ที่ได้รับรางวัลจำนวนไม่น้อย Webflow ซื้อกิจการในเดือนตุลาคม 2024 และข่าวลือว่าทุกอย่างกลายเป็นของฟรีก็เริ่มแพร่ทันที เรื่องนี้ไม่ถูกต้องเสียทีเดียว: ในเวลานั้น Webflow ยืนยันว่าจะคงราคาเดิมไว้ ไลบรารีนี้กลายเป็นของฟรี **ในปลายเดือนเมษายน 2025** พร้อมกับเวอร์ชัน 3.13
ตอนนี้ GSAP ใช้งานได้ฟรีทั้งหมดสำหรับผู้ใช้ทุกคน ด้วยการสนับสนุนจาก Webflow
— GSAP, https://gsap.com/pricing
เอกสารรุ่น 3.13 ระบุโดยเฉพาะว่าปลั๊กอินที่เคยมีค่าใช้จ่ายอย่าง SplitText และ MorphSVG กลายเป็นของฟรีด้วย รวมถึงการใช้งานเชิงพาณิชย์ เวอร์ชันปัจจุบัน ณ เดือนกรกฎาคม 2026 คือ `gsap@3.15.0`
แต่ฟรีไม่ได้แปลว่าโอเพนซอร์ส ใบอนุญาตยังคงเป็นกรรมสิทธิ์ และห้ามสร้างเครื่องมือแก้ไขแอนิเมชันแบบภาพบน GSAP ที่แข่งขันกับ Webflow ไม่มีข้อจำกัดสำหรับเว็บไซต์ โครงการลูกค้า หรืองานเชิงพาณิชย์
**ทักษะ `frontend-design` ของ Anthropic** คือชุดคำสั่งที่เปลี่ยนวิธีทำงานของเอเจนต์กับอินเทอร์เฟซ คำอธิบายในรีโพซิทอรีระบุว่า:
แนวทางสำหรับการออกแบบภาพที่โดดเด่นและใส่ใจในรายละเอียด เมื่อต้องสร้างอินเทอร์เฟซใหม่หรือปรับงานเดิม ช่วยกำหนดทิศทางด้านสุนทรียะ ตัวอักษร และเลือกวิธีออกแบบที่ไม่ดูเหมือนเทมเพลตเริ่มต้น
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
ภายในมีวิธีทำงานสองรอบ ขั้นแรก เอเจนต์จัดทำระบบโทเคน: สีที่มีชื่อสี่ถึงหกสี ฟอนต์สำหรับอย่างน้อยสองบทบาท ผังเลย์เอาต์ในรูปแบบร่างข้อความ และองค์ประกอบภาพเอกลักษณ์หนึ่งอย่างสำหรับหน้าเว็บ จากนั้นเอเจนต์จะวิจารณ์แผนของตนเทียบกับโจทย์ แล้วจึงค่อยเขียนโค้ด
โพสต์ระบุว่ามี 75 ทักษะ คำอธิบายในรีโพซิทอรีระบุ 78 ส่วนในรายการไฟล์มี 91 ทักษะ ณ วันนี้ ผู้เขียนพูดเรื่องนี้อย่างตรงไปตรงมา: ใช้คำสั่งค้นหาเพื่อตรวจสอบรีโพซิทอรี เพราะคำอธิบายล้าสมัยแล้ว
## ทำอย่างไรให้ Claude Code หยุดสร้างงานแบบเทมเพลต?
ประเด็นสำคัญ
มีสองขั้นตอน ขั้นแรก ใส่ข้อห้ามลงใน `CLAUDE.md`: อย่าใช้พาเลตมาตรฐาน อย่าใช้ฟอนต์เดียวกันทั้งหัวข้อและเนื้อหา และอย่าแอนิเมตสิ่งใดนอกจาก opacity และ transforms ขั้นที่สอง ติดตั้งทักษะ `frontend-design` ซึ่งทำให้เอเจนต์จัดระบบโทเคนและวิจารณ์แผนก่อนเขียนโค้ด
เริ่มจากไฟล์กฎก่อน เพราะมีผลกับทุกคำขอและไม่มีค่าใช้จ่าย
หลักการเรียบง่าย: ระบุตัวเลือกเฉพาะที่โมเดลมักเบี่ยงไปหาโดยอัตโนมัติ แล้วห้ามใช้เป็นชื่อ ๆ ไป
```markdown
## 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 ติดตั้งผ่านปลั๊กอินได้:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
ข้อควรรู้: ไม่สามารถติดตั้งทักษะออกแบบแยกทีละรายการได้ ปลั๊กอิน `example-skills` จะติดตั้งทั้งสิบสองรายการพร้อมกัน หากต้องการเพียงรายการเดียว ให้คัดลอกโฟลเดอร์ด้วยตนเอง—Claude Code จะตรวจพบโดยไม่ต้องเริ่มเซสชันใหม่:
```bash
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](https://ailoot.ai/blog/th/choose-claude-code-skills/)
กฎกับทักษะทำงานร่วมกัน: กฎห้ามตัวเลือกที่ไม่ดี ส่วนทักษะกำหนดกระบวนการ—วางระบบก่อน วิจารณ์เป็นลำดับถัดไป แล้วค่อยเขียนโค้ด
สิ่งสำคัญทั้งหมดเกิดขึ้นก่อนส่งคำขอ คุณใส่ข้อจำกัดที่เอเจนต์ต้องยึดถือขณะสร้างงานลงในบริบทไว้ล่วงหน้า ส่วนถ้อยคำในพรอมป์แทบไม่สำคัญอีกต่อไป แนวทางนี้เรียกว่า 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 คือ:
ด้านล่างเป็นตัวเลือกหนึ่งสำหรับติดตั้ง คำสั่งนี้ไม่มีอยู่ในรีโพซิทอรี แต่เป็นคำแนะนำสำหรับติดตั้ง:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
กล่าวถึงคลังพรอมป์แบบเสียเงินสั้น ๆ เพราะมีคนถามถึงอยู่เรื่อย ๆ บริการ motionsites.ai ขายชุดพรอมป์สำเร็จรูปสำหรับส่วนต่าง ๆ ของหน้าเว็บ: ณ เดือนกรกฎาคม 2026 ราคาอยู่ที่ 239 ดอลลาร์ต่อปี หรือราคาส่งเสริมการขายแบบจ่ายครั้งเดียว 349 ดอลลาร์ แทนราคา 759 ดอลลาร์ และไม่มีแพ็กเกจรายเดือน ไม่ระบุชื่อผู้เขียนและไม่มีหน้า “About” นอกจากนี้ยังมีเว็บไซต์อีกแห่งที่ชื่อเกือบเหมือนกันแต่เป็นรูปเอกพจน์ และมีการกล่าวถึงความเข้ากันได้กับ Claude Code เฉพาะบนเว็บไซต์นั้น แต่ก็ควรรู้ไว้ว่ามีตัวเลือกนี้
## จะให้เอกสาร GSAP ฉบับใหม่แก่เอเจนต์ได้อย่างไรในบรรทัดเดียว?
ประเด็นสำคัญ
GSAP มีไฟล์ `llms.txt` ซึ่งเป็นสรุปเอกสารประกอบขนาด 25 กิโลไบต์ที่จัดทำขึ้นสำหรับโมเดลภาษาโดยเฉพาะ ส่งลิงก์ให้เอเจนต์ แล้วเอเจนต์ก็จะทำงานจากคำอธิบายเมธอดฉบับปัจจุบันแทนสิ่งที่จำได้จากอดีต หน้าเอกสารแต่ละหน้ามีเวอร์ชัน markdown ด้วย ไลบรารี Motion มีไฟล์เดียวกันและมีขนาดใหญ่กว่าด้วย
ปัญหาทั่วไปของไลบรารีแอนิเมชันคือ เอเจนต์จำวิธีเชื่อมต่อแบบเก่าได้ มันเขียน 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
ScrollTrigger ช่วยให้ทุกคนสร้างแอนิเมชันการเลื่อนที่น่าทึ่งได้ด้วยโค้ดเพียงเล็กน้อย
— GSAP, https://gsap.com/docs/v3/Plugins/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 ด้วยคำสั่งเดียว:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
จากนั้นเปิดเซสชันใหม่ เลือกเซิร์ฟเวอร์จากรายการ และลงชื่อเข้าใช้ผ่านเบราว์เซอร์ เอเจนต์จะเข้าถึงภาพหน้าจอของแอปจริงที่ใช้งานได้ ซึ่งมีรายการมากกว่า 621,500 หน้าจอ ภาพเหล่านี้เป็นของผลิตภัณฑ์ที่เสร็จสมบูรณ์ ไม่ใช่คอมโพเนนต์หรือโค้ด ข้อควรทราบสำคัญ: เซิร์ฟเวอร์ Mobbin ใช้กับแพ็กเกจฟรีไม่ได้ ต้องใช้แพ็กเกจแบบเสียเงิน (ณ เดือนกรกฎาคม 2026) มี[บทความแยกเกี่ยวกับ Google Stitch](https://ailoot.ai/blog/th/google-stitch-claude-code-design/) ว่าด้วยการเชื่อมบริการภายนอกเข้ากับเอเจนต์ โดยใช้วิธีเดียวกันเพื่อนำระบบออกแบบเข้ามาใน 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 มากขึ้น?
ประเด็นสำคัญ
Anthropic ระบุเรื่องนี้ไว้อย่างชัดเจนในเอกสารทักษะด้านการออกแบบ: การเคลื่อนไหวที่มากเกินไปทำให้รู้สึกหนักแน่นขึ้นว่าหน้าเว็บถูกสร้างขึ้น โดยค่าเริ่มต้น เอเจนต์จะใส่เอฟเฟกต์เผยองค์ประกอบให้แต่ละส่วนปรากฏต่อเนื่องกัน จนได้หน้าเว็บที่ทุกอย่างกระตุกและไม่มีการนำสายตา วิธีตรงกันข้ามได้ผลดีกว่า: ใช้ฉากที่ตั้งใจออกแบบหนึ่งฉากบนหน้าจอแรก แล้วควบคุมการใช้เอฟเฟกต์หลังจากนั้น
ตรงนี้เองที่ความคิดของคนเกือบทุกคนซึ่งสนใจเรื่องนี้เริ่มผิดพลาด: แอนิเมชันน้อยเกินไปดูราคาถูก จึงต้องเพิ่มเข้าไปอีก
บางครั้งน้อยกว่าก็ดีกว่า และแอนิเมชันที่มากเกินไปยิ่งเพิ่มความรู้สึกว่างานออกแบบถูกสร้างขึ้น
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
คำเตือนนี้อยู่ในทักษะ `frontend-design` ที่คุณติดตั้งเพื่อปรับปรุงงานออกแบบ Anthropic เตือนเรื่องการทำมากเกินไปในเครื่องมือที่เอเจนต์ใช้ตกแต่งหน้าเว็บ
ยังมีเทคนิคสำเร็จรูปอื่นที่ระบุไว้ด้วย: ตัวเลขขนาดใหญ่พร้อมคำบรรยายเล็ก ๆ และสีเน้นแบบไล่ระดับซึ่งถูกใช้เป็นคำตอบมาตรฐานกับทุกงาน; กล่องลำดับเลขอย่าง 01 / 02 / 03 ซึ่งเหมาะเฉพาะเมื่อมีลำดับขั้นจริง ๆ
ในทางปฏิบัติ การทำมากเกินไปมีหน้าตาแบบนี้: เอเจนต์ได้รับงาน “เพิ่มแอนิเมชัน” แล้วใส่เอฟเฟกต์เผยองค์ประกอบตอนเลื่อนหน้าให้ทุกส่วน หัวข้อเลื่อนเข้ามา การ์ดสามใบเด้งขึ้นทีละใบ คำรับรองเลื่อนเข้าจากด้านข้าง และส่วนท้ายค่อย ๆ ปรากฏ แต่ละเอฟเฟกต์เมื่อแยกกันก็ใช้ได้ดี เมื่อนำมารวมกัน กลับได้หน้าเว็บที่เคลื่อนไหวไม่หยุดและไม่เน้นอะไรเลย
เว็บไซต์ที่มีชีวิตทำงานต่างออกไป: ใช้ฉากที่ตั้งใจออกแบบหนึ่งฉาก โดยมากอยู่บนหน้าจอแรก แล้วควบคุมการใช้เอฟเฟกต์ การเคลื่อนไหวทำงานเหมือนการเน้นข้อความ—เหมาะสมตราบใดที่เน้นเพียงคำเดียว
เรื่องนี้ทำให้ได้กฎสำหรับพรอมป์ ให้เขียนแบบนี้: “ทำฉากหนึ่งฉากบนหน้าจอแรก แล้วปล่อยทุกอย่างที่เหลือให้นิ่ง” ต่างจาก “เพิ่มแอนิเมชัน” เพียงไม่กี่คำ แต่ผลลัพธ์ดีกว่ามากหลายเท่าตัว
## แอนิเมชันทำให้เว็บไซต์ช้าลงได้อย่างไร?
ประเด็นสำคัญ
กับดักหลัก: เบราว์เซอร์ไม่ถือว่าองค์ประกอบที่มี opacity เป็นศูนย์เป็นตัวเลือกสำหรับ Largest Contentful Paint เทคนิคมาตรฐานที่ว่า “ซ่อนส่วนนี้ไว้แล้วเผยขึ้นเมื่อเลื่อนหน้า” เมื่อนำไปใช้กับหน้าจอแรก จะทำให้เมตริกความเร็วหลักแย่ลงโดยตรง อีกทั้งควรแอนิเมตเฉพาะ transforms และ opacity เท่านั้น—อย่างอื่นทั้งหมดจะทำให้ต้องคำนวณเลย์เอาต์ใหม่
เมตริกสามค่าที่ Google ใช้ประเมินหน้าเว็บ ได้แก่ เวลาที่ใช้เรนเดอร์องค์ประกอบที่ใหญ่ที่สุด—ไม่เกิน 2.5 วินาที; การตอบสนองต่อการโต้ตอบ—ไม่เกิน 200 มิลลิวินาที; และการขยับของเลย์เอาต์—ไม่เกิน 0.1 โดยวัดจากเปอร์เซ็นไทล์ที่ 75 ของการเข้าชมจริง
มาดูว่าทำไมเรื่องนี้จึงสำคัญในที่นี้ โดยค่าเริ่มต้น เอเจนต์สร้างเอฟเฟกต์เผยองค์ประกอบแบบนี้: ตั้ง opacity ของส่วนหนึ่งเป็นศูนย์ แล้วลบค่านั้นออกเมื่อส่วนดังกล่าวเข้าสู่พื้นที่แสดงผล หากเอฟเฟกต์นั้นอยู่บนหน้าจอแรก รูปภาพอาจโหลดและถอดรหัสเสร็จสมบูรณ์แล้ว แต่เมตริกก็ยังไม่นับจนกว่าการเรนเดอร์จะเริ่มขึ้น ยิ่งแย่ไปกว่านั้น หากสคริปต์ลบ opacity หลังโหลด เมตริกก็ต้องรอจนสคริปต์ทำงานเสร็จทั้งหมด
มีสองวิธีแก้ เริ่มเอฟเฟกต์เผยองค์ประกอบด้วย opacity ที่ไม่เป็นศูนย์แต่มีค่าน้อย แทนที่จะเริ่มจากศูนย์ เพื่อให้การเรนเดอร์เริ่มต้นถูกนับ หรือปล่อย opacity บนหน้าจอแรกไว้ตามเดิม แล้วแอนิเมตเฉพาะการเลื่อนตำแหน่ง
ประเด็นที่สองคืออะไรแอนิเมตได้โดยมีต้นทุนต่ำ และอะไรมีต้นทุนสูง
เมื่อทำได้ ให้จำกัดแอนิเมชันไว้ที่คุณสมบัติ opacity และ transform เพื่อให้แอนิเมชันอยู่ในขั้น compositing ของไปป์ไลน์การเรนเดอร์
— web.dev, https://web.dev/articles/animations-guide
พูดง่าย ๆ คือ เบราว์เซอร์ประกอบภาพขึ้นจากเลเยอร์ การเปลี่ยนตำแหน่งและ opacity เกิดขึ้นในขั้นสุดท้ายซึ่งมีต้นทุนต่ำที่สุด ส่วนอย่างอื่นทำให้ต้องคำนวณหน้าใหม่ เอกสารเดียวกันระบุผลการวัดว่า การแอนิเมตด้วยค่า offset top และ left ใช้เวลา 37 มิลลิวินาทีสำหรับเลย์เอาต์ และ 79 มิลลิวินาทีสำหรับการเรนเดอร์; ส่วนเอฟเฟกต์ภาพเดียวกันที่ทำผ่าน transform ใช้เวลาเป็นศูนย์ทั้งสองขั้นตอน
และนี่คือความขัดแย้งที่ควรจำไว้: opacity มีต้นทุนต่ำในการ composite แต่ทำให้องค์ประกอบหมดสิทธิ์ถูกนับในเมตริกความเร็ว ดังนั้น แอนิเมชันที่เบราว์เซอร์ทำได้ในต้นทุนต่ำกับแอนิเมชันที่ปลอดภัยต่อประสิทธิภาพจึงเป็นคนละเรื่องกัน
อีกเรื่องหนึ่งเกี่ยวกับคุณสมบัติ `will-change` ซึ่งเอเจนต์ชอบใส่ไว้พร่ำเพรื่อ “เพื่อเพิ่มประสิทธิภาพ” เอกสาร MDN ระบุไว้ตรงกันข้าม:
การใช้ will-change มากเกินไปนำไปสู่การใช้หน่วยความจำมากเกิน และบังคับให้เบราว์เซอร์เรนเดอร์อย่างซับซ้อนขึ้นขณะพยายามเตรียมรับการเปลี่ยนแปลงที่อาจเกิดขึ้น ซึ่งทำให้ประสิทธิภาพลดลง
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
เอกสารยังระบุด้วยว่าคุณสมบัตินี้มีไว้เป็นทางเลือกสุดท้ายสำหรับปัญหาประสิทธิภาพที่เกิดขึ้นแล้ว ไม่ได้ใช้ป้องกันล่วงหน้า การใส่บรรทัดอย่าง `will-change: transform, opacity` ให้กับองค์ประกอบห้าสิบรายการเป็นสัญญาณชัดเจนที่พบได้ทั่วไปในโค้ดที่สร้างขึ้น
เรื่องการขยับของเลย์เอาต์เข้าใจง่ายกว่า เอกสารของ Google ไม่ได้กล่าวโทษแอนิเมชัน ตรงกันข้าม การเปลี่ยนผ่านที่คิดมาอย่างดีช่วยปรับปรุงเนื้อหาได้โดยไม่ทำให้ผู้อ่านตกใจ สูตรก็เหมือนเดิม: เปลี่ยนขนาดด้วย transform แทน width และ height และเลื่อนด้วย offset แทนพิกัด
## แล้วผู้ที่ได้รับผลกระทบทางร่างกายจากการเคลื่อนไหวล่ะ?
ประเด็นสำคัญ
ผู้ใหญ่ในสหรัฐฯ ที่มีอายุมากกว่า 40 ปีมากถึง 35% เคยมีอาการผิดปกติของระบบเวสทิบูลาร์ สำหรับพวกเขา แอนิเมชันขณะเลื่อนหน้าอาจทำให้คลื่นไส้และไมเกรน การตั้งค่าระบบ “ลดการเคลื่อนไหว” ได้รับการรองรับในเบราว์เซอร์ทุกตัวมานานกว่าห้าปีแล้ว แต่เอเจนต์จะไม่เพิ่มให้หากคุณไม่ได้ขอ ต้องมีทั้งกฎ CSS และเงื่อนไขแยกในโค้ดตั้งแอนิเมชัน JavaScript การอ่าน preference อย่างเดียวไม่หยุด timeline
ส่วนนี้สำคัญกว่าแค่เรื่องมารยาท กลุ่มเป้าหมายที่ซื้อสินค้าจากเจ้าของธุรกิจก็คือผู้ที่มีอายุ 40 ปีขึ้นไป
คุณจัดการเรื่องนี้ได้ด้วยสไตล์สามบรรทัด:
```css
@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 ปกติ แล้วสร้างการเคลื่อนไหวเฉพาะเมื่อผู้ใช้อนุญาต:
```js
// 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](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
GSAP มีกลไกในตัวสำหรับเรื่องนี้: `gsap.matchMedia()`
ยังมีเกณฑ์การเข้าถึงอย่างเป็นทางการที่ควรคำนึงถึง WCAG 2.2.2 ซึ่งเป็นเกณฑ์ระดับ A กำหนดว่า หากมีสิ่งใดเคลื่อนไหว กะพริบ หรือเลื่อนโดยอัตโนมัติ นานเกินห้าวินาที และแสดงพร้อมเนื้อหาอื่น ผู้ใช้ต้องสามารถหยุดสิ่งนั้นได้ ข้อกำหนดนี้ใช้กับคารูเซลที่หมุนอัตโนมัติและมาร์คีแบบไม่มีที่สิ้นสุด ซึ่งเป็นสิ่งที่เอเจนต์มักแทรกเข้ามา
## เจ็ดจุดที่ทำให้งานพัง
ประเด็นสำคัญ
ข้อผิดพลาดเกือบทั้งหมดมีต้นตอสามประการ: มีการแอนิเมตหน้าจอแรก มีการเคลื่อนไหวมากเกินไป หรือแอนิเมตคุณสมบัติผิดประเภท Scrolljacking เป็นอีกปัญหาหนึ่ง—ระยะเวลาแอนิเมชันที่เหมาะสมคือ 100 ถึง 400 มิลลิวินาที แต่เอเจนต์มักตั้งค่าเริ่มต้นไว้เต็มหนึ่งวินาที
**1. ซ่อนหน้าจอแรกไว้จนกว่าจะค่อย ๆ ปรากฏ** องค์ประกอบที่มี opacity เป็นศูนย์ไม่นับเป็นตัวเลือกสำหรับเมตริกการเรนเดอร์ นี่คือข้อผิดพลาดที่มีต้นทุนสูงที่สุด เพราะส่งผลต่อเมตริกที่มีผลต่ออันดับการค้นหา
**2. แอนิเมตทุกอย่าง** ทุกส่วนเลื่อนเข้ามา ทุกการ์ดเด้งขึ้น Anthropic ระบุชัดเจนว่าวิธีนี้เพิ่มความรู้สึกว่าเป็นงานออกแบบที่สร้างขึ้น
**3. Scrolljacking** คือการที่เว็บไซต์แทนที่พฤติกรรมปกติของล้อเมาส์ด้วยตรรกะ “แบบภาพยนตร์” ของตัวเอง
ในการศึกษาเดียวกัน ผู้เข้าร่วมส่วนใหญ่มีอาการสับสนทิศทางอย่างน้อยระดับเล็กน้อย
**4. แอนิเมตคุณสมบัติเลย์เอาต์** ใช้พิกัดและขนาดแทน transform ผลคือ 37 และ 79 มิลลิวินาที เทียบกับศูนย์
**5. แอนิเมชันยาวเกินไป** ช่วงเวลาที่เหมาะสมคือ 100 ถึง 400 มิลลิวินาที โดย 400 มิลลิวินาทีถือว่าช้ามากแล้วและเหมาะเฉพาะกับการเคลื่อนไหวขนาดใหญ่ เอเจนต์มักตั้งค่าเริ่มต้นไว้เต็มหนึ่งวินาที
จากผลการศึกษาของเขา ช่วงเวลาที่เหมาะสมคือ 100 ถึง 400 มิลลิวินาที โดย 400 มิลลิวินาทีก็ช้ามากแล้ว และเหมาะเฉพาะการเคลื่อนไหวขนาดใหญ่ เอเจนต์มักตั้งค่าเริ่มต้นไว้เต็มหนึ่งวินาที
**6. ไม่มีกฎ reduced-motion** เอเจนต์จะไม่เพิ่มให้เอง
**7. เว็บไซต์ช้าลงทุกครั้งที่มีการโต้ตอบ** ปัญหานี้เฉพาะกับ React: แอนิเมชันที่สร้างโดยไม่มีการอ้างอิงถึงองค์ประกอบและไม่มีการล้างข้อมูล จะเพิ่มทวีคูณเมื่อมีการอัปเดตคอมโพเนนต์แต่ละครั้ง หน้าเว็บจะค่อย ๆ ช้าลงโดยไม่มีสาเหตุชัดเจน
มีจุดพลาดข้อที่แปด วิธีที่ “เอเจนต์จับภาพหน้าจอแล้วแก้สิ่งที่เห็น” ใช้ได้ดีมากกับหน้าเว็บนิ่ง แต่เมื่อมีองค์ประกอบแอนิเมชัน วิธีนี้จะทำให้เอเจนต์ติดอยู่ในวงจรแก้ไขไม่รู้จบ: มันเห็นเฟรมระหว่างการเคลื่อนไหว คิดว่าเป็นบั๊ก แก้ไข แล้วก็เห็นเฟรมระหว่างการเคลื่อนไหวอีกเฟรม แถมภาพหน้าจอแต่ละครั้งยังกินบริบท
## มีค่าใช้จ่ายเท่าไร และจะหลีกเลี่ยงการใช้โควตารายเดือนหมดไปกับเว็บไซต์เดียวได้อย่างไร?
ประเด็นสำคัญ
เครื่องมือทั้งหมดในชุดนี้ใช้ฟรี; คุณจ่ายเฉพาะการทำงานของเอเจนต์เอง แอนิเมชันใช้โควตาเร็วกว่างานเลย์เอาต์ทั่วไป เพราะตรวจสอบผลด้วยการอ่านโค้ดไม่ได้: การแก้แต่ละครั้งต้องอ่านไฟล์ใหม่และทำซ้ำเพิ่มเติม การสร้างทีละฉาก ทำ `CLAUDE.md` ให้สั้น และปิดวงจรจับภาพหน้าจอสำหรับองค์ประกอบแอนิเมชันล้วนช่วยได้
เรื่องที่พบได้ทั่วไปในชุมชน vibe coding ภาษาอังกฤษคือ มีคนสร้างหน้าเว็บหวือหวาที่เลื่อนผ่านอวกาศ โพสต์ผลงาน แล้วบทสนทนาเผยว่าเว็บไซต์เดียวใช้โควตารายเดือนจนหมด
เรื่องนี้เป็นสิ่งที่คาดได้ แอนิเมชันมีต้นทุนสูงกว่างานเลย์เอาต์ทั่วไปด้วยเหตุผลหลายประการพร้อมกัน คุณตรวจสอบผลด้วยการอ่านโค้ดไม่ได้ จึงต้องทำซ้ำ การแก้ไขแต่ละครั้งต้องอ่านไฟล์ใหม่ และวงจรจับภาพหน้าจอขององค์ประกอบที่เคลื่อนไหวก็เพิ่มขั้นตอนที่ไม่จำเป็น
สิ่งที่ช่วยได้:
สร้างทีละฉากและยืนยันผลให้เรียบร้อย คำขอครั้งเดียวให้ “เพิ่มแอนิเมชันทั่วทั้งเว็บไซต์” รับประกันว่าจะใช้จ่ายเกินจำเป็น คุณปิดการตรวจสอบด้วยภาพหน้าจอสำหรับองค์ประกอบแอนิเมชัน แล้วตรวจดูด้วยตนเองได้ ทำ `CLAUDE.md` ให้สั้นเพื่อไม่ให้กฎกินบริบทในทุกคำขอ และส่ง `llms.txt` ของไลบรารีให้เอเจนต์ล่วงหน้า ไม่เช่นนั้นมันจะคิดวิธีเชื่อมต่อที่ล้าสมัยขึ้นมาเอง แล้วแก้ปัญหาจากสิ่งที่แต่งขึ้นนั้น
บทความ[ทำไม Claude Code จึงอ่านโครงการทั้งหมดซ้ำ](https://ailoot.ai/blog/th/claude-code-rereads-project/) อธิบายว่าโทเคนถูกใช้ไปกับอะไรเมื่อทำงานในโครงการ ส่วนบทความ[วิธีไม่ใช้โควตา Claude Code จนหมด](https://ailoot.ai/blog/th/claude-code-token-limits-saving/) แนะนำวิธีควบคุมการใช้งาน
## แล้วต่อไปทำอะไร?
ประเด็นสำคัญ
แนวทางนี้ใช้ได้ผล: กฎต่อต้านเทมเพลต แนวทางด้านภาพหนึ่งแบบ ฉากการเคลื่อนไหวหนึ่งฉาก ตรวจสอบความเร็ว และเคารพการตั้งค่าของผู้อ่าน ความซับซ้อนอยู่ที่การเตรียมข้อมูลที่ถูกต้องไว้ในบริบทของเอเจนต์ล่วงหน้า เพื่อให้มีพื้นฐานสำหรับสร้างงาน ส่วนตัวแอนิเมชันเองเป็นส่วนที่ง่ายที่สุด
สร้างหน้าแรกของคุณตามแปดขั้นตอน เลือกแนวทางด้านภาพหนึ่งแบบ สร้างฉากเดียวบนหน้าจอแรก แล้วตรวจสอบความเร็ว
### แหล่งที่มา
- [anthropics/skills](https://github.com/anthropics/skills) - ทักษะทางการของ Anthropic รวมถึง frontend-design
- [GSAP: ราคา](https://gsap.com/pricing) - ยืนยันว่าใช้งานฟรี
- [GSAP รุ่น 3.13](https://gsap.com/blog/3-13) - สิ่งที่กลายเป็นของฟรีในปลายเดือนเมษายน 2025
- [GSAP: llms.txt](https://gsap.com/llms.txt) - เอกสารสำหรับโมเดลภาษา
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - ปลั๊กอินแอนิเมชันการเลื่อน
- [Motion](https://motion.dev/) - ทางเลือกโอเพนซอร์สภายใต้ MIT
- [web.dev: คู่มือแอนิเมชัน](https://web.dev/articles/animations-guide) - คุณสมบัติที่ควรแอนิเมต
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - เหตุผลที่ไม่ควรกำหนดไว้ล่วงหน้า
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - การตั้งค่า reduced-motion
- [WCAG 2.2.2: หยุด หยุดชั่วคราว ซ่อน](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - เกณฑ์การเข้าถึง
- [W3C: แอนิเมชันจากการโต้ตอบ](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - ผลกระทบต่อความผิดปกติของระบบเวสทิบูลาร์
- [Mobbin MCP](https://mobbin.com/mcp) - คลังอ้างอิงอินเทอร์เฟซสำหรับเอเจนต์
สำหรับขั้นตอนถัดไป—[Ailoot](https://ailoot.ai/).
## คำถามที่พบบ่อย
### ทำไมกฎ CSS ลดการเคลื่อนไหวยังปล่อยให้ GSAP รัน?
CSS ที่ทับ duration ไม่ยกเลิก timeline JavaScript ให้สร้าง GSAP ในเงื่อนไข matchMedia no-preference และคง element พื้นฐานให้มองเห็น เพื่อให้โหมดลดการเคลื่อนไหวแสดงหน้าแบบนิ่ง
### หยุดแอนิเมชันสะสมหลังเปลี่ยนหน้าอย่างไร?
เรียก cleanup ที่ setup คืนมาเมื่อถอดหน้าหรือ component ในตัวอย่าง mm.revert() คืนสไตล์และลบแอนิเมชันที่ matchMedia instance นั้นรวบรวม
## Ailoot · บริษัทและพอร์ตโฟลิโอโครงการของบริษัท
Ailoot อาศัยประสบการณ์การดำเนินงานที่สั่งสม ฐานลูกค้าขนาดใหญ่ บริการที่เสถียร และการติดตาม KPI อย่างต่อเนื่อง
บริษัทและพอร์ตโฟลิโอโครงการของบริษัท: ลูกค้าหลายล้านราย; ยอดขายระดับหลายพันล้านต่อเดือน.
Ailoot นำประสบการณ์การดำเนินงานนี้มาใช้เพื่อให้เข้าถึงฟังก์ชัน AI ผ่าน API ในผลิตภัณฑ์ของลูกค้า เอเจนต์ แอปพลิเคชัน และระบบอัตโนมัติ