mcpField
W
web-design-guidelines

web-design-guidelines

github.com/vudovn设计与 UI8.2k240 次安装9 周前更新
代码仓库

关于 web-design-guidelines

用于依据 Web Interface Guidelines 审查文件的技能。它会获取最新规则、检查指定文件，并按规定格式报告问题。

主要功能

  1. 01获取最新的 Web 界面规则
  2. 02审查指定文件或模式
  3. 03检查无障碍、性能与实践规范
  4. 04按简洁的文件和行号格式报告

适用场景

  1. 01编码后审查已实现的网页
  2. 02依据更新后的界面指引检查文件
  3. 03按文件和行号定位规范问题

安装

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

$npx skills add https://github.com/vudovn/ag-kit --skill web-design-guidelines

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

详细介绍

Web 界面指南

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

工作原理

  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. 按指南指定的格式输出发现的问题

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

相关技能

技能使用时机
frontend-design编码前——学习设计原则（色彩、排版、用户体验心理学）
web-design-guidelines（本技能）编码后——审查无障碍性、性能和最佳实践

设计工作流

1. DESIGN   → Read frontend-design principles
2. CODE     → Implement the design
3. AUDIT    → Run web-design-guidelines review ← YOU ARE HERE
4. FIX      → Address findings from audit

评论

支持 Markdown