How to Troubleshoot Common AI Tell Patterns in Generated Designs

Troubleshoot AI tell patterns by cross-referencing generated markup against the rule set in skills/taste-skill/SKILL.md, adjusting the three dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) to constrain stylistic variance, and enforcing mandatory justification comments for motion and serif typography.

The Taste Skill repository (Leonxlnx/taste-skill) encodes a comprehensive defense system against "AI tells"—stylistic shortcuts like generic gradients, default serif fonts, and unmotivated animations that large language models habitually generate. When a design still exhibits these forbidden patterns, the cause is almost always a missed rule in the skill specification or an uncontrolled dial value. Understanding the architectural guardrails and their enforcement logic allows you to pinpoint and eliminate these tells before they reach production.

Architectural Guardrails That Block AI Tells

The skill engine parses SKILL.md to enforce five primary guardrail categories. If a tell appears in output, one of these mechanisms has been bypassed or misconfigured.

• The Three Dials – DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY drive every layout decision. Values exceeding allowed ranges trigger a pre-flight fail, forcing the agent to lower the dial or change the layout. Defined in SKILL.md – “The Three Dials”.
• AI Tell Bans – Explicit "mandatory" or "very-discouraged" flags for patterns such as neon glows, placeholder SVGs, and premium-consumer palettes. The processor checks each rule before emitting code; violations abort generation with a diagnostic comment. Defined in SKILL.md – “AI TELLS (Forbidden Patterns)”.
• Dependency Verification – Any third-party import must be confirmed in package.json. This prevents silent fallback to hand-rolled CSS that often re-introduces tells. Defined in SKILL.md – “Dependency Verification (mandatory)”.
• Pre-Flight Checks – Mechanical counts (e.g., eyebrows per three sections) and layout-family limits catch repeated patterns like excessive split-headers early. Defined in SKILL.md – “Eyebrow Restraint”.
• Motion Motivation – Every animation must include a single-sentence purpose comment. This stops gratuitous scroll-hijacks and "GSAP-for-show." Defined in SKILL.md – “MOTION MUST BE MOTIVATED”.

When a tell surfaces, it typically indicates that the brief was ambiguous, a dial value was set too high, or the code-generation step was manually edited after the guardrail check.

Step-by-Step Troubleshooting Workflow

Run this checklist after generation to locate the root cause. Each step references the exact line numbers in skills/taste-skill/SKILL.md where the rule is defined.

1. Inspect the generated markup for banned patterns listed in AI TELLS (neon glows, placeholder SVGs, generic gradients, etc.).
2. Check the three dials used for the run. If DESIGN_VARIANCE > 4 and you see a centered hero, lower the variance or add an asymmetric layout override.
3. Verify the Serif Discipline (lines 173-179): ensure no default serif fonts were introduced unless the brief explicitly names one.
4. Look for the Premium-Consumer Palette Ban (Section 4.2, lines 192-207): replace any warm-beige background or brass accent with an approved alternative.
5. Run Dependency Verification (Section 3.F): confirm every imported component library appears in package.json. If the generator added a custom SVG icon, force a library import instead.
6. Count eyebrows (uppercase tracking labels) across sections. If the count exceeds ceil(sectionCount / 3), remove excess eyebrows per Section 53 (lines 253-257).
7. Confirm Motion Motivation (Section 360): each animation block must have an accompanying comment answering “what does this animation communicate?” If missing, add a purposeful justification or lower MOTION_INTENSITY.
8. Re-run the skill with corrected prompts using npx skills run with explicit dial overrides.

Remediation Code Examples

Running the Skill with Explicit Dial Overrides

Use command-line flags to constrain the generator and prevent tells from emerging during the initial render.

# Install the skill

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# Run with strict controls to avoid common tells

npx skills run design-taste-frontend \
  --dial DESIGN_VARIANCE=4 \
  --dial MOTION_INTENSITY=3 \
  --dial VISUAL_DENSITY=4 \
  --brief "A minimalist SaaS landing page for a developer-tool, clean and fast."

The --dial flags map directly to the three-dial configuration in SKILL.md. Setting DESIGN_VARIANCE=4 prevents the centered-hero default, while MOTION_INTENSITY=3 blocks scroll-hijacking animations.

Adding a Motion-Motivation Comment

Every animation must include a justification comment formatted exactly as follows to satisfy Section 360.

/* -------------------------------------------------------------
   MOTION MOTIVATION: This scroll-reveal highlights the hero
   headline, drawing the eye from top to bottom as the user
   first lands on the page.
   ------------------------------------------------------------- */
"use client";

import { motion, useReducedMotion } from "motion/react";

