技能说明
适合网页品牌升级、主题统一和前端设计一致性检查；可提取颜色与字体，生成 Agent Plugin、shadcn 主题等格式，并用 lint 发现硬编码颜色。部分流程会访问外部站点或上传截图，敏感素材请先确认边界。
关于此技能
把品牌身份整理成统一的设计令牌，并编译为 Agent 可读的设计系统和多种主题格式。
核心能力
从参考站点提取视觉身份
从网站或截图提取颜色、字体和视觉角色，形成可编辑的品牌基础，避免凭感觉猜颜色。
统一设计令牌
用 13 个语义化 OKLCH 色彩令牌表达背景、文字、边框和强调色，让页面组件共享同一套规则。
编译与绕过检查
可生成 Agent Plugin、shadcn 主题和其他格式，并用 lint 检查硬编码颜色是否绕过设计令牌。
适用场景
建立品牌设计系统
从官网、截图或现有主题提取颜色与字体，沉淀成后续页面可复用的设计上下文。
统一前端主题
为 shadcn/ui 项目安装主题和字体，或把同一套身份输出到编辑器、终端等格式。
检查页面一致性
在提交前扫描颜色和 Tailwind 调色板写法，发现绕过令牌的实现并作为质量门槛。
使用步骤
- 01
第一步：准备项目身份
确认参考站点、截图或现有主题，并检查项目里的 tinte.config.json 和 shadcn 配置。
- 02
第二步：提取并整理令牌
使用 tinte 的提取与规范化流程生成草稿，由人确认品牌语气和使用边界后再编译。
- 03
第三步：安装并验证
安装生成的主题或 Agent Plugin，运行 tinte lint 和页面预览，确认颜色、字体和深浅色状态符合预期。
常见问题
它会自动替我决定品牌颜色吗？+
不会。README 说明 CLI 不猜颜色，提取结果应由 Agent 或人复核，品牌语气和禁用规则也需要确认。
它只适用于 shadcn/ui 吗？+
不是。shadcn 是主要输出之一，仓库还提供 VS Code、终端等多种格式；具体项目仍需按自身技术栈验证。
运行时需要注意什么？+
部分提取和预览流程会访问外部站点或上传截图，敏感素材不要直接提交；主题覆盖和 lint 修改前应保留版本记录。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/01
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add Railly/tinte --skill tinte