# Cara Membina Laman Web Beranimasi dalam Claude Code dalam Satu Malam
> Peraturan untuk mengelakkan reka bentuk seperti templat, arahan visual, GSAP, kebolehcapaian dan ujian prestasi bagi laman web beranimasi dalam Claude Code.
Source: https://ailoot.ai/blog/ms/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/ms/animated-website-claude-code/
Language: ms
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-989f319aad15c314ab2abd984857913689987fd126adadc014da844e967f0dd9
Rumusan utama
Claude Code boleh membina laman web beranimasi dalam satu malam, tetapi hasilnya kelihatan generik kerana tanpa batasan yang jelas, model cenderung kepada purata dalam data latihannya. Tiga perkara dapat membetulkannya: peraturan anti-templat dalam `CLAUDE.md`, hala tuju visual yang sedia ada dan bukannya arahan yang samar, serta dokumentasi pustaka animasi terkini terus dalam konteks. Perangkap utamanya ialah animasi yang berlebihan: animasi melampau lebih mendedahkan bahawa laman itu dijana berbanding ketiadaan animasi, dan menjejaskan kelajuan kandungan di bahagian atas halaman.
Ketahui lebih lanjut tentang cara bekerja dengan model dalam [dokumentasi Ailoot](https://ailoot.ai/docs/).
## Mengapakah Laman Web Binaan AI Jelas Kelihatan Sejak Skrin Pertama?
Rumusan utama
Model tanpa batasan yang ditetapkan akan mempuratakan segala yang pernah dilihatnya dalam data latihan. Dahulu, hasilnya berupa butang ungu dan fon Inter; kini trendnya beralih kepada latar belakang krim dengan tipografi serif dan aksen terakota. Anthropic menghuraikan tiga rupa standard sedemikian dalam dokumentasi kemahirannya sendiri dan secara jelas menyebutnya sebagai tingkah laku lalai.
Anda meminta ejen menyediakan halaman pendaratan. Empat puluh minit kemudian, anda mempunyai laman yang berfungsi: bahagian-bahagiannya tersedia, reka letaknya responsif dan butangnya berfungsi. Hampir serta-merta, anda mula rasa seperti pernah melihatnya di tempat lain.
Sebabnya bersifat mekanikal. Model dilatih menggunakan koleksi halaman siap yang sangat besar, dan koleksi itu mempunyai kecenderungan yang kuat.
Beribu-ribu tutorial dan templat permulaan meniru warna itu, lalu memesongkan sampel, dan model pun belajar bahawa butang berwarna ungu. Mekanisme yang sama berlaku pada fon, bucu bulat dan bayang-bayang.
Sementara itu, “rupa AI” telah berubah. Dalam dokumentasi kemahiran `frontend-design`, Anthropic kini menghuraikan rupa yang berbeza.
Reka bentuk janaan AI kini berkumpul pada tiga rupa: latar belakang krim hangat (sekitar #F4F1EA) dengan tajuk serif yang kontras dan aksen terakota; latar belakang hampir hitam dengan satu aksen hijau asid atau vermilion yang terang; serta reka letak akhbar lembaran lebar dengan garisan halus, jejari bucu sifar dan lajur akhbar yang padat. Ketiga-tiganya sesuai untuk tugasan tertentu, tetapi ini ialah tingkah laku lalai, bukannya pilihan yang disengajakan, dan rupa ini muncul tanpa mengira tema.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Masalah asasnya ialah slop berlaku apabila tiada apa-apa yang khusus untuk ditiru, lalu model sekadar mempuratakan semua gaya web. Qt kelihatan padu tepat kerana ia tidak tahu cara untuk kelihatan selain itu.
“Slop” di sini bermaksud hasil kerja yang dijana mesin dan dipuratakan menjadi hasil generik tanpa gaya tersendiri.
Kesimpulan praktikalnya, ejen memerlukan tatabahasa reka bentuk yang sempit dan bukannya tugasan terbuka. Jika anda berkata “jadikannya cantik”, model mengambil purata. Jika anda memberikannya palet khusus, beberapa jenis muka taip dan satu unsur visual yang menentukan identiti, model membina reka bentuk daripadanya.
Gerakan ialah isyarat yang paling ketara dalam gambaran ini. Halaman statik dengan tipografi yang sempurna sekalipun masih kelihatan seperti templat, kerana laman web yang hidup seakan-akan bernafas: unsur muncul semasa anda menatal, kursor mengubah sesuatu dan peralihan antara skrin tidak terputus secara mendadak.
## Apakah yang Diperlukan untuk Membina Laman Web Beranimasi dalam Claude Code?
Rumusan utama
Keseluruhan kit alat ini percuma. Anda memerlukan Claude Code, pustaka animasi GSAP (sejak akhir April 2025, semuanya percuma sepenuhnya, termasuk pemalam yang sebelum ini berbayar seperti SplitText dan MorphSVG), kemahiran `frontend-design` daripada Anthropic dan hala tuju visual sedia guna. Selain itu, anda memerlukan apa-apa perkhidmatan pengehosan percuma untuk menerbitkannya. Anda hanya membayar kerja ejen.
Mari kita teliti alat-alat ini satu demi satu kerana terdapat banyak kekeliruan tentang harganya.
**GSAP** ialah pustaka animasi yang digunakan oleh sebahagian besar laman web pemenang anugerah. Webflow membelinya pada Oktober 2024, dan khabar angin bahawa semuanya telah menjadi percuma mula tersebar hampir serta-merta. Namun, itu tidak sepenuhnya tepat: ketika itu, Webflow mengesahkan bahawa harga sedia ada akan dikekalkan. Pustaka itu menjadi percuma **pada akhir April 2025** dengan versi 3.13.
GSAP kini percuma sepenuhnya untuk semua pengguna, hasil sokongan Webflow.
— GSAP, https://gsap.com/pricing
Keluaran 3.13 menyatakan secara khusus bahawa pemalam yang sebelum ini berbayar seperti SplitText dan MorphSVG turut menjadi percuma, termasuk untuk kegunaan komersial. Versi semasa setakat Julai 2026 ialah `gsap@3.15.0`.
Percuma tidak bermaksud sumber terbuka. Lesennya kekal proprietari dan melarang pembinaan penyunting animasi visual berasaskan GSAP yang bersaing dengan Webflow. Tiada sekatan untuk laman web, projek pelanggan atau kerja komersial.
**Kemahiran `frontend-design` Anthropic** ialah sekumpulan arahan yang mengubah cara ejen mengerjakan antara muka. Penerangan dalam repositorinya menyatakan:
Panduan untuk reka bentuk visual yang tersendiri dan teliti semasa mencipta antara muka baharu atau mengolah semula antara muka sedia ada. Membantu menentukan hala tuju estetik, tipografi dan penyelesaian reka bentuk yang tidak kelihatan seperti templat lalai.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Di dalamnya terdapat kaedah dua pusingan. Pertama, ejen menyusun sistem token: empat hingga enam warna bernama, muka taip untuk sekurang-kurangnya dua peranan, skema reka letak dalam bentuk lakaran teks dan satu unsur visual yang menentukan identiti halaman. Kemudian ejen mengkritik rancangannya sendiri berdasarkan tugasan. Hanya selepas itu ejen menulis kod.
Hantaran itu menyebut 75 kemahiran, penerangan repositori menyenaraikan 78, manakala pepohon fail kini mempunyai 91. Penulis berterus terang tentang hal ini: semak repositori dengan arahan carian kerana penerangannya sudah lapuk.
## Bagaimanakah Anda Menghentikan Claude Code daripada Menghasilkan Templat?
Rumusan utama
Dua langkah. Pertama, masukkan satu set larangan ke dalam `CLAUDE.md`: jangan gunakan palet standard, jangan gunakan satu fon yang sama untuk tajuk dan isi kandungan, dan jangan animasikan apa-apa selain kelegapan dan transformasi. Kedua, pasang kemahiran `frontend-design`, yang membuatkan ejen menyusun sistem token dan mengkritik rancangannya sebelum menulis kod.
Mari kita mulakan dengan fail peraturan kerana fail itu berkuat kuasa pada setiap permintaan dan tidak menelan kos.
Satu titik permulaan yang berguna ialah blok garis panduan anti-templat. Logiknya mudah: senaraikan pilihan khusus yang cenderung dipilih model secara lalai, kemudian larang pilihan itu secara jelas.
```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).
```
Blok itu sengaja ditulis dalam bahasa Inggeris: model mengikut arahan teknikal pendek dengan lebih tepat dalam bahasa dokumentasi.
Baris tentang animasi diletakkan bersama larangan warna dan bayang-bayang atas sebab tertentu. Kelegapan pada skrin pertama menjejaskan metrik kelajuan secara langsung, seperti yang akan kita lihat nanti.
Seterusnya, kemahiran itu. Kemahiran rasmi Anthropic boleh dipasang melalui pemalam:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
Satu perkara: kemahiran reka bentuk tidak boleh dipasang secara berasingan; pemalam `example-skills` memasang kesemua dua belas sekali gus. Jika anda hanya mahukan satu, salin folder itu secara manual—Claude Code akan mengesannya tanpa perlu memulakan semula sesi:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
Kemahiran lain dalam koleksi ini yang mungkin berguna: `theme-factory` dengan sepuluh tema sedia guna dan pengesahan manusia wajib sebelum menerapkannya, `web-artifacts-builder` untuk membina dalam React dengan komponen sedia guna, serta `algorithmic-art` untuk grafik generatif. Artikel berasingan menerangkan secara terperinci cara memilih kemahiran untuk tugasan: [cara memilih kemahiran untuk Claude Code](https://ailoot.ai/blog/ms/choose-claude-code-skills/).
Peraturan dan kemahiran itu saling melengkapi: peraturan melarang pilihan yang tidak baik, manakala kemahiran menetapkan proses—sistem dahulu, kritikan seterusnya, kod kemudian.
Segala perkara penting di sini berlaku sebelum permintaan dibuat. Anda memasukkan terlebih dahulu batasan yang perlu dipatuhi ejen semasa membina ke dalam konteksnya, dan pilihan kata dalam arahan itu sendiri hampir tidak lagi penting. Pendekatan ini dipanggil kejuruteraan konteks, dan fail `CLAUDE.md` ialah asas pertamanya. Gabungan **klon AI + Otak Kedua + Kejuruteraan Konteks** membantu menjadikan Claude alat yang berpegang pada gaya anda, bukannya penjana hasil purata.
## Di Manakah Anda Boleh Menemui Hala Tuju Visual dan Arahan Animasi Sedia Guna?
Teknik gerakan yang disertakan ialah: `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`.
Sebagai bukan pengatur cara, hala tuju visual sedia guna lebih penting untuk anda. Daripada arahan samar “jadikannya moden”, pilih salah satu daripadanya dan berikan model tatabahasa yang sempit yang sebelum ini tiada:
- `clean-minimal-beige-light-mode` - minimalisme beige cerah
- `dark-glass-clean-layout` - kaca gelap
- `documentary-brutalist-agency` - gaya dokumentari brutalist
- `editorial-portfolio-chapters` - portfolio dibahagikan kepada bab, seperti majalah
- `orange-clean-paper-saas` - laman web perkhidmatan bergaya kertas dengan aksen jingga
- `solar-duotone-bold` - gaya dua warna yang berani
- `tech-green-dark-mode-modern` - gaya teknologi gelap dengan warna hijau
- `light-mode-paper-technical` - kertas teknikal cerah
Terdapat juga kemahiran teknikal untuk grafik dan kesan 3D: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
Tiada arahan pemasangan dalam repositori—penulis menyatakan dengan jelas dalam pelan hala tuju bahawa arahan itu akan ditambah setelah kaedah penyepaduan dimuktamadkan. Satu-satunya arahan untuk Claude Code ialah:
Satu pilihan pemasangan ditunjukkan di bawah. Arahan ini tiada dalam repositori; ini ialah saranan pemasangan:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
## Bagaimanakah Anda Memberikan Dokumentasi GSAP Terkini kepada Ejen dalam Satu Baris?
Rumusan utama
GSAP mempunyai fail `llms.txt`—ringkasan dokumentasi bersaiz 25 kilobait yang dibuat khusus untuk model bahasa. Berikan pautannya kepada ejen, lalu ejen boleh menggunakan penerangan kaedah terkini dan bukannya bergantung pada ingatannya dari dahulu. Setiap halaman dokumentasi juga tersedia dalam versi markdown. Pustaka Motion mempunyai fail yang sama, malah saiznya lebih besar.
Masalah lazim dengan pustaka animasi ialah ejen mengingati cara penyepaduan yang sudah lapuk. Ejen menulis import daripada laluan lama, mendaftarkan pemalam seperti yang dilakukan dua tahun lalu, dan kod itu tidak berjalan.
Penyelesaiannya ialah memasukkan dokumentasi sendiri ke dalam konteks. GSAP menyediakannya dalam format yang mesra mesin:
```
https://gsap.com/llms.txt
```
Setakat hari ini, fail itu bersaiz kira-kira 25 kilobait. Setiap halaman dokumentasi juga tersedia dalam versi markdown—hanya tambahkan `.md` pada URL.
Dalam amalan, rupanya begini:
```
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.
```
Pustaka Motion (dahulunya Framer Motion) mempunyai fail yang sama, malah saiznya lebih besar. Motion diedarkan di bawah MIT dan kekal sumber terbuka sepenuhnya; versi semasa ialah `motion@12.42.2`. Jika projek menggunakan React dan hanya memerlukan kemunculan ringkas, anda boleh memilih Motion; untuk adegan tatal yang kompleks, gunakan GSAP dengan pemalam ScrollTrigger.
ScrollTrigger membolehkan sesiapa sahaja mencipta animasi tatal yang mengagumkan dengan kod yang minimum.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Terdapat juga pilihan yang hanya menggunakan pelayar dan tidak memerlukan pustaka. Peralihan keadaan halaman melalui View Transitions API mula mendapat sokongan asas pada 14 Oktober 2025—tetapi hanya dalam satu halaman; versi merentas halaman langsung tidak disokong dalam Firefox. Animasi tatal CSS belum lagi mendapat sokongan asas: Chrome menyokongnya, Safari baru-baru ini mula menyokongnya, tetapi dalam Firefox anda perlu mengaktifkannya secara manual dalam tetapan, maka ia tidak akan berfungsi untuk pembaca biasa. Minta ejen menyemak dahulu sama ada pelayar menyokongnya, dan jika tidak, kekalkan peralihan standard.
## Bagaimanakah Anda Menukarkan Laman Web yang Anda Sukai kepada Arahan?
Cara paling lazim untuk menerangkan kehendak anda ialah menunjukkan contoh. Cara itu tidak berkesan secara langsung dengan ejen: ejen tidak melihat laman web; ejen melihat teks.
Kemahiran `video-to-superprompt` merapatkan jurang itu. Penerangan repositorinya: tukarkan rujukan video kepada arahan terperinci untuk diterbitkan semula atau dijadikan inspirasi. Kemahiran itu menganalisis rakaman mengikut lapisan: naratif, reka letak, gerakan, tipografi dan grafik 3D. Hasilnya ialah satu arahan sedia guna.
Peraturan utamanya dinyatakan dengan tegas:
Kemahiran kedua, `html-to-interaction-prompts`, menggunakan kod sumber: kemahiran ini menemui segala yang bergerak—reaksi kursor, grafik 3D, kesan tatal, lapisan yang bergerak pada kelajuan berbeza—dan memecahkan halaman kepada arahan berasingan, satu bagi setiap bahagian, butang, keadaan tuding atau kesan. Prinsipnya ialah menganggap tingkah laku sumber sebagai benar dan tidak mereka kesan berdasarkan tangkapan skrin apabila kod tersedia.
Kemahiran ketiga, `stitched-full-page-capture`, menyelesaikan masalah praktikal. Tangkapan skrin biasa bagi keseluruhan halaman laman web dengan pemuatan malas dan grafik 3D akan menjadi kelabu dan kosong kerana tangkapan dibuat sebelum halaman dirender. Kemahiran itu menatal halaman skrin demi skrin, menunggu semuanya stabil dan mencantumkan hasilnya.
Terdapat juga cara tanpa rakaman skrin: sambungkan ejen kepada pustaka contoh antara muka langsung melalui MCP. Pelayan rasmi Mobbin boleh dipasang dengan satu arahan:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Selepas itu, buka sesi baharu, pilih pelayan daripada senarai dan log masuk dalam pelayar. Ejen akan mendapat akses kepada tangkapan skrin aplikasi sebenar yang berfungsi: lebih daripada 621,500 skrin disenaraikan. Ini ialah tangkapan skrin produk siap, bukannya komponen atau kod. Perhatian penting: pelayan Mobbin tidak berfungsi dengan pelan percuma; ia tersedia dalam pelan berbayar (setakat Julai 2026). Terdapat [artikel berasingan tentang Google Stitch](https://ailoot.ai/blog/ms/google-stitch-claude-code-design/) mengenai penyambungan perkhidmatan luaran kepada ejen, menggunakan kaedah yang sama untuk membawa sistem reka bentuk ke dalam Claude Code.
## Langkah demi Langkah: Laman Web Beranimasi dalam Satu Malam
Rumusan utama
Turutannya ialah: peraturan anti-templat, kemahiran reka bentuk, pilih satu hala tuju visual, bina halaman statik, kemudian hanya pada langkah terakhir tambahkan satu adegan beranimasi. Tambahkan gerakan pada penghujung, satu kesan pada satu masa, jika tidak, anda tiada titik mula apabila berlaku masalah. Tujuh langkah di bawah mengambil masa satu malam jika anda tidak cuba menganimasikan semuanya serentak.
1. ### Sediakan projek
Jika anda belum mempunyai projek, mulakan dengan folder kosong. Cipta folder itu, buka dalam terminal dan jalankan `claude` di situ. Untuk arahan pertama, minta rangka asas: “bina rangka laman web satu halaman untuk perniagaan saya (terangkan jenisnya), HTML dan CSS biasa, tanpa pustaka.” Satu set fail akan muncul—itulah akar projek, tempat segala-galanya akan berlaku mulai sekarang.
2. ### Masukkan peraturan ke dalam CLAUDE.md
Salin blok Anti-Generic Guardrails ke dalam fail `CLAUDE.md` di akar projek. Jika fail itu tiada, minta ejen menciptanya. Peraturan itu ditulis untuk Tailwind; jika rangka asas anda menggunakan CSS biasa, beritahu ejen, “gunakan prinsip ini pada CSS biasa”—maksud peraturannya tidak berubah. Lihat huraian empat peraturan untuk CLAUDE.md untuk mengetahui cara fail itu berfungsi dan perkara lain yang boleh dimasukkan ke dalamnya.
3. ### Pasang kemahiran frontend-design
Gunakan pemalam `example-skills` atau salin folder `frontend-design`, seperti yang diterangkan di atas. Anda boleh menyemak sama ada kemahiran itu telah dimuatkan dengan arahan `/doctor`.
4. ### Pilih satu hala tuju visual
Satu sahaja, bukan dua atau tiga. Menggabungkan gaya dokumentari brutalist dengan minimalisme beige akan menghasilkan tepat jenis pemurataan yang cuba anda elakkan. Nama foldernya bersifat deskriptif, tetapi anda tidak boleh melihat pratonton visualnya: buka `SKILL.md` dalam folder yang anda suka dan baca penerangan palet dan muka taipnya—semuanya dihuraikan dengan jelas.
5. ### Bina halaman statik
Tanpa sebarang animasi. Mulakan dengan tipografi, jarak dan grid. Minta ejen memulakan pratonton setempat dan buka alamat yang diberikannya. Untuk melihatnya pada telefon, katakan, “jalankannya supaya terbuka pada peranti lain dalam rangkaian saya,” dan ejen akan memberikan alamat kepada anda.
6. ### Tambahkan satu adegan gerakan
Satu sahaja. Biasanya skrin pertama: tajuk muncul dan lapisan latar belakang bergerak lebih perlahan daripada latar hadapan. Berikan ejen fail `llms.txt` pustaka itu dan huraikan adegan secara konkrit—apa yang bergerak, di mana dan selama berapa milisaat. Jangan sentuh kelegapan pada skrin pertama; bahagian berasingan di bawah menerangkan sebabnya.
7. ### Tambahkan peraturan reduced-motion
Gunakan peraturan CSS serta persediaan reduced-motion JavaScript daripada bahagian kebolehcapaian. Periksa halaman dengan reduced motion didayakan sebelum penerbitan.
8. ### Terbitkan dan semak kelajuan
Terbitkan ke mana-mana perkhidmatan pengehosan statik percuma—Vercel, Netlify atau GitHub Pages. Minta ejen, “terbitkan projek ini di Vercel dan berikan pautannya.” Selepas penerbitan sahaja, jalankan URL itu melalui PageSpeed Insights: perkhidmatan itu berfungsi dengan URL awam dan tidak dapat melihat halaman setempat. Perhatikan “Largest Contentful Paint”—masa yang diperlukan untuk merender unsur terbesar; zon hijaunya ialah sehingga 2.5 saat. Ejen boleh mengukur versi setempat sebelum penerbitan: Chrome DevTools MCP akan membukanya dalam Chrome dan menunjukkan metrik yang sama.
Langkah enam ialah bahagian yang paling mudah merosakkan kerja lima langkah sebelumnya.
## Mengapakah Animasi Berlebihan Menjadikan Laman Web Kelihatan Lebih Dijana AI?
Rumusan utama
Anthropic menyatakannya dengan jelas dalam dokumentasi kemahiran reka bentuk: gerakan berlebihan menguatkan tanggapan bahawa sesuatu halaman dijana. Secara lalai, ejen menambahkan kesan kemunculan pada setiap bahagian secara berturutan, lalu menghasilkan halaman yang segala-galanya bergerak-gerak dan perhatian tidak dipandu ke mana-mana. Cara sebaliknya lebih berkesan: satu adegan yang disengajakan pada skrin pertama, kemudian kawal diri.
Di sinilah pemikiran hampir semua orang yang mendalami topik ini mula tersasar: animasi yang terlalu sedikit kelihatan murah, maka anda perlu menambah lagi.
Kadang-kadang, kurang itu lebih baik, dan animasi berlebihan menambahkan tanggapan bahawa reka bentuk itu dijana.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Amaran itu terdapat dalam kemahiran `frontend-design` yang anda pasang untuk memperbaik reka bentuk. Anthropic memberi amaran supaya tidak keterlaluan dalam alat yang digunakan ejen untuk menghias halaman.
Anthropic turut menyenaraikan teknik klise lain: nombor besar dengan kapsyen kecil dan aksen kecerunan sebagai tindak balas standard terhadap apa-apa tugasan; blok bernombor seperti 01 / 02 / 03 yang hanya sesuai apabila benar-benar ada urutan.
Beginilah rupa keterlaluan itu dalam amalan: ejen diberi tugasan “tambahkan animasi”, lalu menambahkan kesan kemunculan ketika tatal pada setiap bahagian. Tajuk meluncur masuk, tiga kad muncul satu demi satu, testimoni meluncur masuk dari sisi dan pengaki memudar masuk. Setiap kesan itu baik secara tersendiri. Apabila digabungkan, hasilnya halaman yang tidak berhenti bergerak dan tidak menonjolkan apa-apa.
Laman web langsung berfungsi secara berbeza: satu adegan yang disengajakan, biasanya pada skrin pertama, kemudian kawal diri. Gerakan berfungsi seperti penegasan—ia berkesan selagi hanya tertumpu pada satu perkataan.
Itulah panduan untuk arahan anda. Ungkapkannya begini: “buat satu adegan pada skrin pertama dan biarkan semua yang lain statik.” Perbezaannya hanya beberapa perkataan berbanding “tambahkan animasi”, tetapi hasilnya jauh lebih baik.
## Bagaimanakah Animasi Menjejaskan Kelajuan Laman Web?
Rumusan utama
Perangkap utama: pelayar langsung tidak menganggap unsur dengan kelegapan sifar sebagai calon untuk Largest Contentful Paint. Teknik standard “sembunyikan bahagian itu dan dedahkannya ketika menatal”, apabila digunakan pada skrin pertama, menjejaskan metrik kelajuan utama secara langsung. Selain itu, animasikan transformasi dan kelegapan sahaja—semua yang lain mencetuskan pengiraan semula reka letak.
Tiga metrik yang digunakan Google untuk menilai halaman ialah: masa untuk merender unsur terbesar—tidak melebihi 2.5 saat; tindak balas terhadap interaksi—tidak melebihi 200 milisaat; dan anjakan reka letak—tidak melebihi 0.1. Pengukuran dibuat pada persentil ke-75 lawatan sebenar.
Mari kita huraikan kepentingannya dalam konteks ini. Secara lalai, ejen membina kesan kemunculan seperti ini: ejen menetapkan kelegapan bahagian kepada sifar, kemudian membuang tetapan itu apabila bahagian tersebut memasuki ruang pandang. Jika kesan itu digunakan pada skrin pertama, imej mungkin sudah dimuatkan dan dinyahkod sepenuhnya, tetapi metrik tetap tidak mengiranya sehingga proses rendering bermula. Keadaannya lebih buruk jika skrip membuang kelegapan selepas pemuatan—ketika itu metrik menunggu keseluruhan skrip.
Terdapat dua cara untuk membetulkannya. Mulakan kemunculan daripada nilai kelegapan kecil yang bukan sifar dan bukannya sifar supaya rendering awal dikira. Atau biarkan kelegapan pada skrin pertama tanpa perubahan dan animasikan anjakan sahaja.
Isu kedua ialah perkara yang murah untuk dianimasikan dan perkara yang mahal.
Jika boleh, hadkan animasi kepada sifat opacity dan transform supaya animasi kekal pada peringkat penggubahan dalam saluran pemaparan.
— web.dev, https://web.dev/articles/animations-guide
Dalam bahasa mudah: pelayar menyusun imej dalam lapisan, dan perubahan kedudukan serta kelegapan berlaku pada langkah terakhir yang paling murah. Semua yang lain memaksanya mengira semula halaman. Pengukuran daripada dokumentasi yang sama: animasi menggunakan ofset top dan left mengambil masa 37 milisaat untuk reka letak dan 79 untuk rendering; kesan visual yang sama melalui transform mengambil sifar untuk kedua-duanya.
Dan inilah percanggahan yang perlu diingati: kelegapan murah untuk digubah, tetapi menyebabkan unsur tidak layak dikira dalam metrik kelajuan. Jadi, animasi yang murah untuk pelayar dan selamat untuk prestasi ialah dua perkara yang berbeza.
Satu lagi perkara tentang sifat `will-change`, yang sering ditaburkan oleh ejen “untuk pengoptimuman”. Dokumentasi MDN menyatakan perkara sebaliknya:
Penggunaan will-change yang berlebihan menyebabkan penggunaan memori berlebihan dan memaksa pelayar melakukan rendering yang lebih kompleks ketika cuba bersedia untuk kemungkinan perubahan. Hal ini merendahkan prestasi.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Dokumentasi itu turut menyatakan bahawa sifat ini bertujuan sebagai pilihan terakhir untuk masalah prestasi sedia ada. Ia bukan langkah pencegahan. Baris seperti `will-change: transform, opacity` pada lima puluh unsur ialah tanda lazim kod janaan.
Kisahnya lebih mudah untuk anjakan reka letak. Dokumentasi Google tidak menyalahkan animasi; sebaliknya, peralihan yang teliti membantu mengemas kini kandungan tanpa mengejutkan pembaca. Caranya sama: ubah skala dengan transform dan bukannya lebar dan tinggi, serta gerakkan unsur menggunakan ofset dan bukannya koordinat.
## Bagaimanakah pula dengan Orang yang Terjejas Secara Fizikal oleh Gerakan?
Rumusan utama
Sehingga 35% orang dewasa berusia lebih 40 tahun di AS pernah mengalami gangguan vestibular. Bagi mereka, animasi tatal boleh menyebabkan loya dan migrain. Tetapan sistem “kurangkan gerakan” telah disokong oleh semua pelayar selama lebih lima tahun, tetapi ejen tidak akan menambahkannya melainkan anda memintanya. Peraturan CSS dan cabang jelas dalam persediaan animasi JavaScript kedua-duanya diperlukan; membaca pilihan sahaja tidak menghentikan garis masa.
Bahagian ini penting bukan sekadar sebagai tanda ihsan. Golongan yang menjadi pelanggan pemilik perniagaan ialah orang berusia 40 tahun ke atas.
Anda boleh menanganinya dengan tiga baris gaya:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Tiga perkara perlu diingati.
Jadikan animasi tingkah laku lalai dan nyahdayakannya di dalam peraturan ini—dengan cara itu, halaman merosot dengan lebih selamat berbanding jika anda melakukan sebaliknya.
Spesifikasi menyatakan “membuang, mengurangkan atau menggantikan”—pembuangan sepenuhnya bukan pilihan pertama pun. Menggantikan gelongsoran tajam dengan pudar ringkas lebih baik daripada menghentikannya terus: menyahdayakan semua animasi akan merosakkan penunjuk pemuatan dan bar kemajuan.
Animasi dipacu JavaScript memerlukan pengendalian pilihan sendiri; pintasan tempoh CSS tidak membatalkan garis masa GSAP. Menyimpan `matchMedia(...).matches` dalam pemboleh ubah sahaja tidak berkesan melainkan persediaan bercabang mengikutnya. Untuk GSAP, kekalkan elemen kelihatan dalam HTML/CSS biasa, kemudian cipta gerakan hanya apabila pengguna membenarkannya:
```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.
```
Tajuk tidak boleh mempunyai gaya asas tersembunyi atau dialih. Dengan reduced motion didayakan, ia kekal kelihatan dan statik. Jika pilihan berubah ketika halaman terbuka, GSAP mengundur animasi apabila pertanyaan tidak lagi sepadan. `mm.revert()` turut membuang animasi dikumpulkan ketika komponen ditamatkan. Dalam Motion, laksanakan cabang setara dalam persediaan pustaka itu; peraturan CSS sahaja tidak mencukupi. Lihat [dokumentasi kitar hayat dan pembersihan GSAP matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
Terdapat juga kriteria kebolehcapaian rasmi yang perlu diingati. WCAG 2.2.2, kriteria Tahap A, menghendaki pengguna dapat menghentikan apa-apa yang bergerak, berkelip atau menatal secara automatik, berlangsung lebih daripada lima saat dan dipaparkan bersama kandungan lain. Hal ini terpakai pada karusel yang berputar secara automatik dan marquee tanpa penghujung, yang kerap dimasukkan oleh ejen.
## Tujuh Perkara yang Menyebabkan Kegagalan
Rumusan utama
Hampir semua kesilapan berpunca daripada tiga perkara: skrin pertama dianimasikan, gerakan terlalu banyak atau sifat yang salah dianimasikan. Scrolljacking ialah isu berasingan—kajian kebolehgunaan secara langsung menyifatkannya memudaratkan. Tempoh animasi yang sesuai ialah 100 hingga 400 milisaat, sedangkan ejen gemar menggunakan satu saat penuh secara lalai.
**1. Skrin pertama disembunyikan sehingga ia pudar masuk.** Unsur dengan kelegapan sifar tidak dikira sebagai calon untuk metrik rendering. Inilah kesilapan paling mahal kerana ia menjejaskan metrik yang mempengaruhi kedudukan carian.
**2. Segala-galanya dianimasikan.** Setiap bahagian meluncur masuk, setiap kad muncul. Anthropic menyatakan dengan jelas bahawa hal ini meningkatkan tanggapan bahawa reka bentuk itu dijana.
**3. Scrolljacking.** Apabila laman web menggantikan tingkah laku biasa roda tetikus dengan logik “sinematik” sendiri.
Dalam kajian yang sama, kebanyakan peserta mengalami sekurang-kurangnya kekeliruan arah yang ringan.
**4. Sifat reka letak dianimasikan.** Koordinat dan dimensi digunakan dan bukannya transform. 37 dan 79 milisaat berbanding sifar.
**5. Animasi terlalu panjang.** Julat yang sesuai ialah 100 hingga 400 milisaat, dengan 400 sudah sangat perlahan dan sesuai hanya untuk gerakan besar. Ejen gemar menggunakan satu saat penuh secara lalai.
Menurut dapatan beliau, julat yang sesuai ialah 100 hingga 400 milisaat. Tempoh 400 milisaat pun sudah sangat perlahan dan hanya sesuai untuk gerakan besar. Ejen gemar menggunakan satu saat penuh secara lalai.
**6. Tiada peraturan reduced-motion.** Ejen tidak akan menambahkannya sendiri.
**7. Laman web semakin perlahan setiap kali berinteraksi.** Hal ini khusus untuk React: animasi yang dicipta tanpa rujukan kepada unsur dan tanpa pembersihan akan bertambah setiap kali komponen dikemas kini. Lama-kelamaan, halaman mula menjadi perlahan tanpa sebab yang jelas.
Terdapat perangkap kelapan. Pendekatan “ejen mengambil tangkapan skrin dan membaiki apa yang dilihatnya” berkesan untuk halaman statik, tetapi bagi unsur beranimasi, pendekatan itu memerangkap ejen dalam gelung suntingan tanpa penghujung: ejen melihat bingkai perantaraan, menyangka itu pepijat, membaikinya, kemudian melihat satu lagi bingkai perantaraan. Selain itu, setiap tangkapan skrin menggunakan konteks.
## Berapakah Kosnya, dan Bagaimanakah Anda Mengelakkan Had Bulanan Habis untuk Satu Laman Web?
Rumusan utama
Semua alat dalam persediaan ini percuma; anda membayar kerja ejen itu sendiri. Animasi menggunakan had dengan lebih cepat berbanding kerja reka letak biasa kerana anda tidak boleh mengesahkan hasilnya dengan membaca kod: setiap suntingan memerlukan fail dibaca semula dan diikuti lelaran tambahan. Membina satu adegan pada satu masa, memastikan `CLAUDE.md` ringkas dan mematikan gelung tangkapan skrin pada unsur beranimasi semuanya membantu.
Kisah lazim daripada komuniti vibe coding berbahasa Inggeris: seseorang membina halaman yang mencolok dengan tatal merentas angkasa lepas, menyiarkan hasilnya, kemudian perbincangan mendedahkan bahawa laman tunggal itu telah menghabiskan seluruh kuota bulanannya.
Hal itu memang dijangka. Animasi menggunakan lebih banyak sumber berbanding kerja reka letak biasa atas beberapa sebab serentak. Anda tidak boleh mengesahkan hasilnya dengan membaca kod; anda perlu membuat lelaran. Setiap suntingan memerlukan fail dibaca semula. Gelung tangkapan skrin pada unsur bergerak pula menambah pusingan yang tidak perlu.
Perkara yang membantu:
Bina satu adegan pada satu masa dan muktamadkan hasilnya. Permintaan sekali gus untuk “menambahkan animasi pada seluruh laman” menjamin perbelanjaan berlebihan. Anda boleh mematikan pengesahan tangkapan skrin pada unsur beranimasi dan memeriksanya sendiri secara visual. Pastikan `CLAUDE.md` ringkas supaya peraturan tidak menggunakan konteks pada setiap permintaan. Berikan ejen fail `llms.txt` pustaka itu terlebih dahulu, jika tidak ejen akan mereka cara penyepaduan lapuk lalu menyahpepijat rekaannya sendiri.
Artikel [mengapa Claude Code membaca semula seluruh projek](https://ailoot.ai/blog/ms/claude-code-rereads-project/) menerangkan ke mana token digunakan semasa mengerjakan projek; artikel [cara mengelakkan had Claude Code daripada habis](https://ailoot.ai/blog/ms/claude-code-token-limits-saving/) menghuraikan cara mengawal penggunaan.
## Apakah Langkah Seterusnya?
Rumusan utama
Pendekatan ini berkesan: peraturan anti-templat, satu hala tuju visual, satu adegan gerakan, pemeriksaan kelajuan dan menghormati tetapan pembaca. Kerumitannya terletak pada penyediaan maklumat yang betul dalam konteks ejen terlebih dahulu supaya ejen mempunyai asas untuk membina reka bentuk. Animasi itu sendiri ialah bahagian kerja yang paling mudah.
Bina halaman pertama anda menggunakan lapan langkah itu. Pilih satu hala tuju visual, cipta satu adegan pada skrin pertama dan jalankan pemeriksaan kelajuan.
### Sumber
- [anthropics/skills](https://github.com/anthropics/skills) - kemahiran rasmi Anthropic, termasuk frontend-design
- [GSAP: Harga](https://gsap.com/pricing) - pengesahan bahawa ia percuma
- [Keluaran GSAP 3.13](https://gsap.com/blog/3-13) - perkara yang menjadi percuma pada akhir April 2025
- [GSAP: llms.txt](https://gsap.com/llms.txt) - dokumentasi untuk model bahasa
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - pemalam animasi tatal
- [Motion](https://motion.dev/) - alternatif MIT sumber terbuka
- [web.dev: Panduan animasi](https://web.dev/articles/animations-guide) - sifat yang patut dianimasikan
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - sebab untuk tidak menetapkannya lebih awal
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - tetapan reduced-motion
- [WCAG 2.2.2: Jeda, Henti, Sembunyi](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - kriteria kebolehcapaian
- [W3C: Animasi daripada Interaksi](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - kesan terhadap gangguan vestibular
- [Mobbin MCP](https://mobbin.com/mcp) - pustaka rujukan antara muka untuk ejen
Untuk langkah seterusnya—[Ailoot](https://ailoot.ai/).
## Soalan lazim: Cara Membina Laman Web Beranimasi dalam Claude Code dalam Satu Malam
### Mengapakah peraturan CSS reduced-motion membiarkan animasi GSAP berjalan?
Pintasan tempoh CSS tidak membatalkan garis masa JavaScript. Cipta animasi GSAP dalam cabang matchMedia no-preference dan kekalkan elemen asas kelihatan supaya reduced motion menghasilkan halaman statik.
### Bagaimanakah saya menghentikan animasi terkumpul selepas navigasi?
Panggil fungsi pembersihan dipulangkan persediaan animasi apabila halaman atau komponen dibuang. Dalam contoh, mm.revert() memulihkan gaya dan membuang animasi yang dikumpulkan instans matchMedia itu.
## Ailoot · Syarikat dan portfolio projeknya
Ailoot berteraskan pengalaman operasi yang mantap, pangkalan pelanggan yang besar, perkhidmatan yang stabil dan pemantauan KPI berterusan.
Syarikat dan portfolio projeknya: jutaan pelanggan; jualan bernilai berbilion setiap bulan.
Ailoot menggunakan pengalaman operasi ini untuk akses API kepada ciri AI dalam produk pelanggan, ejen, aplikasi dan automasi.