export function Hero() {
  const reduce = useReducedMotion();
  return (
    <section className="min-h-[100dvh] flex items-center justify-center">
      <motion.h1
        initial={reduce ? false : { opacity: 0, y: -20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
        className="text-5xl font-bold"
      >
        Build Faster, Ship Smarter
      </motion.h1>
    </section>
  );
}

Enforcing the Serif Discipline

Only use serif fonts when the brief explicitly names one; otherwise, default to the sans-serif stack.

/* -------------------------------------------------------------
   SERIF DISCIPLINE: Only use a serif when the brief explicitly
   names one (e.g., "Playfair Display"). Otherwise fall back to
   the default sans-serif stack.
   ------------------------------------------------------------- */
import { cn } from "@/lib/utils";

export function Heading({ children }: { children: React.ReactNode }) {
  const useSerif = false; // change to true only if brief demands it

  return (
    <h2
      className={cn(
        "text-3xl font-semibold",
        useSerif ? "font-playfair-display" : "font-geist-sans"
      )}
    >
      {children}
    </h2>
  );
}

Key Rule Locations in the Repository

File	Purpose	Link
skills/taste-skill/SKILL.md	Master definition of all AI tell bans, dial logic, and pre-flight checks.	SKILL.md
skills/taste-skill-v1/SKILL.md	Legacy rule set for comparing v1 vs. v2 behavior.	SKILL.md (v1)
README.md	High-level installation instructions and skill list.	Repository README
skill.sh	Helper script used by the npx skills CLI for debugging runtime environments.	skill.sh
research/laziness/*	Background research motivating the "AI tells" bans.	Research folder

Common AI Tell Patterns Quick Reference

Tell	Symptom	Guardrail Location
Default neon / "AI-purple" gradients	Bright violet button glows, gradient backgrounds.	Section 4.2 "The LILA RULE" (lines 186-189)
Serif as default font	font-inter overridden by font-playfair without explicit brief instruction.	Section 4.1 "SERIF DISCIPLINE" (lines 173-179)
Premium-consumer beige/brass palette	Warm-cream background with brass accents for luxury branding.	Section 4.2 "PREMIUM-CONSUMER PALETTE BAN" (lines 192-207)
Placeholder SVGs / hand-rolled icons	Inline <svg> paths drawn manually instead of library imports.	Section 4.8 (lines 883-889)
Div-based fake screenshots	<div class="screenshot">…</div> instead of real image assets.	Section 4.8 (lines 890-894)
Excessive eyebrows	Upper-case tracking label above every heading.	Section 53 "Eyebrow Restraint" (lines 253-257)
Multiple split-header sections	Left-big headline / right-small paragraph pattern repeated.	Section 58 "Split-Header Ban" (lines 258-262)
Unmotivated motion	Random scroll-triggered animation with no purpose comment.	Section 360 "MOTION MUST BE MOTIVATED"
Multiple marquees	More than one horizontal scrolling text block on a page.	Section 61 "MARQUEE MAX-ONE-PER-PAGE"
Mixed icon libraries	Both @phosphor-icons/react and lucide-react in same project.	Section 3.C "Allowed libraries (priority order)"

Summary

• AI tells are stylistic shortcuts (gradients, default serifs, unmotivated motion) that the Taste Skill explicitly bans in skills/taste-skill/SKILL.md.
• Three Dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) control the strictness of the guardrails; high values allow tells to slip through.
• Dependency Verification and Pre-Flight Checks catch violations before code emission, provided the dials are properly configured.
• Motion Motivation comments and Serif Discipline gates require explicit justification for any animation or serif font usage.
• When a tell appears, tighten the brief, lower the relevant dial, or add the mandatory justification comment, then re-run with npx skills run.

Frequently Asked Questions

What are AI tells in design generation?

AI tells are repetitive stylistic artifacts—such as "AI-purple" gradients, generic serif fonts, and unmotivated animations—that large language models default to when generating UI code. According to the Leonxlnx/taste-skill specification, these patterns indicate lazy templating rather than purposeful design and are therefore banned or strictly gated by the skill engine.

How do the three dials prevent AI tells?

The Three Dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) act as constraint levers. When DESIGN_VARIANCE is set above 4, the agent may default to safe, centered layouts that often carry tell patterns; lowering it to 2 or 3 forces asymmetric compositions that avoid generic shortcuts. Similarly, reducing MOTION_INTENSITY blocks gratuitous scroll-hijacks that violate the "Motion Must Be Motivated" rule in Section 360.

Where are the AI tell rules defined in the Taste Skill repository?

All bans and guardrails are defined in skills/taste-skill/SKILL.md. Specific patterns are organized by section: Section 4.1 covers serif discipline, Section 4.2 covers color palette bans (including the "LILA RULE" for neon gradients), Section 53 governs eyebrow restraint, and Section 360 mandates motion motivation. Line numbers are stable references for troubleshooting specific violations.

Can I disable specific AI tell bans for experimental designs?

No individual rule can be disabled without modifying the SKILL.md source, as the bans are encoded as mandatory flags within the skill engine. However, you can relax enforcement by adjusting the Three Dials to higher values or by explicitly overriding layout constraints in your brief. If a specific tell is required for branding, you must provide explicit justification in the generation prompt to satisfy the pre-flight checks.

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