# 10-Dimension Quantitative Scoring Framework

> Each dimension independently scored 0-10, total score 0-100. Scoring based on specific measurable criteria, not subjective judgment.

---

## Scoring Levels

| Total Score | Level | Meaning |
|-------------|-------|---------|
| 90-100 | **Masterpiece** | Flawless, can be directly showcased as industry benchmark |
| 75-89 | **Excellent** | Professional level, ready to ship after minor tweaks |
| 60-74 | **Good** | Passable overall, needs targeted optimization on 2-3 dimensions |
| 40-59 | **Acceptable** | Functional but lacks design quality, needs systematic improvement |
| <40 | **Needs Work** | Amateur level, needs to rethink from Design DNA |

---

## Dimension 1: Visual Hierarchy

**Core Question**: Can users understand the page's main information within 3 seconds?

| Score | Standard |
|-------|----------|
| 9-10 | Hierarchy clear like poster design: one absolutely dominant element, 2-3 secondary elements, clear reading path. Squint test passes: still identifiable main/secondary when blurred. |
| 7-8 | Clear hierarchy, main and secondary distinct. Maybe one area's weight needs adjustment. |
| 5-6 | Can identify main/secondary but not sharp enough, some elements grabbing attention they shouldn't. |
| 3-4 | Blurred hierarchy, multiple elements competing for attention, users don't know where to start. |
| 0-2 | Completely flat, all elements have same visual weight, or hierarchy chaotic and contradictory. |

**Measurement Methods**:
- Squint test: Blur page, is main title still prominent?
- Size ratio: Main title vs body ≥ 2.5x
- Contrast gradient: Title → subtitle → body → auxiliary, each level decreases ≥ 30%
- Spatial separation: Main element vs secondary element spacing ≥ 2x base spacing

---

## Dimension 2: Color Quality

**Core Question**: Does color convey correct emotion and is technical execution solid?

| Score | Standard |
|-------|----------|
| 9-10 | OKLCH color space, palette has intrinsic harmony, neutral grays have brand hue tint, dark mode is independent design not inversion. 60-30-10 visual weight distribution precise. |
| 7-8 | Harmonious intentional color, maybe neutral grays not tinted or dark mode not refined enough. |
| 5-6 | Acceptable color but lacks strategy, maybe directly using HSL or slight disharmony. |
| 3-4 | Arbitrary color, multiple saturated colors fighting, or grays completely lifeless. |
| 0-2 | Chaotic glaring color, or using AI default colors (purple-blue gradient, cyan neon). |

**Measurement Methods**:
- Color space: Using OKLCH? (+2 points)
- Neutral gray tinting: Grays have brand hue? (+1 point)
- WCAG contrast: All text pairs ≥ 4.5:1? (Not meeting → ≤4 score)
- Palette size: 2-4 non-neutral colors? (Reasonable range +1 point)
- AI Slop indicator: Has purple-blue gradient or cyan neon? (Has → ≤3 score)

---

## Dimension 3: Typography Quality

**Core Question**: Are font choices and typography execution professional?

| Score | Standard |
|-------|----------|
| 9-10 | Font pairing has clear intent (contrast axes), modular type scale system, consistent vertical rhythm, body ≥ 16px, line length 45-75ch, rem units, web font has fallback strategy. No Inter/Roboto overuse. |
| 7-8 | Solid typography, type scale and line height reasonable. Maybe font choice safe but execution solid. |
| 5-6 | Typography basically passable, maybe type scale not strict enough or line length occasionally exceeds. |
| 3-4 | Amateur typography: mixing px/rem, line length out of control, type scale has no system. |
| 0-2 | Typography disaster: multiple fonts fighting, line height too tight or loose, poor readability. |

**Measurement Methods**:
- Body font-size ≥ 16px (No → -2 points)
- Line length 45-75ch (Exceeds ±10 chars → -1 point)
- Type scale: Using consistent ratio? (1.25/1.333/1.5 passable)
- Font count: ≤ 2 font families (More → -2 points)
- Line-height: Body 1.5-1.7, heading 1.0-1.3 (Reasonable +1 point)

---

## Dimension 4: Spatial Rhythm

**Core Question**: Does spacing have rhythm and consistency?

