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

> Learn how the Anti-cliché blocklist in web-design-engineer stops AI from creating generic designs. Discover its three-layer system for unique, effective web aesthetics.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-08-31

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) file. At line 57, the *Pre‑delivery Checklist* contains a mandatory verification item that acts as a runtime gate:

```markdown
- [ ] 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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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.