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 Code、Codex 与 Cursor 的开源设计方法引擎。具备固定的设计判断、多种语法、参考编译、语义色板，以及用于验证 UI、交互、图片/视频工作、轮播墙、演示文稿与文档的 Studio 工作流程。22 个技能 · MIT 授权。

将 Claude 转变为资深设计架构师 — 包含 DTCG 设计代币、42 个组件、WCAG 2.2 无障碍标准、跨框架代码、138 个设计系统与可执行技能。

精选的设计系统书签、资源与文章列表，专为开发者打造。

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 设计系统