Panduan membaca yang dilokalisasi
emil-design-engTujuan, penggunaan, dan sumber
Keterampilan ini mewujudkan filosofi Emil Kowalski tentang penyempurnaan UI, desain komponen, keputusan animasi, dan detail tak terlihat yang membuat perangkat lunak terasa hebat.
Sumber diambil:
- Repositori sumber
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- Bintang Repositori
- 5,871
- Pembaruan terakhir repositori
- 2026-08-29
- Klasifikasi Kemampuan
- Alur Kerja Agen
- Waktu pengumpulan terbaru
Lisensi: MIT
Cuplikan alur kerja adalah alat bantu baca, bukan instruksi yang dapat dieksekusi dari Codez. Tidak ada Skill pihak ketiga yang dijalankan untuk menghasilkan halaman ini.
Bagian yang menjelaskan tujuan dan alur kerja di bawah ini merupakan materi dari hulu, yang telah diorganisir dan diterjemahkan untuk dibaca. Bagian ini berbeda dari analisis editorial Codez yang diberi label secara terpisah.
Apa yang dilakukan oleh Skill ini?
Keterampilan ini mewujudkan filosofi Emil Kowalski tentang penyempurnaan UI, desain komponen, keputusan animasi, dan detail tak terlihat yang membuat perangkat lunak terasa hebat.
Bagaimana alur kerja hulu bekerja
Kapan menggunakan pegas?
Interaksi seret dengan momentum Elemen yang seharusnya terasa "hidup" (seperti Dynamic Island milik Apple) Gerakan yang dapat dihentikan di tengah animasi Interaksi pelacakan mouse yang dekoratif
Jalur hulu · L143 ↗Teknik Desain
Anda adalah seorang insinyur desain dengan kepekaan terhadap detail. Anda membangun antarmuka di mana setiap detail menyatu menjadi sesuatu yang terasa tepat. Anda memahami bahwa di dunia di mana perangkat lunak semua orang cukup baik, selera adalah pembeda.
Jalur hulu · L6 ↗Selera itu dilatih, bukan bawaan lahir.
Selera yang baik bukanlah preferensi pribadi. Itu adalah insting yang terlatih: kemampuan untuk melihat melampaui hal yang tampak jelas dan mengenali apa yang meningkatkan kualitas. Anda mengembangkannya dengan mengelilingi diri Anda dengan karya-karya hebat, berpikir mendalam tentang mengapa sesuatu terasa baik, dan berlatih tanpa henti. Saat membangun UI, jangan hanya membuatnya berfungsi. Pelajari mengapa antarmuka terbaik terasa seperti itu. Lakukan rekayasa balik animasi. Periksa interaksi. Jadilah ingin tahu.
Jalur hulu · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)Persyaratan dan pengaturan
Tidak ada bagian persyaratan singkat yang dipilih dari file ini. Ini tidak berarti Skill tersebut tidak memiliki dependensi. Periksa petunjuk pengaturan repositori dan file yang dirujuk.
Batasan dan pemeriksaan kualitas
Jangan pernah membuat animasi dari skala yang tepat.0)
Tidak ada sesuatu pun di dunia nyata yang menghilang dan muncul kembali sepenuhnya. Elemen-elemen yang dianimasikan dariscale(0)terlihat seperti muncul entah dari mana. Mulai dariscale(0.9)atau lebih tinggi, dikombinasikan dengan opasitas. Bahkan skala awal yang hampir tidak terlihat membuat pintu masuk terasa lebih alami, seperti balon yang memiliki bentuk yang terlihat bahkan saat kempes.
Mulailah dengan uji coba yang aman.
- Periksa host yang didukung dan petunjuk instalasi repositori. Simpan direktori Skill beserta skrip, aset, dan dokumentasi yang dirujuk di dalamnya secara bersamaan;SKILL.mdsendirian dapat menghilangkan dependensi.
- Berikan input sebenarnya, output yang diinginkan, dan kriteria penerimaan kepada agen. Sintaks pemanggilan dan alat yang tersedia bergantung pada host; situs ini tidak mengasumsikan perintah instalasi universal.
- Cobalah alur kerja sumber dalam proyek sementara atau pada salinannya. Tinjau operasi yang mengubah file, layanan jarak jauh, atau sumber daya yang dapat ditagih sebelum mengizinkannya.
- Validasi output terhadap pemeriksaan kualitas sumber dan persyaratan Anda sendiri. Pemicu yang berhasil atau jumlah bintang repositori yang tinggi tidak menjamin hasil yang benar.
Baca selengkapnya di sumber aslinya.
- Teknik Desain
- Selera itu dilatih, bukan bawaan lahir.
- Detail-detail yang tak terlihat semakin rumit.
- Kecantikan adalah kekuatan tawar-menawar.
- Format Ulasan (Wajib)
- Kerangka Kerja Pengambilan Keputusan Animasi
- 1Apakah ini seharusnya dianimasikan sama sekali?
- 2Apa tujuannya?
- 3Easining apa yang sebaiknya digunakan?
- 4Seberapa cepat seharusnya?
- Kinerja yang dirasakan
- Animasi Musim Semi
- Kapan menggunakan pegas?
- Interaksi tikus berbasis pegas
- Konfigurasi pegas
- Keunggulan kemampuan untuk diinterupsi
- Tombol harus terasa responsif.
- Jangan pernah membuat animasi dari skala yang tepat.0)
- Buat popover yang sadar akan asal-usulnya.
- Tooltip: lewati penundaan pada saat kursor diarahkan ke atasnya.
- Gunakan transisi CSS daripada keyframe untuk UI yang dapat diinterupsi.
- Gunakan efek blur untuk menyamarkan transisi yang tidak sempurna.
- Animasikan memasuki status dengan @starting-style
- translateY dengan persentase
- scale() juga menskalakan elemen-elemen di dalamnya.
- 3Transformasi D untuk kedalaman
- asal transformasi
- jalur klip untuk Animasi
- Bentuk sisipan
- Tabulasi dengan transisi warna yang sempurna
Keterampilan Terkait
Terjemahan dan ruang lingkup
Panduan membaca ini memilih bagian-bagian dari teks yang telah disematkan di bagian atas.SKILL.mdTerjemahan ini dibantu. Ini bukan manual lengkap atau klaim kompatibilitas yang telah diuji. Bacalah dokumen asli dan file referensinya sebelum digunakan.
Pendahuluan ini mengacu pada versi yang disematkan di bawah ini; aktivitas repositori saat ini dan waktu pengumpulan ditampilkan secara terpisah.
- Sumber yang disematkan
- Baca teks aslinya ↗
- Sumber diambil
- Komit sumber
cf865e94de7729751c747171785b6ce57e7b178c- Sumber SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b