Stop the AI Slop: Skills That Make Your Web Design Unmistakable
6 skills build production-grade pages that never look AI-generated: with 361 real brand design systems to draw on, built-in image generation, and a linter that counts AI markers automatically. Plus skills for screenshots, logo downloads, and background removal. All right inside Claude Code, Claude Cowork & Co.
As seen in
You spot AI-generated web design at first glance. So do your visitors.
A purple-to-blue gradient in the hero. The same Inter font. Three rounded cards with an icon, a headline, and a sentence. And words like "Unlock," "Elevate," or "Seamless" that describe no real product.
A single one of these markers is enough to make your page feel interchangeable. Visitors sense it immediately. And trust the brand behind it less.
The good news:
These markers can be avoided systematically. Not by gut feeling, but with a fixed rule set and a database of 361 real brand design systems. That is exactly why I built these skills.
A few of the markers the skills prevent automatically:
6 skills against AI slop in web design
Each skill is a fixed rule set, not a vague prompt. Installed in 2 minutes.
webdesigner
- 361 real brand design systems to draw on: Apple, Stripe, Linear, Figma, Ferrari, and more
- 7,000+ lines of research on 2025 to 2026 best practices and trends
- Built-in image generation with Nano Banana 2 for hero images and OG cards
- Slop linter counts AI markers automatically: 4 or more means do not ship
- Playbooks for landing pages, sales pages, homepages, pricing pages, and docs
webdesigner-cowork
- Identical rule set to webdesigner, adapted for Claude Cowork sessions
- Image generation via the nano-banana MCP server instead of a local Python script
- Same 361 brand design systems and the same anti-slop catalog
- Needed because the Cowork VM cannot reach Python or the Gemini API directly
frontend-design
- For individual components, dashboards, and artifacts, not just full pages
- Forces a deliberate aesthetic direction instead of generic AI defaults
- Works with HTML/CSS/JS, React, Vue, and more
- Explicitly bans Inter, Roboto, and purple gradients on white
screenshot
- Retina-quality screenshots, local and without an external API
- Cookie banner dismissal in 16 languages, 5 layers deep
- Stealth mode clears Cloudflare Managed Challenge and Turnstile automatically
- Detects hCaptcha and reCAPTCHA but never tries to solve them
logo-downloader
- 18 open-source sources: Iconify, SVGL, Simple Icons, Wikidata, and more
- SVG first, automatic fallback to PNG, JPG, WebP, or ICO
- Every download is validated before it is saved
- Placeholder monogram when genuinely no source has a match
remove-background
- Deep-learning cutouts with BiRefNet, U2-Net, and ISNet
- Runs locally via CoreML on Apple Silicon, one model session for the whole batch
- Composite onto a chosen color or your own background image, with crop and padding
- Supports JPG, PNG, BMP, WebP, and TIFF
Runs in Your Tools
webdesigner and frontend-design run everywhere, plain chat tools included. webdesigner-cowork runs exclusively in Claude Cowork.
Claude Code | Claude Cowork | ChatGPT Codex | ChatGPT Work | Cursor | Antigravity | Droid | OpenCode | Claude Chat | ChatGPT Chat | MS Copilot | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| webdesigner | |||||||||||
| webdesigner-cowork | |||||||||||
| frontend-design | |||||||||||
| screenshot | |||||||||||
| logo-downloader | |||||||||||
| remove-background |
screenshot, logo-downloader, and remove-background each execute a script and therefore need a tool with an execution environment. webdesigner-cowork uses the nano-banana MCP server and therefore only runs in Claude Cowork, not in Claude Code or any other tool.
Ready in 2 Minutes
No mandatory API keys, no subscriptions, no extra tools.
1. Buy and download
Secure payment via Polar. You get the download link right after, by email.
2. Unzip
One command in the terminal (or double-click and copy the folders). That’s it.
unzip webdesigner-skills-*.zip && cd webdesigner-skills && cp -R webdesigner webdesigner-cowork frontend-design screenshot logo-downloader remove-background ~/.claude/skills/3. Design like you always do
Claude Code loads the skills automatically whenever you build a page or design an interface. No prompt fiddling.
Hi, I’m Finn
AI Expert, Founder of gradually.ai and Blogmojo
I’m not a programmer and not a designer. Still, I’ve built hundreds of real apps, scripts, and websites with Claude Code, including gradually.ai and blogmojo.de themselves.
Along the way, I kept falling into the same trap: AI-generated pages all look the same. Purple gradients, the same font, the same three cards. These skills are the result, a fixed rule set against exactly that problem.
With my AI blog, I reach over 100,000 readers every month and have already helped 1,200+ people in my online courses and my AI membership, the KI Business Club, to use AI effectively.
- Built hundreds of apps, scripts, and websites with Claude Code
- Founder of Blogmojo and Gradually AI
- From non-programmer to app builder
- 100+ smaller and larger tools built with AI
Pay Once, Use Forever
No subscription, no hidden costs.
Webdesigner Skills
6 skills for web design that never looks AI-generated: from the full page down to screenshots, logos, and background removal. Instant download for Claude Code, Claude Cowork & Co.
- webdesigner: 361 brand design systems, anti-slop catalog, built-in image generation
- webdesigner-cowork: the same rule set for Claude Cowork sessions
- frontend-design: rule set for individual components and interfaces
- screenshot, logo-downloader, and remove-background for product images, logos, and cutouts
- Instant download as ZIP, installed in 2 minutes
- Instructions in English and German
- Free updates
Secure payment via Polar. Any applicable VAT is added at checkout, and a proper invoice arrives automatically.
Frequently Asked Questions
Everything you need to know before buying.