SuperAPI AI 工具集

web-design-guidelines

设计与创作

查看项目

更新于 10-16 16:27

技能介绍

用途

web-design-guidelines 用于审查 UI 代码是否符合 Web Interface Guidelines。当用户提出“review my UI”“check accessibility”“audit design”“review UX”或“check my site”等请求时,可使用该技能。

该技能定位为严格的、基于规则的 UI 审查与问题报告工具,输出针对最新指南源的问题清单(file:line 格式)。

与其他技能的区别

  • 使用本技能(web-design-guidelines):进行严格的、基于规则的 UI 审查,并针对最新指南源生成问题报告(file:line)。
  • 使用 web-design-pro:进行更深层的设计系统架构、性能相关样式与实现策略工作。
  • 使用 ui-ux-pro-max:产出端到端 UX 交付物以及具体的重设计/重构方案。

主要能力

  • 审查文件是否符合 Web Interface Guidelines。
  • 每次审查前获取最新指南,确保依据最新规则。
  • 按指南中的所有规则逐条检查。
  • 以简洁的 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. 使用指南中指定的格式输出发现的问题。

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

适用场景

适用于需要对 UI 代码进行基于规则的合规性审查、可访问性检查、设计审查或 UX 审查的场景,尤其是希望获得具体到文件与行号的问题报告时。

限制

  • 该技能依赖外部指南源 URL 获取规则,需通过 WebFetch 获取最新内容。
  • 需要用户提供待审查的文件或匹配模式;未提供时需先询问。
  • 输出格式由获取到的指南内容决定。
  • 关于收费、价格、平台支持范围等信息,资料中暂未提供。