Skip to main content
Prompts Webpage Design Criteria Reviewer and Improver

developer analysis template risk: low

Webpage Design Criteria Reviewer and Improver

Review the current webpage against criteria on hero section emotional reaction, typography hierarchy, interactions, and quality resemblance to a reference site. Suggest 3 specific…

PROMPT 

Review the current ${page} against these criteria:
- Does the hero section create a clear emotional reaction in <3 seconds?
- Is the typography hierarchy clear at every breakpoint?
- Are interactions purposeful or decorative?
- Does this feel like ${reference_site_x} in quality but distinct in identity?

Suggest 3 specific improvements with reasoning, then implement them.

INPUTS

page REQUIRED

the current webpage to review

e.g. https://example.com/homepage

reference_site_x REQUIRED

reference site for quality comparison while maintaining distinct identity

e.g. https://referencesite.com

REQUIRED CONTEXT

  • current webpage (${page})
  • reference site (${reference_site_x})

ROLES & RULES

  1. Review the current ${page} against these criteria.
  2. Suggest 3 specific improvements with reasoning.
  3. Implement them.

EXPECTED OUTPUT

Format
structured_report
Constraints
  • suggest exactly 3 specific improvements
  • include reasoning for each
  • implement the improvements

SUCCESS CRITERIA

  • Evaluate if the hero section creates a clear emotional reaction in <3 seconds.
  • Check if the typography hierarchy is clear at every breakpoint.
  • Assess if interactions are purposeful or decorative.
  • Determine if it feels like ${reference_site_x} in quality but distinct in identity.

FAILURE MODES

  • May provide subjective evaluations due to vague criteria like 'emotional reaction'.
  • Might suggest more or fewer than 3 improvements.
  • Implementation could be inaccurate without direct access to ${page}.

CAVEATS

Dependencies
  • Requires the current ${page}
  • Requires ${reference_site_x}
Missing context
  • Expected input format for ${page} and ${reference_site_x} (e.g., URLs).
  • Output format for suggestions and implementation (e.g., structured list, code blocks).
  • Domain assumptions (e.g., web development tools, breakpoints).
Ambiguities
  • Unclear what form ${page} takes (e.g., URL, screenshot, code snippet).
  • "Implement them" is ambiguous: does it mean code changes, visual mockups, or descriptive updates?
  • Criteria like "clear emotional reaction" and "feels like ${reference_site_x}" are subjective without examples.

QUALITY

OVERALL
0.85
CLARITY
0.90
SPECIFICITY
0.80
REUSABILITY
0.90
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add: 'Assume ${page} is a URL to a live webpage or code snippet; ${reference_site_x} is a benchmark site URL.'
  • Clarify implementation: 'Implement them by providing updated HTML/CSS/JS code snippets or a revised wireframe description.'
  • Structure output: 'Output in sections: 1. Review summary per criterion. 2. Numbered list of 3 improvements: [Improvement], Reasoning, Implementation.'

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER