Design Auditor

Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layo

92 stars 16 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor

Manual install

git clone --depth 1 https://github.com/Ashutos1997/claude-design-auditor-skill.git /tmp/claude-design-auditor-skill
mkdir -p ~/.claude/skills
cp -r /tmp/claude-design-auditor-skill/. ~/.claude/skills/design-auditor

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design Checker Skill

You are an expert design reviewer. Your job is to check designs against fundamental design rules and give **clear, actionable, beginner-friendly feedback** — explaining *why* each rule matters, not just *what* is wrong.

This skill is for everyone: developers who've never studied design, and designers who want a second opinion.

---

## Step 0: Language Detection & Beginner Check (Always Do This First)

### Language Detection
Detect the language of the user's message and respond entirely in that language throughout the audit — including all issue labels, explanations, fix suggestions, and the final report. If the user writes in Korean, the full audit report must be in Korean. If in English, respond in English. Never mix languages in a single report.

**Korean response note:** When auditing in Korean, use natural Korean UX/design terminology:
- 타이포그래피 (typography), 색상 대비 (color contrast), 간격 (spacing)
- 접근성 (accessibility), 시각적 계층 (visual hierarchy), 일관성 (consistency)
- 🔴 심각한 문제 / 🟡 경고 / 🟢 팁
- Overall score label: **디자인 감사 보고서** / 총점: X/100

### Beginner Check
Before anything else, gauge the user's familiarity with design from their message.

**Signs they're a beginner:**
- Vague requests: "does this look okay?", "is this good?"
- They mention being a developer building UI
- No design vocabulary (no mention of hierarchy, contrast, spacing, etc.)
- They say things like "I'm not a designer but..."

Read the full skill on GitHub

Details

Skill name: design-auditor
Repository: Ashutos1997/claude-design-auditor-skill
Repo updated: 17 May 2026
Listed in: BehiSecc/awesome-claude-skills

FAQ

What does the Design Auditor skill do?

How do I install the Design Auditor skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Auditor popular?

It lives in Ashutos1997/claude-design-auditor-skill, which has 92 GitHub stars and 16 forks, and is included in 1 curated skill list.

Related skills

Oil Frontend

139

oil-oil/oil-frontend

当任务需要实现、修改、重构或评审产品前端的可见界面、交互行为、前端状态与数据流、组件或样式组织时主动使用，无需用户点名；也用于这些前端行为的测试与验证策略。适用于页面、表单、列表、弹窗、响应式、样式与动效实现和前端代码归属调整。不用于视觉风格、配色、排版与设计方向这类设计判断，也不用于纯后端、构建部署、依赖升级、只修导入路径的机械改动、仅操作现有网站、仅生成设计图片或讨论本 Skill；用户明确要求不使用时不触发。

Frontend & Design

Persian Motion Director

148

atmirrr/persian-motion-director

Direct and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl

Frontend & Design

Tidyfactor Styler

120

TidyFactor/Styler

Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Operates directly inside existing codebases across React/Next.js, PHP, WordPress, and Vanilla HTML/CSS/JS. Trigger on commands 'brief', 'component', 'section', 'page', 'redesign', 'typography', 'palette', 'layout', 'rtl', 'motion', 'styles', or requests for UI polishing and RTL refactoring.

Frontend & Design11

Prototype to Figma

141

alima-max/prototype-to-figma-skill

Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype

Frontend & Design15

Nerv UI

mdrbx/nerv-ui

Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.

Frontend & DesignIn 1 list

HTML Anything

161

clockless-org/html-anything

Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.