Panduan membaca yang dilokalisasi

frontend-designTujuan, penggunaan, dan sumber

Buat antarmuka frontend yang khas dan siap produksi dengan kualitas desain tinggi. Gunakan keterampilan ini ketika pengguna meminta untuk membuat komponen web, halaman, artefak, poster, atau aplikasi (contohnya termasuk situs web, halaman arahan, dasbor, komponen React,HTML/CSStata letak, atau ketikastyling/beautifying(UI web apa pun). Menghasilkan kode dan desain UI yang kreatif dan rapi yang menghindari estetika AI generik.

Sumber diambil: 2026-10-29

Repositori sumber: vercel-labs/open-agents
SKILL.md: .agents/skills/frontend-design/SKILL.md
Bintang Repositori: 5,871
Pembaruan terakhir repositori: 2026-08-29
Klasifikasi Kemampuan: Desain
Waktu pengumpulan terbaru: 2026-10-31 10:38 UTC+08:00

Lisensi: MIT

SKILL.md asli

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?

Bagaimana alur kerja hulu bekerja

Ringkasan

Keterampilan ini memandu pembuatan antarmuka frontend yang khas dan berkualitas produksi yang menghindari estetika "AI yang asal-asalan" yang generik. Implementasikan kode yang benar-benar berfungsi dengan perhatian luar biasa pada detail estetika dan pilihan kreatif. Pengguna memberikan persyaratan frontend: sebuah komponen, halaman, aplikasi, atau antarmuka yang akan dibangun. Persyaratan tersebut dapat mencakup konteks tentang tujuan, audiens, atau batasan teknis.

Jalur hulu · L6 ↗

Pemikiran Desain

Sebelum melakukan pengkodean, pahami konteksnya dan berkomitmen pada arah estetika yang TEGAS: Tujuan: Masalah apa yang dipecahkan oleh antarmuka ini? Siapa yang menggunakannya?

Jalur hulu · L10 ↗

Pedoman Estetika Frontend

Tipografi: Pilih font yang indah, unik, dan menarik. Hindari font generik seperti Arial dan Inter; pilihlah font khas yang meningkatkan estetika frontend; pilihan font yang tak terduga dan berkarakter. Pasangkan font tampilan yang khas dengan font isi yang elegan. Warna & Tema: Berkomitmenlah pada estetika yang kohesif. Gunakan variabel CSS untuk konsistensi. Warna dominan dengan aksen tajam lebih unggul daripada palet warna yang kalem dan merata.

Jalur hulu · L26 ↗

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

Tidak ada bagian batasan terpisah yang dipilih dari file ini. Ini tidak berarti Keterampilan ini aman untuk setiap input atau lingkungan. Tinjau sumber lengkapnya dan validasi hasil Anda sendiri.

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.

Spesifikasi format dan direktori keterampilan ↗

Baca selengkapnya di sumber aslinya.

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: 2026-10-29T09:32:23Z
Komit sumber: cf865e94de7729751c747171785b6ce57e7b178c
Sumber SHA-256: 1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873

Kembali ke katalog Keterampilan lengkap