mcpField
W
web-design-guidelines

web-design-guidelines

github.com/laguagu设计与 UI70187 次安装今天更新
代码仓库

关于 web-design-guidelines

用于依据 Web Interface Guidelines 检查文件的审查技能。它会获取最新规则并检查指定文件，以文件和行号格式报告问题；未提供文件时会询问审查范围。

主要功能

  1. 01获取最新界面指南
  2. 02按规则检查指定文件
  3. 03补充无障碍检查项
  4. 04按文件:行号报告问题

适用场景

  1. 01检查界面文件是否符合指南
  2. 02审查时核对无障碍细节
  3. 03根据文件模式执行审查

安装

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

$npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill web-design-guidelines

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

附带文件references/command.mdreferences/LICENSE

详细介绍

Web 界面指南

检查文件是否符合 Web 界面指南。

工作原理

  1. 从下方的源 URL 获取最新指南

  2. 读取指定文件（或提示用户提供文件／模式）

  3. 根据获取的指南中的所有规则进行检查

    截至 2026-10-11，command.md 遗漏了一些无障碍检查；进行无障碍审查时，还需检查对比度（WCAG 2.2 AA：文本为 4.5:1，大号文本和必需的非文本 UI 对比度为 3:1，并适用相应例外）、状态不能仅通过颜色表示、目标尺寸（WCAG 2.5.8：不小于 24 × 24 CSS px，并适用其例外；触摸屏上的 44 px 为建议值）、移动端输入框字体大小不小于 16 px，以及焦点如何移入模态对话框并返回，参见 APG 对话框模式。

  4. 以简洁的 file:line 格式输出发现的问题

指南来源

每次审查前都获取最新指南：

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

使用可用的 Web 或 shell 工具获取完整规则。返回摘要的获取工具（例如 Claude Code 的 WebFetch）可能会遗漏规则；如果 shell 可以访问网络，请改用 curl 获取原始 URL。如果无法访问 Web，请使用固定快照 references/command.md，并在审查结果中说明使用了该快照及其日期。

用法

用户提供文件或模式参数时：

  1. 从上述源 URL 获取指南
  2. 读取指定文件
  3. 应用获取的指南中的所有规则
  4. 按指南指定的格式输出发现的问题

如果未指定文件，请询问用户要审查哪些文件。

评论

支持 Markdown