39 Repositori GitHub untuk Front-End Design dengan AI: MCP, Skills, dan Tools Pendukung

Laporan desk research ini menjawab repositori GitHub mana yang benar-benar relevan untuk workflow GitHub front-end design AI: dari konteks Figma hingga skills UI, builder visual, dan verifikasi browser. Kami memetakan 39 kandidat unik (snapshot stars/forks 28 Oktober 2026), 38 halaman repo diperiksa langsung, lima repo dianalisis mendalam, satu kandidat masih berstatus verifikasi terbatas.

Ringkasan Penelitian

Tidak ada satu repositori yang menutup seluruh rantai desain frontend. Ekosistem terbagi per peran: MCP Figma menyuplai konteks desain, Agent Skills membimbing kualitas UI, library dan app builder men-generate atau mengedit kode (sering terikat React/Tailwind), browser MCP/CLI menguji interaksi dan performa, Context7/Serena/Repomix mengelola dokumentasi dan konteks kode. Bukti pengurangan ukuran payload pada Framelink Figma MCP (52,8–69,4% pada sampel maintainer) tidak setara penghematan biaya model. Playwright MCP dan Chrome DevTools MCP justru dilaporkan membebani konteks pada kondisi tertentu. Tingkat keyakinan sedang untuk klasifikasi repo, dan rendah untuk generalisasi biaya token lintas workflow.

Latar Belakang dan Pertanyaan Riset

Developer frontend yang memakai Cursor, VS Code dengan Copilot, Claude Code, atau Windsurf semakin sering menambah MCP server dan skill pack agar agent memahami desain, browser, dan codebase. Alur kerja nyata tetap berurutan: menetapkan arah visual, membaca Figma atau referensi, membangun layout dan komponen, memeriksa render di browser, lalu memperbaiki aksesibilitas dan performa. AI coding agent mempercepat iterasi, tetapi penilaian spacing, state komponen, semantic HTML, dan trade-off responsif tetap ada di tangan engineer.

Pertanyaan riset utama: repositori GitHub apa yang cocok untuk setiap tahap, dengan bukti integrasi dan batas apa yang terdokumentasi? Cakupan: proyek open source di GitHub terkait front-end design dan AI (2025–2026 plus repo lama yang masih dipelihara). Di luar cakupan: benchmark instalasi end-to-end oleh tim editorial, harga resmi layanan hosted pihak ketiga, dan klaim ranking mutlak berdasarkan stars.

Metode Riset dan Basis Sumber

Metode: sintesis dokumen riset tiga tahap (discovery, verifikasi halaman repo, analisis mendalam lima repo Prioritas A). Sumber hanya GitHub: README, Releases, Issues, Discussions. Kriteria seleksi: relevansi frontend design, integrasi agent/IDE, adopsi komunitas (stars/forks sebagai indikator popularitas repo, bukan rating kualitas desain), dan status maintenance. Deduplikasi fork dilakukan, 39 entri unik dipertahankan termasuk repo pendukung dan legacy. Label bukti: Terverifikasi di GitHub, Laporan pengguna, Analisis editorial, Belum diverifikasi.

Lima repo analisis mendalam: GLips/Figma-Context-MCP, grab/cursor-talk-to-figma-mcp, southleft/figma-console-mcp, microsoft/playwright-mcp, ChromeDevTools/chrome-devtools-mcp. Pembaca yang baru memasang MCP di editor dapat melihat perbandingan VSCode vs Cursor dan tutorial membangun MCP di localhost untuk Cursor dan VS Code sebagai konteks protokol, bukan bagian metode riset ini.

MCP, AI Skills, AI Agents, CLI, dan Library UI: Apa Bedanya?

Model Context Protocol (MCP) menghubungkan client AI ke server yang mengekspos tools dan data terstruktur (browser, Figma, filesystem). Agent Skills adalah instruksi atau playbook terstruktur yang client muat untuk membimbing gaya respons. AI agents (SDK browser, app builder) menjalankan loop otonom dengan model. CLI menjalankan otomasi deterministik tanpa selalu memanggil LLM. Library UI (misalnya registry komponen) reusable di codebase, bukan MCP.

