项目预览
项目数据
项目介绍
Star 增长趋势
本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整
数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 629
使用教程
环境要求
- Bun 运行时
- 已有前端项目
安装与启动步骤
-
1抽样式
它先打印一段脚本，在目标页面上跑一遍把计算后的样式抓出来。
bunx tinte from --emit-script -
2转成身份配置
把抓到的样式喂回去，整理成一份可编辑的配置。
bunx tinte from --normalize styles.json -
3编译成插件
输出包含技能说明与设计令牌的插件目录，可装进编码助手。
bunx tinte build --plugin -
4查硬编码颜色
在项目里跑一遍，绕开令牌写死的颜色会让命令返回非零。
bunx tinte lint src/
如何确认成功
lint 能揪出项目里硬编码的颜色值，且编码助手按插件生成的界面用的是令牌色
注意事项
- 它解决的是让编码助手守规矩，不是生成设计稿。
- 提取靠一段脚本在真实页面上跑，站点有反爬或需登录时会失败。
- lint 现阶段只覆盖颜色，间距与字体的越界还查不到。
- 需要 Bun，Node 环境要另装。
核心亮点
- 自动从设计稿/网站提取设计令牌，省去手动整理 tokens 的繁琐工作
- 输出 SKILL.md 直接对接 AI 编程助手，让 AI 生成代码时自动遵循设计规范
- 内置 lint 工具可检测硬编码样式，防止设计系统被绕过
不足之处
- 早期项目，生态和文档尚不完善
- 对复杂设计系统的提取准确性和可定制性有待验证
适用场景
- 团队使用 AI 编程助手开发产品，需要保证 UI 一致性
- 从现有网站或设计稿快速生成可复用的设计令牌库
- 在 CI/CD 流程中自动检查代码是否遵循设计系统
替代项目
Style Dictionary、Design Tokens (W3C)、Theo
同类项目推荐
SwiftGraphics
开源
用 Swift 代码生成 SVG，直接驱动笔式绘图仪创作艺术。
SwiftGraphics is a library for creative coding and generative art tailored towards r···
tinte
开源
把设计系统喂给 AI，让 AI 自动遵守你的品牌规范。
Compile your design system into an Agent Plugin. Extract an identity from any refere···
qiaomu-design
开源
让 Claude Code 写前端不再千篇一律
偏执型设计顾问：反 AI 味设计 + 风格试衣间 + 58 站设计系统库的 Claude Code Skill | Op···
doop
开源
人和 AI 同画布实时协作设计
The open-source alternative to Paper.design. A multiplayer design canvas where human···
oh-my-design
开源
一条命令给 AI 编程助手装上 500+ 公司设计规范
Give your AI coding agent a design system. One command installs 500+ quality-graded ···
ai-design-components
开源
从规范到细节一步到位，AI 写界面不用返工
Comprehensive UI/UX and Backend component design skills for AI-assisted development ···
fantasy-dongfang-jianyuehaibao
开源
一键生成有文化底蕴的东方海报，标题版式全搞定
东方文化编辑海报 v2 Codex skill：Image 2 出图、中文标题精炼、真实文化物证、A/B/C 三联···
openflowkit
开源
说句话或贴段代码，本地秒出架构图与流程图
Free, open-source diagram canvas. Draw it, write it as code (Mermaid, D2, Structuriz···
OJO-Design-Skills
开源
给 AI 编码代理装上统一的设计规范
Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and ···