Pada 12 Oktober 2026 Said Mounaim menerbitkan case study DEV tentang workflow Figma ke WordPress: proyek open source figma-wp-blueprint—kumpulan Claude Code skills yang membaca URL Figma, mengekstrak token desain, dan memetakan section ke layout ACF Flexible Content dengan tema PHP klasik tanpa page builder.
AI mempercepat scaffold CSS/PHP dan perbandingan visual per breakpoint. Namun hasil generate AI bukan sertifikat production-ready. Semantic HTML, model field CMS, accessibility, escaping, performance, dan edge case konten Indonesia panjang tetap butuh audit manusia.
Kajian CodeF: AI memangkas fase implementasi, tetapi nilai jasa custom WordPress ada pada sistem yang maintainable, editable editor, dan aman—not sekadar file theme generate.
Apa yang Bisa Diekstrak dari Figma
Workflow DEV menyebut warna, font, spacing, breakpoint, lalu tiap section jadi layout flexible (hero, features, CTA, dll.). Figma tidak menentukan hierarchy heading, empty state, query WordPress, atau aturan konten dinamis—interpretasi tetap di developer.
Field ACF harus expose keputusan konten (heading, CTA, gambar), bukan setiap pixel dekoratif. Reusable component versus layout duplikat perlu dipisah manusia; copy-paste PHP antar layout cepat jadi utang teknis.
Visual Diff Bukan Satu-satunya QA
Perbandingan screenshot berguna untuk spacing dan tipografi. Walau visual match terlihat rapi, kontras buruk, ID duplikat, focus order salah, atau output tanpa escaping tetap lolos.
Audit responsive di lebar antara breakpoint Figma, teks Indonesia panjang, zoom 200%, dan variasi jumlah kartu di repeater. Stress test: heading ganda panjang, CTA kosong, gambar portrait—CMS real jarang sama dengan sample Figma.
PHP theme wajib esc_html(), esc_attr(), esc_url(), wp_kses_post() sesuai konteks. ACF tidak otomatis aman di setiap output.
Checklist Production: SEO, Performance, Security
Periksa title/meta, canonical, struktur heading, alt gambar, dan integrasi Yoast bila proyek memakainya. Uji LCP/CLS/INP pada build staging—not asumsi pixel-perfect = cepat.
Hapus API key dev, nonce pada AJAX/REST, validasi upload SVG. Lisensi font/icon dari Figma harus clear untuk production.
Workflow serupa kami bahas pada refactor theme WordPress dengan LLM—prinsip review diff tetap sama meski sumber desain berbeda.
Kebutuhan jasa buat tema WordPress custom sering muncul bila tim internal tidak punya bandwidth QA penuh setelah fase generate AI.
Sumber Primer
Sumber primer: From a Figma URL to a custom WordPress theme with Claude Code (12 Oktober 2026); repositori figma-wp-blueprint. Jangan janji konversi Figma otomatis 100% tanpa developer.
