Anti-AI Cliché Rules Enforced by the web-design-engineer Skill: A Complete Guide

The web-design-engineer skill automatically blocks five common aesthetic patterns—gradient clichés, left-border cards, default system fonts, emoji icons, and fabricated content—to prevent generic LLM-generated web designs.

The web-design-engineer skill in the ConardLi/garden-skills repository implements a strict anti-AI cliché checklist that actively rejects over-used design tropes common in AI-generated artifacts. This enforcement mechanism is hard-coded directly into the skill's system prompt, ensuring every generated web artifact adheres to a more original visual language. Below is a technical breakdown of the five prohibited patterns and how the source code enforces them at runtime.

The Five Anti-AI Cliché Rules

The anti-cliché policy specifically targets five recurring patterns that make AI-generated web pages instantly recognizable as synthetic. Each rule is explicitly defined in skills/web-design-engineer/SKILL.md and referenced in the system prompt configuration.

Gradient Cliché

Bright, saturated purple-pink-blue gradients are strictly prohibited. The skill blocks any design request specifying the iconic "AI aesthetic" gradient that blends vibrant purple into pink and blue. This color combination has become a visual shorthand for LLM-generated landing pages, and the system prompt automatically rejects it in favor of more nuanced color palettes.

Card Accent Cliché

Left-border accent cards are banned as a primary visual pattern. UI components that rely on a colored vertical line on the left edge as the main decorative element trigger the rule engine. This pattern appears in countless generated dashboard templates, and the skill forces designers to use alternative hierarchy indicators like shadow, background contrast, or typography weight instead.

Default Font Cliché

The system fonts Inter, Roboto, Arial, Fraunces, and system-ui are blacklisted. These typefaces represent the default fallback choices for most AI agents, making them synonymous with generic output. When a request specifies any of these fonts, the skill automatically suggests alternatives like Space Grotesk or custom webfonts.

Emoji-as-Icon Cliché

Using emoji characters as stand-in icons or decorative graphics is forbidden. The rule prohibits substituting proper SVG icons or vector graphics with Unicode emoji characters, a common shortcut in rapidly generated prototypes. The enforcement ensures all icons are implemented as scalable vector assets rather than system-dependent text glyphs.

Fake-Content Cliché

Fabricated statistics, fake logo walls, and dummy testimonials are blocked. The skill rejects any placeholder content that masquerades as real data, including invented metrics, fictional company logos, or synthetic user quotes. This forces the generation of honest skeleton states or requires the user to provide verified content.

How the Rules Are Enforced in the Source Code

The enforcement mechanism lives in the skill's system prompt definition. In skills/web-design-engineer/agents/openai.yaml, the default prompt explicitly lists the anti-cliché checklist as a set of negative constraints that the model must respect during generation.

# agents/openai.yaml – default prompt that activates the anti‑cliché list

default_prompt: |
  Use $web‑design‑engineer to design and build a polished visual web artifact from my brief.
  # Anti‑AI‑cliché checklist (do NOT use):

  # - purple‑pink‑blue gradient backgrounds

  # - left‑border accent cards

  # - Inter / Roboto / Arial / Fraunces / system‑ui fonts

  # - emoji as icons

  # - fabricated stats, fake logo walls, dummy testimonials

When the skill is activated, this prompt fragment is injected into the context window, creating a hard constraint that the underlying LLM cannot violate. The rules are not merely suggestions; they are imperative instructions parsed by the agent's reasoning engine before any code generation occurs.

Real-World Enforcement Example

The following interaction demonstrates how the skill intercepts clichéd requests and auto-corrects them toward compliant alternatives.

Non-compliant request:

// Example of a user request that triggers the rule engine
User: "Create a landing page with a purple‑pink gradient hero, Inter font, and an emoji‑style '🛒' button."

Agent response (auto-corrected):

> The requested purple‑pink gradient, Inter font, and emoji icon clash with the anti‑AI‑cliche policy.
> Please choose an alternative colour palette, a supported font, and a proper SVG/icon for the button.

Compliant revision:

// After the user adjusts the request, the skill proceeds
User: "Use a subtle teal‑blue gradient, Space Grotesk font, and a proper SVG cart icon."

Agent (now compliant):
/* Generates a design that respects the anti‑cliche constraints */

This rejection-and-correction loop ensures that even vague or generic prompts get elevated to a higher design standard before any HTML or CSS is written.

Where to Find the Rule Definitions

The anti-AI cliché rules are documented across four key files in the repository:

• skills/web-design-engineer/README.md — Human-readable overview explaining the rationale behind the anti-cliché checklist and providing examples of compliant design patterns.

• skills/web-design-engineer/SKILL.md — Machine-readable specification containing the exact rule strings used by the prompt parser. This file defines the canonical list of prohibited patterns.

• skills/web-design-engineer/agents/openai.yaml — Runtime configuration that injects the anti-cliché constraints into the active system prompt for OpenAI-compatible agents.

• skills/web-design-engineer/references/critique-guide.md — Five-dimensional critique framework that references the anti-cliché policy as part of the visual quality assessment rubric.

Summary

• The web-design-engineer skill enforces five specific anti-AI cliché rules targeting gradients, card accents, default fonts, emoji icons, and fake content.
• Rules are hard-coded in SKILL.md and injected via agents/openai.yaml as negative constraints in the system prompt.
• Automatic rejection occurs when requests contain prohibited patterns like purple-pink-blue gradients or Inter/Roboto fonts.
• Alternative suggestions are provided by the agent to guide users toward compliant design choices.
• All definitions are version-controlled in the ConardLi/garden-skills repository under the skills/web-design-engineer/ directory.

Frequently Asked Questions

Can the anti-AI cliché rules be disabled or overridden?

No, the rules are baked into the skill's core system prompt in SKILL.md and are considered immutable constraints for this specific skill. To generate designs using clichéd patterns, you would need to bypass the web-design-engineer skill entirely and use a generic coding agent without these aesthetic guardrails.

What happens if a design accidentally uses a banned font?

The skill's critique engine, defined in references/critique-guide.md, performs a post-generation validation pass. If it detects blacklisted fonts like Inter or system-ui in the generated CSS, it triggers a regeneration cycle with explicit instructions to select an alternative typeface from an approved list.

Which fonts are recommended instead of the banned defaults?

While the skill does not maintain a whitelist, it typically suggests contemporary alternatives such as Space Grotesk, Cabinet Grotesk, or Satoshi for sans-serif applications. For serif pairings, it prefers distinctive options like Zodiak or Melodrama rather than generic system defaults.

Why were these specific five patterns chosen as clichés?

According to the source analysis in README.md, these patterns represent the "path of least resistance" for LLMs trained on common web templates. Purple-pink gradients and left-border cards appear disproportionately in AI training data, making them visual indicators of synthetic origin. Banning them forces the generation of more distinctive, human-curated aesthetics.

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