Frontend & UI
Impeccable
Two dozen commands to build, critique, and refine frontend interfaces.
What it is
A frontend design skill with commands grouped as build, evaluate, refine, enhance, fix, and iterate. It reads project context and a register reference, then writes production-grade code.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
Why it matters for design
- The register split sends marketing pages and product UI down different design rules.
- Absolute bans reject gradient text, side-stripe borders, and eyebrow labels above every section.
- Contrast floors are explicit: 4.5:1 for body text, 3:1 for large text.
What it covers
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
How to install
Impeccable
-
Clone the repo.
git clone https://github.com/pbakaus/impeccable -
Point Codex at the skill file.
plugin/skills/impeccable/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Run context.mjs once per session so the skill loads PRODUCT.md and DESIGN.md.
-
Invoke a command such as critique, polish, or animate with a target file.
-
Use live mode with a running dev server to generate in-browser variants.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.