blacktop Screenshot Analyzer
Find and analyze screenshots from ~/Downloads/Screenshots/ with focus on UI/UX review.
Workflow
1. Find Screenshots
List recent screenshots sorted by modification time:
ls -t ~/Downloads/Screenshots/*.png | head -5
Adjust -5 to show more/fewer files as needed.
2. Read and Analyze
Use the Read tool to view the screenshot image:
Read: ~/Downloads/Screenshots/<filename>.png
The Read tool renders images visually for analysis.
3. UI/UX Review Checklist
When analyzing, evaluate:
Visual Hierarchy
- Clear focal points and content prioritization
- Logical flow of information
- Appropriate use of size, color, and spacing to guide attention
Layout & Spacing
- Consistent margins and padding
- Proper alignment of elements
- Balanced whitespace usage
Typography
- Readable font sizes and line heights
- Appropriate font choices and hierarchy
- Sufficient contrast for legibility
Color & Contrast
- WCAG-compliant contrast ratios
- Consistent color palette
- Meaningful use of color (not just decorative)
Interactive Elements
- Clear affordances for buttons/links
- Visible focus states
- Appropriate touch/click target sizes
Error States & Feedback
- Clear error messaging
- Helpful guidance for resolution
- Appropriate visual indicators
Consistency
- Consistent patterns across similar elements
- Adherence to design system (if applicable)
- Predictable interaction patterns
Output Format
Structure findings as:
## Screenshot Analysis: <filename>
### Summary
[1-2 sentence overview of what the screenshot shows]
### Findings
#### Strengths
- [Positive observation 1]
- [Positive observation 2]
#### Issues
- **[Issue Type]**: [Description] → [Suggested fix]
- **[Issue Type]**: [Description] → [Suggested fix]
### Priority Recommendations
1. [Most critical fix]
2. [Second priority]
3. [Third priority]