SuperAPI AI 工具集

planetscale-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

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

主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互的明确规则。颜色方面要求主表面使用深色背景(亮度低于 20),页面背景用 #000000,主操作与焦点态用 #7967D3,文字对比度至少 4.5:1。语义令牌包括 surface-base #000000、surface-raised #F8F8F9、surface-overlay #EC4011、text-primary #202020、text-secondary #787878、border-default #D44927、destructive #EC4011、success #41D731、accent #7967D3 等。排版要求以 Inter 为主字体,主标题 51px/700,正文 17px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距基于 4px 网格,默认元素间距 38px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互上焦点用 2px 强调色轮廓与 2px offset,禁用态 opacity 0.5,破坏性操作使用 AlertDialog,图标按钮加 aria-label。动画仅在明确要求时添加,只动 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

使用方式:在构建深色模式界面、PlanetScale 风格设计系统或使用 Inter 字体与 4px 网格的 UI 时引用这些指南。

限制:资料未提供安装命令、代码示例或具体平台支持信息;部分检测到的颜色与字体权重建议减少,但未说明具体取舍标准。