Back to Details

refactor-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Meta-Skill: /refactor-ui

Meta-Skill: /refactor-ui

Purpose

用途

Run a complete UI design audit against all 10 Refactoring UI principles, generating a prioritized list of specific improvements.
针对全部10项Refactoring UI原则执行完整的UI设计审核，生成按优先级排序的具体改进列表。

Workflow

工作流程

Phase 1: Load Skill Registry

阶段1：加载技能注册表

Read skills.json
Validate all 10 skills available
Read skills.json
Validate all 10 skills available

Phase 2: Sequential Skill Application

阶段2：按顺序应用技能

Execute each skill in optimal order:
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
按最优顺序执行每项技能：
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

Phase 3: Consolidate Findings

阶段3：整合发现结果

Aggregate results from all skills:
  • Collect all FAIL assessments
  • Group by severity (Critical | High | Medium | Low)
  • Remove duplicates (same issue caught by multiple skills)
  • Prioritize by impact
汇总所有技能的分析结果：
  • 收集所有未通过（FAIL）的评估项
  • 按严重程度分组（严重 | 高 | 中 | 低）
  • 移除重复项（同一问题被多项技能检测到）
  • 按影响程度排序优先级

Phase 4: Generate Report

阶段4：生成报告

Output structured assessment:
json
{
  "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 },
    ...
  }
}
输出结构化评估报告：
json
{
  "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 },
    ...
  }
}

Execution Modes

执行模式

Mode: Quick Scan

快速扫描模式

  • Run all 10 skills
  • Report only FAILs
  • Time: ~30 seconds
  • 运行全部10项技能
  • 仅报告未通过（FAIL）项
  • 耗时：约30秒

Mode: Deep Analysis

深度分析模式

  • Run all 10 skills
  • Report PASS with rationale
  • Cross-reference between skills
  • Suggest composition improvements
  • Time: ~2 minutes
  • 运行全部10项技能
  • 报告通过（PASS）项及理由
  • 跨技能交叉验证
  • 提供布局优化建议
  • 耗时：约2分钟

Mode: Fix Mode

修复模式

  • Run all 10 skills
  • Generate specific fix instructions
  • Provide before/after code examples
  • Time: ~5 minutes
  • 运行全部10项技能
  • 生成具体修复指导
  • 提供前后代码示例
  • 耗时：约5分钟

Usage Examples

使用示例

Example 1: Marketing Page

示例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]
输入：包含首屏、功能区、CTA的落地页描述

/refactor-ui
→ 整体评估：需要改进
→ 严重问题：视觉层级（CTA被遮挡）
→ 高优先级问题：排版（8种字号，需精简至5种）
→ 中优先级问题：间距（分组不清晰）
→ 优先修复项：[3项]

Example 2: Dashboard

示例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]
输入：数据分析仪表盘截图

/refactor-ui --deep
→ 整体评估：通过并附带建议
→ 视觉层级：通过（主元素清晰）
→ 配色方案：未通过（仅4种灰色调）
→ 阴影效果：未通过（卡片添加装饰性阴影）
→ 建议项：[5项]

Integration with Validation

与验证功能集成

This meta-skill can validate against NotebookLM:
For each skill assessment:
  Query: "According to Refactoring UI, is this correct?"
  Validate assessment matches expert
Report agreement rate
该元技能可与NotebookLM进行验证：
For each skill assessment:
  Query: "According to Refactoring UI, is this correct?"
  Validate assessment matches expert
Report agreement rate

References

参考资料

  • ../skills.json
    - Skill registry
  • ../examples/
    - Before/after examples for all skills
  • ../skills.json
    - 技能注册表
  • ../examples/
    - 所有技能的前后对比示例