设计与多媒体

frontend-design-deslop

samber/cc-skills

Designs distinctive, non-generic UI — typography, OKLCH color, design tokens (DESIGN.md), layout, components, motion, dark mode, accessibility — for landing pages, SaaS apps, dashboards, ecommerce, decks, docs, portfolios, avoiding the AI-slop / Claude-esque default look. Use whenever building or styling any web frontend, app, dashboard, landing page, deck, or artifact, or when the user says "make it not look like AI", "de-slopify", "deslop", "less generic", "give it character", "design a UI for X", "design an app", "update DESIGN.md", or complains the output looks like every other AI site. Trigger even on a bare "build a UI for X" with no aesthetic named. Not for writing marketing copy.

  • 5138 次安装
  • 241 星标
  • 收录于

安装命令

npx skills add https://github.com/samber/cc-skills --skill frontend-design-deslop

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).