verify-ui

Estrelas2

Forks0

Atualizado31 de maio de 2026 às 13:31

独立的 UI 验证 skill，使用 ui-ux-pro-max 检查 UI 实现是否完整、是否符合设计规范、是否适配不同皮肤。**自动修复模式**：发现问题时自动修复。

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Fonte

mambo-wang

mambo-wang/CodingHub

Abrir repositório GitHub Ver repositórios do creator

Download

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Designers de interfaces web e digitaisInformática e Matemática·SOC 15-1255

SKILL.md

readonly

name	verify-ui
description	独立的 UI 验证 skill，使用 ui-ux-pro-max 检查 UI 实现是否完整、是否符合设计规范、是否适配不同皮肤。自动修复模式：发现问题时自动修复。

verify-ui

独立的 UI 验证工具，使用 ui-ux-pro-max 设计系统检查 UI 实现质量，发现问题时自动修复。

自动修复模式

验证过程中发现 UI 问题会自动修复：

CSS 变量未定义 → 自动添加到组件
颜色值 inline 而非 CSS 变量 → 自动转换为 CSS 变量
缺少必要组件 → 自动创建
组件结构不规范 → 自动规范化

功能

设计系统验证 - 加载 design-system.md 或生成项目设计系统
UI 完整性检查 - 验证所有设计的组件是否已实现
设计规范检查 - 对比实现是否符合设计规范（颜色、间距、字体等）
项目规范检查 - 检查 Vue 组件结构、props、emits、scoped styles
皮肤/主题适配 - 检查暗色模式支持、CSS 变量定义
视觉预览对比 - 打开 ui-preview.html 与实现对比
自动修复 - 发现问题自动修复组件

前置条件

加载 ui-ux-pro-max skill：
```
/ui-ux-pro-max
```
确保待验证的组件/页面已实现

使用方法

基本用法

/verify-ui

验证并自动修复

/verify-ui --fix

指定文件/目录

/verify-ui frontend/src/pages/OverviewPage.vue
/verify-ui frontend/src/components/

自动修复规则

1. CSS 变量检查

如果组件使用 inline 颜色值而非 CSS 变量，自动替换为变量：

发现问题	自动修复
`color: #00FFFF`	`color: var(--color-accent-cyan)`
`background: #020617`	`background: var(--color-background)`
`border-radius: 16px`	`border-radius: var(--radius-lg)`

2. 圆角值检查

对比 design-spec 中定义的圆角值，自动修复：

规范值	实际值	修复操作
radius-lg: 12px	16px	替换为 `var(--radius-lg)`
radius-sm: 4px	8px	替换为 `var(--radius-sm)`

3. 字体检查

发现问题	自动修复
缺少 Fira Code 导入	添加 Google Fonts 导入
字体非 Fira Code	替换为 Fira Code

4. 组件结构检查

问题	修复
缺少 `<script setup lang="ts">`	添加
Props 无类型	添加 TypeScript 类型
缺少 scoped	添加 `scoped`
目录不正确	移动到正确目录

验证步骤

对比设计规范中的要求：

读取 design-system.md 获取设计规范
确定要验证的组件列表

Step 2: 加载设计系统

cat design-system.md  # 读取项目设计规范

Step 3: 逐个检查组件

对每个组件执行：

读取组件源码
对比设计规范
发现问题自动修复
写回修复后的组件

Step 4: 验证修复结果

git diff --stat

命令行工具

# 验证并自动修复所有组件
verify-ui --fix

# 只验证不修复
verify-ui --check

# 验证指定组件
verify-ui src/components/StatsCard.vue

Created: 2026-05-31 Version: 1.1 Auto-Fix: Enabled

Mais deste repositório

mesmo repositório

codinghub

mambo-wang/CodingHub

CodingHub 工具广场操作指南。当用户要求搜索/安装/发布/更新 CodingHub 工具，发帖到论坛，管理知识库，或与 CodingHub 平台交互时使用。支持双通道：MCP 优先，HTTP 直连自动降级（Python 或 Node.js CJS CLI 封装，跨平台）。

2026-07-222

codewiki-wiki-generator

mambo-wang/CodingHub

