skills.rest
lukaskellerstein
lukaskellersteinCOMMUNITY
Explore all skills by this author →
𝕏@lkellersteinGitHub

design-review

Reviews existing designs and frontend code against design principles and produces scored feedback.

3|1|Updated Nov 19, 2025
Search Tags:#typography#frontend#design principles#design review#visual hierarchy#ui audit#design critique
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill design-review-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/design-plugin/skills/design-review
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill design-review-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers often sense that a layout or website looks off but cannot pinpoint why. This Skill audits existing designs, websites, or frontend code against established design principles and returns scored, actionable feedback instead of vague observations. ## Core Features & Use Cases - Structured 8-Category Audit: Scores typography, color, spacing, visual hierarchy, imagery, motion, consistency, and distinctiveness on a 1-10 scale with specific issue notes. - Actionable Fix Mapping: Pairs each detected issue with a concrete fix and references the appropriate follow-up skill such as styleguide, design-system, or frontend-aesthetics. - Standardized Review Report: Outputs a consistent markdown report with overall impression, score table, top 3 issues, quick wins, and recommended next steps. - Use Case: Before shipping a landing page, ask for a design audit to catch generic fonts, poor contrast, and weak CTA prominence, then apply the listed quick wins in under an hour. ## Quick Start Ask the assistant to review my landing page design and tell me what is wrong with the layout and how to fix it.

Frequently Asked Questions about design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get actionable feedback on my website design?▼

Request a design review of your page or frontend code. The review scores eight categories including typography, color, and spacing, then lists the top three issues with specific fixes and quick wins ranked by effort.

What design anti-patterns does a UI audit check for?▼

The audit checks for generic default fonts, random hex values without a palette, poor contrast, inconsistent spacing off the grid, weak visual hierarchy, missing hover states, and template-looking components lacking distinctiveness.

Can this review check WCAG accessibility compliance?▼

No, WCAG accessibility audits with contrast ratio calculations belong to the design-system skill. This review flags contrast as a visual issue but delegates formal accessibility compliance checks to design-system.

When should I not use a design review?▼

Skip it when creating a new design from scratch, where the styleguide skill should run first, or when you need a code quality review, which is not a design concern. It targets existing designs needing critique.

What output format does the design review produce?▼

It produces a markdown report with an overall impression, a score table for all eight categories, the top three issues with fixes and impact ratings, quick wins with effort estimates, and recommended next steps.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
allieraysallierays
38

Styleguide Generator

Generates a /styleguide route with React components and CSS variables from user-defined preferences.

Community
Advanced
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
i-standard1i-standard1
6

detail-design

Generate detail design documents from code or requirements with integrity checks.

Official
Advanced