SuperAPI AI 工具集

linear-ui-skills

设计与创作

查看项目

更新于 10-16 06:17

技能介绍

用途:为构建 Linear 风格界面的 AI 智能体提供有主见的设计约束,适用于深色模式界面、Linear 风设计系统、使用 Inter 字体与 4px 网格的 UI 实现。

主要能力与规则:颜色方面要求主表面使用暗背景(亮度 < 20),页面背景用 #080A0A(surface-base),调色板建议限制 10 种颜色,文本对比度至少 4.5:1。提供语义令牌,如 surface-base #080A0A、surface-raised #D2D2D3、surface-overlay #E3E3E6、text-primary #5C5C5C、text-secondary #2D2E30、border-default #B0B1B1。

排版:主字体用 Inter,主标题 60px/700,正文 17px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,未明确要求不改 letter-spacing。间距用 4px 网格,默认元素间距 5px,使用设计刻度而非任意值。边框圆角用 6px、8px,默认 6px,边框统一 1px。布局基准视口 1920px,全屏高度用 h-dvh 而非 h-screen,固定元素遵守 safe-area-inset。

交互:焦点用 2px 外框与 accent 色 #5E6AD2,且 2px outline-offset;禁用态 opacity 0.5 与 cursor: not-allowed;破坏性操作使用 AlertDialog;加载用骨架屏;错误显示在操作发生处;图标按钮加 aria-label。动画仅在明确要求时添加,只动 transform/opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion。性能上避免动画大面积 blur/backdrop-filter,不在活动动画外使用 will-change。

补充:可与 awesome-design-md 中对应 Linear 的 DESIGN.md 配合使用,DRIFT 扫描器动态读取两者提取令牌。其余如具体安装方式、使用步骤与平台信息暂未提供。