What is the bencium design-audit skill?
The bencium design-audit skill is a visual-only UI and UX audit for an existing app. The agent reads your design system, flow and product docs, walks the live app at three sizes, reviews 15 dimensions and delivers a three phase plan. It implements nothing until you approve it.
Before forming any opinion, the agent reads seven documents: DESIGN_SYSTEM, FRONTEND_GUIDELINES, APP_FLOW, PRD, TECH_STACK, progress.txt and LESSONS, plus the live app. It is one of 17 skills and tools in the bencium plugin marketplace repository.
The audit protocol
- Full audit: every screen is reviewed against 15 dimensions.
- Reduction filter: if an element can be removed without losing meaning, it is flagged for removal.
- Compile the plan in three phases: Critical, Refinement and Polish.
- Wait for approval. Nothing is implemented until you say so, and results are reviewed after each phase.
The 15 dimensions
They are visual hierarchy, spacing and rhythm, typography, colour, alignment and grid, components, iconography, motion, empty states, loading states, error states, dark mode, density, responsiveness and accessibility, each posed as a question.
Scope discipline
The skill touches visual design, layout, spacing, typography, colour, interaction design, motion and accessibility. It leaves application logic, state, API calls, data models and features alone, and flags any improvement that would need a functional change.
Who the design-audit skill is for
Best for
- A working app that functions but feels unpolished, where you want a plan before any edits.
- Projects that keep a DESIGN_SYSTEM file, since every proposed value must reference its tokens.
- Teams that hand the approved plan to a separate build agent.
Not for
- Adding or changing features. That is explicitly out of scope.
- Projects with no design documents, since the skill expects to read them first and asks before assuming a flow.
- Anything outside a phased audit plan. Compare critique and polish among the other skills here.
Use it with UiChemy
Run the audit on an app or a page you already have. If the approved changes need a WordPress build, UiChemy Figma to WordPress converts a Figma design, and AI to WordPress imports an AI build. Click Get Started on uichemy.com. See also impeccable-audit.
How to install Bencium Design Audit Skill: Phased UI Refinement Plans
/plugin marketplace add bencium/bencium-marketplaceAdd the marketplace
In Claude Code, run
/plugin marketplace add bencium/bencium-marketplace.Install design-audit
Use the skills CLI add command pointed at bencium/bencium-marketplace with -g --skill design-audit, which the README marks as its recommended route. For the plugin route, run
/plugin install <plugin>@bencium-marketplace. The README's own example there names a different plugin.Or copy it by hand
Clone the repository and copy design-audit/skills/design-audit, including its two reference files, into your agent's skills folder. For the Cowork app, the README says to copy a plugin's skills directory into the project's .claude/skills folder.
Prepare your docs
Keep DESIGN_SYSTEM and the other documents in the project, so the agent has material to read before it audits.
Check that it loaded
Ask the agent to audit your app's design. It should read your project documents first, then present a three phase plan and wait for approval.
Key features
- Reads project context firstThe agent reads the design system, frontend guidelines, app flow, PRD, tech stack, progress file and lessons file before judging anything.
- Walks the live appEach screen is experienced at mobile, tablet and desktop sizes, as a user would see it.
- 15 dimension auditA table of 15 dimensions, from hierarchy and spacing to motion, empty states and accessibility, guides the review of every screen.
- Reduction filterEvery element is tested: can it be removed, would a user need to be told it exists, and does its visual weight match its importance.
- Three phase planFindings are organised into Critical, Refinement and Polish phases, with notes precise enough for a build agent to follow.
- Approval gateThe plan is presented and nothing is implemented until you approve, reorder or cut items.
- Token disciplineAll values must reference DESIGN_SYSTEM tokens, and a missing component is proposed openly instead of invented silently.
- Visual-only scopeLogic, state, API calls, data models and features are off limits, and a needed functional change is flagged for the build agent.
- After-implementation upkeepIt updates progress.txt and LESSONS.md, confirms agent instruction files are current and flags unfinished approved phases.
- Reference filesA design-principles file holds the core rules and an audit-template file defines the output format of the phased plan.
Frequently asked questions
What is the bencium design-audit skill?
It is a UI and UX audit skill in the bencium-marketplace repository. It conducts a systematic visual audit of an existing app and produces a phased, implementation-ready plan. It never touches functionality, logic or features, and it waits for your approval before changing anything.
How do I install the design-audit skill?
Add the marketplace with /plugin marketplace add bencium/bencium-marketplace, then install from its listing. The README's recommended route is the skills CLI add command pointed at bencium/bencium-marketplace with -g --skill design-audit. You can also copy design-audit/skills/design-audit from a clone into your agent's skills folder.
What does the agent read before auditing?
DESIGN_SYSTEM, FRONTEND_GUIDELINES, APP_FLOW, PRD, TECH_STACK, progress.txt, LESSONS.md and the live app at mobile, tablet and desktop sizes. The skill says to understand the current system completely before proposing any change.
What are the three phases of the plan?
Phase 1 is Critical: hierarchy, usability, responsiveness and consistency problems that hurt the experience. Phase 2 is Refinement: spacing, typography, colour, alignment and iconography. Phase 3 is Polish: micro-interactions, transitions, empty, loading and error states, and dark mode.
Will the skill change my code on its own?
No. Step four says to present the plan and implement nothing. You can reorder, cut or modify any recommendation, and the agent executes only what you approve, then presents results after each phase before moving to the next.
Which AI agents can use the design-audit skill?
The README describes a Claude Code plugin marketplace and says the SKILL.md format works with more than 40 AI coding tools, including OpenAI Codex, Gemini CLI, Cursor and Windsurf. It notes you may need to copy the skill files into that tool's context folder.
What if my project has no DESIGN_SYSTEM file?
The skill expects to read it and requires every proposed value to reference those tokens. If a component does not exist there, it proposes one openly. It says to understand the current system completely before proposing changes, so a project without design documents is a poor fit.
What license does the repository use?
GitHub and the README list the MIT license for the bencium-marketplace repository. As always, check the license file in the repository before you redistribute the skill folder inside a product or a client deliverable.