Improve visual design and UX of artifact with iterative refinements
This skill improves the visual design, user experience, and polish of an artifact through iterative refinements. It focuses on making the UI look professional, feel responsive, and follow design best practices.
Review the artifact and evaluate these aspects:
| Aspect | What to Check |
|---|---|
| Visual Hierarchy | Is the most important content prominent? |
| Spacing | Is there consistent padding and margins? |
| Typography | Are font sizes, weights, line heights appropriate? |
| Colors | Is contrast sufficient? Are colors harmonious? |
| Alignment | Are elements properly aligned? |
| Responsiveness | Does it work on all screen sizes? |
| Interactions | Are hover/focus/active states clear? |
| Accessibility | Are there focus indicators? Color contrast? |
| Loading States | Are loading/empty states handled? |
| Animations | Are transitions smooth and purposeful? |
Create a prioritized list of improvements:
High Priority (Must Fix):
Medium Priority (Should Fix):
Low Priority (Nice to Have):
For each iteration:
Start with structural issues
Then typography
Then colors and contrast
Then interactive states
Finally polish details
After each iteration:
Report each iteration: "UI Polish Phase - Iteration X/Y" "Applied improvements: [list of changes]" "Remaining items: [list of pending improvements]"
Each iteration should focus on a coherent set of improvements:
Iteration 1: Foundation
Iteration 2: Visual Refinement
Iteration 3+: Polish Details
Progress Reporting: "UI Polish Phase - Iteration X/Y - Improving [aspect]..."
Exit Conditions:
Before:
After (Iteration 1):
After (Iteration 2):
Before:
After (Iteration 1):
After (Iteration 2):
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);