Universal Anti-Patterns That Suggest AI Slop in Diagrams: 12 Rules From the cathrynlavery/diagram-design System

The cathrynlavery/diagram-design repository defines 12 universal anti-patterns—ranging from cyan glows and blanket monospaced fonts to unmasked arrow labels—that automatically flag low-effort "AI slop" and enforce editorial visual standards.

The cathrynlavery/diagram-design repository collects its diagram-quality rules inside the SKILL.md specification, which lists universal anti-patterns that suggest AI slop in diagrams across every visual grammar. These rules target generic, unthinking defaults that break readability, hierarchy, and design intent, regardless of whether the diagram is a flowchart, tree, or Venn diagram.

The 12 Universal Anti-Patterns

The "Universal Anti-patterns" table in [skills/diagram-design/SKILL.md](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) defines the following automatic failures:

1. Dark mode with cyan or purple glow — Creates a false "technical" impression without conveying any actual design decision.
2. JetBrains Mono as a blanket "dev" font — Monospaced fonts belong to technical content such as ports, commands, and URLs. Node names should use the readable Geist sans-serif, while Geist Mono is reserved for code-like labels.
3. Identical boxes for every node — Erases visual hierarchy so the viewer cannot infer which elements are more important.
4. Legend floating inside the diagram area — Collides with nodes, obscures content, and breaks the layout's visual flow.
5. Arrow labels with no masking rectangle — Text bleeds through the line, making the connection hard to trace.
6. Vertical writing-mode text on arrows — Becomes unreadable; arrows should stay horizontal for legibility.
7. Three equal-width summary cards as default — A generic grid lacks emphasis; varying widths signals relative importance.
8. Shadow on any element — Shadows are deprecated in this design system; crisp borders provide clearer separation.
9. rounded-2xl on boxes — Radius should be limited to 6–10 px, or omitted entirely, to keep edges sharp and consistent.
10. Coral on every "important" node — Coral is reserved for one or two editorial accents; over-using it dilutes impact.
11. Reproducing Mermaid's renderer layout — Importing automatic spacing and routing defeats the purpose of an editorial, hand-crafted layout.
12. Any breach of the six §6 connector rules — Violations such as diagonal slants, overlapping labels, or misplaced masks are automatic fails; these rules guarantee a clean, traceable graph.

These patterns are universal because they apply to all diagram types, catching artifacts that might pass a casual review but fail the system's rigor.

How the Anti-Patterns Fit the Architecture

Design System Consistency

The repository's design system, defined in [references/style-guide.md](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md), relies on a small set of semantic tokens such as paper, ink, muted, and accent. Over-using colors like coral or adding extraneous shadows breaks the token-driven palette and makes diagrams harder to theme consistently.

Connector Integrity

Section §6 of the SKILL.md document (lines 64–89) outlines six mandatory connector rules. Any violation—for example, diagonal connectors or overlapping masks—is captured by the "breach of the six §6 connector rules" anti-pattern. The repository ships an automated verifier script, scripts/verify-geometry.py, that flags these infractions before publication.

Typography Discipline

The type hierarchy (lines 95–101) mandates Geist for node names and Geist Mono only for technical labels. Using a generic monospaced font such as JetBrains Mono everywhere eliminates the visual distinction between narrative text and code-like data.

Visual Hierarchy

Uniform node boxes and equal-size summary cards flatten the information architecture. The design system explicitly limits accent elements to a maximum of two and prescribes varied widths as a signal of relative importance, preventing the generic "AI slop" look of undifferentiated elements.

Code Examples: Violations vs. Correct SVG

Arrow Labels Without a Mask

An unmasked label bleeds through the connector line. The primitive-annotation.md reference specifies that arrow labels must sit atop an opaque masking rectangle.

<!-- ❌ Bad: label bleeds through the line -->
<line x1="50" y1="20" x2="150" y2="20" stroke="#4f5d75"/>
<text x="100" y="22" font-family="Geist Mono" font-size="8" fill="#7a8399">WRITE</text>

