关于 planetscale-ui-skills
面向 AI Agent 的 Planetscale 风格界面设计规范，适用于构建暗色界面和相关设计系统。内容涵盖颜色、字体、间距、布局及交互约束。
主要功能
- 01深色背景与语义颜色令牌
- 02Inter 字体与排版规范
- 034px 网格间距与边框规则
- 04焦点、悬停及禁用状态约束
- 05交互、动画与性能要求
适用场景
- 01构建 Planetscale 风格界面
- 02为 AI Agent 提供界面实现规范
- 03建立基于 Inter 和 4px 网格的设计系统
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/planetscale-ui-skills确认已加载。
附带文件metadata.json
详细介绍
Planetscale UI 技能
为使用 AI Agent 构建 Planetscale 风格界面制定的约束。
适用场景
在以下情况下参考这些准则：
- 构建暗色模式界面
- 创建受 Planetscale 启发的设计系统
- 使用 Inter 字体和 4px 网格实现 UI
颜色
- MUST 为主要表面使用深色背景（亮度 < 20）——检测到的亮度：0
- MUST 使用
#000000作为页面背景（surface-base） - MUST 使用
#7967D3作为主要操作和焦点状态的颜色（accent） - SHOULD 缩减调色板（当前检测到 23 种颜色）
- MUST 保持文本对比度至少为 4.5:1，以满足无障碍要求
语义令牌
| 令牌 | HEX | RGB | 用途 |
|---|---|---|---|
surface-base | #000000 | rgb(0,0,0) | 页面背景 |
surface-raised | #F8F8F9 | rgb(248,248,249) | 卡片、模态框、凸起表面 |
surface-overlay | #EC4011 | rgb(236,64,17) | 覆盖层、工具提示、下拉菜单 |
text-primary | #202020 | rgb(32,32,32) | 标题、正文 |
text-secondary | #787878 | rgb(120,120,120) | 次要、弱化文本 |
text-tertiary | #54565C | rgb(84,86,92) | 补充文本 |
border-default | #D44927 | rgb(212,73,39) | 细微边框、分隔线 |
destructive | #EC4011 | rgb(236,64,17) | 错误状态、删除操作 |
success | #41D731 | rgb(65,215,49) | 成功状态、确认提示 |
accent | #7967D3 | rgb(121,103,211) | 主要操作、链接、焦点 |
字体排版
- MUST 使用
Inter作为主要字体系列 - SHOULD 使用单一字体系列，以保持一致性
- MUST 将
51px/700用于主要标题 - MUST 将
17px/400用于正文 - SHOULD 减少字体粗细种类（当前检测到 5 种）
- MUST 对标题使用
text-balance，对正文使用text-pretty - SHOULD 对数值数据使用
tabular-nums - NEVER 在未明确要求时修改字间距
文本样式
| 样式 | 字体 | 大小 | 粗细 | 颜色 | 数量 |
|---|---|---|---|---|---|
heading-1 | Inter | 51px | 700 | #DF5C2E | 1 |
text-44px | Inter | 44px | 700 | #36F91F | 1 |
text-40px | Inter | 40px | extra_bold | #202020 | 1 |
text-39px | Inter | 39px | extra_bold | #1A1A1A | 1 |
text-38px | Inter | 38px | 700 | #1E1E1E | 1 |
text-35px | Inter | 35px | extra_bold | #1D1D1D | 1 |
text-34px | Inter | 34px | 700 | #1A1A1A | 1 |
text-31px | Inter | 31px | 700 | #141414 | 1 |
text-30px | Inter | 30px | 700 | #1A1A1A | 1 |
text-30px | Inter | 30px | 400 | #D76B60 | 1 |
字体排版参考
字体系列：
Inter（使用 55 次）
字体大小： 11px、12px、13px、14px、15px、16px、17px、18px、21px、22px、23px、24px、25px、26px、29px、30px、31px、34px、35px、38px、39px、40px、44px、51px
间距
- MUST 使用 4px 间距网格
- SHOULD 使用以下间距刻度：3px、4px、5px、6px、7px、25px、28px、32px
- SHOULD 将 38px 作为元素间的默认间距
- NEVER 使用任意间距值（使用设计刻度）
- SHOULD 保持容器内边距一致
边框
- MUST 始终使用 1px 边框宽度
- NEVER 使用任意圆角值（使用设计刻度）
- SHOULD 使用细微边框（1px）分隔元素
布局
- MUST 针对 1920px 的基础视口宽度进行设计
- SHOULD 使用一致的元素宽度：220px、221px、2px、30px、1px
- SHOULD 保持以文本为主的布局，并明确层级
- NEVER 使用
h-screen，全视口高度请使用h-dvh - MUST 为固定元素遵循
safe-area-inset - SHOULD 对正方形元素使用
size-*，而非w-*+h-*
检测到的布局模式
- 主要内容：宽度：1920px，高度：1041px
- 主要内容：宽度：1114px，高度：664px
- 主要内容：宽度：1104px，高度：667px
- 页眉：高度：39px
组件
按钮
| 变体 | 背景 | 文本 | 边框 | 高度 | 圆角 |
|---|---|---|---|---|---|
| 透明 | transparent | #F0B095 | 无 | - | - |
交互状态
焦点
- MUST 使用带强调色（
#7967D3）的2px轮廓 - MUST 使用
2px的轮廓偏移 - NEVER 移除焦点指示器
悬停
- 按钮（主要）：背景颜色提亮 10%
- 按钮（次要）：使用
#F8F8F9背景 - 列表项：使用
#F8F8F9背景
禁用
- MUST 使用
opacity: 0.5 - MUST 使用
cursor: not-allowed
交互
- MUST 对具有破坏性或不可逆的操作使用
AlertDialog - SHOULD 在加载状态下使用结构化骨架屏
- MUST 在操作发生的位置旁显示错误
- NEVER 禁止在
input或textarea元素中粘贴 - MUST 为仅含图标的按钮添加
aria-label
动画
- NEVER 添加动画，除非明确提出要求
- MUST 仅对合成器属性（
transform、opacity）进行动画处理 - NEVER 对布局属性（
width、height、top、left、margin、padding）进行动画处理 - SHOULD 在入场动画中使用
ease-out - NEVER 将交互反馈时长设为超过
200ms - SHOULD 遵循
prefers-reduced-motion
性能
- NEVER 对大型
blur()或backdrop-filter表面进行动画处理 - NEVER 在动画未激活时应用
will-change - NEVER 对任何可通过渲染逻辑表达的内容使用
useEffect
评论
支持 Markdown