mcpField
W
web-design-guidelines

web-design-guidelines

github.com/epicenterhq设计与 UI4.8k63 次安装2 周前更新
代码仓库

关于 web-design-guidelines

web-design-guidelines 是用于依据 Web Interface Guidelines 审查 UI 代码和网站的技能。它会获取最新规则,并以文件和行号给出简明问题清单。

主要功能

  1. 01获取最新指南规则
  2. 02审查 UI 代码和网站
  3. 03检查无障碍、UX 与设计实践
  4. 04按文件和行号报告问题

适用场景

  1. 01审查指定的 UI 文件
  2. 02检查网站的无障碍问题
  3. 03依据更新后的规则复查界面

安装

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

$npx skills add https://github.com/epicenterhq/epicenter --skill web-design-guidelines

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

详细介绍

Web 界面指南

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

适用场景

在以下情况下使用此模式:

  • 根据 Web 界面指南审核 UI 代码。
  • 检查网站是否符合无障碍、用户体验或设计最佳实践要求。
  • 返回基于指南的审核结果,格式简洁,包含 file:line。
  • 根据最新的上游指南规则重新检查界面,然后再报告。

工作原理

  1. 从下方的源 URL 获取最新指南
  2. 阅读指定文件(或请用户提供文件或匹配模式)
  3. 根据获取的指南检查所有规则
  4. 按简洁的 file:line 格式输出检查结果

指南来源

每次审核前都获取最新指南:

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

使用 WebFetch 获取最新规则。获取的内容包含所有规则和输出格式说明。

用法

用户提供文件或匹配模式参数时:

  1. 从上方的源 URL 获取指南
  2. 阅读指定文件
  3. 应用获取的指南中的所有规则
  4. 按指南规定的格式输出检查结果

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

评论

支持 Markdown