mcpField
R
refactor-ui

refactor-ui

github.com/gnurio设计与 UI453182 次安装26 周前更新
代码仓库

关于 refactor-ui

refactor-ui 是一项用于全面审查 UI 设计的元技能，面向需要依据 10 项 Refactoring UI 原则评估界面的设计者。它汇总并按影响排序问题，并提供快速扫描、深入分析和修复模式。

主要功能

  1. 01依据 10 项原则审查 UI
  2. 02按严重程度整理问题
  3. 03去重并按影响排序
  4. 04提供扫描、分析和修复模式
  5. 05输出结构化评估报告

适用场景

  1. 01审查营销页面的视觉层级
  2. 02分析仪表盘的颜色与阴影
  3. 03生成优先级明确的界面修复建议

安装

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

$npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill refactor-ui

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

详细介绍

Meta-Skill: /refactor-ui

用途

针对全部 10 条 Refactoring UI 原则，执行完整的 UI 设计审查，并生成按优先级排序的具体改进清单。

工作流

阶段 1：加载技能注册表
Read skills.json
Validate all 10 skills available
阶段 2：依次应用技能

按最佳顺序执行每项技能：

1. establish-visual-hierarchy
   ↓
2. apply-typography-scale
   ↓
3. build-color-palette
   ↓
4. apply-consistent-spacing
   ↓
5. design-button-hierarchy
   ↓
6. eliminate-visual-clutter
   ↓
7. design-empty-states
   ↓
8. use-shadows-appropriately
   ↓
9. manage-color-contrast
   ↓
10. group-related-elements
阶段 3：汇总发现

汇总所有技能的结果：

  • 收集所有 FAIL 评估
  • 按严重性分组（Critical | High | Medium | Low）
  • 删除重复项（多个技能发现的相同问题）
  • 按影响排序
阶段 4：生成报告

输出结构化评估：

{
  "overall_score": "PASS | NEEDS_WORK | FAIL",
  "summary": "3 critical, 5 high, 2 medium priority fixes",
  "violations": [
    {
      "skill": "visual-hierarchy",
      "severity": "critical",
      "issue": "Primary CTA buried",
      "location": "Hero section",
      "fix": "Increase button to solid brand color, reduce surrounding contrast"
    }
  ],
  "priority_fixes": [
    "1. Make primary CTA prominent with brand color",
    "2. Consolidate font sizes from 12 to 6",
    "3. Add 8-10 grey shades to palette"
  ],
  "skill_breakdown": {
    "visual-hierarchy": { "status": "FAIL", "issues": 2 },
    "typography-scale": { "status": "PASS", "issues": 0 },
    "color-palette": { "status": "FAIL", "issues": 1 },
    ...
  }
}

执行模式

模式：快速扫描
  • 运行全部 10 项技能
  • 仅报告 FAIL
  • 耗时：约 30 秒
模式：深度分析
  • 运行全部 10 项技能
  • 报告 PASS 及其理由
  • 交叉引用各项技能
  • 建议构图改进
  • 耗时：约 2 分钟
模式：修复模式
  • 运行全部 10 项技能
  • 生成具体修复说明
  • 提供修改前后的代码示例
  • 耗时：约 5 分钟

使用示例

示例 1：营销页面
Input: Landing page description with hero, features, CTA

/refactor-ui
→ Overall: NEEDS_WORK
→ Critical: Visual hierarchy (CTA buried)
→ High: Typography (8 sizes, need 5)
→ Medium: Spacing (ambiguous grouping)
→ Priority fixes: [3 items]
示例 2：仪表盘
Input: Analytics dashboard screenshot

/refactor-ui --deep
→ Overall: PASS with suggestions
→ Visual hierarchy: PASS (clear primary)
→ Color palette: FAIL (only 4 greys)
→ Shadows: FAIL (decorative on cards)
→ Suggestions: [5 items]

与验证的集成

此元技能可针对 NotebookLM 进行验证：

For each skill assessment:
  Query: "According to Refactoring UI, is this correct?"
  Validate assessment matches expert
Report agreement rate

参考资料

  • ../skills.json - 技能注册表
  • ../examples/ - 所有技能的修改前后示例

评论

支持 Markdown