mcpField
U
using-ui-stack

using-ui-stack

github.com/spencerpauly设计与 UI868545 次安装12 周前更新
代码仓库

关于 using-ui-stack

这是一项用于生成 UI 组件的设计技能，涵盖间距、颜色、字体、交互状态、无障碍和深色模式规则。它引导开发者或编码 Agent 检查项目令牌，并在没有现成配置时采用默认规范。

主要功能

  1. 018px 间距网格
  2. 0260-30-10 配色比例
  3. 03字体比例尺
  4. 04深色模式颜色映射
  5. 05五种交互状态
  6. 06无障碍与动效规范

适用场景

  1. 01统一组件间距
  2. 02检查新 UI 的交互状态
  3. 03设计明暗模式颜色令牌

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill using-ui-stack

安装后在 Claude Code 中输入/using-ui-stack确认已加载。

详细介绍

使用 UI Stack

为生成的每个 UI 组件应用结构化设计系统。这能避免内边距不一致、颜色不匹配以及遗漏悬停状态。

设计系统原则

为构建的每个组件遵循以下规则：

间距 — 8px 网格

所有间距（内边距、外边距、间隔）都使用 8 的倍数：

  • 4px — 仅用于紧凑的内部内边距
  • 8px — 行内间隔、图标间距
  • 16px — 标准内边距、卡片间距
  • 24px — 区块内边距
  • 32px — 较大的区块间距
  • 48px / 64px — 页面级间距
颜色 — 60-30-10 规则
  • 60% 中性色/背景色
  • 30% 品牌主色
  • 10% 用于 CTA 和高亮的强调色
  • 语义颜色：成功（绿色）、警告（琥珀色）、错误（红色）、信息（蓝色）
  • 深色模式下切勿使用纯黑色（#000），请使用 slate-950 或类似颜色
字体排印 — 1.25 比例级数
text-xs:   12px / 16px
text-sm:   14px / 20px
text-base: 16px / 24px
text-lg:   18px / 28px
text-xl:   20px / 28px
text-2xl:  24px / 32px
text-3xl:  30px / 36px
text-4xl:  36px / 40px
  • 标题：font-semibold 或 font-bold
  • 正文：font-normal，行高为 1.5–1.75
  • 等宽字体：用于代码、ID、数字数据
深色模式
  • 为每个颜色令牌提供完整的浅色/深色映射
  • 背景：使用 white → slate-950，而非 black
  • 文本：使用 slate-900 → slate-100
  • 边框：使用 slate-200 → slate-800
5 种交互状态

每个交互元素都必须包含：

  1. 默认 — 基础外观
  2. 悬停 — 轻微改变颜色或添加阴影
  3. 激活/按下 — 颜色稍深或略微缩小
  4. 焦点 — 显示可见的焦点环（ring-2 ring-offset-2）
  5. 禁用 — 降低不透明度，使用 cursor-not-allowed
无障碍
  • 文本对比度 ≥ 4.5:1，大号文本对比度 ≥ 3:1
  • 触控目标 ≥ 44×44px
  • 使用语义化 HTML（使用 button 而非 div，以及 nav、main 等）
  • 支持键盘导航 — 所有交互都可通过 Tab/Enter/Escape 访问
  • 为动画遵循 prefers-reduced-motion 设置
动画
  • 时长：微交互为 150–300ms
  • 缓动：进入时使用 ease-out，退出时使用 ease-in
  • 将动效包装在 motion-safe: 中，或检查 prefers-reduced-motion
覆盖层 Z-Index 层级
dropdown:  z-10
sticky:    z-20
overlay:   z-30
modal:     z-40
toast:     z-50
tooltip:   z-60

工作流

  1. 生成 UI 前，检查项目是否有 ui-stack 配置或设计令牌
  2. 如果没有，则应用上述默认设置
  3. 对每个组件，确认间距符合 8px 网格、颜色遵循 60-30-10 规则，并且具备全部 5 种交互状态
  4. 切换类/属性来测试深色模式，并确认所有令牌都正确映射

参考资料

评论

支持 Markdown