oh-my-design

The vocabulary you didn't know you needed. 23 commands, 7 domain references, and explicit anti-patterns to fight AI slop.

npm i oh-my-design   # install
npx oh-my-design     # auto-detect and install

Quick Start

Step 1: Install

npx oh-my-design --dest ./skills

This installs the skill to ./skills/oh-my-design/.

Step 2: Use in your AI agent

Start a session and use any command:

/critique                   # Review current page
/audit                      # Check a11y, perf, responsive
/craft                      # Build a new page
/bolder                     # Make it more dramatic
/quieter                    # Tone it down
/polish                     # Final quality pass

Tip: /critique hero reviews only the hero section. No arg = whole page.

Supported AI Tools

Cursor

npx oh-my-design --dest ~/.cursor/skills

Then restart Cursor and enable Agent Skills in Settings → Rules.

Claude Code

# Project-local (recommended)
npx oh-my-design --dest ./.claude/skills

# Global (all projects)
npx oh-my-design --dest ~/.claude/skills

Codex CLI

# Project-local
npx oh-my-design --dest ./.agents/skills

# User-wide
mkdir -p ~/.agents/skills && npx oh-my-design --dest ~/.agents/skills

Gemini CLI

npx oh-my-design --dest ~/.gemini/skills

Then restart Gemini CLI and type /skills to verify.

VS Code (GitHub Copilot)

npx oh-my-design --dest ./.github/skills

Trae

# Trae China
npx oh-my-design --dest ~/.trae-cn/skills

# Trae International
npx oh-my-design --dest ~/.trae/skills

All Commands

/craft      # Full shape→build with visual iteration
/critique   # UX review + 10-dimension score
/audit      # Technical quality (a11y, perf, responsive)
/polish     # Final pass before shipping

/teach      # One-time setup: write DESIGN.md + DNA
/document   # Generate DESIGN.md from existing code
/extract    # Pull components into design system
/shape      # Plan UX/UI before coding

/bolder     # Amplify boring designs
/quieter    # Tone down over-bold designs
/delight    # Add moments of joy
/distill    # Strip to essence
/harden     # Error handling, i18n, edge cases

/animate    # Add purposeful motion
/colorize   # Introduce strategic color
/typeset    # Fix fonts, hierarchy, sizing
/layout     # Fix spacing, visual rhythm
/clarify    # Improve unclear copy
/adapt      # Adapt for different devices
/optimize   # Performance improvements

/live       # Open browser for visual iteration
/pin        # Create shortcut (e.g. /pin audit → /audit)

🚫 Anti-Patterns (AI Slop Detection)

If you see ANY of these, fix immediately:

| ❌ Don't | ✅ Do Instead | |----------|--------------| | Inter/Roboto/Arial as primary font | Use distinctive fonts (Geist, Satoshi, Fraunces) | | Purple→blue gradient | Use 2-3 solid brand colors | | Dark + cyan/teal accent | Use warm contrast (amber, orange, red) | | Glassmorphism (unless modal) | Use solid backgrounds with depth | | Bounce/elastic easing | Use ease-out-quart or spring | | 3 identical cards in a row | Vary card heights, asymmetric layout | | Gray text on colored bg | Use tinted neutrals with brand hue | | Pure #000 or #fff background | Use tinted surfaces (chroma 0.005-0.015) | | backdrop-filter everywhere | Use only on 1 focal element | | Particles (unless game) | Remove entirely | | "10K+ Users | 99.9% Uptime" hero | Use genuine value proposition |

Workflow Examples

New page:

/craft              # Build with DNA + industry profile
/critique           # Score and identify issues
/polish             # Final pass

Improve existing:

/critique           # Find problems
/bolder             # Amplify weak areas
/polish             # Quality gate

Pre-launch:

/audit              # a11y + perf + responsive
/harden             # Error handling
/polish             # Ship readiness

Options

--dest <dir>       # Destination directory (required)
--repo <owner/repo> # Download from GitHub instead
--ref <branch>     # Git ref (default: main)
--help             # Show help

Examples:

npx oh-my-design --dest ./skills
npx oh-my-design --dest ~/.claude/skills --repo O-Pencil/skills --ref v1.0.0

Design Decision Priority

When in doubt:

DNA > Industry Profile > Core Knowledge > Best Practices

Run /teach once per project to generate .design-dna.md and DESIGN.md.

CLI Detector

Detect AI slop without an AI agent:

npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect https://example.com

Note: The detector is from impeccable.style and works with any HTML file.

License

MIT · GitHub