codex-design-audit-skill

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #go #golang #rust #deep-learning #java #windows #awesome #cli #kubernetes #security

codex-design-audit-skill

(★ 47)

No description available.

codex-design-audit-skill Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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`:

```bash
npx codex-design-audit-skill
```

This installs the skill into:

```bash
~/.codex/skills/design-audit
```

Then restart Codex so it can discover the skill.

Or install the CLI globally:

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

## Manual Installation

Clone the repository:

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

Copy the skill into your Codex skills directory:

```bash
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:

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

Audit a local app:

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

Audit a repository frontend:

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

Use screenshots when you want stronger visual judgment:

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

Italian is supported:

```text
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:

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

Preset examples:

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

```text
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.

```text
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

1. Build or open your frontend.
2. Run `$design-audit`.
3. Apply the highest-impact fixes.
4. Run a re-audit.
5. 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:

```bash
ls ~/.codex/skills/design-audit
```

You should see:

```text
SKILL.md
agents/
references/
```

## License

MIT

codex-design-audit-skill

codex-design-audit-skill Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

codex-design-audit-skill

codex-design-audit-skill Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README