mcpField
U
ui-design

ui-design

github.com/flitzrrr设计与 UI964 次安装30 周前更新
代码仓库

关于 ui-design

面向网页界面创作和审查的 UI 设计技能，涵盖布局、视觉层级、组件和设计系统。它结合网格与间距规则、交互指导及应避免的设计模式。

主要功能

  1. 01网格与间距规则
  2. 02视觉层级指导
  3. 03组件状态与模式
  4. 04风格指南与设计令牌
  5. 05界面审查清单

适用场景

  1. 01规划响应式页面布局
  2. 02定义一致的 UI 组件
  3. 03实现前创建风格指南
  4. 04审查界面的可用性问题

安装

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

$npx skills add https://github.com/flitzrrr/frontend-design-skills --skill ui-design

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

附带文件references/patterns.md

详细介绍

UI 设计

通过系统化布局、清晰的视觉层次和一致的组件，打造专业的 Web 界面。

适用范围

适用于以下场景：创建布局、设计 UI 组件、建立视觉层次、定义网格系统、构建样式指南或设计令牌，或审核现有界面的视觉一致性。

原则

1. 以用户为中心，而非追求美观

每项设计决策都应以目标受众的需求为指导。界面即使视觉效果出众，但难以使用，也是不合格的。

2. 视觉层次决定感知

尺寸、颜色、对比度和位置决定用户首先看到什么。每个页面都必须且只能有一个主要视觉焦点。

3. 一致性能建立信任

相同元素在任何地方都必须具有相同的外观和行为。不一致会增加认知负担。

4. 化繁为简就是力量

任何没有明确用途的元素都必须移除。留白并非浪费空间——它能提升可读性和专注度。

5. 网格是基础

没有网格系统，就无法实现专业的布局。网格能够确保对齐、建立节奏并支持响应式设计。

规则

布局与网格
  • 应做：以 12 列网格作为桌面端的基础（可被 2、3、4、6 整除）。
  • 应做：所有间距使用 8px 基准网格（8、16、24、32、48、64px）。
  • 应做：将内容最大宽度设为 1200-1440px。
  • 不要：在同一个应用中混用不同的网格系统。
  • 不要：在桌面端并排放置超过 3-4 个内容块，或在移动端并排放置超过 1-2 个。
视觉层次
  • 应做：至少建立 3 个层次：主要（主视觉区）、次要（功能特性）、第三层（详情）。
  • 应做：最重要的元素尺寸至少是第二重要元素的 1.5 倍。
  • 不要：在单个视口区域内使用超过 3 种不同的字号。
  • 不要：在同一视口中放置多个权重相同的 CTA。每个视口只能有一个主要 CTA。
组件
  • 应做：为标准交互使用成熟的 UI 模式。
  • 应做：为所有输入元素定义清晰的状态：默认、悬停、聚焦、激活、禁用、错误。
  • 应做：为多步骤流程添加进度指示器。
  • 不要：为标准任务发明新的交互模式。
留白与间距
  • 应做：在各个区块之间留出充足的空白（桌面端垂直间距至少为 64-96px）。
  • 应做：相关元素彼此靠近，不同分组之间留出较大间隔（格式塔接近律）。
  • 不要：用装饰元素填充空白区域。
样式指南与设计令牌
  • 应做：在实现之前创建 UI 样式指南，涵盖颜色、排版、图标、按钮和间距。
  • 应做：使用设计令牌：--color-primary、--spacing-lg、--font-heading。
  • 不要：使用魔法数字（硬编码的像素值）代替令牌引用。

模式

详细的模式说明：参见 references/patterns.md

主视觉区

大幅视觉内容 + 简洁标题（最多 7 个词）+ 副标题 + 对比鲜明的主要 CTA。必须在 3 秒内传达核心信息。

卡片布局（Bento 网格）

在网格中排列模块化卡片。每张卡片都是独立的信息单元。桌面端首屏最多显示 6-9 张卡片，移动端显示 2-3 张。

分屏布局

两个权重相同的区域——一个展示视觉内容，一个展示文本内容。移动端改为垂直堆叠。

粘性导航

滚动时标题栏始终可见。高亮显示当前区块。高度最多为 64px。

模态框与覆盖层

居中的覆盖层，背景变暗。提供清晰的关闭按钮。限制焦点范围。按 Escape 键关闭。

反模式

界面过载

元素太多、留白太少、CTA 彼此争夺注意力。解决方案：一个页面只设定一个主要目标。

样式不一致

不同页面上的按钮外观各异。解决方案：创建并严格遵循样式指南。

暗黑模式

操纵性设计（隐藏取消订阅按钮、确认羞辱）。解决方案：每次交互都必须透明，并符合用户利益。

将轮播图作为内容策略

自动轮播：用户只会注意到第 1 张（第 2 张及之后的点击率低于 1%）。解决方案：使用静态主视觉或手动切换的标签页。

劫持滚动

覆盖原生滚动行为。解决方案：保留原生滚动，让动画保持轻微。

检查清单

  • 是否定义了 12 列网格和 8px 基准线？
  • 是否设置了最大内容宽度（1200-1440px）？
  • 是否能清晰验证视觉层级：主要、次要、三级层级？
  • 每个视口中是否只有一个主要 CTA？
  • 所有组件是否都定义了状态（默认、悬停、焦点、激活、禁用、错误）？
  • 各区块之间的留白是否一致且充足（最小 64px）？
  • 是否已制定并应用样式指南/设计令牌？
  • 是否没有魔法数字——所有值是否都引用令牌？
  • 是否没有劫持滚动或自动轮播？
  • 是否排除了暗黑模式？
  • 模态框是否设有焦点陷阱，并支持按 Esc 键关闭？

交叉引用

  • web-typography -- 用于建立层级的字体选择与字号设置
  • color-theory -- 色彩系统和对比度规则
  • accessibility -- 所有 UI 组件的 WCAG 合规性
  • usability -- 提升用户友好性的启发式原则
  • responsive-design -- 网格在不同断点下的表现
  • design-trends -- 当前屡获殊荣的 UI 模式
  • component-patterns -- 组件的技术实现
  • visual-direction -- 视觉方向与风格决策

评论

支持 Markdown