网站设计审查工具 - 自动检测并修复HTML/CSS/JS、React、Vue等框架的视觉与布局问题

web-design-reviewer by github/awesome-copilot

8,300 周安装量

26,700 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/github/awesome-copilot --skill web-design-reviewer

AI/机器学习开发设计

🇨🇳中文介绍

Web Design Reviewer

此技能支持对网站设计质量进行视觉检查和验证，在源代码层面识别并修复问题。

适用范围

静态站点（HTML/CSS/JS）
React / Vue / Angular / Svelte 等 SPA 框架
Next.js / Nuxt / SvelteKit 等全栈框架
WordPress / Drupal 等 CMS 平台
任何其他 Web 应用程序

先决条件

必需条件

目标网站必须正在运行
- 本地开发服务器（例如 http://localhost:3000）
- 预发布环境
- 生产环境（仅用于只读审查）
必须能够进行浏览器自动化
- 截图捕获
- 页面导航
- DOM 信息检索
能够访问源代码（进行修复时）
- 项目必须存在于工作区内

工作流程概览

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

步骤 1: 信息收集阶段

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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 Modules	`*.module.css`	模块 CSS 文件
Tailwind CSS	`tailwind.config.*`	组件中的 className
styled-components	代码中的 `styled.`	JS/TS 文件
Emotion	`@emotion/` 导入	JS/TS 文件
CSS-in-JS（其他）	内联样式	JS/TS 文件

步骤 2: 视觉检查阶段

导航到指定的 URL
捕获屏幕截图
检索 DOM 结构/快照（如果可能）
如果存在其他页面，则通过导航进行遍历

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

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

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

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

2.3 视口测试（响应式）

在以下视口进行测试：

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

步骤 3: 问题修复阶段

3.1 问题优先级排序

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

从有问题的元素识别源文件：

基于选择器的搜索
- 按类名或 ID 搜索代码库
- 使用 grep_search 探索样式定义
基于组件的搜索
- 从元素文本或结构识别组件
- 使用 semantic_search 探索相关文件

文件模式过滤

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

特定框架修复指南

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

步骤 4: 重新验证阶段

重新加载浏览器（或等待开发服务器 HMR）
捕获已修复区域的屏幕截图
对比修复前后

验证修复是否未影响其他区域
确认响应式显示未被破坏

flowchart TD
    A{问题是否仍存在？}
    A -->|是| B[返回步骤 2]
    A -->|否| C[进入完成报告]

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

# Web Design Review Results

## Summary

| Item | Value |
|------|-------|
| Target URL | {URL} |
| Framework | {Detected framework} |
| Styling | {CSS / Tailwind / etc.} |
| Tested Viewports | Desktop, Mobile |
| Issues Detected | {N} |
| Issues Fixed | {M} |

## Detected Issues

### [P1] {Issue Title}

- **Page**: {Page path}
- **Element**: {Selector or description}
- **Issue**: {Detailed description of the issue}
- **Fixed File**: `{File path}`
- **Fix Details**: {Description of changes}
- **Screenshot**: Before/After

### [P2] {Issue Title}
...

## Unfixed Issues (if any)

### {Issue Title}
- **Reason**: {Why it was not fixed/could not be fixed}
- **Recommended Action**: {Recommendations for user}

## Recommendations

- {Suggestions for future improvements}

能力	描述	必需
网页导航	访问 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 检索），工具的选择是灵活的。

建议做法（推荐）

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

不建议做法（不推荐）

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

问题：找不到样式文件

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

问题：修复未生效

检查开发服务器 HMR 是否正常工作
清除浏览器缓存
如果项目需要构建，则重新构建
检查 CSS 特异性问题

问题：修复影响了其他区域

回滚更改
使用更具体的选择器
考虑使用 CSS Modules 或作用域样式
咨询用户以确认影响范围

🇺🇸English

Web Design Reviewer

This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.

Scope of Application

Static sites (HTML/CSS/JS)
SPA frameworks such as React / Vue / Angular / Svelte
Full-stack frameworks such as Next.js / Nuxt / SvelteKit
CMS platforms such as WordPress / Drupal
Any other web application

Prerequisites

Required