| Score | Standard |
|-------|----------|
| 9-10 | 4pt base spacing system, semantic tokens (--space-sm not --spacing-8), tight clusters (8-12px) vs generous separation (48-96px) forming contrast rhythm. gap > margin, no magic numbers. |
| 7-8 | Consistent rhythmic spacing, maybe occasional non-system spacing appears. |
| 5-6 | Roughly consistent spacing but lacks system, maybe some areas too tight or loose. |
| 3-4 | Arbitrary spacing, different areas have inconsistent spacing style. |
| 0-2 | Chaotic spacing, adjacent elements inconsistent, no rhythm. |

**Measurement Methods**:
- Are spacing values multiples of 4? (8/12/16/20/24/32/48/64)
- Same page spacing value types ≤ 6? (More means loose system)
- Element cluster spacing vs cluster spacing: Is there obvious contrast (≥ 3x)?
- Using gap instead of margin for sibling spacing?

---

## Dimension 5: Interaction Completeness

**Core Question**: Are all interaction states designed?

| Score | Standard |
|-------|----------|
| 9-10 | 8 states complete: default / hover / focus / active / disabled / loading / error / success. :focus-visible not :focus. Loading has skeleton or spinner. Error has recovery path. |
| 7-8 | Core states complete, maybe missing loading or success state. |
| 5-6 | Basic states exist (default/hover), but focus and disabled possibly missing. |
| 3-4 | Only default state, hover occasionally. |
| 0-2 | No interaction state design. |

**Measurement Methods**:
- Check 8 states one by one: Does each interactive element have corresponding style?
- Focus ring: Using :focus-visible? (No → -3 points)
- Disabled: Has visual distinction and cursor: not-allowed?
- Loading: Has progress indication?
- Error: Has inline error message + fix path?

---

## Dimension 6: Motion Quality

**Core Question**: Does motion have purpose, correct rhythm, respects user preference?

| Score | Standard |
|-------|----------|
| 9-10 | 100/300/500 duration rule. ease-out-quart default easing. Only transform + opacity. Orchestrated with stagger but not showing off. prefers-reduced-motion non-optional. Exit ~75% faster than entry. |
| 7-8 | Appropriate purposeful motion, maybe duration occasionally off. reduced-motion exists but not perfect. |
| 5-6 | Has motion but lacks system, maybe individual animations too long or wrong easing. |
| 3-4 | Too much or purposeless motion, maybe using bounce/elastic. |
| 0-2 | No motion, or bounce/elastic泛滥, completely ignoring reduced-motion. |

**Measurement Methods**:
- Feedback motion 100-150ms? State change 200-300ms? Layout 300-500ms? Entrance 500-800ms?
- Easing: Avoiding bounce/elastic?
- Only transform + opacity? (Animating layout properties → -2 points)
- prefers-reduced-motion: Complete support?
- Perceived performance: Within 80ms operations have instant feedback?

---

## Dimension 7: Accessibility

**Core Question**: Can everyone use it?

| Score | Standard |
|-------|----------|
| 9-10 | WCAG AA all pass (contrast 4.5:1 body, 3:1 large text). Semantic HTML (header/nav/main/section/article/footer). ARIA only when semantic HTML insufficient. Keyboard fully operable. Touch targets ≥ 44pt. |
| 7-8 | WCAG AA basically pass, maybe individual contrast borderline. Keyboard navigation basically complete. |
| 5-6 | Most AA pass but key omissions (like incomplete focus management or missing alt). |
| 3-4 | Contrast not meeting, missing semantic markup, keyboard operation difficult. |
| 0-2 | Completely ignoring accessibility, div abuse, no alt, no focus. |

**Measurement Methods**:
- Contrast: Every text/background pair ≥ 4.5:1 (Not meeting → dimension ≤4)
- Semantic HTML: Has header/nav/main/footer?
- Touch targets: Clickable elements ≥ 44×44pt?
- Keyboard: Is Tab order logically reasonable? Is focus visible?
- Images: All <img> have alt? Decorative images have alt=""?

---

## Dimension 8: Responsive Quality

**Core Question**: Is it carefully designed on different screens?

