Design Review
Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for
Install
npx skills add humbleteam/design-review --skill design-reviewgit clone --depth 1 https://github.com/humbleteam/design-review.git /tmp/design-review
mkdir -p ~/.claude/skills
cp -r /tmp/design-review/. ~/.claude/skills/design-reviewPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Design review
Critique a UI artifact or answer a design decision question, always with a citation behind every claim.
## Step 0 - load the rubric
Before writing any critique, read [references/review-rubric.md](references/review-rubric.md) if it is not already in context. It has the 0-4 scoring bands, the rule that picks one band when two of them describe the same screen, and the compact table of Nielsen's 10 usability heuristics you cite from. Do not skip this even if you know the heuristics - the exact wording of the bands matters for consistent scoring across runs, and the tie-break is what keeps two runs on one screen from returning two different numbers.
## Step 1 - pick a mode
Two facts settle it. Is an **artifact** attached - a pasted screenshot, an image, a URL, or an HTML snippet in a code block? And does the message ask a **decision question** - a choice between patterns, components, or flows ("should I use X or Y", "how should I handle...")? "Review this", "is this any good" and "what's wrong with this" are not decision questions: they ask about the artifact's own quality, which is what review mode answers.
Take the first match:
1. **Comparison mode**: two or more artifacts, and the question asks which of them wins ("A or B", "which of these is better", "did the redesign improve this").Details
- Skill name
design-review- Repository
- humbleteam/design-review
- License
- MIT
- Repo updated
- 25 October 2026
FAQ
What does the Design Review skill do?
Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for
How do I install the Design Review skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add humbleteam/design-review --skill design-review. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Design Review popular?
It lives in humbleteam/design-review, which has 5 GitHub stars and 0 forks.
Related skills
Deslopify
5AntonioSpagnol/UI-Deslopify-Skill
Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.
Design Mapper Skill
5bilioveloso/design-mapper-skill
Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.
Figma to Roblox UI
5xtrair/figma-to-roblox-ui
Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.
Ascii Shader Tsx
5Codeptor/ascii-shader-tsx
Generate animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components. Use when the user wants to create ASCII backgrounds, dithered image/video effects, CRT/retro overlays, matrix rain, noise fields, halftone patterns, particle systems, braille art, terminal aesthetics, or any text/character-based visual effect for the web. Supports both generative (procedural, no input) and source-based (images, video, webcam to ASCII) modes. Also triggers when the user wants to convert an image to ASCII, add a dither effect, create a canvas shader component, build a r
Frontend Feature Architecture
5Arthurblaya/frontend-feature-architecture
Organize frontend code by feature with explicit ownership and one-way dependencies. Use when adding a frontend feature, deciding file placement, reviewing architecture, or migrating a frontend folder structure across web, mobile, and desktop projects.
AI UIconfig Skill
5voderment/AI-UIconfig-skill
Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the product's visual intent.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.