npx skills add https://smithery.ai/skills/github/web-design-reviewer此技能支持对网站设计质量进行视觉检查和验证,在源代码层面识别并修复问题。
目标网站必须正在运行
http://localhost:3000)必须支持浏览器自动化
访问源代码(进行修复时)
flowchart TD
A[步骤 1: 信息收集] --> B[步骤 2: 视觉检查]
B --> C[步骤 3: 问题修复]
C --> D[步骤 4: 重新验证]
D --> E{还有问题吗?}
E -->|是| B
E -->|否| F[完成报告]
如果未提供 URL,请询问用户:
This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
Target website must be running
http://localhost:3000)Browser automation must be available
Access to source code (when making fixes)
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]
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
请提供要审查的网站 URL(例如
http://localhost:3000)
进行修复时,收集以下信息:
| 项目 | 示例问题 |
|---|---|
| 框架 | 您在使用 React / Vue / Next.js 等吗? |
| 样式方法 | CSS / SCSS / Tailwind / CSS-in-JS 等 |
| 源代码位置 | 样式文件和组件位于何处? |
| 审查范围 | 仅特定页面还是整个网站? |
尝试从工作区文件自动检测:
检测目标:
├── package.json → 框架和依赖项
├── tsconfig.json → TypeScript 使用情况
├── tailwind.config → Tailwind CSS
├── next.config → Next.js
├── vite.config → Vite
├── nuxt.config → Nuxt
└── src/ 或 app/ → 源代码目录
| 方法 | 检测 | 编辑目标 |
|---|---|---|
| 纯 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 文件 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 元素溢出 | 内容从父元素或视口溢出 | 高 |
| 元素重叠 | 元素意外重叠 | 高 |
| 对齐问题 | 网格或弹性布局对齐问题 | 中 |
| 间距不一致 | 内边距/外边距不一致 | 中 |
| 文本截断 | 长文本处理不当 | 中 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 非移动端友好 | 在小屏幕上布局损坏 | 高 |
| 断点问题 | 屏幕尺寸变化时过渡不自然 | 中 |
| 触摸目标 | 移动端按钮太小 | 中 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 对比度不足 | 文本与背景对比度低 | 高 |
| 无焦点状态 | 键盘导航时无法确定状态 | 高 |
| 缺少 alt 文本 | 图片无替代文本 | 中 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 字体不一致 | 混合使用字体族 | 中 |
| 颜色不一致 | 品牌颜色不统一 | 中 |
| 间距不一致 | 相似元素间间距不统一 | 低 |
在以下视口进行测试:
| 名称 | 宽度 | 代表设备 |
|---|---|---|
| 移动端 | 375px | iPhone SE/12 mini |
| 平板 | 768px | iPad |
| 桌面端 | 1280px | 标准 PC |
| 宽屏 | 1920px | 大尺寸显示器 |
block-beta
columns 1
block:priority["优先级矩阵"]
P1["P1: 立即修复\n(影响功能的布局问题)"]
P2["P2: 下一步修复\n(降低用户体验的视觉问题)"]
P3["P3: 如果可能则修复\n(次要的视觉不一致)"]
end
从有问题的元素识别源文件:
基于选择器的搜索
grep_search 探索样式定义基于组件的搜索
semantic_search 探索相关文件文件模式过滤
样式文件:src/**/*.css, styles/**/*
组件:src/components/**/*
页面:src/pages/**, app/**
flowchart TD
A{还有问题吗?}
A -->|是| B[返回步骤 2]
A -->|否| C[进入完成报告]
迭代限制:如果特定问题需要超过 3 次修复尝试,请咨询用户
# Web Design Review Results
## 摘要
| 项目 | 值 |
|------|-------|
| 目标 URL | {URL} |
| 框架 | {检测到的框架} |
| 样式 | {CSS / Tailwind / 等} |
| 测试视口 | 桌面端, 移动端 |
| 检测到的问题 | {N} |
| 已修复的问题 | {M} |
## 检测到的问题
### [P1] {问题标题}
- **页面**: {页面路径}
- **元素**: {选择器或描述}
- **问题**: {问题的详细描述}
- **修复文件**: `{文件路径}`
- **修复详情**: {变更描述}
- **截图**: 修复前/修复后
### [P2] {问题标题}
...
## 未修复的问题(如果有)
### {问题标题}
- **原因**: {为何未修复/无法修复}
- **建议操作**: {给用户的建议}
## 建议
- {未来改进的建议}
| 能力 | 描述 | 必需 |
|---|---|---|
| 网页导航 | 访问 URL,页面跳转 | ✅ |
| 截图捕获 | 页面图像捕获 | ✅ |
| 图像分析 | 视觉问题检测 | ✅ |
| DOM 检索 | 页面结构检索 | 推荐 |
| 文件读/写 | 源代码读取和编辑 | 修复时需要 |
| 代码搜索 | 项目内代码搜索 | 修复时需要 |
建议将 Playwright MCP 作为此技能的参考实现。
| 能力 | Playwright MCP 工具 | 用途 |
|---|---|---|
| 导航 | browser_navigate | 访问 URL |
| 快照 | browser_snapshot | 检索 DOM 结构 |
| 截图 | browser_take_screenshot | 用于视觉检查的图像 |
| 点击 | browser_click | 与交互元素交互 |
| 调整大小 | browser_resize | 响应式测试 |
| 控制台 | browser_console_messages | 检测 JS 错误 |
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
}
}
}
| 工具 | 特性 |
|---|---|
| Selenium | 广泛的浏览器支持,多语言支持 |
| Puppeteer | 专注于 Chrome/Chromium,Node.js |
| Cypress | 易于与 E2E 测试集成 |
| WebDriver BiDi | 标准化的下一代协议 |
可以使用这些工具实现相同的工作流程。只要它们提供必要的能力(导航、截图、DOM 检索),工具的选择是灵活的。
package.json 中的依赖项每周安装量
96
来源
首次出现
2026年3月6日
安全审计
安装于
claude-code43
codex34
opencode32
cursor31
github-copilot25
gemini-cli25
If the URL is not provided, ask the user:
Please provide the URL of the website to review (e.g.,
http://localhost:3000)
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? |
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
| 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 | JS/TS files |
| Emotion | @emotion/ imports | JS/TS files |
| CSS-in-JS (other) | Inline styles | JS/TS files |
| 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 |
| 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 |
| 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 |
| 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 |
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 |
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
Identify source files from problematic elements:
Selector-based Search
grep_searchComponent-based Search
semantic_searchFile Pattern Filtering
Style files: src/**/*.css, styles/**/*
Components: src/components/**/*
Pages: src/pages/**, app/**
See references/framework-fixes.md for details.
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
# 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}
| 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 |
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 | Responsive testing |
| Console | browser_console_messages | Detect JS errors |
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
}
}
}
| 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.
package.jsonWeekly Installs
96
Source
First Seen
Mar 6, 2026
Security Audits
Installed on
claude-code43
codex34
opencode32
cursor31
github-copilot25
gemini-cli25
代码审查最佳实践指南:完整流程、安全与性能审查清单
12,400 周安装