Communitygithub.com

DDS-Solutions/AI-TadPole-OS

审查UI代码是否符合Web界面指南。当用户要求“审查我的UI”、“检查无障碍性”、“审计设计”、“审查UX”或“检查我的站点是否符合最佳实践”时使用。

AI-TadPole-OS 是什么?

该技能旨在帮助AI Agent或开发者自动审查UI代码,确保其遵循最新的Web界面指南。它通过从指定的URL(Vercel Labs的Web界面指南仓库)获取最新规则集,读取用户指定的文件或按模式匹配文件,然后逐一应用所有规则进行合规性检查。技能最终以简洁的 `file:line` 格式输出所有发现的问题,便于快速定位和修复。此技能特别适合在编码完成后进行无障碍性、性能和最佳实践的审计,与前端设计技能形成互补,是设计工作流中“审计”阶段的核心工具。它支持多种主流AI编码平台,如Claude Code和Cursor。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/DDS-Solutions/AI-TadPole-OS/tree/HEAD/.agent/skills/web-design-guidelines

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

[!IMPORTANT] AI 上下文与知识传承

  • 子系统: Agent技能注册表 / web-design-guidelines
  • 架构: @docs ARCHITECTURE:Documentation
  • 失败路径: 信息偏差、遗留术语或文档不匹配。
  • 可观测性: 通过 execution/parity_guard.py ([SKILL]) 实现可追溯性。

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

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


相关技能

技能使用时机
前端设计编码前 - 学习设计原则(色彩、排版、UX心理学)
web-design-guidelines(本技能)编码后 - 审计无障碍性、性能和最佳实践

设计工作流

1. 设计   → 阅读前端设计原则
2. 编码   → 实现设计
3. 审计   → 运行 web-design-guidelines 审查 ← 您在此处
4. 修复   → 处理审计发现的问题

相关技能