SuperAPI AI 工具集

linear-design-system

设计与创作

查看项目

更新于 10-16 05:00

技能介绍

用途:该技能用于在本项目中创建、维护和改进 Linear 设计系统的实现,适用于新增 UI 组件、修改设计令牌(颜色、排版、间距、阴影等)、校验组件是否符合设计系统规则、将现有组件迁移到令牌、审查代码合规性以及生成组件文档。

主要能力:强调令牌优先开发,禁止硬编码设计值,统一使用 src/lib/design-system/tokens/ 中的令牌;提供背景分层、排版系统、交互状态(悬停、聚焦、禁用)等规范;给出基于 cva 的组件结构模板、变体与尺寸定义方式、文件组织约定,以及将新组件加入演示页面的流程。

使用方式:创建组件时先检查 src/components/ui/ 中已有模式,确定所需令牌,定义变体与尺寸,规划交互状态;组件使用 cva 定义变体、TypeScript 接口与 forwardRef 导出。新增令牌需编辑令牌文件、在 tokens/index.ts 导出、按需更新 tailwind.config.ts 并在 globals.css 添加 CSS 变量。迁移时可用 grep 搜索硬编码颜色再映射为令牌。

适用场景:前端组件库维护、设计系统一致性校验、组件迁移与文档生成。

限制:资料未提供该技能的安装命令、收费方式、平台支持或实际运行效果;具体项目路径与配置需以实际代码库为准。