Target website must be running
- Local development server (e.g., http://localhost:3000)
- Staging environment
- Production environment (for read-only reviews)
Browser automation must be available
- Screenshot capture
- Page navigation
- DOM information retrieval
Access to source code (when making fixes)
- Project must exist within the workspace

Workflow Overview

flowchart TD
    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
    B --> C[Step 3: Issue Fixing]
    C --> D[Step 4: Re-verification]
    D --> E{Issues Remaining?}
    E -->|Yes| B
    E -->|No| F[Completion Report]

Step 1: Information Gathering Phase

1.1 URL Confirmation

If the URL is not provided, ask the user:

Please provide the URL of the website to review (e.g., http://localhost:3000)

1.2 Understanding Project Structure

When making fixes, gather the following information:

Item	Example Question
Framework	Are you using React / Vue / Next.js, etc.?
Styling Method	CSS / SCSS / Tailwind / CSS-in-JS, etc.
Source Location	Where are style files and components located?
Review Scope	Specific pages only or entire site?

1.3 Automatic Project Detection

Attempt automatic detection from files in the workspace:

Detection targets:
├── package.json     → Framework and dependencies
├── tsconfig.json    → TypeScript usage
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ or app/     → Source directory

1.4 Identifying Styling Method

Method	Detection	Edit Target
Pure CSS	`*.css` files	Global CSS or component CSS
SCSS/Sass	`.scss`, `.sass`	SCSS files
CSS Modules	`*.module.css`	Module CSS files
Tailwind CSS	`tailwind.config.*`	className in components
styled-components	`styled.` in code

Step 2: Visual Inspection Phase

2.1 Page Traversal

Navigate to the specified URL
Capture screenshots
Retrieve DOM structure/snapshot (if possible)
If additional pages exist, traverse through navigation

2.2 Inspection Items

Layout Issues

Issue	Description	Severity
Element Overflow	Content overflows from parent element or viewport	High
Element Overlap	Unintended overlapping of elements	High
Alignment Issues	Grid or flex alignment problems	Medium
Inconsistent Spacing	Padding/margin inconsistencies	Medium
Text Clipping	Long text not handled properly	Medium

Responsive Issues

Issue	Description	Severity
Non-mobile Friendly	Layout breaks on small screens	High
Breakpoint Issues	Unnatural transitions when screen size changes	Medium
Touch Targets	Buttons too small on mobile	Medium

Accessibility Issues

Issue	Description	Severity
Insufficient Contrast	Low contrast ratio between text and background	High
No Focus State	Cannot determine state during keyboard navigation	High
Missing alt Text	No alternative text for images	Medium

Visual Consistency

Issue	Description	Severity
Font Inconsistency	Mixed font families	Medium
Color Inconsistency	Non-unified brand colors	Medium
Spacing Inconsistency	Non-uniform spacing between similar elements	Low

2.3 Viewport Testing (Responsive)

Test at the following viewports:

Name	Width	Representative Device
Mobile	375px	iPhone SE/12 mini
Tablet	768px	iPad
Desktop	1280px	Standard PC
Wide	1920px	Large display

Step 3: Issue Fixing Phase

3.1 Issue Prioritization

block-beta
    columns 1
    block:priority["Priority Matrix"]
        P1["P1: Fix Immediately\n(Layout issues affecting functionality)"]
        P2["P2: Fix Next\n(Visual issues degrading UX)"]
        P3["P3: Fix If Possible\n(Minor visual inconsistencies)"]
    end

3.2 Identifying Source Files

Identify source files from problematic elements:

Selector-based Search
- Search codebase by class name or ID
- Explore style definitions with grep_search
Component-based Search
- Identify components from element text or structure
- Explore related files with semantic_search
File Pattern Filtering

Style files: src//*.css, styles//* Components: src/components//* Pages: src/pages/, app/**

3.3 Applying Fixes

Framework-specific Fix Guidelines

See references/framework-fixes.md for details.

Fix Principles

Minimal Changes : Only make the minimum changes necessary to resolve the issue
Respect Existing Patterns : Follow existing code style in the project
Avoid Breaking Changes : Be careful not to affect other areas
Add Comments : Add comments to explain the reason for fixes where appropriate

Step 4: Re-verification Phase

4.1 Post-fix Confirmation

Reload browser (or wait for development server HMR)
Capture screenshots of fixed areas
Compare before and after

4.2 Regression Testing

Verify that fixes haven't affected other areas
Confirm responsive display is not broken

4.3 Iteration Decision

flowchart TD
    A{Issues Remaining?}
    A -->|Yes| B[Return to Step 2]
    A -->|No| C[Proceed to Completion Report]

Iteration Limit : If more than 3 fix attempts are needed for a specific issue, consult the user

Output Format

Review Results Report

# Web Design Review Results

## Summary

| Item | Value |
|------|-------|
| Target URL | {URL} |
| Framework | {Detected framework} |
| Styling | {CSS / Tailwind / etc.} |
| Tested Viewports | Desktop, Mobile |
| Issues Detected | {N} |
| Issues Fixed | {M} |

## Detected Issues

### [P1] {Issue Title}

- **Page**: {Page path}
- **Element**: {Selector or description}
- **Issue**: {Detailed description of the issue}
- **Fixed File**: `{File path}`
- **Fix Details**: {Description of changes}
- **Screenshot**: Before/After

### [P2] {Issue Title}
...

## Unfixed Issues (if any)

### {Issue Title}
- **Reason**: {Why it was not fixed/could not be fixed}
- **Recommended Action**: {Recommendations for user}

## Recommendations

- {Suggestions for future improvements}

Required Capabilities

Capability	Description	Required
Web Page Navigation	Access URLs, page transitions	✅
Screenshot Capture	Page image capture	✅
Image Analysis	Visual issue detection	✅
DOM Retrieval	Page structure retrieval	Recommended
File Read/Write	Source code reading and editing	Required for fixes
Code Search	Code search within project	Required for fixes

Reference Implementation

Implementation with Playwright MCP

Playwright MCP is recommended as the reference implementation for this skill.

Capability	Playwright MCP Tool	Purpose
Navigation	`browser_navigate`	Access URLs
Snapshot	`browser_snapshot`	Retrieve DOM structure
Screenshot	`browser_take_screenshot`	Images for visual inspection
Click	`browser_click`	Interact with interactive elements
Resize	`browser_resize`

Configuration Example (MCP Server)

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

Other Compatible Browser Automation Tools

Tool	Features
Selenium	Broad browser support, multi-language support
Puppeteer	Chrome/Chromium focused, Node.js
Cypress	Easy integration with E2E testing
WebDriver BiDi	Standardized next-generation protocol

The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.

Best Practices

DO (Recommended)

✅ Always save screenshots before making fixes
✅ Fix one issue at a time and verify each
✅ Follow the project's existing code style
✅ Confirm with user before major changes
✅ Document fix details thoroughly

DON'T (Not Recommended)

❌ Large-scale refactoring without confirmation
❌ Ignoring design systems or brand guidelines
❌ Fixes that ignore performance
❌ Fixing multiple issues at once (difficult to verify)

Troubleshooting

Problem: Style files not found

Check dependencies in package.json
Consider the possibility of CSS-in-JS
Consider CSS generated at build time
Ask user about styling method

Problem: Fixes not reflected

Check if development server HMR is working
Clear browser cache
Rebuild if project requires build
Check CSS specificity issues

Problem: Fixes affecting other areas

Rollback changes
Use more specific selectors
Consider using CSS Modules or scoped styles
Consult user to confirm impact scope

Weekly Installs

8.3K

Repository

github/awesome-copilot

GitHub Stars

26.7K

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

codex8.1K

gemini-cli8.1K

opencode8.1K

github-copilot8.0K

cursor8.0K

kimi-cli7.9K

网站设计审查工具 - 自动检测并修复HTML/CSS/JS、React、Vue等框架的视觉与布局问题

🇨🇳中文介绍

Web Design Reviewer

适用范围

先决条件

必需条件

工作流程概览

步骤 1: 信息收集阶段

相关 Skills

1.1 URL 确认

1.2 了解项目结构

1.3 自动项目检测

1.4 识别样式方法

步骤 2: 视觉检查阶段

2.1 页面遍历

2.2 检查项目

布局问题

响应式问题

可访问性问题

视觉一致性

2.3 视口测试（响应式）

步骤 3: 问题修复阶段

3.1 问题优先级排序

3.2 识别源文件

3.3 应用修复

特定框架修复指南

修复原则

步骤 4: 重新验证阶段

4.1 修复后确认

4.2 回归测试

4.3 迭代决策

输出格式

审查结果报告

所需能力

参考实现

使用 Playwright MCP 实现

配置示例（MCP 服务器）

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

最佳实践

建议做法（推荐）

不建议做法（不推荐）

故障排除

问题：找不到样式文件

问题：修复未生效

问题：修复影响了其他区域

🇺🇸English

Web Design Reviewer

Scope of Application

Prerequisites

Required

Workflow Overview

Step 1: Information Gathering Phase

1.1 URL Confirmation

1.2 Understanding Project Structure

1.3 Automatic Project Detection

1.4 Identifying Styling Method

Step 2: Visual Inspection Phase

2.1 Page Traversal

2.2 Inspection Items

Layout Issues

Responsive Issues

Accessibility Issues

Visual Consistency

2.3 Viewport Testing (Responsive)

Step 3: Issue Fixing Phase

3.1 Issue Prioritization

3.2 Identifying Source Files

3.3 Applying Fixes

Framework-specific Fix Guidelines

Fix Principles

Step 4: Re-verification Phase

4.1 Post-fix Confirmation

4.2 Regression Testing

4.3 Iteration Decision

Output Format

Review Results Report

Required Capabilities

Reference Implementation

Implementation with Playwright MCP

Configuration Example (MCP Server)