Railly/tinte

解决的问题

Tinte 解决了确保 AI 编码代理生成的 UI 与特定品牌的設計系统保持一致的问题。它通过提供一个结构化、可安装的「Agent Plugin」，包含品牌的标识、组合规则和 CSS 令牌，防止代理猜测样式或绕过设计令牌。

如何工作

Tinte 将设计身份配置编译为 AI 代理可以作为 API 消费的一组工件。它使用提取、编译和强制执行的工作流：

1. 提取：可通过 Ray 从实时页面或图像中提取设计身份。
2. 编译：将身份配置转换为一个包含 SKILL.md 文件（包含类型比例、语音和组合法则）和 tokens.css 文件（作为代理的样式 API）的 Agent Plugin。
3. 强制执行：一个 linting 工具确保代码中不使用绕过已定义设计令牌的颜色。

此外，Tinte 还可以将语义 OKLCH 令牌编译为超过 19 种不同格式，包括 shadcn/ui 预设、VS Code 主题和终端配置。

适用人群

希望将设计系统自动应用于 AI 生成代码，并确保在不同工具和环境中保持品牌一致性的开发人员和设计师。

特色

• Agent Plugin 编译器：将设计系统转换为专为 AI 代理读取和遵循而设计的格式。
• 多格式导出：支持 19+ 种格式，包括 VS Code、Zed、Cursor 和 shadcn/ui。
• 设计提取：能够从实时页面或图像中提取样式。
• 令牌 lint：一个 CLI 工具，用于检测样式是否绕过了已建立的设计令牌。