Skill file saja tidak membuktikan kompatibilitas di semua IDE. Browser MCP menguji halaman live tanpa mengganti peran desainer Figma dalam menetapkan arah visual.

Temuan: MCP untuk Figma dan Alur Design-to-Code

GLips/Figma-Context-MCP (Framelink)

Terverifikasi di GitHub. Framelink MCP for Figma mengekstrak frame/group Figma menjadi konteks layout dan styling untuk coding agent. Lisensi MIT, release v0.13.2 (18 Juni 2026), 16,1k stars dan 1,3k forks (28 Oktober 2026). README menekankan integrasi Cursor, Issues mendokumentasikan percobaan Claude Desktop, Claude Code, dan Copilot (Issue #66, #362, #172). Server ini bukan produk resmi Figma.

Release v0.13.0/v0.13.1 mencatat deduplikasi style, tree format default, dan pengukuran payload: Small 14,4→6,8 KB (−52,8%), Large 176→81,6 KB (−53,6%), Massive 707→216,4 KB (−69,4%). Itu ukuran payload KB, bukan token model atau biaya API. Laporan pengguna di Discussion #98 (April 2025): API Figma mentah memberi hasil login page lebih baik pada satu kasus dibanding layer terjemahan MCP. Issue #258 membahas HTTP 429 dan batas plan Figma. Agent tetap perlu mengecek responsive, semantic HTML, dan state komponen, ekstraksi desain bukan jaminan implementasi produksi.

Instalasi umum memakai npx -y figma-developer-mcp --stdio dengan Figma Personal Access Token di environment (README). package.json upstream mensyaratkan Node >=20.20.0. Kode MIT, biaya model tetap dari client AI, dan token Figma mengikuti ketentuan workspace masing-masing.

grab/cursor-talk-to-figma-mcp (TalkToFigma)

Terverifikasi di GitHub. TalkToFigma menghubungkan MCP, WebSocket, dan plugin Figma agar agent membaca sekaligus memodifikasi canvas (auto-layout, komponen, batch text). MIT, 7,1k stars, 783 forks. Setup membutuhkan Bun, `bun socket`, plugin, dan `join_channel` (README). Halaman Releases kosong saat riset. Laporan pengguna Issue #70 mencatat timeout meski koneksi terlihat OK, dan modifikasi Figma tetap berbeda dari kode frontend final.

southleft/figma-console-mcp

Terverifikasi di GitHub. Figma Console MCP fokus design system: token, variables, variants, export CSS/SCSS/Tailwind, design-code parity, dan a11y checks. v1.44.2 (28 Oktober 2026), 2,6k stars, 269 forks. README mencantumkan Claude Code, Cursor, Windsurf, dan Cloud Mode. Mode local membutuhkan Figma Desktop plus plugin, sedangkan Cloud Mode tidak menyamakan seluruh kapabilitas lokal (Analisis editorial). Release v1.42.0 melaporkan ringkasan thread komentar ~97 ribu karakter menjadi <10 ribu pada kondisi tertentu. Issue #120 membahas timeout komponen pada file besar, dan v1.41.2 merujuk perbaikan terkait meski issue masih terbuka saat snapshot riset.

Repo Figma pendamping dan kandidat eksperimental

southleft/figma-console-mcp-skills (94 stars, 4 forks) memuat playbook token dan aksesibilitas untuk native Figma MCP. Mad7droid/figma-live-design-qa-mcp berstatus Belum diverifikasi penuh karena root repo belum lolos pemeriksaan lengkap, meski tujuannya mencocokkan frame Figma dengan halaman live.

Hasil Riset: AI Skills untuk Kualitas Desain UI/UX

Stars/forks di bawah mengukur popularitas seluruh repository, bukan satu skill file di dalamnya, dan kompatibilitas IDE hanya valid bila terdokumentasi di README skill atau client. ui-ux-pro-max-skill (140,8k stars, 14,9k forks) menawarkan skill pack design system, tipografi, dan palet lintas IDE. anthropics/skills (184,3k stars) hanya diacu lewat skill frontend-design, bukan seluruh repo. impeccable (90,2k stars) fokus critique dan audit UI plus detector non-LLM, sementara addyosmani/agent-skills (111k stars) menekankan production frontend dan accessibility.

vercel-labs/agent-skills (33,1k stars) kuat untuk React/Next.js, kurang relevan untuk HTML murni. WordPress/agent-skills (2,3k stars) ditujukan block themes dan Gutenberg, tidak otomatis untuk classic theme PHP. Artikel model AI yang dipakai frontend web developer memberi konteks client, terpisah dari isi skill WordPress.

Skills lainnya (ringkas)

Katalog UI Library, Screenshot-to-Code, dan AI App Builders

Library UI reusable berbeda dari generator aplikasi penuh, dan banyak builder terikat React, Tailwind, atau Next.js sehingga proyek HTML/SCSS/WordPress classic perlu adaptasi manual. Tabel berikut merangkum temuan verifikasi GitHub per repo.

Output vibe-coded perlu audit technical SEO dan aksesibilitas, lihat pembahasan static website dari vibe coding sebagai konteks risiko publikasi, bukan hasil pengujian repo di atas.

Inspeksi Browser, Responsive, dan Debugging Frontend

Bagian ini berlabel Analisis editorial karena fokusnya verifikasi dan perbaikan hasil frontend, bukan generasi desain awal. Dua repo berikut mendapat dokumentasi Issues/Releases paling lengkap dalam riset.

microsoft/playwright-mcp

Terverifikasi di GitHub. Playwright MCP (Apache-2.0, v0.0.83, 28 September 2026, 38,7k stars, 3,3k forks) memberi agent accessibility snapshots, aksi browser, screenshot, console/network. README mendokumentasikan Cursor, Claude Code, Codex, Gemini CLI, VS Code/Copilot, Windsurf, dan client lain (dokumentasi upstream Microsoft).

README mengingatkan MCP membawa schema tool dan accessibility tree ke konteks. Untuk beberapa coding agent, workflow playwright-cli plus Skills bisa lebih ringan. Laporan pengguna Issue #1216 mencatat output navigasi ~28.149 token melebihi batas client 25.000. Release v0.0.78/v0.0.83 menambah mitigasi snapshot, tetapi belum membuktikan hilang untuk semua halaman. Playwright MCP bukan security boundary, sehingga session login berisiko bila agent menjalankan aksi destruktif.

Konfigurasi standar memakai npx -y @playwright/mcp@latest dengan Node 18+ dan browser Chromium/Firefox/WebKit (README). Lisensi Apache-2.0, tanpa API key model pada server, meski biaya tetap berasal dari client AI.

ChromeDevTools/chrome-devtools-mcp

Terverifikasi di GitHub. chrome-devtools-mcp (Apache-2.0, v1.12.0, 22 Oktober 2026, 54,3k stars, 5,9k forks) untuk inspeksi CSS, console/network, screenshot, LCP/performance tracing, a11y debugging. MCP, CLI, dan skills adalah tiga interface berbeda (client configurations).

Opsi `–slim` memperkecil toolset, release v1.11.0/v1.12.0 mengurangi noise snapshot dan menambah pagination heap tools. Bukan angka penghematan biaya universal. Laporan pengguna Issue #635 melaporkan snapshot verbose pada Codex CLI (November 2025). Usage statistics aktif secara default, dengan opsi `–no-usage-statistics`, dan trace performance dapat mengirim URL ke CrUX kecuali `–no-performance-crux` dipakai. Browser resmi: Chrome atau Chrome for Testing.

Instalasi umum: npx -y chrome-devtools-mcp@latest dengan Node LTS (README). MCP, CLI, dan skills harus dijaga versinya agar parameter tool selaras. Isi tab browser dapat terekspos ke client, jadi session dengan data sensitif perlu isolasi profil.

Browser, visual testing, dan inspeksi sumber

Context Management: Bantu Workflow, Bukan Generator Desain

Repositori berikut tidak membuat layout visual, mereka mengoptimalkan konteks implementasi (Analisis editorial).

Stagehand, React Grab, Playwright CLI, dan axe-core tetap berperan di tahap verifikasi, bedanya optimasi alur versus pembuatan mockup.

Legacy, Deprecated, Archived, dan Verifikasi Terbatas

Jangan pasang repo archived/deprecated untuk proyek baru tanpa peringatan. design2code dan hueyexe/frontend-agent-skills tetap di section fungsional dengan catatan validasi terbatas.

Mengapa Developer Frontend Memakai MCP, Skills, dan AI Tools?

Tim frontend memasang MCP dan skill pack karena agent default tidak melihat Figma, DOM production, atau design token repo Anda. Server Figma mengisi celah spesifikasi visual, browser MCP menutup loop verifikasi setelah kode ditulis, skills menyeragamkan kriteria UI. Namun tidak ada paket yang otomatis menghemat biaya model atau mengganti review manusia terhadap responsif dan aksesibilitas.

Pembahasan: Tool Sesuai Kebutuhan Frontend

Tabel berikut memetakan fungsi terverifikasi ke repo, bukan benchmark skor.

Benarkah MCP atau Skills Menghemat Token dan Biaya AI?

Pisahkan metrik payload (KB/karakter), token model, jumlah panggilan API, tarif model, dan durasi pekerjaan sebelum membandingkan tool. GLips mendokumentasikan pengurangan ukuran payload 52,8–69,4% pada sampel maintainer (releases), sementara Southleft melaporkan ringkasan komentar ~97 ribu menjadi <10 ribu karakter pada kasus sempit (releases). Keduanya bukan bukti biaya model turun proporsional.

Playwright MCP memunculkan laporan respons besar lewat Issue #1216, dan Chrome DevTools MCP menawarkan `–slim` serta pruning snapshot (releases, Issue #635) tanpa angka penghematan universal. Skills, Context7, Serena, dan Repomix bisa membantu retrieval, tetapi otomasi non-LLM seperti axe-core tetap hanya menutup sebagian tugas deterministik.

Pernyataan inti: repositori gratis tidak sama dengan pemakaian model gratis, dan payload lebih kecil tidak berarti biaya API turun dengan persentase yang sama.

Contoh Workflow WordPress, HTML, SCSS, dan JavaScript

Skema konseptual berikut disusun dari kapabilitas terdokumentasi, bukan integrasi end-to-end yang sudah diuji tim editorial. Tahap desain bisa memakai Framelink bila yang dibutuhkan konteks frame, atau Figma Console bila token dan parity design-code lebih kritis. Setelah itu Impeccable atau skill frontend relevan membantu kualitas visual sebelum implementasi HTML/SCSS/JS di IDE.

Validasi browser sebaiknya memakai satu jalur utama, Chrome DevTools MCP untuk debug CSS/LCP atau Playwright CLI/MCP untuk interaksi, agar overhead schema tidak ganda. axe-core dan Storybook (bila ada arsitektur komponen) menambah pemeriksaan deterministik. Codebase besar bisa selective memakai Context7, Serena, atau Repomix. Untuk Gutenberg, WordPress/agent-skills membantu block theme, sedangkan classic theme PHP tetap di luar jangkauan otomatis skill tersebut.

Memasang banyak MCP bersamaan memperlebar tool schema dan izin client, jadi hindari tutorial konfigurasi copy-paste yang tidak ada di README upstream.

FAQ

Apakah semua repositori ini MCP server? Tidak. Storybook, axe-core, sebagian skills repo, dan app builder bukan MCP server standar. Apa beda MCP, Agent Skills, dan AI agents? MCP adalah server tools/data, Skills adalah instruksi terstruktur, sedangkan agents (Stagehand, builder) menjalankan loop otonom dengan model. Mana yang menghasilkan kode dari Figma atau screenshot? Framelink dan Southleft menyuplai konteks atau token, screenshot-to-code bekerja dari gambar, dan TalkToFigma mengedit Figma tanpa export kode otomatis.

Ada tools untuk WordPress tanpa React/Next? WordPress/agent-skills ditujukan block theme, HTML/SCSS tetap lewat coding agent plus browser tools, dan shadcn/onlook tidak cocok tanpa React. Semakin banyak MCP semakin hemat token? Tidak terbukti karena Playwright MCP dilaporkan membebani konteks dan banyak server memperbesar schema tool. Stars tinggi berarti desain terbaik? Stars hanya popularitas repo GitHub, bukan rating kualitas UI.

Risiko browser MCP pada sesi login? Isi browser dapat terekspos ke client, README Playwright dan Chrome DevTools menekankan bukan security boundary, dan BrowserMCP memakai profil Chrome pengguna. Repo GitHub gratis berarti model AI gratis? Tidak, karena builder BYOK seperti Dyad serta biaya Figma dan model tetap terpisah.

Keterbatasan dan Celah Data

Riset dokumentasi GitHub tanpa benchmark instalasi, fidelity visual, atau biaya model oleh tim penulis. Tiga puluh empat repo di luar lima Prioritas A tidak mendapat ulasan Issues/Releases mendalam. Satu kandidat QA Figma belum diverifikasi penuh. Angka stars/forks snapshot 28 Oktober 2026 dan dapat berubah. Klaim integrasi di luar README/Issues yang disebut dianggap perlu verifikasi lanjutan.

Simpulan

Pilih repositori menurut tahap kerja: design → implement → verify → optimize. Framelink, TalkToFigma, dan Figma Console melayani sisi desain dengan trade-off berbeda, skills dan library UI membantu kualitas dan kecepatan codegen, Playwright dan Chrome DevTools MCP menutup loop QA, Context7/Serena/Repomix mengelola pengetahuan kode. Repo pendukung dan legacy tidak “kalah”, melainkan berfungsi lain atau status maintenance berbeda. Setelah 300 kata pertama artikel ini, pembaca yang membutuhkan bantuan implementasi di stack WordPress atau desain web dapat menghubungi tim CodeF melalui layanan CodeF bila relevan dengan kebutuhan proyek.

Inventori 39 Repositori (sumber kebenaran)

Daftar numerik untuk memastikan cakupan unik, kategori editorial dapat tumpang tindih.

1. GLips/Figma-Context-MCP
2. grab/cursor-talk-to-figma-mcp
3. southleft/figma-console-mcp
4. microsoft/playwright-mcp
5. ChromeDevTools/chrome-devtools-mcp
6. BrowserMCP/mcp
7. AgentDeskAI/browser-tools-mcp
8. 21st-dev/magic-mcp
9. browserbase/mcp-server-browserbase
10. Mad7droid/figma-live-design-qa-mcp
11. shadcn-ui/ui
12. anthropics/skills
13. vercel-labs/agent-skills
14. WordPress/agent-skills
15. nextlevelbuilder/ui-ux-pro-max-skill
16. pbakaus/impeccable
17. addyosmani/agent-skills
18. mblode/agent-skills
19. hueyexe/frontend-agent-skills
20. jakubkrehel/skills
21. MengTo/Skills
22. southleft/figma-console-mcp-skills
23. openai/skills
24. abi/screenshot-to-code
25. mostafasadeghi97/design2code
26. dyad-sh/dyad
27. stackblitz-labs/bolt.diy
28. firecrawl/open-lovable
29. onlook-dev/onlook
30. microsoft/playwright-cli
31. browserbase/stagehand
32. web-infra-dev/midscene
33. aidenybai/react-grab
34. storybookjs/storybook
35. dequelabs/axe-core
36. garris/BackstopJS
37. yamadashy/repomix
38. upstash/context7
39. oraios/serena

Referensi

Sumber primer riset (GitHub, diakses dalam kerangka snapshot 28 Oktober 2026): dokumentasi dan issue/discussion/release untuk Framelink (GLips/Figma-Context-MCP, releases, Discussion #98, Issue #258), TalkToFigma (grab/cursor-talk-to-figma-mcp, Issue #70), Figma Console (southleft/figma-console-mcp, releases, Issue #120), Playwright MCP (microsoft/playwright-mcp, Issue #1216), Chrome DevTools MCP (chrome-devtools-mcp, releases, Issue #635). Inventori lengkap 39 repo tercantum pada section inventori dan tabel temuan di atas.