full-stack-design-skills: Skill for Claude Code

Anti-AI Design Patterns

A field guide to the visual tells that mark an interface as machine-generated, and the intentional choices that replace them. The goal is not a different template — it is design that reads as deliberate: chosen neutrals, a real type system, asymmetry with reason, and iconography that belongs to one family.

Core principle: intentional beats default

An AI tell is almost never a single ugly element. It is the absence of a decision — the palette that was inherited instead of chosen, the border that decorates instead of encodes, the emoji dropped in because a real icon was more work. Every rule below reduces to one question:

Did a human decide this, or did it fall out of a default?

If you cannot state why a color, radius, border, or glyph is there, it is probably a tell.

---

1. The border tell — single-side accent rails

The single most common AI slop signature: a rounded card with a colored stripe on one side (usually left) and neutral borders on the other three.

/* ❌ AI TELL — accent rail on a rounded card */
.card {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #6366f1;   /* the giveaway */
  border-radius: 12px;
}

Why it reads as AI: the accent has no informational job — it is applied to every card regardless of state, so it decorates rather than encodes. A colored edge on a rounded corner also fights the geometry (the stripe clips awkwardly at the radius).

Fixes — pick based on intent:

/* ✅ A. If the color means nothing: drop it. Let type + spacing carry the card. */
.card { border: 1px solid var(--line); border-radius: 12px; }

/* ✅ B. If the color must encode STATE (error/warn/success): use a full token
   set — background tint + text + a same-color full border, not a lone rail. */
.card--critical {
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-ink);
}

/* ✅ C. If you genuinely want an edge accent, make it a deliberate full-bleed
   top border on a SQUARE-topped card, or an inset marker — a decision, not a default. */
.stat { border-top: 3px solid var(--accent); border-radius: 0 0 10px 10px; }