⚡

网页设计审查员Skill web-design-reviewer

这个技能用于自动检查和修复网站的设计问题，包括响应式设计、可访问性、视觉一致性和布局中断。通过浏览器自动化和源代码编辑，提高网站质量。关键词：网页设计审查、UI检查、响应式修复、可访问性测试、视觉一致性、布局优化、源代码修复、前端开发工具。

前端开发 2 次安装 62 次浏览 更新于 3/13/2026

名称: 网页设计审查员 描述: ‘这个技能允许对本地或远程运行的网站进行视觉检查，以识别和修复设计问题。触发请求如“审查网站设计”、“检查UI”、“修复布局”、“查找设计问题”。检测响应式设计、可访问性、视觉一致性和布局中断的问题，然后在源代码级别执行修复。’ 版本: 0.1.0

网页设计审查员

这个技能允许对网站设计质量进行视觉检查和验证，在源代码级别识别和修复问题。

应用范围

  • 静态网站 (HTML/CSS/JS)
  • SPA框架如 React / Vue / Angular / Svelte
  • 全栈框架如 Next.js / Nuxt / SvelteKit
  • CMS平台如 WordPress / Drupal
  • 任何其他Web应用

先决条件

必需

  1. 目标网站必须正在运行

    • 本地开发服务器 (例如, http://localhost:3000)
    • 测试环境
    • 生产环境 (仅用于只读审查)

  2. 浏览器自动化必须可用

    • 截图捕获
    • 页面导航
    • DOM信息检索

  3. 访问源代码 (进行修复时)

    • 项目必须存在于工作空间内

工作流程概述

flowchart TD
    A[步骤1: 信息收集] --> B[步骤2: 视觉检查]
    B --> C[步骤3: 问题修复]
    C --> D[步骤4: 重新验证]
    D --> E{问题是否剩余?}
    E -->|是| B
    E -->|否| F[完成报告]

步骤1: 信息收集阶段

1.1 URL确认

如果未提供URL, 询问用户:

请提供要审查的网站URL (例如, http://localhost:3000)

1.2 理解项目结构

进行修复时, 收集以下信息:

项目 示例问题
框架 您在使用 React / Vue / Next.js 等吗?
样式方法 CSS / SCSS / Tailwind / CSS-in-JS 等
源代码位置 样式文件和组件位于何处?
审查范围 仅特定页面还是整个网站?

1.3 自动项目检测

从工作空间文件尝试自动检测:

检测目标:
├── package.json     → 框架和依赖项
├── tsconfig.json    → TypeScript使用
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ 或 app/     → 源代码目录

1.4 识别样式方法

方法 检测 编辑目标
纯 CSS *.css 文件 全局CSS或组件CSS
SCSS/Sass *.scss, *.sass SCSS文件
CSS模块 *.module.css 模块CSS文件
Tailwind CSS tailwind.config.* 组件中的className
styled-components 代码中的 styled. JS/TS文件
Emotion @emotion/ 导入 JS/TS文件
CSS-in-JS (其他) 内联样式 JS/TS文件

步骤2: 视觉检查阶段

2.1 页面遍历

  1. 导航到指定URL
  2. 捕获截图
  3. 检索DOM结构/快照 (如果可能)
  4. 如果存在额外页面, 通过导航遍历

2.2 检查项目

布局问题

问题 描述 严重性
元素溢出 内容从父元素或视口溢出 高
元素重叠 元素意外重叠 高
对齐问题 网格或flex对齐问题 中
间距不一致 内边距/外边距不一致 中
文本裁剪 长文本未正确处理 中

响应式问题

问题 描述 严重性
非移动友好 在小屏幕上布局中断 高
断点问题 屏幕尺寸变化时过渡不自然 中
触摸目标 移动端按钮过小 中

可访问性问题

问题 描述 严重性
对比度不足 文本和背景之间的对比度低 高
无焦点状态 键盘导航时无法确定状态 高
缺少alt文本 图像无替代文本 中

视觉一致性

问题 描述 严重性
字体不一致 混合字体家族 中
颜色不一致 品牌颜色不统一 中
间距不一致 相似元素之间的间距不均匀 低

2.3 视口测试 (响应式)

在以下视口测试:

名称 宽度 代表性设备
移动端 375px iPhone SE/12 mini
平板 768px iPad
桌面 1280px 标准PC
宽屏 1920px 大显示屏

步骤3: 问题修复阶段

3.1 问题优先级排序

block-beta
    columns 1
    block:priority["优先级矩阵"]
        P1["P1: 立即修复
(影响功能的布局问题)"]
        P2["P2: 下一步修复
(降低用户体验的视觉问题)"]
        P3["P3: 如果可能修复
(次要视觉不一致)"]
    end

3.2 识别源文件

从问题元素识别源文件:

  1. 基于选择器的搜索

    • 通过类名或ID搜索代码库
    • 使用 grep_search 探索样式定义

  2. 基于组件的搜索

    • 从元素文本或结构识别组件
    • 使用 semantic_search 探索相关文件

  3. 文件模式过滤

    样式文件: src/**/*.css, styles/**/*
组件: src/components/**/*
页面: src/pages/**, app/**

3.3 应用修复

框架特定修复指南

详情见 references/framework-fixes.md。

修复原则

  1. 最小化更改: 仅进行解决问题所需的最小更改
  2. 尊重现有模式: 遵循项目中现有的代码风格
  3. 避免破坏性更改: 小心不要影响其他区域
  4. 添加注释: 在适当处添加注释解释修复原因

步骤4: 重新验证阶段

4.1 修复后确认

  1. 重新加载浏览器 (或等待开发服务器HMR)
  2. 捕获修复区域的截图
  3. 比较修复前后

4.2 回归测试

  • 验证修复是否未影响其他区域
  • 确认响应式显示未中断

4.3 迭代决策

flowchart TD
    A{问题是否剩余?}
    A -->|是| B[返回步骤2]
    A -->|否| C[进行完成报告]

迭代限制: 如果对特定问题需要超过3次修复尝试, 咨询用户

输出格式

审查结果报告

# 网页设计审查结果

## 摘要

| 项目 | 值 |
|------|-------|
| 目标 URL | {URL} |
| 框架 | {检测到的框架} |
| 样式 | {CSS / Tailwind / 等} |
| 测试视口 | 桌面, 移动端 |
| 检测到的问题 | {N} |
| 已修复的问题 | {M} |

## 检测到的问题

### [P1] {问题标题}

- **页面**: {页面路径}
- **元素**: {选择器或描述}
- **问题**: {问题的详细描述}
- **修复文件**: `{文件路径}`
- **修复详情**: {更改描述}
- **截图**: 修复前/后

### [P2] {问题标题}
...

## 未修复的问题 (如果有)

### {问题标题}
- **原因**: {为什么未修复/无法修复}
- **推荐操作**: {对用户的推荐}

## 推荐

- {未来改进的建议}

所需能力

能力 描述 必需
网页导航 访问URL, 页面过渡 ✅
截图捕获 页面图像捕获 ✅
图像分析 视觉问题检测 ✅
DOM检索 页面结构检索 推荐
文件读写 源代码阅读和编辑 修复时必需
代码搜索 项目内代码搜索 修复时必需

参考实现

使用 Playwright MCP 实现

Playwright MCP 推荐作为此技能的参考实现。

能力 Playwright MCP 工具 目的
导航 browser_navigate 访问URL
快照 browser_snapshot 检索DOM结构
截图 browser_take_screenshot 视觉检查图像
点击 browser_click 与交互元素互动
调整大小 browser_resize 响应式测试
控制台 browser_console_messages 检测JS错误

配置示例 (MCP 服务器)

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

其他兼容的浏览器自动化工具

工具 特性
Selenium 广泛的浏览器支持, 多语言支持
Puppeteer Chrome/Chromium 聚焦, Node.js
Cypress 易于与E2E测试集成
WebDriver BiDi 标准化的下一代协议

可以使用这些工具实现相同的工作流程。只要它们提供必要能力 (导航, 截图, DOM检索), 工具选择灵活。

最佳实践

做 (推荐)

  • ✅ 始终在修复前保存截图
  • ✅ 一次修复一个问题并验证每个
  • ✅ 遵循项目现有的代码风格
  • ✅ 在大更改前与用户确认
  • ✅ 详细记录修复详情

不做 (不推荐)

  • ❌ 未经确认的大规模重构
  • ❌ 忽略设计系统或品牌指南
  • ❌ 忽略性能的修复
  • ❌ 一次修复多个问题 (难以验证)

故障排除

问题: 样式文件未找到

  1. 检查 package.json 中的依赖项
  2. 考虑 CSS-in-JS 的可能性
  3. 考虑构建时生成的CSS
  4. 询问用户样式方法

问题: 修复未反映

  1. 检查开发服务器HMR是否工作
  2. 清除浏览器缓存
  3. 如果项目需要构建, 重新构建
  4. 检查CSS特异性问题

问题: 修复影响其他区域

  1. 回滚更改
  2. 使用更具体的选择器
  3. 考虑使用CSS模块或作用域样式
  4. 咨询用户确认影响范围