SuperAPI AI 工具集

ashby-ui-skills

设计与创作

查看项目

更新于 10-16 06:17

技能介绍

用途:为 AI 智能体构建 Ashby 风格界面提供明确的设计约束,适用于深色模式界面、Ashby 灵感设计系统,以及使用 Inter 字体和 4px 网格的 UI 实现。

主要能力与约束:颜色方面须用深色背景(明度小于 20,实测为 9),页面背景用 #0E1122(surface-base),色板建议不超过 8 种颜色,文字对比度至少 4.5:1。语义令牌包括 surface-base #0E1122、surface-raised #FEFEFE、text-primary #D6D9DD、text-secondary #34384D、text-tertiary #797979、border-default #818288。

排版:以 Inter 为主字体,尽量单一字族;标题用 28px/700,正文用 24px/semi_bold;标题用 text-balance、正文用 text-pretty;数字数据用 tabular-nums;除明确要求外不得修改字间距。字号含 12、13、14、15、16、19、24、25、28px。

间距与边框:须用 4px 网格,可用 2、3、4、5、88px,默认元素间距 2px,禁止任意值;圆角用 10px,边框宽度 4px,分隔用 1px 细边框。布局基准视口 1920px,全屏高用 h-dvh 而非 h-screen,固定元素尊重 safe-area-inset,方形元素用 size-*。

交互与限制:聚焦用 2px 强调色 #5E6AD2 轮廓及 2px outline-offset,不得移除焦点指示;禁用态用 opacity 0.5 和 cursor not-allowed;破坏性操作须用 AlertDialog;加载用骨架屏,错误就近显示;不得阻止粘贴;图标按钮须加 aria-label。动画除明确要求外不加,只动 transform 和 opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion。性能上禁止动画大范围 blur()/backdrop-filter,禁止在非动画期间使用 will-change,禁止用 useEffect 表达渲染逻辑。

该技能可与 DESIGN.md 配合,后者提供视觉氛围和更多颜色令牌,前者提供 MUST/SHOULD/NEVER 规则;漂移扫描器读取两者以动态提取令牌。