SuperAPI AI 工具集

descript-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的设计约束技能,用于构建 Descript 风格的界面,尤其是深色模式设计系统。

主要能力:提供颜色、排版、间距、边框、布局、组件与交互的明确规则。颜色方面要求主表面使用亮度低于 20 的深色背景,页面背景为 #2C0814,并给出 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、destructive、warning 等语义令牌及对应 HEX/RGB 值,文本对比度至少 4.5:1。排版要求以 Inter 为主字体,主标题 79px/700,正文 18px/400,字重仅限 regular、bold、medium,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距基于 4px 网格,默认元素间距 6px;圆角取自 3px、6px、7px、9px、13px,默认 6px;边框宽度限 1px、3px、4px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需考虑 safe-area-inset。

使用方式:在生成或审查界面代码时引用这些规则作为约束。交互上,破坏性操作须用 AlertDialog,加载用骨架屏,错误就近展示,图标按钮须加 aria-label,禁用态用 opacity 0.5 与 cursor: not-allowed,焦点用 2px 强调色 #5E6AD2 轮廓并保留焦点指示。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,反馈不超过 200ms,并尊重 prefers-reduced-motion。

适用场景:深色模式界面、Descript 风格设计系统、使用 Inter 字体与 4px 网格的 UI 实现。

限制:资料未提供安装命令、代码示例、收费或平台信息;具体组件实现细节与完整令牌清单暂未提供。