figma-generate-designTujuan, penggunaan, dan sumber

Apa yang dilakukan oleh Skill ini?

Gunakan keterampilan ini bersamaan dengan penggunaan Figma ketika tugas tersebut melibatkan penerjemahan halaman aplikasi, tampilan, atau tata letak multi-bagian ke dalam Figma. Pemicu: 'tulis ke Figma', 'buat di Figma dari kode', 'kirim halaman ke Figma', 'ambil ini'app/pagedan membangunnya di Figma', 'membuat layar', 'membangun halaman arahan di Figma', 'memperbarui layar Figma agar sesuai dengan kode'. Ini adalah keterampilan alur kerja yang disukai setiap kali pengguna ingin membangun atau memperbarui halaman, layar, atau tampilan lengkap di Figma dari kode atau deskripsi. Menemukan komponen, variabel, dan gaya sistem desain melalui search_design_system, mengimpornya, dan merakit layar secara bertahap bagian demi bagian menggunakan token sistem desain alih-alih nilai yang dikodekan secara langsung.

Bagaimana alur kerja hulu bekerja

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Persyaratan dan pengaturan

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.

1. 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.
2. 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.
3. 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.
4. 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.

• Membangun/Memperbarui Layar dari Sistem Desain
• Batasan Keterampilan
• Prasyarat
• Alur Kerja Paralel dengan generate_figma_design (Hanya untuk Aplikasi Web)
• Alur Kerja yang Diperlukan
• Melangkah1: Pahami Layar
• Melangkah2Temukan Sistem Desain — Komponen, Variabel, dan Gaya
• 2a: Temukan komponen
• 2b: Temukan variabel (warna, jarak, jari-jari)
• 2c: Temukan gaya (gaya teks, gaya efek)
• Melangkah3Buat Bingkai Pembungkus Halaman Terlebih Dahulu
• Melangkah4: Bangun Setiap Bagian di Dalam Pembungkus
• Ganti teks instance dengan setProperties()
• Baca pengaturan default kode sumber dengan saksama.
• Apa yang sebaiknya dibuat secara manual vs. diimpor dari sistem desain?
• Melangkah5: Validasi Layar Penuh
• Melangkah6Memperbarui Layar yang Sudah Ada
• Dokumen Referensi
• Pemulihan Kesalahan
• Praktik Terbaik

Keterampilan Terkait

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

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

49f948faa9258a0c61caceaf225e179651397431

Sumber SHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9