SuperAPI AI 工具集

replit-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的、带有明确约束的 Replit 风格界面设计规范,用于在构建浅色模式界面、Replit 风格设计系统,以及使用 Inter 字体与 4px 网格实现 UI 时作为参考。

主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互等约束。颜色方面要求主表面使用浅色背景,页面背景必须用 #F8F8F8,主操作与焦点态必须用 #9266E6,文字对比度至少 4.5:1。语义令牌包括 surface-base #F8F8F8、surface-raised #1C4B39、surface-overlay #E1EAE7、text-primary #769E8E、text-secondary #8F9A96、text-tertiary #BBBFBB、border-default #EEEEEE、accent #9266E6、destructive #DE4409。排版要求主字体为 Inter,主标题 31px/semi_bold,正文 13px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自改字距。间距必须用 4px 网格,默认元素间距 2px。边框圆角取自给定刻度,默认 3px,胶囊元素用 45px+,边框宽度统一 1px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。

使用方式:将上述约束作为设计令牌与规则应用于界面实现;交互上焦点必须用 2px accent 描边并带 2px offset,禁用态用 opacity 0.5 与 cursor not-allowed,破坏性操作使用 AlertDialog,加载用骨架屏,错误就近展示,图标按钮加 aria-label。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

适用场景与限制:适合构建 Replit 美学的浅色界面与设计系统。资料未提供安装命令、代码示例、收费或平台信息,暂未提供。