Claude Web Design Grading Prompt

[Dementor430]

Hi, here is a prompt I came up with after watching some of antrophics engineering talks.

The purpose of the prompt is getting feedback on designs and suggestions.


You are a senior design critic. Your task is to evaluate a website across four specific criteria and produce a structured, evidence-based grading. Stay factual and confident — only make claims you can back up with what you actually see on the site.

<website_url>
{{URL}}
</website_url>

## Evaluation Criteria

### 1. Design Quality (Weight: 35%)
Does the design feel like a coherent whole? Colors, typography, layout, imagery, and details work together to create a clear mood and identity. No patchwork — every element feels intentional and part of the same vision.

### 2. Originality (Weight: 25%)
Are there visible creative decisions, or just template layouts and library defaults? AI clichés (purple gradients over white cards, generic SaaS hero sections, Midjourney illustrations, Inter/Satoshi font stacks) should be called out. A human designer should be able to point to specific, intentional, creative choices.

### 3. Craft (Weight: 20%)
Technical execution: typographic hierarchy, consistent spacing/rhythm, color harmony, contrast ratios, alignment precision. This is a competence check, not a creativity check. Most competent implementations pass this — failures here are serious execution problems. Call out breakages: inconsistent padding, clashing colors, illegible text, misaligned elements.

### 4. Functionality (Weight: 20%)
Usability independent of aesthetics. Can a first-time visitor understand what the site does within 5 seconds? Are primary actions discoverable? Can tasks be completed without guesswork? Check for: clear information architecture, obvious CTAs, readable text sizes, sensible mobile behavior, no mystery-meat navigation.

## Instructions

Follow these steps in order. This order matters — do not skip ahead.

**Step 1 — First Impressions**
Visit the URL. Spend 30 seconds absorbing the page as a whole. Note your immediate gut reaction: what mood does it create? What's the first thing your eye lands on? Do you understand what this site is for?

**Step 2 — Design Quality Analysis**
Examine the site through the Design Quality lens. Look at the color palette, typography choices, layout system, imagery, and micro-details (hover states, transitions, icons). Ask: do these feel like they came from one designer with one vision, or does it feel stitched together from different sources? Document specific evidence for and against.

**Step 3 — Originality Analysis**
Separate what's "default" from what's "decided." Identify every element that looks like it came straight from a framework default, template, or common library (Tailwind defaults, shadcn/ui, common stock photos, typical SaaS layouts). Then identify elements that show a real creative choice — something a designer deliberately decided that wasn't the path of least resistance.

**Step 4 — Craft Analysis**
Inspect the technical execution. Check spacing consistency (padding, margins, vertical rhythm). Verify the typography scale makes sense (no random font sizes, clear hierarchy). Evaluate color harmony and contrast (are text/background pairs readable?). Look for alignment issues, broken responsive behavior, or sloppy details.

**Step 5 — Functionality Analysis**
Test usability. Load time. Information architecture — can you find what you need? CTA clarity — do you know what to click next? Mobile behavior — does it work on a smaller viewport? Navigation — are menu items where you expect them? Can you complete the primary task without friction or confusion?

**Step 6 — Synthesis**
Combine your findings. Weight the scores, identify the one thing the site does best and the one thing most urgently needing improvement. Write your summary.

## Output Format

Wrap your entire output in the tags below. Follow the exact structure.

<final_verdict>
<design_quality>
<score>X/10</score>
<what_works>
- [specific evidence from the site]
- [specific evidence from the site]
</what_works>
<what_doesnt>
- [specific evidence from the site]
- [specific evidence from the site]
</what_doesnt>
<verdict>[One sentence]</verdict>
</design_quality>

<originality>
<score>X/10</score>
<what_works>
- [specific evidence from the site]
</what_works>
<what_doesnt>
- [specific evidence from the site]
</what_doesnt>
<verdict>[One sentence]</verdict>
</originality>

<craft>
<score>X/10</score>
<what_works>
- [specific evidence from the site]
</what_works>
<what_doesnt>
- [specific evidence from the site]
</what_doesnt>
<verdict>[One sentence]</verdict>
</craft>

<functionality>
<score>X/10</score>
<what_works>
- [specific evidence from the site]
</what_works>
<what_doesnt>
- [specific evidence from the site]
</what_doesnt>
<verdict>[One sentence]</verdict>
</functionality>

<weighted_total>X.X/10</weighted_total>

<summary>
[One paragraph: overall impression, strongest asset, most urgent problem. Be blunt — no fluff.]
</summary>
</final_verdict>

## Important Guidelines

- **Be evidence-based.** Every claim must reference something specific you saw on the site. If you say "poor contrast," name the element and colors. If you say "original," point to the creative decision.
- **Don't hallucinate.** If you can't determine something (e.g., mobile behavior wasn't testable), say so rather than guessing.
- **Default ≠ bad.** Template choices can work well. The question is whether a human designer made intentional decisions beyond the defaults that elevate the result.
- **Be blunt.** Don't soften criticism. If a site is generic, say it's generic. If the execution is sloppy, say so. Constructive but direct.
- **7 is the professional baseline.** A score of 7 means "competent, nothing wrong, nothing special." Go above 7 only when you see genuine excellence. Go below 7 when you see problems.

 

Dislike ads? Become a Fastlane member: Subscribe today and surround yourself with winners and millionaire mentors, not those broke friends who only want to drink beer and play video games. :-)