design-tokens

收集 DESIGN.md 檔案的分析，來自流行品牌設計系統。將其放入專案，即可讓程式碼代理生成相符的 UI。

🐼 通用、類型安全、CSS-in-JS 框架，用於設計系統 ⚡️

基於約束式設計原則構建一致、可主題化的 React 應用。

一個用於創建跨平台樣式的構建系統。

透過一行指令擷取任何網站的完整設計系統。DTCG 標記、語義+原始+複合，適用於 Claude Code/Cursor/Windsurf 的 MCP 伺服器、多平台發射器（iOS SwiftUI、Android Compose、Flutter、WordPress）、Tailwind v4、Figma 變數、shadcn/ui、CSS 健康度審計、WCAG 修復、Chrome 擴充功能。採用 MIT 授權、Playwright、Node 20+。

在數秒內將任何網站的設計系統提取為 Token：標誌、顏色、字型、邊框等。只需一個指令。

180 個免費的 CSS3、Figma、Sketch 與 PSD 漸層 —— 另外包含適用於設計工具、產生器和 AI agent 的 JSON 資料集。

這是設計 Token 網站與規範的官方 DTCG 儲存庫。

將參考 UI（圖片、截圖、網址）轉換為量化的 Design DNA JSON（包含 Token、定性樣式、視覺效果），然後根據您的內容產生相應的 UI。

外掛程式 'Tokens Studio for Figma' (Figma Tokens) 的官方儲存庫

關於 Design Tokens 的各類資源清單。

🎨 Figma 外掛程式，可將設計 Token 匯出為相容 Amazon Style Dictionary 格式的 JSON。

將 Claude 轉變為資深設計架構師 — 包含 DTCG 設計代幣、42 個元件、WCAG 2.2 無障礙標準、跨框架程式碼、138 個設計系統與可執行技能。

適用於 Claude Code、Codex 與 Cursor 的開源設計方法引擎。具備固定的設計判斷、多種語法、參考編譯、語意色票，以及用於驗證 UI、互動、圖片/影片工作、輪播牆、簡報與文件的 Studio 工作流程。22 個技能 · MIT 授權。

精選的設計系統書籤、資源與文章列表，專為開發者打造。

Figmagic 是 DevOps 與設計之間的遺失拼圖：從你的 Figma 文件中產生 design tokens、匯出圖形，並萃取由 design token 驅動的 React 元件。

一組用於 PatternFly 專案的 React 元件。

🖌️讓你的 <script> 更輕量，讓你的 <style> 更聰明。

顯示由樣式表與圖示檔案產生的設計 Token 文件。在瀏覽器中預覽設計 Token 變更，並使用自訂 Doc Blocks 將設計 Token 加入 Storybook Docs 頁面

將您的設計系統編譯成 Agent Plugin。從任意參考中萃取識別資訊，輸出 SKILL.md 與 tokens.css，並對繞過 tokens 的內容進行 lint 檢查。

CSS 可視化開發環境

用於定義 UI 元件主題物件與設計標記的規範

適用於 Unity 6 UI Toolkit 的隨插即用設計系統（UIDocument + PanelRenderer, UXML + USS）：包含 tokens、fx shader 材質支援、42 個組件、120 個圖示、行動裝置響應式設計與深色主題。單一樣式表，零依賴。已在發行的跨平台遊戲中經過實戰驗證。

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.

Helios 設計系統