frontend-design-deslop

Installation
SKILL.md

Questions: Ask the user through the environment's question tool — never as plain-text prose. One question at a time, 2–4 tappable options, wait for the answer. If the environment has no question tool, ask in prose with the same options, one at a time.

frontend design deslop

AI-generated UI looks generic for two reasons:

  1. No constraints. The model samples the statistical median of 2019-2024 web code — Tailwind UI's bg-indigo-500, Inter, rounded cards, soft shadows. You cannot out-prompt a vacuum.
  2. Designing before knowing what you're designing. A corporate landing page, a creative portfolio, a developer-tool landing page, an analytics dashboard, and an ecommerce product page share almost no design DNA — a beautiful aesthetic that fights the artifact's job is its own slop.

The fix is a discipline borrowed from brand design: strategy drives design, never aesthetics first.

  1. Commit to words first — what this is, who it serves, the adjectives it must feel like.
  2. Translate those words into a typography and color system.
  3. Build from tokens.
  4. Apply the craft layer (layout, components, motion, iconography, imagery, dark mode, accessibility).
  5. Audit.

Target the convergence mechanism, not a frozen blocklist; the slop fingerprint shifts over time (purple gradients in 2022, cream backgrounds and italic-serif heroes in 2026).

Installs
2.5K
GitHub Stars
222
First Seen
Jun 9, 2026
frontend-design-deslop — samber/cc-skills