SuperAPI AI 工具集

craft-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的 Craft 风格界面设计约束,用于在构建浅色模式界面、Craft 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 时提供规范。

主要能力:给出颜色、语义令牌、排版、间距、边框、布局、组件、交互、动画与性能方面的 MUST/SHOULD/NEVER 规则。颜色上要求页面背景使用 #F3EFEC,主操作与焦点状态使用 #D0E8F4,文字对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、warning、destructive、success、accent 等,均附 HEX 与 RGB 值。排版要求以 Inter 为主字体,主标题 75px/700,正文 12px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距要求使用 4px 网格,默认元素间距 4px。边框圆角取自 3px、9px、10px、13px、15px、16px、18px、19px、21px、22px,默认 18px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互上要求焦点使用 2px 轮廓与 2px 偏移,禁用态 opacity 0.5,破坏性操作使用 AlertDialog,图标按钮加 aria-label。动画仅在明确要求时添加,只动 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

使用方式:作为技能规则供 AI 智能体在生成界面时遵循;可与 awesome-design-md 中对应的 Craft DESIGN.md 配合,后者提供视觉氛围与额外颜色令牌,本技能提供强制规则,漂移扫描器读取两者动态提取令牌。

适用场景:构建 Craft 美学风格的浅色界面、设计系统与组件。

限制:资料未提供安装命令、收费方式、平台支持或效果保证;部分规则为建议性(SHOULD),并非全部强制。