使用 CodeWiki-CN MCP 工具为代码仓库生成 Wiki 文档并管理 LLM Wiki 知识库。支持三层增强模式：codebase-memory-mcp（深度增强：Leiden 聚类、Cypher 查询、跨服务追踪、复杂度分析）、CodeGraph（调用图增强）、或纯 CodeWiki（标准模式）。自动检测可用 MCP 服务器并选择最优模式。当用户要求生成 Wiki、代码文档、仓库文档、分析代码库结构时使用。

2026-07-162

ui-ux-pro-max

mambo-wang/CodingHub

UI/UX design intelligence with searchable database

2026-07-132

build-and-package

mambo-wang/CodingHub

Use when building and packaging the project for deployment, including frontend build, backend JAR, and creating distribution zip

2026-07-122

chinese-code-review

mambo-wang/CodingHub

中文 review 沟通参考——话术模板、分级标注（必须修复/建议修改/仅供参考）、国内团队常见反模式应对。仅在用户显式 /chinese-code-review 时调用，不要根据上下文自动触发。

2026-07-122

chinese-commit-conventions

mambo-wang/CodingHub

中文 commit 与 changelog 配置参考——Conventional Commits 中文适配、commitlint/husky/commitizen 中文模板、conventional-changelog 中文配置。仅在用户显式 /chinese-commit-conventions 时调用，不要根据上下文自动触发。

2026-07-122

name	verify-ui
description	独立的 UI 验证 skill，使用 ui-ux-pro-max 检查 UI 实现是否完整、是否符合设计规范、是否适配不同皮肤。自动修复模式：发现问题时自动修复。

verify-ui

独立的 UI 验证工具，使用 ui-ux-pro-max 设计系统检查 UI 实现质量，发现问题时自动修复。

自动修复模式

验证过程中发现 UI 问题会自动修复：

CSS 变量未定义 → 自动添加到组件
颜色值 inline 而非 CSS 变量 → 自动转换为 CSS 变量
缺少必要组件 → 自动创建
组件结构不规范 → 自动规范化

功能

设计系统验证 - 加载 design-system.md 或生成项目设计系统
UI 完整性检查 - 验证所有设计的组件是否已实现
设计规范检查 - 对比实现是否符合设计规范（颜色、间距、字体等）
项目规范检查 - 检查 Vue 组件结构、props、emits、scoped styles
皮肤/主题适配 - 检查暗色模式支持、CSS 变量定义
视觉预览对比 - 打开 ui-preview.html 与实现对比
自动修复 - 发现问题自动修复组件

前置条件

加载 ui-ux-pro-max skill：
```
/ui-ux-pro-max
```
确保待验证的组件/页面已实现

使用方法

基本用法

/verify-ui

验证并自动修复

/verify-ui --fix

指定文件/目录

/verify-ui frontend/src/pages/OverviewPage.vue
/verify-ui frontend/src/components/

自动修复规则

1. CSS 变量检查

如果组件使用 inline 颜色值而非 CSS 变量，自动替换为变量：

发现问题	自动修复
`color: #00FFFF`	`color: var(--color-accent-cyan)`
`background: #020617`	`background: var(--color-background)`
`border-radius: 16px`	`border-radius: var(--radius-lg)`

2. 圆角值检查

对比 design-spec 中定义的圆角值，自动修复：

规范值	实际值	修复操作
radius-lg: 12px	16px	替换为 `var(--radius-lg)`
radius-sm: 4px	8px	替换为 `var(--radius-sm)`

3. 字体检查

发现问题	自动修复
缺少 Fira Code 导入	添加 Google Fonts 导入
字体非 Fira Code	替换为 Fira Code

4. 组件结构检查

问题	修复
缺少 `<script setup lang="ts">`	添加
Props 无类型	添加 TypeScript 类型
缺少 scoped	添加 `scoped`
目录不正确	移动到正确目录

验证步骤

对比设计规范中的要求：

读取 design-system.md 获取设计规范
确定要验证的组件列表

Step 2: 加载设计系统

cat design-system.md  # 读取项目设计规范

Step 3: 逐个检查组件

对每个组件执行：

读取组件源码
对比设计规范
发现问题自动修复
写回修复后的组件

Step 4: 验证修复结果

git diff --stat

命令行工具

# 验证并自动修复所有组件
verify-ui --fix

# 只验证不修复
verify-ui --check

# 验证指定组件
verify-ui src/components/StatsCard.vue

Created: 2026-05-31 Version: 1.1 Auto-Fix: Enabled