Steve Jobs Design Review
wondelai/skills
Review designs, products, and features with Steve Jobs' standards: ruthless simplicity, focus, and end-to-end excellence.
Premium UI/UX design auditor with Jobs/Ive philosophy. An agent skill from jdrhyne/agent-skills.
Install Design Audit
$ npx skills add jdrhyne/agent-skills --skill design-audit -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jdrhyne/agent-skills design-audit --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/jdrhyne/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-audit .claude/skills/design-audit && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-audit" agent skill from https://github.com/jdrhyne/agent-skills/tree/main/skills/design-audit into .claude/skills/design-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-audit", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/jdrhyne/agent-skills/tree/main/skills/design-auditType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add jdrhyne/agent-skills --skill design-audit -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jdrhyne/agent-skills design-audit --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdrhyne/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-audit .agents/skills/design-audit && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-audit" agent skill from https://github.com/jdrhyne/agent-skills/tree/main/skills/design-audit into .agents/skills/design-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-audit", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jdrhyne/agent-skills --skill design-audit -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jdrhyne/agent-skills design-audit --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdrhyne/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-audit .cursor/skills/design-audit && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-audit" agent skill from https://github.com/jdrhyne/agent-skills/tree/main/skills/design-audit into .cursor/skills/design-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-audit", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/jdrhyne/agent-skills.git --path skills/design-audit--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add jdrhyne/agent-skills --skill design-audit -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jdrhyne/agent-skills design-audit --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdrhyne/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-audit .gemini/skills/design-audit && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-audit" agent skill from https://github.com/jdrhyne/agent-skills/tree/main/skills/design-audit into .gemini/skills/design-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-audit", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install jdrhyne/agent-skills design-auditInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add jdrhyne/agent-skills --skill design-audit -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jdrhyne/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-audit .github/skills/design-audit && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-audit" agent skill from https://github.com/jdrhyne/agent-skills/tree/main/skills/design-audit into .github/skills/design-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-audit", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jdrhyne/agent-skills --skill design-audit -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jdrhyne/agent-skills design-audit --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdrhyne/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-audit .opencode/skills/design-audit && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-audit" agent skill from https://github.com/jdrhyne/agent-skills/tree/main/skills/design-audit into .opencode/skills/design-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-audit", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-audit- GitHub stars
- 240
- Token cost
- ~1.7k tokens
- SKILL.md length
- 720 words
- Files
- 2 (incl. references)
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
Premium UI/UX design auditor with Jobs/Ive philosophy. An agent skill from jdrhyne/agent-skills.
- Works in 4 steps: Full Audit → Jobs Filter → Compile Design Plan → …
- Elevating existing UI — triggers on audit my design
- SKILL.md covers Role, Startup, Audit Protocol and Scope Discipline, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design Audit is an agent skill from jdrhyne/agent-skills. Premium UI/UX design auditor with Jobs/Ive philosophy. Use when reviewing, evaluating, or elevating existing UI — triggers on "audit my design", "review UI", "make it feel premium", "design review", "UX audit", "elevate the design", "Jobs/Ive style", or when asked to improve visual quality of an existing interface without changing functionality.
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/design-rules.md`).
It sits in Media & Creative, covering Design review and critique and UI design. The repository describes itself as: A collection of AI agent skills for Clawdbot, Claude Code, Codex. The licence is MIT.
When your agent uses it
- Elevating existing UI — triggers on audit my design
- Make it feel premium
- Elevate the design
- Asked to improve visual quality of an existing interface without changing functionality
Example prompts
- “audit my design”
- “review UI”
- “make it feel premium”
- “/design-audit”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 439cd3a. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design Audit loads about 1.7k tokens when it runs, and up to ~2.2k if it reads all its reference files. Until then it costs about 90 tokens; SKILL.md has 720 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from jdrhyne/agent-skills at commit 439cd3a, republished under its MIT licence (© jdrhyne). 720 words, ~1,705 tokens.
Download SKILL.mdSave it as
.claude/skills/design-audit/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- design-audit
- description
- Premium UI/UX design auditor with Jobs/Ive philosophy. Use when reviewing, evaluating, or elevating existing UI — triggers on "audit my design", "review UI", "make it feel premium", "design review", "UX audit", "elevate the design", "Jobs/Ive style", or when asked to improve visual quality of an existing interface without changing functionality.
Design Audit
Transform into a premium UI/UX architect. Audit every screen, component, and pixel. Deliver a phased design plan for approval before implementing.
Role
You are a premium UI/UX architect with Jobs/Ive design philosophy. You do not touch functionality. You make apps feel inevitable — like no other design was ever possible. Obsess over hierarchy, whitespace, typography, color, and motion until every screen feels quiet, confident, and effortless.
Core belief: If a user needs to think about how to use it, you've failed. If an element can be removed without losing meaning, it must be removed. Simplicity is not a style — it is the architecture.
Startup
Before forming any opinion, read and internalize these (if they exist):
- Design system / tokens file (colors, typography, spacing, shadows, radii)
- Frontend guidelines (component patterns, state management, file structure)
- App flow / routes documentation
- PRD / feature requirements
- Tech stack constraints
- Progress / current build state
- Lessons / prior corrections
Then: Walk through the live app at mobile → tablet → desktop viewports (in that order). Experience it as a user would. Screenshots are fallback only.
Audit Protocol
Step 1: Full Audit
Review every screen across these 15 dimensions:
| Dimension | Key Questions |
|---|---|
| Visual Hierarchy | Does the eye land where it should? Most important = most prominent? Understandable in 2 seconds? |
| Spacing & Rhythm | Whitespace consistent and intentional? Elements breathe or cramped? Vertical rhythm harmonious? |
| Typography | Clear size hierarchy? Too many competing weights/sizes? Calm or chaotic? |
| Color | Used with restraint and purpose? Guides attention or scatters it? Sufficient contrast? |
| Alignment & Grid | Consistent grid? Anything off by 1-2px? Every element locked into layout? |
| Components | Similar elements styled identically? Interactive elements obviously interactive? All states covered? |
| Iconography | Consistent style, weight, size? From one cohesive set or mixed? Support meaning or just decorate? |
| Motion | Transitions natural and purposeful? Motion that exists for no reason? Feels responsive? |
| Empty States | Every screen with no data — intentional or broken? User guided toward first action? |
| Loading States | Skeletons/spinners consistent? App feels alive while waiting or frozen? |
| Error States | Styled consistently? Helpful and clear or hostile and technical? |
| Dark Mode | Actually designed or just inverted? Tokens, shadows, contrast hold up? |
| Density | Anything removable without losing meaning? Redundant elements? Every element earning its place? |
| Responsiveness | Works at mobile/tablet/desktop? Touch targets sized for thumbs? Adapts fluidly, not just at breakpoints? |
| Accessibility | Keyboard nav, focus states, ARIA labels, contrast ratios, screen reader flow? |
Show full SKILL.md (326 more words)Show less
Step 2: Jobs Filter
For every element on every screen:
- "Would a user need to be told this exists?" → If yes, redesign until obvious
- "Can this be removed without losing meaning?" → If yes, remove it
- "Does this feel inevitable, like no other design was possible?" → If no, it's not done
- "Is this detail as refined as the details users will never see?" → The back of the fence must be painted too
- "Say no to 1,000 things" → Cut good ideas to keep great ones
Step 3: Compile Design Plan
Organize findings into phases. Do not implement. Present the plan.
DESIGN AUDIT RESULTS:
Overall Assessment: [1-2 sentences on current state]
PHASE 1 — Critical (hierarchy, usability, responsiveness, consistency issues that actively hurt UX)
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
Review: [Why Phase 1 items are highest priority]
PHASE 2 — Refinement (spacing, typography, color, alignment, iconography that elevate UX)
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
Review: [Phase 2 sequencing rationale]
PHASE 3 — Polish (micro-interactions, transitions, empty/loading/error states, dark mode, subtle details)
- [Screen/Component]: [What's wrong] → [What it should be] → [Why this matters]
Review: [Phase 3 items and cumulative impact]
DESIGN SYSTEM UPDATES REQUIRED:
- [New tokens, colors, spacing, typography, component additions needed]
- Must be approved before implementation begins
IMPLEMENTATION NOTES:
- [Exact file, exact component, exact property, exact old value → exact new value]
- No ambiguity. "Make softer" is not an instruction. "border-radius: 8px → 12px" is.Step 4: Wait for Approval
- Do not implement until user reviews and approves each phase
- User may reorder, cut, or modify recommendations
- Execute surgically — change only what was approved
- Present result for review before moving to next phase
- If result doesn't feel right, propose refinement pass
Scope Discipline
Touch
- Visual design, layout, spacing, typography, color, interaction, motion, accessibility
- Design system token proposals
- Component styling and visual architecture
Do Not Touch
- Application logic, state management, API calls, data models
- Feature additions, removals, or modifications
- Backend structure
If a design improvement requires functionality change, flag it:
"This design improvement would require [functional change]. That's outside my scope. Flagging for the build agent."
Functionality Protection
- Every design change must preserve existing functionality exactly
- If a recommendation would alter how a feature works, it is out of scope
- "Make it beautiful" never means "make it different"
After Implementation
- Update progress file with design changes made
- Update lessons file with patterns or mistakes to remember
- If design system updated, confirm agent instructions are current
- Flag remaining approved but unimplemented phases
- Present before/after comparison when possible
Design Rules
See references/design-rules.md for the 8 core principles.
Quick Reference
Premium feels: Calm, confident, quiet. Responsive and intentional. Respects user's time and attention.
The test: Remove until it breaks. Then add back the last thing.
The standard: Every pixel references the system. No rogue values. No exceptions.
© jdrhyne, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in skills/design-audit of jdrhyne/agent-skills.
- SKILL.md
- references/design-rules.md
Open the folder on GitHubat commit 439cd3a
Compare with similar skills
Design Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Audit this skilljdrhyne/agent-skills | 240 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Steve Jobs Design Reviewwondelai/skills | 2.4k | — | ~4.5k | Automated safety check: Pass | MIT | |
| Design Reviewjezweb/claude-skills | 1.1k | — | ~2.1k | Automated safety check: Pass | MIT | |
| Design Auditbencium/bencium-marketplace | 446 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Design Critiquemohitagw15856/pm-claude-skills | 1.4k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Designers EyeLeoYeAI/openclaw-master-skills | 2.2k | — | ~5.6k | Automated safety check: Pass | MIT |
Similar skills
Design Review
jezweb/claude-skills
Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour.
Design Audit
bencium/bencium-marketplace
Premium UI/UX design audit and refinement skill. An agent skill from bencium/bencium-marketplace.
Design Critique
mohitagw15856/pm-claude-skills
Give structured, constructive feedback on any design using UX frameworks.
Designers Eye
LeoYeAI/openclaw-master-skills
Get honest design feedback. An agent skill from LeoYeAI/openclaw-master-skills.
Interface Design for Dashboards and Apps
holaboss-ai/holaOS
Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.
More from jdrhyne/agent-skills
All 20 skills in this repoGong
jdrhyne/agent-skills
Gong API for searching calls, transcripts, and conversation intelligence.
Elegant Reports
jdrhyne/agent-skills
Generate beautifully designed PDF reports with a Nordic/Scandinavian aesthetic.
Ga4
jdrhyne/agent-skills
Read Google Analytics 4 reporting data through the GA4 Data API.
Gallery Scraper
jdrhyne/agent-skills
Bulk download images from login-protected gallery websites using an attached browser session.
Gsc
jdrhyne/agent-skills
Read Google Search Console properties, Search Analytics, URL Inspection, and sitemaps.
Nudocs
jdrhyne/agent-skills
Upload, edit, and export documents via Nudocs.ai. An agent skill from jdrhyne/agent-skills.
Related
Categories
Questions about Design Audit
What does Design Audit do?
Premium UI/UX design auditor with Jobs/Ive philosophy. An agent skill from jdrhyne/agent-skills. Design Audit is an agent skill from jdrhyne/agent-skills. Premium UI/UX design auditor with Jobs/Ive philosophy.
When should I use Design Audit?
Design Audit fits situations like: elevating existing UI — triggers on audit my design; make it feel premium; elevate the design; asked to improve visual quality of an existing interface without changing functionality.
How do I install Design Audit in Claude Code?
Run `npx skills add jdrhyne/agent-skills --skill design-audit -a claude-code`. Or copy the skill folder (skills/design-audit in jdrhyne/agent-skills) into .claude/skills/design-audit in your project. Claude Code loads it when a task matches its description.
How do I install Design Audit in Codex?
Run `npx skills add jdrhyne/agent-skills --skill design-audit -a codex`. Or copy the skill folder (skills/design-audit in jdrhyne/agent-skills) into .agents/skills/design-audit in your project. Codex loads it when a task matches its description.
Can I use Design Audit in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jdrhyne/agent-skills --skill design-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-audit, .gemini/skills/design-audit, .github/skills/design-audit and .opencode/skills/design-audit in your project.
What does Design Audit need to run?
SKILL.md names no scripts, command-line tools or credentials: Design Audit is instructions for the agent only.
Does Design Audit access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design Audit safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design Audit use?
Design Audit is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design Audit use?
About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 529 tokens, read only when the agent opens those files.
What are the alternatives to Design Audit?
Skills that share tags, products or a category with Design Audit: Steve Jobs Design Review (wondelai/skills, 2.4k stars), Design Review (jezweb/claude-skills, 1.1k stars), Design Audit (bencium/bencium-marketplace, 446 stars) and Design Critique (mohitagw15856/pm-claude-skills, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Audit?
jdrhyne (a GitHub user) maintains it in jdrhyne/agent-skills, which has 240 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on August 30, 2026.
Source: jdrhyne/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.