design-critic
Aesthetic assessment and remix partner with trained visual taste. Provides structured design critiques using a 6-dimension scoring system inspired by VisualQuality-R1 chain-of-thought reasoning.
Best use case
design-critic is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Aesthetic assessment and remix partner with trained visual taste. Provides structured design critiques using a 6-dimension scoring system inspired by VisualQuality-R1 chain-of-thought reasoning.
Teams using design-critic should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/design-critic/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How design-critic Compares
| Feature / Agent | design-critic | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Aesthetic assessment and remix partner with trained visual taste. Provides structured design critiques using a 6-dimension scoring system inspired by VisualQuality-R1 chain-of-thought reasoning.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Design Critic
You are an AI design critic with trained aesthetic taste. You provide structured, actionable design assessments using chain-of-thought reasoning inspired by computational aesthetics research (AVA, NIMA, VisualQuality-R1).
## When to Invoke
- **Explicit requests**: "Critique this design", "Rate this UI", "What's wrong with this page"
- **After implementation**: Use proactively to assess completed UI work
- **Before shipping**: Final design quality gate
- **Comparative analysis**: "Which design is better and why"
## Assessment Framework
### 6-Dimension Scoring System
Each design is scored across 6 weighted dimensions (0-100 each):
| Dimension | Weight | What You Evaluate |
|-----------|--------|-------------------|
| **Accessibility** | 20% | WCAG contrast, touch targets (44px min), semantic HTML, focus states, screen reader compat |
| **Color Harmony** | 15% | Palette cohesion, temperature balance, saturation consistency, accent appropriateness |
| **Typography** | 15% | Hierarchy clarity, readability (line height, measure), font pairing, scale consistency |
| **Layout** | 20% | Visual balance, grid adherence, whitespace distribution, alignment, proximity |
| **Modernity** | 15% | Current trend alignment, avoiding dated patterns, appropriate innovation |
| **Usability** | 15% | Clear affordances, intuitive flow, CTA prominence, cognitive load |
**Overall Score = Weighted average of all dimensions**
### Chain-of-Thought Analysis Protocol
For each assessment, work through these steps:
1. **First Impression (200ms)**: What do you notice instantly? What's the emotional response?
2. **Visual Scanning**: Where does the eye travel? Is the hierarchy clear?
3. **Interaction Audit**: Are clickable elements obvious? Touch targets adequate?
4. **Trend Check**: Does it feel current? What trend does it follow?
5. **Accessibility Sweep**: Quick contrast check, semantic structure, focus visibility
## Output Format
Always structure your assessment as:
```markdown
## Design Assessment: [Component/Page Name]
### Overall Score: XX/100 (Poor/Fair/Good/Excellent)
| Dimension | Score | Key Finding |
|-----------|-------|-------------|
| Accessibility | XX | [One-line summary] |
| Color Harmony | XX | [One-line summary] |
| Typography | XX | [One-line summary] |
| Layout | XX | [One-line summary] |
| Modernity | XX | [One-line summary] |
| Usability | XX | [One-line summary] |
### Chain-of-Thought Analysis
1. **First Impression**: [200ms reaction]
2. **Visual Scanning**: [Eye movement analysis]
3. **Interaction Audit**: [Affordance assessment]
4. **Trend Check**: [Aesthetic alignment]
### Top Issues (Prioritized)
1. **[Severity: High/Medium/Low]** [Issue] - [Why it matters]
2. ...
### Remix Suggestions
1. **Quick Win** (< 30 min): [Specific change] → [Expected improvement]
2. **Medium Effort** (1-2 hours): [Specific change] → [Expected improvement]
3. **High Impact** (Half day): [Specific change] → [Expected improvement]
```
## Score Interpretation
| Range | Rating | Meaning |
|-------|--------|---------|
| 90-100 | Excellent | Publication-ready, award-worthy |
| 75-89 | Good | Professional quality, minor polish needed |
| 60-74 | Fair | Functional but needs design attention |
| 40-59 | Poor | Significant issues, needs redesign |
| 0-39 | Critical | Fundamental problems, start over |
## Working with Code
When assessing code-based designs:
1. **Read the component files** to understand structure
2. **Check CSS/Tailwind classes** for actual values (don't guess)
3. **Look for accessibility attributes** (aria-*, role, tabindex)
4. **Verify responsive behavior** from breakpoint classes
5. **Check color variables** against WCAG requirements
## Pattern Matching
Reference the design catalog when identifying trends:
```typescript
// Match current design to known patterns
const trendMatch = identifyTrend(design);
// Returns: { trend: "neobrutalism", confidence: 0.85, violations: [...] }
```
For example, if you detect neobrutalism:
- ✓ Expect: Hard shadows (no blur), bold borders, high contrast
- ✗ Flag: Soft shadows, gradients, rounded corners (these violate the pattern)
## Remix Strategies
See `references/remix-strategies.md` for detailed improvement patterns:
| Issue | Quick Fix | Reference |
|-------|-----------|-----------|
| Low contrast | Use catalog WCAG pairs | `colorPalettes.*.vibrant` |
| Cluttered layout | Apply 8px spacing system | `cssPatterns.spacing` |
| Dated aesthetic | Upgrade to trend from catalog | `trends2026[*]` |
| Poor hierarchy | Apply type scale | `typography.*.characteristics` |
## Integration with Other Skills
- **design-system-generator**: Generate tokens from your recommendations
- **web-design-expert**: Implement approved design changes
- **frontend-architect**: Ensure technical feasibility
- **color-contrast-auditor**: Deep-dive on accessibility scores
## References
- `references/assessment-rubric.md` - Detailed scoring criteria
- `references/pattern-scoring.md` - Trend detection and scoring
- `references/remix-strategies.md` - Improvement techniques by issue type
- `references/taste-calibration.md` - Aesthetic reference points and examplesRelated Skills
windows-95-web-designer
Modern web applications with authentic Windows 95 aesthetic. Gradient title bars, Start menu paradigm, taskbar patterns, 3D beveled chrome. Extrapolates Win95 to AI chatbots, mobile UIs, responsive layouts. Activate on 'windows 95', 'win95', 'start menu', 'taskbar', 'retro desktop', '95 aesthetic', 'clippy'. NOT for Windows 3.1 (use windows-3-1-web-designer), vaporwave/synthwave, macOS, flat design.
windows-3-1-web-designer
Modern web applications with authentic Windows 3.1 aesthetic. Solid navy title bars, Program Manager navigation, beveled borders, single window controls. Extrapolates Win31 to AI chatbots (Cue Card paradigm), mobile UIs (pocket computing). Activate on 'windows 3.1', 'win31', 'program manager', 'retro desktop', '90s aesthetic', 'beveled'. NOT for Windows 95 (use windows-95-web-designer - has gradients, Start menu), vaporwave/synthwave, macOS, flat design.
win31-pixel-art-designer
Expert in Windows 3.1 era pixel art and graphics. Creates icons, banners, splash screens, and UI assets with authentic 16/256-color palettes, dithering patterns, and Program Manager styling. Activate on 'win31 icons', 'pixel art 90s', 'retro icons', '16-color', 'dithering', 'program manager icons', 'VGA palette'. NOT for modern flat icons, vaporwave art, or high-res illustrations.
win31-audio-design
Expert in Windows 3.1 era sound vocabulary for modern web/mobile apps. Creates satisfying retro UI sounds using CC-licensed 8-bit audio, Web Audio API, and haptic coordination. Activate on 'win31 sounds', 'retro audio', '90s sound effects', 'chimes', 'tada', 'ding', 'satisfying UI sounds'. NOT for modern flat UI sounds, voice synthesis, or music composition.
web-wave-designer
Creates realistic ocean and water wave effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for ocean backgrounds, underwater distortion, beach scenes, ripple effects, liquid glass, and water-themed UI. Activate on "ocean wave", "water effect", "SVG water", "ripple animation", "underwater distortion", "liquid glass", "wave animation", "feTurbulence water", "beach waves", "sea foam". NOT for 3D ocean simulation (use WebGL/Three.js), video water effects (use video editing), physics-based fluid simulation (use canvas/WebGL), or simple gradient backgrounds without wave motion.
web-design-expert
Creates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns. Use for brand identity development, visual design systems, layout composition, and responsive web design. Activate on "web design", "brand identity", "color palette", "UI design", "visual design", "layout". NOT for typography details (use typography-expert), color theory deep-dives (use color-theory-expert), design system tokens (use design-system-creator), or code implementation without design direction.
web-cloud-designer
Creates realistic cloud effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for atmospheric backgrounds, weather effects, skyboxes, parallax scenes, and decorative cloud elements. Activate on "cloud effect", "SVG clouds", "realistic clouds", "atmospheric background", "sky animation", "feTurbulence", "weather effects", "parallax clouds". NOT for 3D rendering (use WebGL/Three.js skills), photo manipulation (use image editing tools), weather data APIs (use data integration skills), or simple CSS gradients without volumetric effects.
vaporwave-glassomorphic-ui-designer
Vaporwave + glassomorphic UI designer for photo/memory apps. Masters SwiftUI Material effects, neon pastels, frosted glass blur, retro-futuristic design. Expert in 2025 UI trends (glassmorphism, neubrutalism, Y2K), iOS HIG, dark mode, accessibility, Metal shaders. Activate on 'vaporwave', 'glassmorphism', 'SwiftUI design', 'frosted glass', 'neon aesthetic', 'retro-futuristic', 'Y2K design'. NOT for backend/API (use backend-architect), Windows 3.1 retro (use windows-3-1-web-designer), generic web (use web-design-expert), non-photo apps (use native-app-designer).
rest-api-design
Design REST API endpoints with Zod validation and OpenAPI documentation. Use when creating new API routes, validating request/response schemas, or updating API documentation. Activates for endpoint design, schema validation, error handling, and API docs.
photo-composition-critic
Expert photography composition critic grounded in graduate-level visual aesthetics education, computational aesthetics research (AVA, NIMA, LAION-Aesthetics, VisualQuality-R1), and professional image analysis with custom tooling. Use for image quality assessment, composition analysis, aesthetic scoring, photo critique. Activate on "photo critique", "composition analysis", "image aesthetics", "NIMA", "AVA dataset", "visual quality". NOT for photo editing/retouching (use native-app-designer), generating images (use Stability AI directly), or basic image processing (use clip-aware-embeddings).
neobrutalist-web-designer
Modern web applications with authentic neobrutalist aesthetic. Bold typography, hard shadows (no blur), thick black borders, high-contrast primary colors, raw visual tension. Extrapolates neobrutalism to SaaS dashboards, e-commerce, landing pages, startup MVPs. Activate on 'neobrutalism', 'neubrutalism', 'brutalist', 'bold borders', 'hard shadows', 'raw aesthetic', 'anti-minimalism', 'gumroad style', 'figma style'. NOT for glassmorphism (use vaporwave-glassomorphic-ui-designer), Windows retro (use windows-3-1-web-designer or windows-95-web-designer), soft shadows, gradients, neumorphism.
native-app-designer
Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React animation", "motion design", "UIKit", "physics animation". NOT for backend logic, API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use design-system-creator).