implement-design

oleh figma

Menerjemahkan desain Figma menjadi kode siap produksi dengan kesetiaan visual yang presisi piksel. Membutuhkan koneksi server Figma MCP dan URL Figma dengan kunci file serta ID node untuk mengekstrak konteks desain, tangkapan layar, dan aset. Alur kerja terstruktur tujuh langkah: parse URL, ambil konteks desain, tangkap referensi visual, unduh aset, terjemahkan ke konvensi proyek, capai paritas 1:1, dan validasi terhadap Figma. Mengutamakan penggunaan ulang sistem desain daripada duplikasi; memetakan token Figma ke desain proyek...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

Unduh ZIP GitHub

Lebih banyak skill dari figma

video-interaction-mapper

Keterampilan ini harus digunakan ketika pengguna meminta untuk menganalisis rekaman layar UI dan memetakan status interaksi ke Figma. Pemicu untuk permintaan seperti "letakkan video…

figma-code-connect

Membuat dan memelihara file template Figma Code Connect yang memetakan komponen Figma ke potongan kode. Gunakan saat pengguna menyebutkan Code Connect, komponen Figma…

create-design-system-rules

Aturan sistem desain khusus untuk implementasi Figma-ke-kode yang konsisten di seluruh proyek Anda. Menghasilkan konvensi khusus proyek untuk organisasi komponen, styling, token desain, dan penanganan aset yang memandu agen AI untuk menghasilkan kode yang konsisten. Mendukung tiga format file aturan: CLAUDE.md untuk Claude Code, AGENTS.md untuk Codex CLI, dan .cursor/rules/figma-design-system.mdc untuk Cursor. Membutuhkan koneksi server MCP Figma dan analisis codebase untuk menemukan pola yang ada sebelum aturan...

figma-implement-motion

Menerjemahkan gerakan dan animasi Figma menjadi kode aplikasi yang siap produksi. Gunakan saat mengimplementasikan animasi/gerakan dari desain Figma — pengguna menyebutkan…

Terjemahan SwiftUI ↔ Figma. Gunakan saat pengguna menyebut Swift, SwiftUI, iOS, iPhone, atau iPad — dalam ARAH MANAPUN — menerjemahkan desain Figma ke…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Keterampilan ini membantu agen menggunakan alat MCP use_figma Figma dalam konteks Slides. Dapat digunakan bersama figma-use yang memiliki konteks dasar untuk menggunakan…

figma-use-figjam

Skill ini membantu agen menggunakan alat MCP use_figma milik Figma dalam konteks FigJam. Dapat digunakan bersama figma-use yang memiliki konteks dasar untuk menggunakan…