自动检查前端代码是否符合 Web 设计规范 #

解决前端样式不一致问题：自动获取 Vercel Labs 的最新 Web 设计指南，批量审查指定文件的代码，快速定位不符合规范的行号并输出结果。

为什么需要这个技能 #

前端项目在迭代中，样式和交互容易偏离统一的设计规范。手动检查需要对照文档逐行阅读，效率低且易漏检。

本技能通过自动化流程，实时拉取 command.md 中的最新规则，对比本地或指定的文件内容。它能快速识别代码中违反指南的行为，并以紧凑的 file:line 格式输出，便于集成到 CI/CD 流水线或人工复核。

适用场景 #

• 团队协作时，自动校验提交代码是否遵循最新的设计语言。
• 需要频繁更新设计规范，并要求 AI 自动适配和检查现有代码库。
• 作为开发者助手，在编写新组件前或重构后快速验证合规性。

核心工作流 #

1. 获取最新指南：使用 WebFetch 从官方源 URL 拉取最新的 command.md 内容，包含所有规则定义和输出格式指令。
2. 读取目标文件：读取用户指定的文件或路径模式，若无指定则请求用户输入。
3. 执行合规比对：将文件内容与指南规则进行逐行比对，标记所有不符合项。
4. 格式化输出结果：按照指南要求的格式输出文件及行号信息，例如 file:line。

下载和安装 #

下载 web-design-guidelines 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。

你可能还需要 #

暂无推荐