39 lines
2.7 KiB
Markdown
39 lines
2.7 KiB
Markdown
# Anti-AI-Slop Quality Checklist 🛡️
|
|
|
|
Before finalizing and publishing any website or HTML artifact, verify every item on this checklist. This ensures the output feels designed by a human senior product designer rather than a generic LLM.
|
|
|
|
---
|
|
|
|
## ❌ Forbidden Trappings of "AI Slop"
|
|
1. **Never use generic default fonts**:
|
|
* 🚫 No raw Inter, Roboto, Arial, or unstyled system-ui.
|
|
* ✅ Always import characterful fonts (e.g. *Syne*, *Cabinet Grotesk*, *Fraunces*, *Space Grotesk*, *Plus Jakarta Sans*).
|
|
2. **Never use the generic purple-to-indigo gradient**:
|
|
* 🚫 `bg-gradient-to-r from-purple-600 to-indigo-600` on white background.
|
|
* ✅ Use intentional palettes: deep obsidian with electric cyan accents, warm ivory with terracotta, neo-brutalist yellow with black borders, or slate with emerald glow.
|
|
3. **Never generate static, boring centered 3-card rows**:
|
|
* 🚫 Three identical white boxes with light gray text centered on a plain gray canvas.
|
|
* ✅ Vary card sizes, emphasize a primary card with a border glow or badge, use grid spans (`md:col-span-2`), or add asymmetry.
|
|
4. **Never forget interactive micro-interactions**:
|
|
* 🚫 Dead buttons that don't react to hover or click.
|
|
* ✅ Always add `hover:-translate-y-0.5 hover:shadow-lg transition-all duration-200` and `active:scale-95`.
|
|
5. **Never rely on broken external images**:
|
|
* 🚫 Using fake URLs like `https://example.com/image.jpg` or placeholder services that fail.
|
|
* ✅ Use SVG patterns, Lucide icons, gradient mesh backgrounds, or reliable Unsplash source links with explicit fallback styling.
|
|
|
|
---
|
|
|
|
## ✅ Mandatory Pre-Flight Verification
|
|
|
|
| Check | Requirement | Verified? |
|
|
|---|---|:---:|
|
|
| **Viewport & Encoding** | `<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">` | [ ] |
|
|
| **Tailwind CDN** | `<script src="https://cdn.tailwindcss.com"></script>` included in `<head>` | [ ] |
|
|
| **Alpine.js CDN** | `<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>` in `<head>` | [ ] |
|
|
| **Lucide Icons** | `<script src="https://unpkg.com/lucide@latest"></script>` + `lucide.createIcons()` at bottom of `<body>` | [ ] |
|
|
| **Google Fonts** | Preconnect + Google Font `<link>` + custom `<style>` setting `font-family` | [ ] |
|
|
| **Touch Targets** | Buttons and clickable elements have at least `py-2.5 px-4` and `cursor-pointer` | [ ] |
|
|
| **Dark Mode Consistency** | If dark mode is supported, all cards, borders, text, and inputs have `dark:` variants | [ ] |
|
|
| **Mobile Responsiveness** | Layout uses `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` and responsive paddings (`p-4 md:p-8`) | [ ] |
|
|
| **Content Richness** | Real, realistic domain content (no repeated "Lorem Ipsum" filler) | [ ] |
|