codex-design-audit-skill

Codex Design Audit Skill

A Codex skill for auditing website and frontend design quality.

Give Codex a URL, screenshot, localhost app, or repository frontend and it returns a structured UX/UI audit with scores, weak points, accessibility notes, frontend polish issues, prioritized fixes, and before/after re-audits.

What It Does

• Scores UX/UI and frontend quality with a practical rubric
• Finds weak design points and implementation risks
• Checks responsive behavior, accessibility, copy clarity, trust signals, and polish
• Supports preset-based audits for different product types
• Compares before vs after changes with score deltas
• Works in English and Italian

Presets

• auto
• landing-page
• saas-dashboard
• portfolio
• ecommerce
• mobile-first
• accessibility-heavy
• general

Installation

Install directly with npx:

npx codex-design-audit-skill

This installs the skill into:

~/.codex/skills/design-audit

Then restart Codex so it can discover the skill.

Or install the CLI globally:

npm install -g codex-design-audit-skill
codex-design-audit-skill

Manual Installation

Clone the repository:

git clone https://github.com/Kappaemme-git/codex-design-audit-skill.git

Copy the skill into your Codex skills directory:

mkdir -p ~/.codex/skills
cp -R codex-design-audit-skill/design-audit ~/.codex/skills/design-audit

Restart Codex so it can discover the skill.

Usage

After installation, restart Codex and call the skill by name in your prompt.

Basic website audit:

Use $design-audit to evaluate the design and frontend quality of https://example.com

Audit a local app:

Use $design-audit to evaluate http://localhost:3000

Audit a repository frontend:

Use $design-audit to evaluate the frontend in this repository.

Use screenshots when you want stronger visual judgment:

Use $design-audit to evaluate these desktop and mobile screenshots.

Italian is supported:

Usa $design-audit per valutare il design e il frontend di https://example.com

Audit Presets

The skill can infer the right preset automatically. If the target is ambiguous, it will ask you to choose one.

You can also specify a preset directly:

Use $design-audit with preset landing-page to evaluate https://example.com

Preset examples:

Use $design-audit with preset saas-dashboard to evaluate http://localhost:3000

Use $design-audit with preset accessibility-heavy to audit this page.

Use landing-page for marketing sites, saas-dashboard for product dashboards, portfolio for personal or agency sites, ecommerce for stores, mobile-first for mobile-heavy experiences, and accessibility-heavy when accessibility is the main concern.

Re-Audit Workflow

Use re-audit mode after you apply fixes. The skill compares the new version with the previous audit and reports score deltas.

Use $design-audit to re-audit http://localhost:3000 and compare it with the previous audit.

Expected output includes:

• Previous score vs current score
• Per-category deltas
• Fixed / improved / still open / regressed issues
• Remaining priorities
• Next fix pass

Recommended Workflow

• Build or open your frontend.
• Run $design-audit.
• Apply the highest-impact fixes.
• Run a re-audit.
• Compare before vs after score deltas.

Notes

Screenshots are recommended for stronger visual design judgment. Without screenshots or browser access, visual scoring is partially inferred from DOM, content, and available page data.

For best results, provide one of:

• A live URL
• A localhost URL
• Desktop and mobile screenshots
• A repository with a runnable frontend

If Codex can open the page in a browser, the audit can evaluate layout, responsive behavior, visual hierarchy, console errors, and interaction states more reliably.

Troubleshooting

If Codex does not recognize $design-audit, restart Codex after installing the skill.

Check that the skill exists here:

ls ~/.codex/skills/design-audit

You should see:

SKILL.md
agents/
references/

License

MIT