mcpField
W
web-interface-design

web-interface-design

github.com/ratacat设计与 UI58116 次安装37 周前更新
代码仓库

关于 web-interface-design

Web Interface Design 是一项技能，通过按任务组织的参考文件和检查清单指导界面设计，涵盖网页的字体、组件、布局、视觉层级与无障碍设计。

主要功能

  1. 01按任务索引设计参考资料
  2. 02字体与间距指导
  3. 03表单和组件模式
  4. 04视觉层级与色彩指导
  5. 05无障碍检查清单

适用场景

  1. 01检查网页的视觉层级
  2. 02改进表单与输入反馈
  3. 03检查间距和文字可读性
  4. 04检查对比度与键盘焦点

安装

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

$npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
accessibility.md
buttons.md
color-systems.md
css-patterns.md
forms-and-inputs.md
layout-and-spacing.md
typography.md
ui-components.md
visual-hierarchy.md

详细介绍

Web 界面设计

概述

设计的作用是区分主要内容和次要内容。用户应能立即识别哪些内容最重要。优秀的界面设计是隐形的——用户无需注意界面，就能完成目标。

此技能会协调使用特定领域的参考文件。只需阅读完成任务所需的内容。

参考文件索引

任务加载参考文件
字体大小、行间距、标题层级、垂直节奏references/typography.md
输入字段、验证、复选框、单选框、下拉选择框、文本区域references/forms-and-inputs.md
按钮层级、尺寸、状态、CTA、幽灵按钮references/buttons.md
配色方案、深色模式、色调／明暗变化、状态颜色references/color-systems.md
导航、卡片、标签页、折叠面板、模态框、表格、提示消息references/ui-components.md
网格、间距比例、响应式模式、留白references/layout-and-spacing.md
焦点技巧、层级原则、操作金字塔references/visual-hierarchy.md
对比度、焦点状态、屏幕阅读器、WCAGreferences/accessibility.md
CSS 实现模式、变量、常见样式references/css-patterns.md

快速决策：参考哪一项？

What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md

通用速查

间距比例（基准为 4px）

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

字体排印基准
  • 正文：16px，行高 1.5
  • 标题与正文比例最大为 1:3（16px 正文对应 48px 标题）
  • 段落间距：行高 ÷ 1.5
触控目标
  • 最小值：44×44px
  • 推荐值：48×48px
最低对比度（WCAG）
  • 普通文本：4.5:1
  • 大号文本（18px+ 或 14px+ 粗体）：3:1
  • UI 组件：3:1
按钮层级
层级用途样式
主要主要操作（每个视图一个）实心填充，高对比度
次要替代操作描边或浅色填充
三级次要操作仅文本或幽灵样式
深色模式要点
  • 背景：#121212（而非纯黑）
  • 文本：#E0E0E0（而非纯白）
  • 降低颜色饱和度

常见错误清单

  • 每个视图有多个主要按钮
  • 将占位符作为唯一标签
  • 纯白底纯黑
  • 使用纤细／浅色字重
  • 仅用颜色提示错误
  • 长文本居中
  • 间距数值不一致

设计评审流程

  1. 层级：主要操作是否一目了然？能否看出哪些内容最重要？
  2. 可读性：文本对比度是否合适？行长是否合理（45-75 个字符）？
  3. 表单：字段上方是否有标签？触控目标是否至少为 44px？错误提示是否有帮助？
  4. 间距：比例是否一致？元素周围是否留有充足空间？
  5. 无障碍：是否不只依赖颜色传达信息？焦点状态是否清晰可见？

不适用此技能的情况

  • 纯视觉品牌／标识设计
  • 营销文案决策
  • 后端架构
  • 移动端原生模式（iOS／Android 有所不同）

来源

  • Aleksei Baranov（Imperavi）的 Web Interface Handbook
  • Imperavi 的 User Interface Typography
  • Wathan 和 Schoger 的 Refactoring UI
  • WCAG 2.1 无障碍指南

评论

支持 Markdown