UI Visual Validator
可视化验证 UI 组件
手动 UI 验证既耗时又容易出错。此技能使用 AI 自动分析视觉结构、验证元素关系，并确保组件间的设计一致性。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“UI Visual Validator”。 验证此按钮组件：大型主按钮，16px 内边距，圆角（8px），蓝色背景（#0066FF），白色文本，居中标签。
预期结果:
验证结果：
✓ 交互元素的适当内边距（16px）
✓ 一致的边框半径（8px）
✓ 有效的主色使用
✓ 文本居中对齐
建议：
- 考虑添加悬停状态对比度检查
- 验证焦点环可见性以确保无障碍性
正在使用“UI Visual Validator”。 比较卡片组件 A（头部：24px，主体：16px，底部：16px）与卡片 B（头部：24px，主体：16px，底部：24px）。
预期结果:
发现不一致：
卡片 A 底部：16px 内边距
卡片 B 底部：24px 内边距
这在卡片组件之间造成了视觉不一致。建议将所有卡片变体的底部内边距标准化为 16px。
安全审计
安全Static analysis found no executable code, no suspicious patterns, and no risk factors. This is a prompt-only skill that generates content descriptions. Risk score is 0/100. The skill operates purely in the AI content generation domain with no system-level access.
质量评分
你能构建什么
前端开发者验证
前端开发者使用此技能通过分析结构描述，验证其组件实现是否符合设计规范。
设计系统审计
设计系统维护者通过检查结构模式和设计令牌使用情况，验证组件库间的一致性。
QA 可视化测试
QA 工程师通过比较组件描述并识别意外的视觉差异，验证 UI 更改。
试试这些提示
分析此 UI 组件描述并验证其结构：[插入组件描述]。检查层次结构、间距和元素关系是否正确。
审查这些组件样式 [插入样式] 并验证它们是否遵循我们的设计系统令牌。列出发现的任何偏差。
比较这两个组件描述 [插入描述 1] 和 [插入描述 2]。识别任何布局或间距不一致的地方。
分析此组件结构 [插入描述] 的标题层次、地标使用���语义元素放置。提出改进建议。
最佳实践
- 提供详细的组件描述，包括所有相关样式属性和结构元素，以进行准确验证
- 描述组件时使用一致的命名约定，以提高分析准确性
- 包含有关所使用的设计系统或样式指南的上下文信息
避免
- 提供模糊的描述，如"一个漂亮的按钮"，而无需具体属性或度量值
- 跳过设计系统上下文 - 始终引用正在验证的标准
- 忽略验证结果 - 使用输出来实际提高组件质量