
Terrazzo
CLI设计令牌命令行工具(原名 Cobalt UI):读取符合 W3C DTCG 标准的颜色、字体、间距等令牌,校验后通过插件生成 CSS、Sass、JS/TS、Swift、Tailwind 等代码,可放进 CI,让设计规范自动落到代码里。需要 Node.js 项目。
⛋ Terrazzo Monorepo
This repo serves as the home for:
- Terrazzo CLI: generate code from DTCG tokens (formerly known as “Cobalt UI”)
- Terrazzo Color Picker, a futuristic colorpicker that can handle wide gamut and high bit-depth colors in stunning color reproduction
- Token Lab (coming soon): generate design systems from scratch, or start from an existing OSS design system
🔹 Cobalt UI
Cobalt UI 2.0 was renamed to Terrazzo (same project, same people). To see the code for Cobalt 1.0, see the 1.x branch.
相關資源

designlang
CLI用无头浏览器读取任意网站的设计系统,一条命令导出颜色、字体、间距等设计令牌(DTCG)、Tailwind 配置、Figma 变量和品牌规范手册,还能给配色对比度与多页一致性打分;也可作为 MCP 服务或 Claude Code 插件使用。需要 Node.js,首次要下载 Chromium(也可改用已安装的 Chrome)。
Manavarya09/design-extract4.3k
DESIGN.md
CLIGoogle Labs 推出的 DESIGN.md 格式与命令行:设计师把配色、字体、间距等视觉规范写成文件交给 agent,lint 检查引用错误与 WCAG 对比度,diff 对比版本,export 导出 Tailwind 等设计令牌。需要 Node.js,格式仍为 alpha。
google-labs-code/design.md28.4k
Tailwind CSS
Skill用 Tailwind CSS 实现界面的通用指南:响应式与状态变体、深色模式、克制使用任意值、优先拆组件再用 @apply,以及动态拼接类名导致生产环境缺样式等常见问题,附按钮与首屏版式示例。
MengTo/Skills6.8k
Landing Page Design
Skill构建或修改落地页时分两部分工作:先收集目标、受众与证明材料,确定页面结构、版式、转化文案与 SEO;再遵循一套严格的视觉规则,规定字体、Tailwind 字号阶梯、间距、圆角、背景、图标与动效。规则偏主观,例如禁用 Inter 字体与背景渐变。
elayadesign/ai-design-skills2.7k
Budge
Skill在 Next.js App Router 项目中,agent 只改动单个 CSS 值或 Tailwind 类时,页面上会出现浮动调节条,用户用方向键微调数值、切换相关属性,回车复制修改提示、Esc 还原。需在 app/layout.tsx 引入 budge.design 托管的运行时脚本。
millionco/skills34
UnoCSS
SkillUnoCSS 原子化 CSS 引擎的参考:配置、规则、快捷方式、主题与变体,Wind3、Wind4(兼容 Tailwind)、Icons、Attributify 等预设,转换器以及 Vite 与 Nuxt 集成。提醒 agent 写样式前先看项目的 uno.config,配置不明时只用普通 class。由 Anthony Fu 从官方文档生成。
antfu/skills6k