design-tokens

Kumpulan analisis file DESIGN.md dari sistem desain merek populer. Masukkan satu ke proyek Anda dan biarkan coding agent menghasilkan UI yang cocok.

🐼 Kerangka Kerja CSS-in-JS yang Universal dan Type-Safe untuk Design Systems ⚡️

Bangun aplikasi React yang konsisten dan dapat diberi tema berdasarkan prinsip desain berbasis batasan

Sistem build untuk membuat gaya lintas platform.

Ekstrak sistem desain lengkap situs web apa pun dengan satu perintah. Mendukung token DTCG, semantik+primitif+komposit, server MCP untuk Claude Code/Cursor/Windsurf, emiter multi-platform (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, variabel Figma, shadcn/ui, audit kesehatan CSS, perbaikan WCAG, dan ekstensi Chrome. MIT, Playwright, Node 20+.

Ekstrak sistem desain situs web apa pun menjadi token dalam hitungan detik: logo, warna, tipografi, batas, dan lainnya. Cukup satu perintah.

180 gradien CSS3, Figma, Sketch & PSD gratis — ditambah dataset JSON untuk alat desain, generator, dan agen AI.

Repositori DTCG resmi untuk situs dan spesifikasi design tokens.

Ubah UI referensi (gambar, tangkapan layar, URL) menjadi Design DNA JSON terkuantifikasi—token, gaya kualitatif, efek visual—lalu hasilkan UI yang cocok dari konten Anda.

Repositori resmi untuk plugin 'Tokens Studio for Figma' (Figma Tokens)

Daftar sumber daya tentang segala hal yang berkaitan dengan Design Tokens

Plugin Figma untuk mengekspor token desain ke format JSON yang kompatibel dengan Amazon Style Dictionary.

Mesin metode desain sumber terbuka untuk Claude Code, Codex & Cursor. 23 skill agen untuk penilaian desain tetap, tata bahasa ganda, palet semantik, kompilasi referensi, dan UI yang terverifikasi bukti. MIT.

Jadikan Claude sebagai Senior Design Architect — token desain DTCG, 42 komponen, aksesibilitas WCAG 2.2, kode untuk berbagai framework, 138 design system, serta skill yang dapat dijalankan.

Daftar kurasi bookmark, sumber daya, dan artikel tentang sistem desain yang berfokus pada pengembang.

Figmagic adalah bagian yang hilang antara DevOps dan desain: Menghasilkan token desain, mengekspor grafis, dan mengekstrak komponen React yang digerakkan oleh token desain dari dokumen Figma Anda.

Seperangkat komponen React untuk proyek PatternFly.

🖌️ Buat <script> Anda lebih ringan dan <style> Anda lebih cerdas

Menampilkan dokumentasi design token yang dihasilkan dari stylesheet dan file ikon Anda. Pratinjau perubahan design token di browser. Tambahkan design token Anda ke halaman Storybook Docs menggunakan Doc Blocks kustom.

Kompilasi design system Anda menjadi Agent Plugin. Ekstrak identitas dari referensi apa pun, hasilkan SKILL.md + tokens.css, dan linting apa yang melewati token Anda.

Lingkungan pengembangan visual untuk CSS

Spesifikasi untuk mendefinisikan objek tema & design token untuk digunakan dengan komponen UI.

Sistem desain siap pakai untuk Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): token, dukungan material fx shader, 42 komponen, 120 ikon, responsif seluler, bertema gelap. Satu stylesheet, tanpa dependensi. Telah diuji dalam game lintas platform yang telah rilis.

200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.

Sistem Desain Helios