القائمة
Scan a site for AI-slop defaults and replace them with premium patterns. Detects generic giveaways (Inter everywhere,
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Automattic/design-polish-suite --skill de-slopify-auditيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
| 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 ; }
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,,);
: all ease-in;
}
{ : ; }
{ : (); : (,,,); }
{
: ;
: ;
: ;
:
(,,,),
- (,,,),
- (,,,),
inset . . (,,,);
: box-shadow (.,,.,);
}
{ :
(,,,),
- (,,,),
- (,,,),
inset . . (,,,); }
{
:
(, (,,,) , transparent ,
transparent , (,,,) ),
;
: ;
}
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 polishedThe 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.
استنادا إلى تصنيف SOC المهني
