hahahahahahahahah6

Design Slop Skill — AI skill for Claude Code

AI community

Claude Code skill that detects and fixes AI-slop web design: giant border-radius, glassmorphism, glowing borders, red-purple gradients, dark-mode-only, oversized centered heroes.

How to install Design Slop Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open hahahahahahahahah6/design-slop-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Slop Skill does

Claude Code skill that detects and fixes AI-slop web design: giant border-radius, glassmorphism, glowing borders, red-purple gradients, dark-mode-only, oversized centered heroes. Bilingual rules (EN + 中文), deterministic stdlib detector + auto-fixer.

Alternatives in AI

Architecture Diagram Generator — Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files 7k ★
Humanize Ppt — AST-based outline director for human-centered AI presentation workflows 934 ★
Pingcrm — Personal Networking CRM — AI-powered, open-source, self-hostable 115 ★

README

design-slop-skill

A **Claude Code skill** that detects and fixes "AI slop" web design — the visual fingerprint AI-generated pages share:

🫧 Giant border-radius on everything (SLOP-001)
🪟 Glassmorphism / frosted-glass cards (SLOP-002)
✨ Glowing colored borders and shadows (SLOP-003)
🟣 Red-purple gradients, the signature AI palette (SLOP-004)
🌑 Dark-mode-only pages with no light-mode path (SLOP-005)
📢 Oversized centered hero titles (SLOP-006)
📜 One long single column, no grid (SLOP-007)

All rules are **bilingual (English + 中文)**. Detection is deterministic — stdlib-only Python, no LLM, no network, no dependencies.

Quick start

# 1. scan the page you just generated
python3 scripts/detect.py index.html

# 2. preview the automatic rewrites
python3 scripts/fix.py index.html --dry-run

# 3. apply them (writes index.fixed.html + index.bak.html)
python3 scripts/fix.py index.html

# 4. verify the slop score dropped
python3 scripts/detect.py index.fixed.html

Example report:

Slop score: 90/100  (8 findings, 7 rules)

[SLOP-004] Red-purple gradient — index.html:42
    .hero-banner { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) }
    EN: linear-gradient with violet/magenta/purple stops — the signature AI palette.
    中文: 红紫渐变：linear-gradient 里出现紫/品红/红紫色 —— AI 网页的招牌配色。

How it works

`scripts/detect.py` parses `` blocks, inline `style=""` attributes, and relative linked stylesheets, then checks 7 rules. Each finding carries a rule id, file, line number, code snippet, and a bilingual suggestion. Rules are weighted (SLOP-004/SLOP-005: 20, others: 10) into a 0–100 slop score. Exit code 1 = slop found, 0 = clean. `--json` emits machine-readable output for CI.

`scripts/fix.py` rewrites the offending CSS toward human-crafted defaults: radius clamped to 10px, blur dropped and translucent backgrounds solidified, glow shadows neutralized, purple gradients flattened to solid colors, a `prefers-color-scheme: light`