mcpField
U
using-ui-stack

using-ui-stack

github.com/revitalb-port设计与 UI057 次安装10 周前更新
代码仓库

关于 using-ui-stack

Using UI Stack 是用于生成 UI 组件的设计技能，提供统一的布局、颜色、排版、无障碍和交互规则。它还涵盖暗色模式映射与减少动态效果的要求。

主要功能

  1. 018px 间距网格
  2. 0260-30-10 配色比例
  3. 03排版尺度与暗色主题令牌
  4. 04五种交互状态
  5. 05无障碍与动态效果规范
  6. 06覆盖层 z-index 尺度

适用场景

  1. 01生成风格一致的 UI 组件
  2. 02检查交互状态与无障碍性
  3. 03验证浅色与暗色主题

安装

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

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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