How the Anti‑Cliché Blocklist Works in Web‑Design‑Engineer

The anti‑cliché blocklist in web‑design‑engineer prevents AI‑generated designs from defaulting to overused "AI‑style" aesthetics through a three‑layer enforcement system: declarative bans in the skill manifest, mandatory pre‑delivery verification, and logical reasoning chains that identify exceptions.

The web‑design‑engineer skill in the ConardLi/garden‑skills repository combats generic AI design output through an explicit anti‑cliché blocklist. This architectural safeguard ensures generated interfaces avoid purple‑pink gradients, default system fonts, and emoji placeholders unless explicitly specified in brand guidelines. Understanding how this blocklist operates reveals a robust pattern for quality control in AI‑assisted design workflows.

Three‑Layer Enforcement Architecture

The anti‑cliché blocklist operates through tightly‑coupled mechanisms that make bans declarative, verifiable, and self‑enforcing.

Declarative Specification in SKILL.md

The blocklist lives in skills/web‑design‑engineer/SKILL.md under the Anti‑AI‑cliché checklist section. This manifest‑based approach enumerates forbidden patterns in plain Markdown rather than buried logic.

According to the source code, the following patterns are explicitly banned:

• Purple‑pink‑blue gradient backgrounds
• Left‑border accent cards
• Inter / Roboto / Arial / Fraunces / system‑ui fonts
• Emoji as icon substitutes
• Fabricated stats, fake logo walls, dummy testimonials

Runtime Guard via Pre‑Delivery Checklist

Every build concludes with a lightweight self‑check defined in the same SKILL.md file. At line 57, the Pre‑delivery Checklist contains a mandatory verification item that acts as a runtime gate:

- [ ] No AI clichés (purple‑pink gradients, emoji abuse, left‑border accent cards, Inter/Roboto) — unless the brand spec explicitly uses them

The agent must pause and confirm this condition before signaling completion, guaranteeing the blocklist is inspected on every run.

Design‑Read Reasoning Chain

Lines 83‑91 of SKILL.md implement a logical decision framework that determines when patterns constitute acceptable brand choices versus lazy defaults. The reasoning follows three steps:

1. The user wants their brand to be recognized
2. AI defaults equal the average of training data, meaning no brand recognition
3. Therefore, AI‑default output dilutes the brand

This logic maps each pattern to its slop cause and exception conditions:

Pattern	Why it's slop	When it's actually fine
Aggressive purple → pink → blue gradient	The "tech vibe" formula AI training data converged on; appears on every SaaS/AI/web3 landing page	The brand itself uses it, or the task is satirizing this aesthetic

Extended Blocklist Maintenance

The README.md at line 461 references an Extended anti‑cliché list that captures additional patterns discovered in real‑world AI output. This ensures the blocklist evolves without requiring hard‑coded updates to every detection rule.

Key Files and Integration Points

Understanding the file structure reveals how the blocklist integrates with the broader skill architecture:

• skills/web-design-engineer/SKILL.md: Core skill definition containing the anti‑cliché checklist, reasoning chain, and pre‑delivery validation (line 57, lines 83‑91)
• skills/web-design-engineer/README.md: High‑level overview mentioning the blocklist and extended list (line 461)
• skills/web-design-engineer/references/block-library.md: Reusable UI blocks that provide alternatives to cliché components
• skills/web-design-engineer/references/failure-patterns.md: Complementary detection patterns for cliché‑related issues

Practical Verification Workflow

To verify compliance with the anti‑cliché blocklist during development:

1. Review the Anti‑AI‑cliché checklist section in SKILL.md
2. Execute the pre‑delivery checklist item at line 57
3. Consult the reasoning table (lines 83‑91) for any borderline design elements
4. Check against the extended list in README.md line 461 for newly identified patterns

Only proceed when the brand spec explicitly documents exceptions to banned patterns.

Summary

• The anti‑cliché blocklist in web‑design‑engineer bans overused AI aesthetics through declarative Markdown rules in SKILL.md
• Runtime enforcement occurs via a mandatory pre‑delivery checklist at line 57 that blocks completion until verification passes
• Logical reasoning chains (lines 83‑91) distinguish between lazy defaults and intentional brand choices
• An extended list in README.md (line 461) allows the blocklist to adapt to emerging AI clichés without code changes
• The architecture separates concerns between specification, verification, and exception handling

Frequently Asked Questions

What specific design patterns does the anti‑cliché blocklist prohibit?

The blocklist explicitly bans purple‑pink‑blue gradient backgrounds, left‑border accent cards, default fonts (Inter, Roboto, Arial, Fraunces, system‑ui), emoji substitutes for icons, and fabricated content like fake testimonials or stats. These patterns are enumerated in the Anti‑AI‑cliché checklist section of SKILL.md.

How does the blocklist distinguish between banned patterns and legitimate brand choices?

The design‑read reasoning chain implemented at lines 83‑91 of SKILL.md provides a deterministic decision path. It evaluates whether a pattern serves the brand's specific identity or merely represents AI training data averages. Exceptions are only permitted when the brand specification explicitly includes the pattern, such as a company that legitimately uses purple‑pink gradients in its official palette.

Where is the anti‑cliché blocklist enforced during the design process?

Enforcement occurs at multiple points: declaration happens in SKILL.md, verification occurs through the pre‑delivery checklist at line 57, and ongoing maintenance is supported by the extended list referenced at line 461 of README.md. This multi‑file approach ensures the blocklist remains visible and auditable throughout the design lifecycle.

Can the blocklist be extended to cover new AI clichés as they emerge?

Yes. The architecture includes an Extended anti‑cliché list documented in README.md that captures additional patterns discovered in production. Because the system uses declarative Markdown rather than hard‑coded logic, new clichés can be added to the blocklist by updating the relevant documentation files without modifying the underlying skill code.

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