SuperAPI AI 工具集

arc-ui-skills

设计与创作

查看项目

更新于 10-16 06:17

技能介绍

用途:这是一套面向 AI 智能体的 Arc 风格界面构建约束,适用于浅色模式界面、Arc 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。

主要能力:提供颜色语义令牌(如 surface-base #E4E4E4、accent #6FADE2、surface-raised #1B00B5 等)、排版规范(Inter 为唯一主字体,主标题 53px/700,正文 22px/500,标题用 text-balance,正文用 text-pretty)、间距(4px 网格,默认 5px 间隙)、边框圆角(2px 到 22px 刻度,默认 7px,胶囊形用 21px+)、布局(以 1920px 为基准视口,全屏用 h-dvh 而非 h-screen)、组件与交互状态(焦点 2px accent 描边与 2px outline-offset,禁用态 opacity 0.5 与 cursor: not-allowed)以及动画规则(仅在明确要求时加动画,只动 transform/opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion)。

使用方式:在构建对应界面时参照其 MUST/SHOULD/NEVER 规则执行。该技能与 awesome-design-md 中对应的 DESIGN.md 配合,地址为 https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/arc,视觉氛围与额外色令牌由 DESIGN.md 提供,本 SKILL.md 负责强制规则。

适用场景:需要遵循 Arc 视觉语言的浅色主题前端界面、设计系统落地与一致性检查。

限制:规则为强制性约束,不应使用任意间距与圆角值;文本对比度不低于 4.5:1;破坏性操作必须使用 AlertDialog;图标按钮须加 aria-label;输入框不得阻止粘贴;不使用 h-screen,固定元素须尊重安全区域。收费、价格与平台信息资料未提供。