web-design-guidelines by dedalus-erp-pas/foundation-skills
npx skills add https://github.com/dedalus-erp-pas/foundation-skills --skill web-design-guidelines通过静态代码分析和可视化浏览器检查,审查并修复 UI 以符合 Web 界面设计指南。
Step 1: 信息收集
↓
Step 2: 指南获取 + 静态分析
↓
Step 3: 可视化检查 (如果提供了 URL)
↓
Step 4: 问题修复
↓
Step 5: 重新验证
↓
(如果问题仍然存在,则循环)
| 输入 | 模式 | 操作 |
|---|---|---|
| 仅文件/模式 | 静态分析 | 根据指南进行代码审查 |
| 仅 URL | 可视化检查 | 基于浏览器的可视化审查 |
| URL + 文件 | 完整审查 | 静态和可视化分析 |
如果请求了可视化检查但未提供 URL,请询问:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
请提供要审查的网站的 URL (例如,http://localhost:3000)
尝试从工作区文件自动检测:
| 文件 | 检测内容 |
|---|---|
package.json | 框架和依赖项 |
tailwind.config.* | Tailwind CSS |
next.config.* | Next.js |
nuxt.config.* | Nuxt |
vite.config.* | Vite |
| 方法 | 检测方式 | 编辑目标 |
|---|---|---|
| 纯 CSS | *.css 文件 | 全局或组件 CSS |
| SCSS/Sass | *.scss, *.sass | SCSS 文件 |
| CSS 模块 | *.module.css | 模块 CSS 文件 |
| Tailwind CSS | tailwind.config.* | 组件中的 className |
| styled-components | 代码中的 styled. | JS/TS 文件 |
| CSS-in-JS | 内联样式 | JS/TS 文件 |
每次审查前获取最新指南:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
使用 WebFetch 获取最新规则。获取的内容包含所有规则和输出格式说明。
file:line 引用的发现结果在以下视口测试响应式问题:
| 名称 | 宽度 | 代表设备 |
|---|---|---|
| 移动端 | 375px | iPhone SE/12 mini |
| 平板电脑 | 768px | iPad |
| 桌面端 | 1280px | 标准 PC |
| 宽屏 | 1920px | 大尺寸显示器 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 元素溢出 | 内容溢出容器或视口 | 高 |
| 元素重叠 | 元素意外重叠 | 高 |
| 对齐问题 | 网格或弹性布局对齐问题 | 中 |
| 间距不一致 | 内边距/外边距不一致 | 中 |
| 文本截断 | 长文本处理不当 | 中 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 非移动端友好 | 在小屏幕上布局崩溃 | 高 |
| 断点问题 | 在断点处过渡不自然 | 中 |
| 触摸目标 | 移动端按钮过小 | 中 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 对比度不足 | 文本/背景对比度低 | 高 |
| 无焦点状态 | 键盘导航时无法看到焦点 | 高 |
| 缺少 alt 文本 | 图片无替代文本 | 中 |
| 问题 | 描述 | 严重性 |
|---|---|---|
| 字体不一致 | 混合字体族 | 中 |
| 颜色不一致 | 品牌颜色不统一 | 中 |
| 间距不一致 | 间距模式不统一 | 低 |
| 优先级 | 标准 | 操作 |
|---|---|---|
| P1 | 影响功能的布局问题 | 立即修复 |
| P2 | 降低用户体验的视觉问题 | 下一步修复 |
| P3 | 轻微的视觉不一致 | 如果可能则修复 |
src/**/*.css, styles/**/*, src/components/**/*如果修复后问题仍然存在,则返回 Step 3。每个问题在咨询用户之前,限制为 3 次修复尝试。
# Web 设计审查结果
## 摘要
| 项目 | 值 |
|------|-------|
| 目标 | {URL 或文件} |
| 框架 | {检测到的框架} |
| 样式 | {CSS / Tailwind / 等} |
| 审查模式 | {静态 / 可视化 / 完整} |
| 检测到的问题 | {N} |
| 已修复的问题 | {M} |
## 静态分析发现
{来自指南检查的 file:line 格式发现结果}
## 可视化检查发现
### [P1] {问题标题}
- **页面**:{页面路径}
- **元素**:{选择器或描述}
- **问题**:{详细描述}
- **修复文件**:`{文件路径}`
- **修复详情**:{更改描述}
### [P2] {问题标题}
...
## 未修复的问题 (如果有)
### {问题标题}
- **原因**:{未修复的原因}
- **推荐操作**:{给用户的建议}
## 建议
- {未来改进的建议}
审查我 src/components/ 中的 UI
检查我表单的可访问性
审计 src/pages/ 的设计
审查 http://localhost:3000 的设计
检查 http://localhost:5173/dashboard 的 UI
在我的网站上查找布局问题
审查我在 localhost:3000 的 UI 并修复 src/ 中的问题
审计设计并修复响应式问题
package.json 中的依赖项每周安装量
53
仓库
GitHub 星标
2
首次出现
Jan 21, 2026
安全审计
安装于
claude-code41
github-copilot40
opencode38
cursor36
gemini-cli34
codex33
Review and fix UI for compliance with Web Interface Guidelines through static code analysis and visual browser inspection.
Step 1: Information Gathering
↓
Step 2: Guidelines Fetch + Static Analysis
↓
Step 3: Visual Inspection (if URL provided)
↓
Step 4: Issue Fixing
↓
Step 5: Re-verification
↓
(Loop if issues remain)
| Input | Mode | Actions |
|---|---|---|
| File/pattern only | Static Analysis | Code review against guidelines |
| URL only | Visual Inspection | Browser-based visual review |
| URL + files | Full Review | Both static and visual analysis |
If visual inspection requested but no URL provided, ask:
Please provide the URL of the website to review (e.g.,
http://localhost:3000)
Attempt automatic detection from workspace files:
| File | Detection |
|---|---|
package.json | Framework and dependencies |
tailwind.config.* | Tailwind CSS |
next.config.* | Next.js |
nuxt.config.* | Nuxt |
vite.config.* | Vite |
| Method | Detection | Edit Target |
|---|---|---|
| Pure CSS | *.css files | Global 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 |
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
file:line referencesTest at the following viewports for responsive issues:
| Name | Width | Representative Device |
|---|---|---|
| Mobile | 375px | iPhone SE/12 mini |
| Tablet | 768px | iPad |
| Desktop | 1280px | Standard PC |
| Wide | 1920px | Large display |
| Issue | Description | Severity |
|---|---|---|
| Element Overflow | Content overflows container 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 at breakpoints | Medium |
| Touch Targets | Buttons too small on mobile | Medium |
| Issue | Description | Severity |
|---|---|---|
| Insufficient Contrast | Low contrast ratio text/background | High |
| No Focus State | Cannot see focus during keyboard nav | 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 patterns | Low |
| Priority | Criteria | Action |
|---|---|---|
| P1 | Layout issues affecting functionality | Fix immediately |
| P2 | Visual issues degrading UX | Fix next |
| P3 | Minor visual inconsistencies | Fix if possible |
src/**/*.css, styles/**/*, src/components/**/*If issues remain after fix, return to Step 3. Limit to 3 fix attempts per issue before consulting user.
# Web Design Review Results
## Summary
| Item | Value |
|------|-------|
| Target | {URL or files} |
| Framework | {Detected framework} |
| Styling | {CSS / Tailwind / etc.} |
| Review Mode | {Static / Visual / Full} |
| Issues Detected | {N} |
| Issues Fixed | {M} |
## Static Analysis Findings
{file:line format findings from guidelines check}
## Visual Inspection Findings
### [P1] {Issue Title}
- **Page**: {Page path}
- **Element**: {Selector or description}
- **Issue**: {Detailed description}
- **Fixed File**: `{File path}`
- **Fix Details**: {Description of changes}
### [P2] {Issue Title}
...
## Unfixed Issues (if any)
### {Issue Title}
- **Reason**: {Why it was not fixed}
- **Recommended Action**: {Recommendations for user}
## Recommendations
- {Suggestions for future improvements}
Review my UI in src/components/
Check accessibility of my forms
Audit design of src/pages/
Review the design at http://localhost:3000
Check the UI at http://localhost:5173/dashboard
Find layout problems on my site
Review my UI at localhost:3000 and fix issues in src/
Audit the design and fix responsive problems
package.jsonWeekly Installs
53
Repository
GitHub Stars
2
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code41
github-copilot40
opencode38
cursor36
gemini-cli34
codex33
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装
| JS/TS files |
| CSS-in-JS | Inline styles | JS/TS files |