Menu
Scan a site for AI-slop defaults and replace them with premium patterns. Detects generic giveaways (Inter everywhere,
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
The full design glow-up toolkit. Turns forgettable interfaces into something that looks like a real designer touched it. Routes to 6 sub-skills for de-slopifying, typography, spacing, gradients, motion, and adding that one detail people actually remember. Use when a UI feels mid, generic, AI-generated, or just painfully beige.
Add one unforgettable signature detail that gives a site recall, identity, and emotional lift. Use after baseline polish is complete. Inspired by hit-making principles: hook-first thinking, disciplined repetition, emotional clarity, contrast, and ruthless restraint. Use when a site is good but forgettable.
Apply the motion language of premium VC-funded sites — specific cubic-bezier easings (not ease-in-out), snappy 75-200ms durations, mechanical press feedback, orchestrated hover deltas, width-animated buttons, mouse-tracking gradients, blur-in reveals, scroll-linked reveals. Use when interactions feel "springy and generic" or when the user wants their site to feel responsive, alive, physical.
Apply the warm, atmospheric, multi-layer shadow aesthetic used by premium SaaS sites like Hex, Antimetal, Incident, Outseta, Cohere, and Amplemarket. Warm off-white grounds, tinted shadows that harmonize with theme, multi-stop gradients at deliberate angles, inset highlights for dual-edge lighting. Use when the user wants their site to feel atmospheric, luminous, warm, editorial — NOT cold SaaS purple/blue.
Apply the spacing, container, grid, and border-radius rhythm of premium VC-funded sites. Generous 80-160px section padding, intentional non-strict spacing scales (including 20/28/40), deliberate radius architecture (binary 0-or-pill, asymmetric interlocking, per-element variety), 40px paragraph-spacing on h2, 1px hairline dividers at 4-10% opacity. Use when layouts feel cramped, monotonous, or use "rounded-md everywhere."
Upgrade typography from generic SaaS to premium, authored, high-conviction design. Uses distinct display fonts, lighter body weights, tight negative tracking, mono eyebrows, restrained serif accents, and OpenType details to create typography with taste, authority, and emotional signal. Use when a page feels flat, template-y, overly safe, or visually anonymous.
| name | de-slopify-audit |
| description | Scan a site for AI-slop defaults and replace them with premium patterns. Detects generic giveaways (Inter everywhere, |
A checklist-driven audit to strip AI-slop tells from a site and replace them with premium patterns. Extracted from comparing 12 VC-funded case studies against common AI-generated defaults.
Run through each point. For every item marked ❌, apply the fix.
background: #ffffff or background: #f9fafb#fafafa, #f7f7f5, #f5f2f0, or #fbfaf9soft-gradient-dreamy skill, Rule 1font-family: Inter, sans-serif on every elementtypography-that-sells, Rule 1h1 { font-size: 64px; } with no letter-spacingletter-spacing: -0.035em minimum on 48px+ headings; use px (-0.46px) for foundry precisiontypography-that-sells, Rule 2line-height: 1.5 on 60px headingsline-height: 1.0-1.1 on display, 1.3-1.5 on bodytypography-that-sells, Rule 3font-weight: 400 or 500 on bodyfont-weight: 300 body paired with 500-600 display — maximum elegance contrasttypography-that-sells, Rule 4box-shadow: 0 4px 6px rgba(0,0,0,0.1) — neutral blackrgba(45,32,50,..) / rose rgba(100,63,63,..). Cool → blue-gray rgba(34,42,53,..). Match to your palettesoft-gradient-dreamy, Rule 2shadow-lg Tailwind defaultsoft-gradient-dreamy, Rule 3linear-gradient(135deg, #667eea, #764ba2) purple→blue diagonalsoft-gradient-dreamy, Rule 4rounded-md (8px) on every card, button, input, imagespatial-rhythm-and-whitespace, Rule 1border: 1px solid #e5e7ebrgba(0,0,0,0.06) minimum, or rgba(12,38,77,0.04) navy-tintedspatial-rhythm-and-whitespace, Rule 6py-12 (48px) or py-16 (64px) on every sectionpy-24 minimum; py-32 for hero; py-40 for editorialspatial-rhythm-and-whitespace, Rule 2transition: all 300ms ease-in-outcubic-bezier(.215,.61,.355,1) or cubic-bezier(.4,0,.2,1)). Duration per interaction: 75ms press, 200ms hover, 600ms revealmotion-and-micro-interactions, Rules 1-2hover:bg-blue-600 color-only hover:active { transform: scale(0.95); } for press feedback; add shadow delta; orchestrate child translationsmotion-and-micro-interactions, Rule 3hover:translate-y-[-4px] hover:shadow-xlmotion-and-micro-interactions, Rule 5<span class="text-xs uppercase">Features</span>.eyebrow {
font-family: 'Geist Mono', 'Fragment Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
Run these against your codebase to find slop patterns:
# Find pure-white backgrounds
grep -rn "background.*#fff\b\|#ffffff\|bg-white\b" --include="*.{css,tsx,jsx,html,vue,svelte}" .
# Find generic ease-in-out 300ms
grep -rn "ease-in-out\|duration-300\|0\.3s ease" --include="*.{css,tsx,jsx}" .
# Find rounded-md monotone
grep -rn "rounded-md\|border-radius:\s*8px" --include="*.{css,tsx,jsx,html}" .
# Find the purple→blue gradient
grep -rn "#667eea\|#764ba2\|from-purple.*to-blue\|from-blue.*to-purple" --include="*.{css,tsx,jsx}" .
# Find single-layer shadows
grep -rn "box-shadow:\s*0 4px 6px\|shadow-md\|shadow-lg" --include="*.{css,tsx,jsx}" .
# Find Inter everywhere
grep -rn "font-family.*Inter\|font-sans" --include="*.{css,tsx,jsx}" . | wc -l
# Find translateY hover cards
grep -rn "hover:.*translate-y\|hover:-translate" --include="*.{css,tsx,jsx}" .
# Find 48/64px section padding
grep -rn "py-12\|py-16\|padding-block:\s*48\|padding-block:\s*64" --include="*.{css,tsx,jsx,html}" .
# Find plain black shadows
grep -rn "rgba(0,\s*0,\s*0," --include="*.{css,tsx,jsx}" .
# Find color-only button hover
grep -rn "hover:bg-\|hover:background" --include="*.{css,tsx,jsx}" .
Run through the site, mark each with ✅ / ⚠️ / ❌:
## De-Slopify Audit: <site-name>
Background: [ ] (if ❌: swap #fff → #fafafa/#f7f7f5)
Typeface: [ ] (if ❌: display font + body font split)
Display tracking: [ ] (if ❌: -0.035em minimum)
Display line-height: [ ] (if ❌: ≤1.1 on display)
Body weight: [ ] (if ❌: test weight 300)
Shadow tint: [ ] (if ❌: tint to theme)
Shadow layering: [ ] (if ❌: 3-8 layer stack)
Hero gradient: [ ] (if ❌: 3+ stop warm, non-135° angle)
Border radius system: [ ] (if ❌: pick architecture)
Border colors: [ ] (if ❌: hairline at 4-10% alpha)
Section padding: [ ] (if ❌: 80-160px)
Transition easing: [ ] (if ❌: named cubic-bezier)
Transition duration: [ ] (if ❌: per-interaction durations)
Button hover: [ ] (if ❌: add :active scale, child orchestration)
Card hover: [ ] (if ❌: shadow growth, no translateY)
Icon style: [ ] (if ❌: 1.5px stroke, not Lucide defaults)
Button background: [ ] (if ❌: flat color + rich shadow)
Eyebrow labels: [ ] (if ❌: mono + wide tracking)
Score: X / 18
If you can only fix 5 things, fix these — they move the design from "AI" to "designed":
#fff → #fafafa/#f7f7f5 (60 seconds, massive impact)-0.035em / line-height: 1.0 (huge perception shift)scale(0.95) press feedbackbody { background: #ffffff; font-family: Inter, sans-serif; color: #333; }
h1 { font-size: 60px; font-weight: 700; }
.btn { background: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px;
transition: all 0.3s ease-in-out; }
.btn:hover { background: #2563eb; }
.card { background: white; border: 1px solid #e5e7eb; border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 24px; }
.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 64px 0; }
body {
background: #f7f7f5;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 300;
color: #222221;
}
h1 {
font-family: 'PP Neue Montreal', 'Söhne', system-ui, sans-serif;
font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
font-weight: 500;
line-height: 1.0;
letter-spacing: -0.035em;
}
.btn {
background: #222221;
color: #fff;
padding: 12px 20px 13px 24px;
border-radius: 9999px;
font-weight: 500;
box-shadow:
0 1px 2px rgba(45,32,50,0.05),
inset 0 10px 24px -10px rgba(255,255,255,0.4);
transition: all 75ms ease-in;
}
.btn:hover { transition-duration: 200ms; }
.btn:active { transform: scale(0.97); box-shadow: 0 1px 2px rgba(45,32,50,0.05); }
.card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow:
0 0 0 1px rgba(45,32,50,0.06),
0 2px 6px -2px rgba(45,32,50,0.08),
0 16px 40px -8px rgba(45,32,50,0.06),
inset 0 .5px .5px rgba(255,255,255,0.4);
transition: box-shadow 200ms cubic-bezier(.4,0,.2,1);
}
.card:hover { box-shadow:
0 0 0 1px rgba(45,32,50,0.10),
0 4px 12px -2px rgba(45,32,50,0.10),
0 24px 56px -12px rgba(45,32,50,0.10),
inset 0 .5px .5px rgba(255,255,255,0.4); }
.hero {
background:
linear-gradient(180deg, rgba(224,246,255,0.1) 0%, transparent 25%,
transparent 90%, rgba(224,246,255,0.1) 100%),
#f7f7f5;
padding-block: 140px 96px;
}
After running this audit, escalate to:
typography-that-sells for deep type worksoft-gradient-dreamy for shadow/gradient systemsmotion-and-micro-interactions for animationspatial-rhythm-and-whitespace for layoutadd-signature-moment once the baseline is polished