Design director for AI-generated and template-driven sites
cg-web-deslopifier
Its job is not to make a site look “less AI”. It is to make it look like the result of clear human decisions — without replacing one template with another.
0
It reads the project before it touches it
Brand guidelines, tokens, fonts, components, content sources and existing metadata come first. The logo, approved colors, proprietary imagery, information architecture and working integrations are preserved unless they are clearly defective — the fix is design, not a rewrite.
Do not rewrite architecture merely to make the design cleaner.
cg-web-deslopifier · SKILL.md1
An audit of the rendered site, not of single properties
Claude looks at the page at 1440, 1024, 768 and 390 pixels and catalogs what makes it generic: the gradient-and-glow canvas, a card around everything, the badge-headline-two-buttons hero, one sans-serif doing every job, stock imagery, copy that fits any industry, motion without a job. A single gradient proves nothing; the combination and repetition do.
Audit the rendered site and source code separately. Do not diagnose from source code alone. Visual sameness is a rendered-experience problem.
cg-web-deslopifier · SKILL.md2
A design direction before components change
Three to five concrete brand traits, one to three visual signatures grounded in the actual brand, a small token system, and a defined job for every section: the visitor question it answers, the proof it gives, the action it asks for.
Avoid empty adjectives such as “modern,” “clean,” “professional,” or “beautiful” unless they are translated into observable decisions.
cg-web-deslopifier · SKILL.md3
Highest leverage first
Information architecture, hero, typography, content and imagery come before cards, colors and motion. Claude stops when the page is specific, clear and still accessible and fast — adding more novelty after that is its own failure mode.
Never apply all anti-slop techniques simultaneously. The site should gain personality, not become visually noisy.
cg-web-deslopifier · SKILL.mdWhat it refuses to do
Taking the AI look off a site must not make it less truthful, and must not swap one fashionable formula for another. The skill rules out fabricated realism explicitly:
Do not make a website appear more “real” by inventing case studies, customer names, reviews, numbers, locations, team members, awards, or product behavior.
cg-web-deslopifier · SKILL.mdWhat it changes first
The skill's order of work. Tuning shadows on a page whose structure is still generic is wasted effort, so the list starts with what the visitor reads first.
- Information architecture
- Hero composition
- Typography system
- Content specificity
- Imagery
- Layout rhythm
- Component treatment
- Color/effects
- Interaction
- Code cleanup
Try asking Claude
- This site was vibe-coded and looks like every AI landing page. Deslopify it.
- Remove the AI look from our homepage without changing the brand.
- Audit our landing page for generic AI design patterns and fix the worst ones.
- Make this Claude Code website look custom.
$ npx cg-web-skills@latest install cg-web-deslopifier