What is design-critique?

A design review skill for judging an existing user interface against common visual anti-patterns and the AI Slop Test, which looks for generic or template-like design. It scores typography, color, spacing, motion, interaction, and originality, then lists fixes by priority.

Auditing a screen or website, reviewing visual craft, identifying generic design patterns, and producing a scored list of improvements.

It separates visual quality review from code-health or architecture review, so design problems can be assessed on their own.

design-critique — Skill for Claude Code by hamzaPixl

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add hamzaPixl/pixl-ai --skill design-critique

Clone the repo

git clone --depth 1 https://github.com/hamzaPixl/pixl-ai

Made for: Claude Code.

Or install pixl-crew, the plugin that ships this one along with the rest of its 93 skills, 14 agents, 6 hooks.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/design-critique/github.svg)](https://agentmods.dev/skills/hamzapixl/pixl-ai/design-critique)

Your own site

<a href="https://agentmods.dev/skills/hamzapixl/pixl-ai/design-critique"><img src="https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/design-critique/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/hamzapixl/pixl-ai/design-critique"><img src="https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/design-critique.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 77 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,638 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00077	$0.01638
Opus 5	$0.00039	$0.00819
Sonnet 5	$0.00015	$0.00328
Haiku 4.5	$0.00008	$0.00164

Measured 11d ago against content hash 4d1f2ae72f79, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

design-critique scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

packages/crew/skills/design-critique/SKILL.md · 135 lines

How it starts

The opening of the file, as written. The whole thing — 135 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Overview

Independent, opinionated design review that evaluates UI against a catalog of anti-patterns and the "AI Slop Test" — the instinct to look generic, templated, or machine-generated. Produces a scored report (6 axes, 1-10) and a prioritized fix list. Critique only — use /design-polish to auto-fix findings or /design-distill to strip overdesign.

How this differs:

/react-doctor — code health (hooks, a11y, perf). This skill — visual craft and design quality.
/cto-review — architectural review. This skill — pixel-level aesthetics.
/design-variants — generate new directions. This skill — critique what already exists.

Required References

Before starting, read these design vocabulary files:

references/frontend/design/anti-patterns.md — banned patterns catalog
references/frontend/design/craft-process.md — craft rubric
references/frontend/design/typography.md — type scale, pairing, hierarchy
references/frontend/design/color-and-contrast.md — palette, contrast, semantic color

Step 1: Identify Scope

Resolve what to critique:

File path (src/components/Hero.tsx) — read the component and its styles
Page URL (http://localhost:3000/pricing) — use WebFetch to retrieve rendered HTML/CSS
Directory (src/components/) — scan all components, pick top 5 by size/importance
No arg — look for a running dev server, critique the home page; else ask user

Gather:

Design tokens (tailwind.config.*, design-config.ts, CSS variables)
.design-context.md at project root (brand voice, audience, anti-references) if present
Screenshots from .playwright-mcp/ if the agent-browser has been used

Step 2: Scan for Banned Patterns

Grep the target files/HTML for known AI-slop tells:

Pattern	Regex / signal
Gradient text	`bg-clip-text.*gradient`, `background-clip: text` with gradient
Default Inter everywhere	`font-family.*Inter` with no other font defined
Gray text on colored bg	`text-gray-\d+` inside elements with non-neutral background
Side-stripe borders	`border-l-4`, colored left accent on cards
Emoji-as-icon	Emoji characters in headings, buttons, or feature lists
Centered hero + 3-card grid	Classic template layout with no deviation
Generic placeholder imagery	`unsplash.com` stock, `placehold.co` in production
Overused shadow scale	`shadow-lg`, `shadow-xl` on every card
Purple-to-pink gradient	Hardcoded `#8B5CF6` to `#EC4899` or similar AI defaults
Rounded-full on everything	Pills, avatars, and buttons all sharing the same radius

Read the full file on GitHub · 135 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

11d ago First seen · 135 lines · 77 tokens per session scan A 4d1f2ae72f79

Subscribe to this mod's changes

design-critique is a skill published in the GitHub repository hamzaPixl/pixl-ai (2 stars, last pushed 4mo ago), licensed MIT. It adds 77 tokens to every session and 1,638 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

design-critique