The Terminal Mockup Problem: Why Those 3 Dots Ruin Your Design

Ask Cursor or v0 to "show a code example on the hero" and you get the same thing every time: a bg-gray-900 rectangle, three little circles in red, yellow, and green up in the corner, and some font-mono text glowing text-green-400 underneath. The fake terminal window. It shows up on roughly 40% of AI-generated developer-tool landing pages, which makes it one of the fastest AI tells there is. Spot the dots and you can usually skip the rest of the audit. It is one of the 90+ AI design patterns that Sailop detects automatically.

Why AI Loves the Terminal Mockup

The pattern saturated developer-tool marketing from roughly 2020 to 2025, so it sits at the dense center of every model's training distribution. Ask for "CLI output" and the terminal mockup is the highest-probability container; the three dots are the highest-probability decoration on top of it. You get the median of ten thousand SaaS homepages:

<!-- What AI generates 80%+ of the time -->
<div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
  <div class="flex items-center gap-2 px-4 py-3 bg-gray-800">
    <div class="w-3 h-3 rounded-full bg-red-500"></div>
    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
    <div class="w-3 h-3 rounded-full bg-green-500"></div>
  </div>
  <pre class="p-4 text-green-400 font-mono text-sm">
    $ npm install sailop
  </pre>
</div>

The combo is predictable enough that Sailop ships a dedicated rule for it: component-terminal-mockup. It matches the three-dots-plus-pre structure and flags it on sight.

The Three Problems With Terminal Mockups

Problem 1: They Are Decorative Lies

Red, yellow, and green are macOS window controls: close, minimize, maximize. But this element is not a window. You cannot close it, minimize it, or zoom it. The dots are pure ornament referencing an OS that, on a typical dev-tool audience, fewer than 40% of visitors even run.

And the recreation is wrong anyway. Real macOS traffic-light buttons are about 12px across with roughly 8px between centers, sit ~20px from the left, and brighten with an inner glyph (×, −, +) on hover. The AI version is three w-3 h-3 circles (12px) with a flat gap-2 (8px) and zero hover state. It is skeuomorphism that fails the skeuomorphism test. That gap between "looks like a window" and "behaves like nothing" is exactly the kind of decorative-not-functional tell that gives the whole page away.

Problem 2: They Signal "Generic Developer Tool"

The terminal mockup says "this is a developer tool" the way a stethoscope icon says "this is a healthcare app." It communicates the category and nothing about the identity. When every dev tool reaches for the same dark box and green text, none of them read as distinct.

Two approaches, two reactions:

Approach A: Terminal mockup with three dots
→ User reads: "another dev tool"

Approach B: Styled code block, the actual command + its real output
→ User reads: "this tool does this specific thing"

A communicates category. B communicates function. The hero should do B. This is the same trap that turns landing pages into identical clones the moment everyone reaches for the same default.

Problem 3: They Waste Vertical Space

The fake title bar with the dots eats 40-50px of vertical height that shows nothing. On the hero, that is 40-50px pushed between your headline and the one thing you actually want people to read: the command. On a 667px-tall mobile viewport, burning that on chrome that does nothing is a real cost.

<!-- ~48px wasted on a title bar that does nothing -->
<div class="terminal-mockup">
  <div class="title-bar">● ● ●</div>
  <pre>sailop check ./src</pre>
</div>

<!-- 0px wasted. Same information. -->
<pre class="bg-stone-900 text-stone-100 p-5 rounded-sm
  font-mono text-sm border border-stone-700">
sailop check ./src
</pre>

What Sailop Flags

Sailop's component rules detect terminal mockups structurally, not by keyword:

sailop check ./src/components/CodeDemo.tsx

# [HIGH] component-terminal-mockup: Fake terminal window with
#   decorative dots detected. Use a styled <pre> or <code> block.
# [MEDIUM] component-green-text-dark-bg: green-on-dark scheme
#   matches the AI terminal stereotype (text-green-400 on bg-gray-900).

The rule fires on the intersection of three things: a dark container, a child holding three small same-size circles, and a pre or code element. That structural fingerprint is specific enough to flag with high confidence and almost never false-positive on real UI.

Better Alternatives

Alternative 1: Clean Code Block

A pre with intentional styling and, critically, real output instead of a lone install command:

<pre class="bg-[hsl(28,8%,10%)] text-[hsl(35,20%,82%)] p-6
  rounded-sm font-mono text-sm leading-relaxed
  border border-[hsl(28,10%,20%)]">
<code>$ sailop check ./src --max-score 40
Score: 34/100 (Grade B)
All checks passed.</code>
</pre>

No dots, no fake title bar. The color choices do the work: a warm-tinted hsl(28,8%,10%) background instead of the default gray-900, a rounded-sm corner instead of rounded-lg. Small deviations from the defaults, but they are why this does not read as machine-generated. (If you are still reaching for bg-gray-900 everywhere, that is its own dark-hero AI default.)

Alternative 2: Inline Code With Context

Drop the container entirely and put the command in the sentence:

<p class="text-lg">Install with
  <code class="bg-stone-100 px-2 py-0.5 rounded-sm
    font-mono text-sm">npx sailop install</code>
  and run
  <code class="bg-stone-100 px-2 py-0.5 rounded-sm
    font-mono text-sm">sailop check ./src</code>
  in your project root.
</p>

The command is part of the prose. It reads naturally and needs no window cosplay around it.

Alternative 3: Interactive Demo

If the command is a focal point, make it do something:

<div class="bg-stone-50 border border-stone-200 p-6 rounded-sm">
  <label class="text-sm font-medium text-stone-500">
    Try it on your project
  </label>
  <div class="mt-2 flex items-center gap-3">
    <code class="flex-1 bg-white border border-stone-300
      px-4 py-2 font-mono text-sm rounded-sm">
      sailop check ./src --max-score 50
    </code>
    <button class="px-4 py-2 bg-stone-800 text-white text-sm
      rounded-sm" onclick="navigator.clipboard.writeText(
      'sailop check ./src --max-score 50')">
      Copy
    </button>
  </div>
</div>

A copy button is functional; people actually want the command on their clipboard. Three colored dots are decorative; nobody wants to pretend they are staring at a macOS window.

Alternative 4: A Real Screenshot

If you want to show what the tool looks like, screenshot the real thing running the real command. Not a CSS recreation. A real terminal with real wrapping, real color, real cursor. Authenticity reads as authenticity, and no amount of rounded-lg recreation gets there.

The Broader Pattern

The terminal mockup is one instance of a habit covered in our complete guide to anti-AI design: AI reaches for skeuomorphic decoration where the situation calls for function. The three dots are decorative. The hover:scale-105 lift is decorative. The blue-to-purple gradient is decorative. None of them carry information.

Sailop's rules tilt the other way, toward function:

• Use a

   instead of a terminal mockup (functional)

• Use translateY(-1px) instead of scale(1.05) plus a drop shadow (subtle)
• Use a solid accent instead of a gradient (clear)
• Use a border instead of a glow shadow (structural)

Replace a decoration with a function and the design gets more honest. Honest design tends to be unique design, because the AI defaults are almost always the decorative choice. From here, learn how to detect AI-generated code in 30 seconds with the CLI, or build a unique landing page without looking AI-generated.

npx sailop install
sailop check ./src --dimension components

Remove the three dots. Add a copy button. Ship something functional instead of decorative. Start scanning at sailop.com.