下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“web-design-guidelines”。 Use web-design-guidelines to review src/components/Button.jsx
预期结果:
Button 组件审查完成：
✓ 通过：Button 具有正确的语义化 HTML 结构
✓ 通过：颜色对比度充足（4.5:1 比率）
⚠ 警告：第 23 行缺少仅图标按钮的 aria-label
⚠ 警告：第 45 行的焦点状态可以更明显
建议：为仅图标按钮元素添加 aria-label="Submit" 以支持屏幕阅读器。
正在使用“web-design-guidelines”。 Check index.html for accessibility compliance using web-design-guidelines
预期结果:
index.html 可访问性审计：
✓ 通过：具有语义化元素的有效文档结构
✓ 通过：存在 Lang 属性
⚠ 警告：第 15 行的图片缺少 alt 属性
⚠ 警告：第 30-35 行缺少表单标签
⚠ 警告：建议添加跳过导航链接
需要操作：为所有图片添加 alt 文本并将标签与表单输入关联。
安全审计
安全All static findings are false positives. The backticks flagged as 'Ruby/shell backtick execution' are markdown code formatting. The 'weak cryptographic algorithm' detections are scanner errors on random markdown text. The network URL is a legitimate public GitHub resource (vercel-labs/web-interface-guidelines) intentionally fetched to get current guidelines. This is a simple skill that fetches public guidelines and reviews UI code for compliance.
中风险问题 (1)
低风险问题 (1)
质量评分
你能构建什么
Web 开发者代码审查
Web 开发者希望在部署前确保其 UI 组件遵循可访问性和设计最佳实践。
可访问性审计
UX 设计师需要验证所有页面是否符合可访问性标准和 WCAG 指南。
设计系统合规性
团队负责人希望确保所有团队成员在其实现中遵循一致的设计模式。
试试这些提示
Use the web-design-guidelines skill to review my UI code in [filename] for compliance with web interface guidelines.
Use web-design-guidelines to check [file or pattern] for accessibility compliance and suggest improvements.
Use web-design-guidelines to perform a comprehensive review of [directory or pattern]. Check all files for web interface guidelines compliance, accessibility, and UX best practices.
Use web-design-guidelines skill to review all [*.jsx or specific pattern] files in [directory] for web interface guidelines compliance.
最佳实践
- 每次审查前获取最新指南以确保当前最佳实践
- 审查完整文件而非代码片段以获得准确的上下文
- 优先处理可访问性警告，因为它们影响最广泛的用户群体
避免
- 不要将此技能用于后端逻辑或 API 代码审查
- 避免审查生成或压缩的代码 - 此技能需要可读的源代码
- 不要期望视觉渲染 - 这仅是代码分析