mcpField
U
ui-review

ui-review

github.com/srbhr设计与 UI29.0k69 次安装今天更新
代码仓库

关于 ui-review

为前端改动提供提交前的 Swiss International Style 审查流程，供负责界面实现与审核的开发者检查设计规范。流程结合自动扫描和逐项人工检查，并提供问题报告格式。

主要功能

  1. 01扫描圆角、渐变和阴影禁用样式
  2. 02核对颜色、字体、边框与阴影
  3. 03检查按钮、卡片和输入框
  4. 04按 FAIL、WARN、PASS 格式报告

适用场景

  1. 01提交前审查前端样式改动
  2. 02定位违反 Swiss 设计规范的代码

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/srbhr/resume-matcher --skill ui-review

安装后在 Claude Code 中输入/ui-review确认已加载。

详细介绍

UI 审查

在提交前验证前端改动是否符合瑞士国际主义风格（Swiss International Style）。

第 1 步：运行自动检查

# Forbidden rounded corners
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden gradients
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden soft shadows
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden blur
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

第 2 步：人工审查

对每个改动的文件进行检查：

颜色
  • 背景：画布色 #F0F0E8 或白色
  • 文字：墨色 #000000
  • 链接：超链接蓝 #1D4ED8
  • 成功：信号绿 #15803D
  • 错误：警示红 #DC2626
  • 不使用瑞士配色之外的颜色
排版
  • 标题：font-serif
  • 正文：font-sans
  • 标签：font-mono text-sm uppercase tracking-wider
边框与阴影
  • 所有元素：rounded-none
  • 边框：border-2 border-black
  • 阴影：硬阴影 shadow-[Xpx_Xpx_0px_0px_#000000]
  • 悬停：向阴影区域平移
组件
  • 按钮：直角、硬阴影、按下效果
  • 卡片：白色背景、黑色边框、硬阴影
  • 输入框：rounded-none、黑色边框

反模式快速扫描

若在改动的文件中发现以下内容，立即标记：

反模式原因
rounded-sm/md/lg/xl/full仅允许直角
bg-gradient-*不使用渐变
shadow-sm/md/lg/xl仅允许硬阴影
blur-* / backdrop-blur不使用模糊效果
粉彩色瑞士配色风格鲜明

第 3 步：报告

[FAIL] file:line - Description of violation
[WARN] file:line - Potential issue to verify
[PASS] All checks passed

参考

完整设计系统：docs/agent/design/style-guide.md

评论

支持 Markdown