izzy-ui-skill

An opinionated UI/UX skill for coding agents that helps them build clean, intentional interfaces without the generic AI-generated look.

The goal is simple: give agents better design judgment before they touch the code.

Install

Codex

npx izzy-ui-skill --codex

Installs globally to:

~/.agents/skills/izzy-ui/

Claude Code

npx izzy-ui-skill --claude

Installs globally to:

~/.claude/skills/izzy-ui/

Claude web / desktop

npx izzy-ui-skill --claude-upload

This creates:

izzy-ui-claude.zip

Then in Claude:

Customize → Skills → Add → Create skill → Upload a skill

Upload the generated ZIP and enable Izzy UI.

No extra dependencies are required beyond Node.js 18+.

What it focuses on

• strong visual hierarchy
• balanced spacing and layout
• responsive design from the start
• accessible interaction patterns
• restrained motion
• product-specific design decisions
• avoiding common AI UI clichés

What it does not try to be

This is not a giant design database, component library, or framework. It stays intentionally small so an agent can understand and apply it quickly.

Structure

izzy-ui-skill/
├── README.md
├── LICENSE
├── package.json
├── SKILL.md
├── bin/
│   └── izzy-ui-skill.js
├── rules/
│   ├── accessibility.md
│   ├── anti-vibecode.md
│   ├── design.md
│   └── responsive.md
├── styles/
│   └── presets.md
├── stacks/
│   ├── react.md
│   ├── swiftui.md
│   └── web.md
└── examples/
    └── prompts.md

Usage

After installation, ask your agent naturally:

Build a clean dashboard for my Discord bot using the Izzy UI skill.

Redesign this landing page so it feels intentional and not AI-generated.

Make this responsive without changing the product's current behavior.

The agent reads SKILL.md first and uses the supporting rules when relevant.

Philosophy

Good UI is not about adding more. It is about making the right things clear, useful, consistent, and intentional.

License

MIT