<!-- ✅ Good: opaque mask behind the label -->
<line x1="50" y1="20" x2="150" y2="20" stroke="#4f5d75"/>
<rect x="88" y="12" width="24" height="12" rx="2" fill="#f5f5f5"/>
<text x="100" y="22" font-family="Geist Mono" font-size="8" fill="#7a8399" text-anchor="middle">WRITE</text>

Shadows on Nodes

Shadows are deprecated; crisp borders provide clearer separation without visual noise.

<!-- ❌ Bad: node with drop-shadow -->
<rect x="20" y="40" width="120" height="60" rx="6"
      fill="#ffffff" stroke="#4f5d75" stroke-width="1"
      filter="url(#shadow)"/>

<!-- ✅ Good: crisp border only -->
<rect x="20" y="40" width="120" height="60" rx="6"
      fill="#ffffff" stroke="#4f5d75" stroke-width="1"/>

Over-Using Coral Accent

Coral is reserved for one or two editorial accents. Highlighting every node dilutes the signal.

<!-- ❌ Bad: three nodes all highlighted in coral -->
<rect x="10" y="10" width="80" height="40" fill="#ffffff" stroke="#eb6c36"/>
<rect x="110" y="10" width="80" height="40" fill="#ffffff" stroke="#eb6c36"/>
<rect x="210" y="10" width="80" height="40" fill="#ffffff" stroke="#eb6c36"/>

<!-- ✅ Good: only one accent per diagram -->
<rect x="10" y="10" width="80" height="40" fill="#ffffff" stroke="#4f5d75"/>
<rect x="110" y="10" width="80" height="40" fill="#ffffff" stroke="#4f5d75"/>
<rect x="210" y="10" width="80" height="40" fill="#ffffff" stroke="#eb6c36"/> <!-- accent -->

Key Files Behind the Rules

The following files collectively define, enforce, and exemplify the universal anti-patterns that suggest AI slop in diagrams:

• skills/diagram-design/SKILL.md — Master specification containing the "Universal Anti-patterns" table and the full design rule set.
• skills/diagram-design/references/style-guide.md — Token-driven color palette, typography, and spacing rules.
• scripts/verify-geometry.py — Automated checker that enforces connector rules and catches infractions such as missing label masks or diagonal connectors.
• skills/diagram-design/references/primitive-annotation.md — Correct markup for arrow-label masks and annotation primitives.
• skills/diagram-design/references/semantic-patterns.md — Lists the six connector rules (§6) underlying the connector-integrity anti-pattern.

Summary

• The cathrynlavery/diagram-design repository defines 12 universal anti-patterns that flag AI slop in any diagram type.
• Violations include generic aesthetics such as cyan glows, blanket monospace fonts, identical node boxes, unmasked arrow labels, and breaches of the six §6 connector rules.
• The system enforces these rules through semantic design tokens, mandatory connector geometry, and automated verification via scripts/verify-geometry.py.
• Correct SVG markup requires opaque label masks, crisp borders instead of shadows, and strict limits on accent colors like coral.

Frequently Asked Questions

What is "AI slop" in diagram design?

"AI slop" refers to generic, low-effort visual artifacts produced by naive generation tools that lack editorial intent. In the cathrynlavery/diagram-design system, this includes default glows, uniform node sizing, and unthinking font choices that undermine readability and hierarchy.

How does the repository enforce these universal anti-patterns?

Enforcement happens at three levels: the SKILL.md specification documents the rules, the style-guide.md defines the semantic tokens, and the scripts/verify-geometry.py script automatically flags connector violations such as diagonal slants and missing label masks.

Why is JetBrains Mono considered an anti-pattern for node names?

According to the typography rules in SKILL.md (lines 95–101), monospaced fonts are reserved for technical labels such as ports and URLs. Node names should use the Geist sans-serif to maintain visual distinction between narrative content and code-like data.

Can these anti-patterns apply to Mermaid-generated diagrams?

Yes. One explicit anti-pattern is reproducing Mermaid's renderer layout, because importing automatic spacing and routing contradicts the system's goal of hand-crafted, editorial layouts. The rules are universal and apply regardless of the generator used.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}