SuperAPI AI 工具集

clerk-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的设计约束技能,用于构建受 Clerk 美学启发的界面,强调浅色模式、Inter 字体与 4px 网格。适用于创建 Clerk 风格设计系统、实现浅色界面等场景。

主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件、交互状态、动画与性能等方面的规则。颜色要求页面背景使用 #FEFEFE(surface-base),主操作与焦点状态使用 #C4A9F3(accent),文字对比度至少 4.5:1。语义令牌包括 surface-raised #090909、text-primary #5C5C5C、text-secondary #98979D、text-tertiary #2F2F2F、border-default #E4E4E1 等。排版要求主字体为 Inter,主标题 66px/700,正文 26px/700,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距必须使用 4px 网格,默认元素间距 5px。边框圆角取自 4px、6px、7px,默认 6px,边框宽度统一 1px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互方面:焦点使用 2px accent 描边并带 2px offset;禁用态 opacity 0.5 且 cursor: not-allowed;破坏性操作使用 AlertDialog;图标按钮需 aria-label;不得阻止粘贴。动画仅在明确要求时添加,只动画 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

使用方式:作为技能规则供 AI 智能体在生成界面时遵循,可与对应的 DESIGN.md 配合使用,漂移扫描器会动态读取两份文件提取令牌。

限制:资料未提供安装命令、具体平台支持范围、收费信息或实际效果数据;部分规则(如输入框高度 0px)为原文明确约束,需按原文执行。