This skill should be used when the user asks to evaluate, score, or audit a visual design, wants to compare designs quantitatively, needs an anti-pattern checklist, or wants to understand the 8-dimension design quality framework. Covers the VisAWI-aligned 8-dimension scoring methodology (1-5 per dimension, 40-point maximum), processing fluency theory, the anti-pattern rapid screening checklist, and the complete evaluation workflow.
npx claudepluginhub oborchers/fractional-cto --plugin visual-design-principlesThis skill uses the workspace's default tool permissions.
Empirical aesthetics research (VisAWI by Moshagen & Thielsch, Lavie & Tractinsky 2004, Seckler et al. 2015) shows that perceived visual quality is not arbitrary opinion -- it decomposes into measurable dimensions. The 8-dimension framework below maps each dimension to research-validated constructs, giving you a repeatable, objective scoring system for any visual artifact.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Empirical aesthetics research (VisAWI by Moshagen & Thielsch, Lavie & Tractinsky 2004, Seckler et al. 2015) shows that perceived visual quality is not arbitrary opinion -- it decomposes into measurable dimensions. The 8-dimension framework below maps each dimension to research-validated constructs, giving you a repeatable, objective scoring system for any visual artifact.
| # | Dimension | Research Alignment | What It Measures |
|---|---|---|---|
| 1 | Layout | Seckler et al. (structural clarity) | Grid adherence, alignment, spatial composition, responsive behavior |
| 2 | Typography | Bringhurst, Butterick | Type scale, font pairing, line length, readability, hierarchy |
| 3 | Color | Reinecke et al., 60-30-10 rule | Palette harmony, contrast compliance, shade scale, dark mode |
| 4 | Whitespace | Pracejus et al. (perceptions of luxury) | Spacing consistency, density ratio, separation techniques |
| 5 | Hierarchy | Refactoring UI (emphasis/de-emphasis) | Focal points, 3-tier clarity, scanning patterns, CTA prominence |
| 6 | Consistency | VisAWI Craftsmanship subscale | Design tokens, component uniformity, cross-screen coherence |
| 7 | Craftsmanship | VisAWI Craftsmanship subscale | Pixel precision, image quality, shadows, micro-interactions, CLS |
| 8 | Expression | Lavie & Tractinsky (Expressive aesthetics) | Brand personality, visual motifs, illustration, motion, originality |
Score each dimension 1-5. Total is out of 40.
| Score | Meaning | Indicators |
|---|---|---|
| 1 | Broken | Fundamental violations; unusable or visually chaotic |
| 2 | Weak | Multiple issues; feels amateur or unfinished |
| 3 | Adequate | Meets basics; no major violations but lacks refinement |
| 4 | Good | Consistent and polished; minor improvements possible |
| 5 | Excellent | Research-aligned best practice; cohesive and intentional |
| Total | Rating | Meaning |
|---|---|---|
| < 16 | Poor | Significant redesign needed across multiple dimensions |
| 16-23 | Below Average | Several dimensions need improvement; structural issues likely |
| 24-31 | Adequate | Solid foundation; targeted improvements will elevate quality |
| 32-37 | Good | Professional quality; polish and expression can push higher |
| 38-40 | Excellent | Best-in-class visual quality across all dimensions |
Reber et al. (2004) established that easier to process = more beautiful. Designs that are visually fluent -- consistent grids, predictable spacing, clear hierarchy -- are perceived as more trustworthy, more professional, and more aesthetically pleasing. This is not taste; it is cognitive science.
Implication: Structural factors (layout, typography, whitespace) that increase processing fluency have a larger impact on perceived quality than expressive factors (color, illustration, motion).
Seckler et al. (2015) found that layout, typography, and whitespace explain more variance in perceived quality than color or expression. A design with a perfect grid, well-chosen type, and generous whitespace will score well even with a minimal color palette. The reverse is never true -- no amount of color or illustration rescues a broken grid.
Prioritize dimensions 1-5 before investing in 6-8.
Look at the design for 50 milliseconds (a glance). Record your gut reaction: professional or amateur? Cluttered or clean? This leverages the Lindgaard et al. (2006) finding that aesthetic judgments form in 50ms and correlate strongly with extended evaluation.
Run through the 10-item checklist below in under 60 seconds. Each "yes" is a red flag.
| # | Check | Red Flag |
|---|---|---|
| 1 | More than 3 font families visible? | Typography violation |
| 2 | Text below 4.5:1 contrast on any background? | Accessibility failure |
| 3 | Elements visibly misaligned to each other? | Grid breakdown |
| 4 | Spacing feels inconsistent (different gaps for same relationships)? | Whitespace violation |
| 5 | No clear focal point -- everything competes equally? | Hierarchy failure |
| 6 | Color-only status indicators without icons or labels? | Accessibility failure |
| 7 | Low-resolution or stretched images? | Craftsmanship failure |
| 8 | Inconsistent border-radius, shadow, or button styles? | Consistency failure |
| 9 | Content touching container edges (no padding)? | Whitespace violation |
| 10 | No visual personality -- could belong to any brand? | Expression gap |
Score each of the 8 dimensions using the rubric. Reference the corresponding principle skill for detailed criteria:
visual-design-principles:layout-spatial-structurevisual-design-principles:typographyvisual-design-principles:color-theory-applicationvisual-design-principles:whitespace-densityvisual-design-principles:visual-hierarchyvisual-design-principles:consistency-design-systemsvisual-design-principles:craftsmanship-polishvisual-design-principles:visual-interest-expressionSum the scores. Identify the lowest-scoring dimensions and prioritize improvements there. Structural dimensions (1-5) should be fixed before expressive dimensions (6-8).
Use these measurable values to ground subjective impressions in data:
| Metric | Target | Tool |
|---|---|---|
| Whitespace ratio | 30-50% for standard sites | Browser DevTools element inspection |
| Spacing system compliance | >90% of values on the defined scale | CSS audit / Tailwind config review |
| Contrast ratios | 4.5:1 body, 3:1 large text | WebAIM Contrast Checker, axe-core |
| Grid adherence | >90% of edges aligned to grid lines | Grid overlay in DevTools |
| CLS (Cumulative Layout Shift) | < 0.1 | Lighthouse, Web Vitals |
| Type scale compliance | All sizes from defined modular scale | CSS audit |
| Image resolution | 2x minimum for retina displays | Manual check |
The 8-dimension framework applies to any visual medium. Adjust the specific benchmarks per context:
Working implementations in examples/:
examples/evaluation-workflow.md -- Step-by-step evaluation of a fictional landing page with the 8-dimension scorecard formatWhen evaluating or scoring a visual design: