设计系统编译

📌 Skill 基础信息

• Skill 名称：tinte
• 简称：tinte
• 来源：社区第三方（由 Railly 开发维护）
• 运行宿主：仅能在 Claude-Code CLI 中运行
• 核心定位：将设计系统编译为 Agent 插件，支持从任意参考源提取视觉标识，生成标准化的设计标记文件，并校验设计一致性。

🧩 内部核心组成

该 Skill 主要包括以下核心组件：

• 子 Agent 集合：【无公开信息】
• 斜杠命令：【无公开信息】
• MCP 工具：【无公开信息】
• 模板文件：支持生成 SKILL.md 与 tokens.css，用于统一设计标记和文档结构。
• Hooks 钩子：【无公开信息】
• 规则约束：具备设计标记的提取与一致性检查（Lint）能力，防止绕过设计系统规范。
• 目录结构：【无公开信息】

🛠 安装与启用方式

1. 前置依赖：需已安装 Claude-Code CLI 环境。
2. 安装命令：

```bash

skills install --user Railly/tinte

```

1. 启动方式：安装后，在 Claude-Code CLI 中调用 tinte 相关功能，具体指令需查看官方文档或技能说明。

📋 标准工作流

1. 用户输入指令，如提取某参考源（如网站、图片、设计稿）的视觉标识。
2. tinte 解析输入，提取颜色、字体、间距等设计标记。
3. 生成标准化文件：tokens.css（设计变量）与 SKILL.md（技能说明文档）。
4. 运行 Lint 检查，确保设计元素符合规范，对不合规部分进行提示或拦截。
5. 输出设计系统插件，供后续开发或代理使用。

⚠️ 关键限制、缺陷、注意事项

• 平台限制：仅限 Claude-Code CLI，不支持其他 Agent 工具（如 Cursor、MCP 或 OpenAI Agent）。
• Token 消耗：【无公开信息】
• 适用项目：适合需要统一设计系统、希望自动化提取和校验设计标记的项目。
• 不适用项目：不涉及设计系统或无需视觉规范校验的项目。
• 已知坑点：【无公开信息】
• 生产环境：基于 MIT 协议开源，但具体稳定性需进一步测试验证。

✅ 适用场景 & ❌ 不适合场景

✅ 适用场景：

• 前端或全栈团队希望将设计系统快速转化为可用的代码标记。
• 需要从现有参考（如线上产品或设计稿）中批量提取颜色、字体等设计变量。
• 追求设计一致性，需自动化校验项目中是否遵循设计 token 规范。

❌ 不适合场景：

• 非 Claude-Code CLI 用户或环境。
• 项目无设计系统要求，或设计标记提取需求。
• 期望技能提供现成的 UI 组件或交互功能（tinte 侧重于设计标记编译与规范检查）。