| Score | Standard |
|-------|----------|
| 9-10 | Content-driven breakpoints (not device-driven). Mobile is independent design not scaling. Container queries for component-level responsive. touch/coarse pointer detection. safe-area-inset adaptation. Real device testing pass. |
| 7-8 | Major breakpoint coverage good, mobile basically usable. Maybe some components need tweaking on small screens. |
| 5-6 | Responsive exists but crude, some content overflows or unreadable on small screens. |
| 3-4 | Basically only one breakpoint, poor mobile experience. |
| 0-2 | No responsive design at all, horizontal scroll or content cutoff. |

**Measurement Methods**:
- Breakpoint count: ≥ 2 breakpoints (mobile/tablet/desktop common)
- Content overflow: 320px width has horizontal scroll?
- Images: Using srcset + sizes?
- Touch: Mobile has hover-only interactions (shouldn't have)?
- Text: Small screen body still ≥ 16px?

---

## Dimension 9: AI Slop Score

**Core Question**: Does it look AI-generated?

| Score | Standard |
|-------|----------|
| 9-10 | Completely no AI traces. Unique design personality, unexpected but appropriate color choices, layout breaking template conventions, tasteful font choices. Can't tell if AI or human designer work. |
| 7-8 | Very few AI traces, maybe one or two small details slightly template-like. |
| 5-6 | Can see AI influence: standard card grid, common gradient usage, template layout. But overall not excessive. |
| 3-4 | Obvious AI aesthetic: purple-blue gradient, glassmorphism, cookie-cutter card arrangement, circular avatars + names. |
| 0-2 | Typical AI slop: Dark background + cyan accent + purple gradient + glass cards + Inter font + 3D effects. Spot一眼就知道是 AI generated. |

**Detection Checklist** (see [anti-patterns.md](anti-patterns.md) for details):
- Purple-blue gradient (-3 points)
- Dark background + cyan/teal accent (-3 points)
- Inter/Roboto as primary font (-2 points)
- Standard three-column card grid (-2 points)
- Glassmorphism泛滥 (-2 points)
- Hero section large metric numbers (-1 point)
- bounce/elastic easing (-2 points)
- Pure black (#000) or pure white (#fff) background (-1 point)

---

## Dimension 10: Brand Consistency

**Core Question**: Is design faithful to project's Design DNA?

| Score | Standard |
|-------|----------|
| 9-10 | Perfectly embodies Design DNA brand personality. Color, typography, space, motion all serve brand narrative. Every design decision traceable to some DNA principle. |
| 7-8 | Brand feel obvious, maybe individual areas slightly deviate from DNA. |
| 5-6 | Overall direction correct but execution inconsistent, some pages drift from brand personality. |
| 3-4 | Brand feel weak, looks like generic template with brand color applied. |
| 0-2 | No brand personality at all, or Design DNA doesn't exist. |

**Measurement Methods**:
- Does Design DNA file exist? (No → max 4 points)
- Does color match DNA color philosophy?
- Does typography match DNA font choices and tone?
- Does spatial style match DNA brand personality (bold → large spacing vs precision → tight)?
- Does overall emotion match DNA audience expectations?

---

## Scoring Report Format

```
╔════════════════════════════════════════════════════════╗
║  Amazing Design Score: 78/100 — Excellent            ║
╠════════════════════════════════════════════════════════╣
║  Visual Hierarchy    ████████░░  8/10  Clear layers   ║
║  Color Quality       ███████░░░  7/10  Good, grays    ║
║  Typography          █████████░  9/10  Type scale     ║
║  Spatial Rhythm      ████████░░  8/10  Strong rhythm  ║
║  Interaction         ██████░░░░  6/10  Missing load   ║
║  Motion Quality      ███████░░░  7/10  Reasonable,    ║
║  Accessibility       ████████░░  8/10  AA passed      ║
║  Responsive          ███████░░░  7/10  Tablet needs   ║
║  AI Slop             ████████░░  8/10  No AI traces   ║
║  Brand Consistency   █████████░  9/10  DNA aligned    ║
╠════════════════════════════════════════════════════════╣
║  Priority Fixes:                                       ║
║  P0: Interaction — Add loading/success states          ║
║  P1: Motion — Add prefers-reduced-motion support       ║
║  P2: Color — Add brand hue tint to neutral grays       ║
╚════════════════════════════════════════════════════════╝
```