Karenkaren
>_npm install -g karen-cli

AI that nags your layout into perfection

Test your layouts across 70+ device viewports.
Karen finds layout and design issues, calls out spacing crimes and overflow disasters—
then fixes them automatically with AI.

>View on GitHub

Simple to use, impossible to ignore

Native integrations with Netlify, GitHub Marketplace, and Vercel Marketplace. Install globally, run anywhere. No config required—but deeply customizable when you need it.

terminal
$
npm install -g karen-cli
One command to get started

Netlify

Native CI/CD checks

All design tokens valid
0 spacing violations
Build passed

Vercel Marketplace

One-click integration

Standards enforced
Deploy with confidence
Auto-check builds

GitHub Marketplace

CI/CD ready

Block bad PRs
Auto-fix violations
Team enforcement
ESLint Plugin
GitHub Action
VS Code Extension

Spacing Violations

Inconsistent spacing ruins visual rhythm

✗VIOLATION
margin: 13px;
padding: 17px;
✓FIXED
margin: 1rem; /* 16px */
padding: 1.5rem; /* 24px */

Color Standards

Random hex codes break brand consistency

✗VIOLATION
color: #FF5722;
background: #E91E63;
✓FIXED
color: hsl(var(--primary));
background: hsl(var(--accent));

Typography Chaos

Random font sizes destroy hierarchy

✗VIOLATION
font-size: 19px;
font-weight: 567;

Heading

Body text

✓FIXED
font-size: var(--text-lg);
font-weight: 600;

Heading

Body text

Contrast Issues

Poor contrast fails accessibility

✗VIOLATION
color: #ccc;
background: #fff;

Hard to read

✓FIXED
color: #333;
background: #fff;

Easy to read

Border Chaos

Inconsistent borders look unprofessional

✗VIOLATION
border: 1.5px solid #888;
border-radius: 7px;
✓FIXED
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;

Shadow Inconsistency

Random shadows break depth system

✗VIOLATION
box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
✓FIXED
box-shadow: var(--shadow-md);

Icon Sizes

Icon dimensions normalized

✗VIOLATION
width: 18px;
width: 26px;
width: 22px;
✓FIXED
width: 24px;
width: 24px;
width: 24px;

Line Height

Text spacing optimized

✗VIOLATION
line-height: 1.1;

Cramped text with poor line height makes reading difficult

✓FIXED
line-height: 1.625;

Proper line height improves readability

Breakpoint Misuse

Responsive design enforced

✗VIOLATION
@media (min-width: 850px);
@media (min-width: 1150px);
850px breakpoint
1150px breakpoint
✓FIXED
@media (min-width: 768px) /* md */;
@media (min-width: 1024px) /* lg */;
768px (md) standard
1024px (lg) standard

Animation Timing

Motion tokens validated

✗VIOLATION
transition: 1.73s;
✓FIXED
transition: 2s;

Choose Your Plan

Whether you're a DIY dev or want Karen to handle everything, we've got you covered.

>_

Free CLI

$0
Run locally, forever
  • ✓Unlimited local audits
  • ✓All detection features
  • ✓Manual fix application
  • ✓Community support
Get Started
Most Popular
📸

Audit Only

$5
One-time audit
  • ✓Multi-viewport screenshots
  • ✓Issue detection & report
  • ✓Interactive questionnaire
  • ✓Design system builder
  • ✗No code fixes
Start Audit - $5
🤖

Pro

$30
per month
  • ✓Everything in Audit Only
  • ✓Unlimited audits per month
  • ✓Claude Code applies fixes
  • ✓Automatic PR creation
  • ✓Design system automation
Upgrade to Pro

Ready to give your CSS a stern talking-to?

Install Karen CLI and start catching responsive bugs before they make it to production.

$npm install -g karen-cli