Panduan membaca yang dilokalisasi
figma-implement-designTujuan, penggunaan, dan sumber
Menerjemahkan desain Figma menjadi kode aplikasi yang siap produksi dengan1:1Keakuratan visual. Gunakan saat mengimplementasikan kode UI dari file Figma, ketika pengguna menyebutkan "implementasikan desain", "hasilkan kode", "implementasikan komponen", memberikan URL Figma, atau meminta untuk membuat komponen yang sesuai dengan spesifikasi Figma. Untuk penulisan kanvas Figma melaluiuse_figma, menggunakanfigma-use.
Sumber diambil:
- Repositori sumber
- openai/skills
- SKILL.md
skills/.curated/figma-implement-design/SKILL.md- Bintang Repositori
- 28,420
- Pembaruan terakhir repositori
- 2026-10-29
- Klasifikasi Kemampuan
- Desain
- Waktu pengumpulan terbaru
Lisensi: File lisensi perlu diverifikasi
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?
Menerjemahkan desain Figma menjadi kode aplikasi yang siap produksi dengan1:1Keakuratan visual. Gunakan saat mengimplementasikan kode UI dari file Figma, ketika pengguna menyebutkan "implementasikan desain", "hasilkan kode", "implementasikan komponen", memberikan URL Figma, atau meminta untuk membuat komponen yang sesuai dengan spesifikasi Figma. Untuk penulisan kanvas Figma melaluiuse_figma, menggunakanfigma-use.
Bagaimana alur kerja hulu bekerja
Alur Kerja yang Diperlukan
Ikuti langkah-langkah ini secara berurutan. Jangan melewatkan langkah apa pun.
Jalur hulu · L29 ↗Ringkasan
Kemampuan ini menyediakan alur kerja terstruktur untuk menerjemahkan desain Figma ke dalam kode siap produksi dengan akurasi piksel sempurna. Ini memastikan integrasi yang konsisten dengan server Figma MCP, penggunaan token desain yang tepat, dan1:1Kesamaan visual dengan desain.
Jalur hulu · L8 ↗Melangkah2: Ambil Konteks Desain
Berlariget_design_contextdengan kunci file yang diekstrak dan ID node. Ini menyediakan data terstruktur termasuk: Properti tata letak (Tata Letak Otomatis, batasan, ukuran) Nilai warna dan token desain
get_design_context(fileKey=":fileKey", nodeId="1-2")Persyaratan dan pengaturan
Prasyarat
Server Figma MCP harus terhubung dan dapat diakses. Pengguna harus memberikan URL Figma dalam format:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Batasan dan pemeriksaan kualitas
Kualitas Kode
Hindari nilai yang dikodekan secara langsung (hardcoded) - ekstrak ke konstanta atau token desain. Jaga agar komponen dapat disusun dan digunakan kembali.
Jalur hulu · L156 ↗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.
- Ringkasan
- Batasan Keterampilan
- Prasyarat
- Alur Kerja yang Diperlukan
- Opsi A: Uraikan dari URL Figma
- Opsi B: Gunakan Pilihan Saat Ini dari Aplikasi Figma Desktop (figma-desktop MCP saja)
- Melangkah2: Ambil Konteks Desain
- Melangkah3: Tangkap Referensi Visual
- Melangkah4Unduh Aset yang Diperlukan
- Melangkah5Terjemahkan ke Konvensi Proyek
- Melangkah6: Meraih1:1Kesetaraan Visual
- Melangkah7: Validasi Terhadap Figma
- Organisasi Komponen
- Integrasi Sistem Desain
- Kualitas Kode
- Contoh1: Mengimplementasikan Komponen Tombol
- Contoh2Membangun Tata Letak Dasbor
- Selalu Mulai dengan Konteks
- Validasi Inkremental
- Penyimpangan Dokumen
- Penggunaan Kembali Lebih Penting daripada Rekreasi
- Sistem Desain Pertama
- Masalah: Output Figma terpotong
- Masalah: Desain tidak sesuai setelah implementasi
- Masalah: Aset tidak dimuat
- Masalah: Nilai token desain berbeda dari Figma
- Memahami Implementasi Desain
- Sumber Daya Tambahan
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
49f948faa9258a0c61caceaf225e179651397431- Sumber SHA-256
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad