القائمة
Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | refactor-ui |
| description | Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes |
| domain | ui-design |
| skill-type | orchestration |
| version | 1.0.0 |
| prerequisites | [] |
| dependencies | ["01-establish-visual-hierarchy","02-apply-typography-scale","03-build-color-palette","04-apply-consistent-spacing","05-design-button-hierarchy","06-eliminate-visual-clutter","07-design-empty-states","08-use-shadows-appropriately","09-manage-color-contrast","10-group-related-elements"] |
| input | [{"design_description":"string"},{"design_screenshot":"optional image"},{"context":"marketing | application | content"}] |
| output | [{"comprehensive_assessment":"object"},{"violations":"array"},{"recommendations":"array"},{"priority_fixes":"array"}] |
Run a complete UI design audit against all 10 Refactoring UI principles, generating a prioritized list of specific improvements.
Read skills.json
Validate all 10 skills available
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
Aggregate results from all skills:
Output structured assessment:
{
"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 },
...
}
}
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]
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]
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
../skills.json - Skill registry../examples/ - Before/after examples for all skillsDetermine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Use systematic spacing with 25% minimum jumps, start with excess whitespace
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations