css-slop-detector 0.2.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- css_slop_detector-0.2.0/LICENSE +21 -0
- css_slop_detector-0.2.0/PKG-INFO +132 -0
- css_slop_detector-0.2.0/README.md +112 -0
- css_slop_detector-0.2.0/css_slop.py +633 -0
- css_slop_detector-0.2.0/css_slop_detector.egg-info/PKG-INFO +132 -0
- css_slop_detector-0.2.0/css_slop_detector.egg-info/SOURCES.txt +11 -0
- css_slop_detector-0.2.0/css_slop_detector.egg-info/dependency_links.txt +1 -0
- css_slop_detector-0.2.0/css_slop_detector.egg-info/entry_points.txt +2 -0
- css_slop_detector-0.2.0/css_slop_detector.egg-info/top_level.txt +1 -0
- css_slop_detector-0.2.0/pyproject.toml +31 -0
- css_slop_detector-0.2.0/setup.cfg +4 -0
- css_slop_detector-0.2.0/tests/test_fix.py +202 -0
- css_slop_detector-0.2.0/tests/test_smoke.py +144 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 hao li
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: css-slop-detector
|
|
3
|
+
Version: 0.2.0
|
|
4
|
+
Summary: Score CSS/HTML for AI-generated design cliches — and auto-fix them with --fix
|
|
5
|
+
Author-email: hao li <haoli5933@gmail.com>
|
|
6
|
+
License: MIT
|
|
7
|
+
Project-URL: Homepage, https://github.com/hahahahahahahahah6/css-slop-detector
|
|
8
|
+
Project-URL: Repository, https://github.com/hahahahahahahahah6/css-slop-detector
|
|
9
|
+
Keywords: css,ai-slop,design,linter,html
|
|
10
|
+
Classifier: Development Status :: 4 - Beta
|
|
11
|
+
Classifier: Intended Audience :: Developers
|
|
12
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
13
|
+
Classifier: Programming Language :: Python :: 3
|
|
14
|
+
Classifier: Topic :: Internet :: WWW/HTTP
|
|
15
|
+
Classifier: Topic :: Software Development :: Quality Assurance
|
|
16
|
+
Requires-Python: >=3.9
|
|
17
|
+
Description-Content-Type: text/markdown
|
|
18
|
+
License-File: LICENSE
|
|
19
|
+
Dynamic: license-file
|
|
20
|
+
|
|
21
|
+
# css-slop-detector
|
|
22
|
+
|
|
23
|
+
Score your CSS/HTML for **AI-generated design cliches** — the "AI slop" look:
|
|
24
|
+
oversized border radii, glassmorphism on everything, purple gradients, neon
|
|
25
|
+
glows, pure-black dark mode with no light toggle, and giant centered hero
|
|
26
|
+
titles.
|
|
27
|
+
|
|
28
|
+
If AI built your site, this tells you in one number how obvious it is.
|
|
29
|
+
**v2 adds `--fix`: a one-click detect-and-fix loop that rewrites the slop
|
|
30
|
+
for you** (with backups and dry-run diff previews).
|
|
31
|
+
|
|
32
|
+
Zero dependencies. Python standard library only.
|
|
33
|
+
|
|
34
|
+
## Install
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
pip install css-slop-detector
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Or run the single file straight from the repo:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
git clone https://github.com/hahahahahahahahah6/css-slop-detector
|
|
44
|
+
cd css-slop-detector
|
|
45
|
+
python3 css_slop.py scan style.css
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Requires Python 3.9+.
|
|
49
|
+
|
|
50
|
+
## Usage
|
|
51
|
+
|
|
52
|
+
### Scan
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
$ css-slop styles.css
|
|
56
|
+
styles.css: score 68/100 (slop)
|
|
57
|
+
L12 [big-radius] oversized border-radius (32px) on '.card'
|
|
58
|
+
L12 [glass] backdrop-filter blur on '.card' (glassmorphism)
|
|
59
|
+
L15 [purple-gradient] purple/violet gradient on '.hero'
|
|
60
|
+
L22 [hero-center] giant centered title (font-size: 72px) on '.hero h1'
|
|
61
|
+
L1 [no-light-mode] dark-only design: near-black backgrounds with no
|
|
62
|
+
light-mode toggle or prefers-color-scheme: light found
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Works on `.css` files and `.html` files (scans `<style>` blocks and inline
|
|
66
|
+
`style="..."` attributes). Machine-readable output with `--json`; fail CI
|
|
67
|
+
with `--fail-over 50` (exit 1 when any file scores 50 or higher).
|
|
68
|
+
|
|
69
|
+
### Fix (v2)
|
|
70
|
+
|
|
71
|
+
Preview what the fixer would change — writes nothing:
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
$ css-slop --dry-run styles.css
|
|
75
|
+
styles.css: 7 fixes (big-radius x1, glass x1, glow-shadow x1, hero-center x1,
|
|
76
|
+
no-light-mode x1, pure-black x1, purple-gradient x2) — score 100 -> 0 [dry-run, nothing written]
|
|
77
|
+
--- a/styles.css
|
|
78
|
+
+++ b/styles.css
|
|
79
|
+
...
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Apply the fixes. The original is backed up to `styles.css.bak` first:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
$ css-slop --fix styles.css
|
|
86
|
+
styles.css: 7 fixes (...) — score 100 -> 0 [applied, backup: styles.css.bak]
|
|
87
|
+
|
|
88
|
+
$ css-slop --restore styles.css # undo: restore the backup
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
What `--fix` rewrites (only patterns the scanner flags — it de-slops, it
|
|
92
|
+
doesn't redesign):
|
|
93
|
+
|
|
94
|
+
| rule | automatic rewrite |
|
|
95
|
+
|---|---|
|
|
96
|
+
| `big-radius` | clamp `border-radius` ≥ 20px to `12px` |
|
|
97
|
+
| `glass` | remove `backdrop-filter: blur(...)` |
|
|
98
|
+
| `purple-gradient` | swap purple/violet stops for neutral slate |
|
|
99
|
+
| `glow-shadow` | replace neon glow with a soft `0 4px 6px rgba(0,0,0,0.1)` shadow |
|
|
100
|
+
| `pure-black` | lift `#000` surfaces to soft `#1e1e1e` |
|
|
101
|
+
| `hero-center` | shrink giant centered titles to `32px`, left-align |
|
|
102
|
+
| `no-light-mode` | append a `prefers-color-scheme: light` hook block |
|
|
103
|
+
|
|
104
|
+
## Rules
|
|
105
|
+
|
|
106
|
+
| rule | what it flags |
|
|
107
|
+
|---|---|
|
|
108
|
+
| `big-radius` | `border-radius` ≥ 20px |
|
|
109
|
+
| `glass` | `backdrop-filter: blur` |
|
|
110
|
+
| `purple-gradient` | purple/violet/indigo/fuchsia gradients |
|
|
111
|
+
| `glow-shadow` | colored `box-shadow` with blur ≥ 24px |
|
|
112
|
+
| `pure-black` | `#000`-style backgrounds |
|
|
113
|
+
| `hero-center` | `text-align: center` + `font-size` ≥ 40px in one rule |
|
|
114
|
+
| `no-light-mode` | dark-only design, no light-mode toggle found |
|
|
115
|
+
|
|
116
|
+
Scores: 0–20 clean, 21–50 mild slop, 51–80 slop, 81–100 peak slop.
|
|
117
|
+
|
|
118
|
+
## Differentiation
|
|
119
|
+
|
|
120
|
+
**Generation side vs. detection+fix side.** Tools like
|
|
121
|
+
[pbakaus/impeccable](https://github.com/pbakaus/impeccable) (and design-skill
|
|
122
|
+
collections like ui-skills or hallmark) teach AI to *generate* better design —
|
|
123
|
+
they improve the prompt. This does the opposite: it scores the *finished
|
|
124
|
+
product's* AI fingerprints, then **closes the loop with one command** —
|
|
125
|
+
`--fix` rewrites the flagged patterns for you, with a diff preview, automatic
|
|
126
|
+
backups, and `--restore` to undo. Detect + fix, not just detect.
|
|
127
|
+
|
|
128
|
+
One file, no dependencies, runs in CI.
|
|
129
|
+
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# css-slop-detector
|
|
2
|
+
|
|
3
|
+
Score your CSS/HTML for **AI-generated design cliches** — the "AI slop" look:
|
|
4
|
+
oversized border radii, glassmorphism on everything, purple gradients, neon
|
|
5
|
+
glows, pure-black dark mode with no light toggle, and giant centered hero
|
|
6
|
+
titles.
|
|
7
|
+
|
|
8
|
+
If AI built your site, this tells you in one number how obvious it is.
|
|
9
|
+
**v2 adds `--fix`: a one-click detect-and-fix loop that rewrites the slop
|
|
10
|
+
for you** (with backups and dry-run diff previews).
|
|
11
|
+
|
|
12
|
+
Zero dependencies. Python standard library only.
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pip install css-slop-detector
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Or run the single file straight from the repo:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
git clone https://github.com/hahahahahahahahah6/css-slop-detector
|
|
24
|
+
cd css-slop-detector
|
|
25
|
+
python3 css_slop.py scan style.css
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Requires Python 3.9+.
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### Scan
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
$ css-slop styles.css
|
|
36
|
+
styles.css: score 68/100 (slop)
|
|
37
|
+
L12 [big-radius] oversized border-radius (32px) on '.card'
|
|
38
|
+
L12 [glass] backdrop-filter blur on '.card' (glassmorphism)
|
|
39
|
+
L15 [purple-gradient] purple/violet gradient on '.hero'
|
|
40
|
+
L22 [hero-center] giant centered title (font-size: 72px) on '.hero h1'
|
|
41
|
+
L1 [no-light-mode] dark-only design: near-black backgrounds with no
|
|
42
|
+
light-mode toggle or prefers-color-scheme: light found
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Works on `.css` files and `.html` files (scans `<style>` blocks and inline
|
|
46
|
+
`style="..."` attributes). Machine-readable output with `--json`; fail CI
|
|
47
|
+
with `--fail-over 50` (exit 1 when any file scores 50 or higher).
|
|
48
|
+
|
|
49
|
+
### Fix (v2)
|
|
50
|
+
|
|
51
|
+
Preview what the fixer would change — writes nothing:
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
$ css-slop --dry-run styles.css
|
|
55
|
+
styles.css: 7 fixes (big-radius x1, glass x1, glow-shadow x1, hero-center x1,
|
|
56
|
+
no-light-mode x1, pure-black x1, purple-gradient x2) — score 100 -> 0 [dry-run, nothing written]
|
|
57
|
+
--- a/styles.css
|
|
58
|
+
+++ b/styles.css
|
|
59
|
+
...
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Apply the fixes. The original is backed up to `styles.css.bak` first:
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
$ css-slop --fix styles.css
|
|
66
|
+
styles.css: 7 fixes (...) — score 100 -> 0 [applied, backup: styles.css.bak]
|
|
67
|
+
|
|
68
|
+
$ css-slop --restore styles.css # undo: restore the backup
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
What `--fix` rewrites (only patterns the scanner flags — it de-slops, it
|
|
72
|
+
doesn't redesign):
|
|
73
|
+
|
|
74
|
+
| rule | automatic rewrite |
|
|
75
|
+
|---|---|
|
|
76
|
+
| `big-radius` | clamp `border-radius` ≥ 20px to `12px` |
|
|
77
|
+
| `glass` | remove `backdrop-filter: blur(...)` |
|
|
78
|
+
| `purple-gradient` | swap purple/violet stops for neutral slate |
|
|
79
|
+
| `glow-shadow` | replace neon glow with a soft `0 4px 6px rgba(0,0,0,0.1)` shadow |
|
|
80
|
+
| `pure-black` | lift `#000` surfaces to soft `#1e1e1e` |
|
|
81
|
+
| `hero-center` | shrink giant centered titles to `32px`, left-align |
|
|
82
|
+
| `no-light-mode` | append a `prefers-color-scheme: light` hook block |
|
|
83
|
+
|
|
84
|
+
## Rules
|
|
85
|
+
|
|
86
|
+
| rule | what it flags |
|
|
87
|
+
|---|---|
|
|
88
|
+
| `big-radius` | `border-radius` ≥ 20px |
|
|
89
|
+
| `glass` | `backdrop-filter: blur` |
|
|
90
|
+
| `purple-gradient` | purple/violet/indigo/fuchsia gradients |
|
|
91
|
+
| `glow-shadow` | colored `box-shadow` with blur ≥ 24px |
|
|
92
|
+
| `pure-black` | `#000`-style backgrounds |
|
|
93
|
+
| `hero-center` | `text-align: center` + `font-size` ≥ 40px in one rule |
|
|
94
|
+
| `no-light-mode` | dark-only design, no light-mode toggle found |
|
|
95
|
+
|
|
96
|
+
Scores: 0–20 clean, 21–50 mild slop, 51–80 slop, 81–100 peak slop.
|
|
97
|
+
|
|
98
|
+
## Differentiation
|
|
99
|
+
|
|
100
|
+
**Generation side vs. detection+fix side.** Tools like
|
|
101
|
+
[pbakaus/impeccable](https://github.com/pbakaus/impeccable) (and design-skill
|
|
102
|
+
collections like ui-skills or hallmark) teach AI to *generate* better design —
|
|
103
|
+
they improve the prompt. This does the opposite: it scores the *finished
|
|
104
|
+
product's* AI fingerprints, then **closes the loop with one command** —
|
|
105
|
+
`--fix` rewrites the flagged patterns for you, with a diff preview, automatic
|
|
106
|
+
backups, and `--restore` to undo. Detect + fix, not just detect.
|
|
107
|
+
|
|
108
|
+
One file, no dependencies, runs in CI.
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
MIT
|