Retrosystem

Retro Terminal

83
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI that channels the CRT monitor era — monospace everything, phosphor-green or amber on black, scan-line textures, blinking cursors. Nostalgic but functional, not just cosplay.

monospaceterminaldark modecli inspired

Added February 9, 2026 by unslop.dev

Example output

Status panel with ASCII borders

+----[ SYSTEM STATUS ]----+
$ api-server [OK]
$ database [OK]
$ worker-queue [WARN]
$ cache-layer [ERR]
$ cdn-nodes [OK]
> 4/5 services operational | last check: 14:32:07 UTC
View code
<div style="padding: 1.5rem; background: #0c0c0c; font-family: 'Courier New', Courier, monospace;">
  <div style="border: 1px solid rgba(74,222,128,0.2); padding: 1rem; max-width: 32rem;">
    <div style="color: #4ade80; font-size: 0.8125rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(74,222,128,0.15); padding-bottom: 0.5rem;">+----[ SYSTEM STATUS ]----+</div>
    <div style="display: flex; flex-direction: column; gap: 0.375rem;">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #22c55e; font-size: 0.8125rem;">$ api-server</span>
        <span style="color: #4ade80; font-size: 0.75rem; border: 1px solid rgba(74,222,128,0.3); padding: 0.0625rem 0.375rem;">[OK]</span>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #22c55e; font-size: 0.8125rem;">$ database</span>
        <span style="color: #4ade80; font-size: 0.75rem; border: 1px solid rgba(74,222,128,0.3); padding: 0.0625rem 0.375rem;">[OK]</span>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #22c55e; font-size: 0.8125rem;">$ worker-queue</span>
        <span style="color: #fbbf24; font-size: 0.75rem; border: 1px solid rgba(251,191,36,0.3); padding: 0.0625rem 0.375rem;">[WARN]</span>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #22c55e; font-size: 0.8125rem;">$ cache-layer</span>
        <span style="color: #ef4444; font-size: 0.75rem; border: 1px solid rgba(239,68,68,0.3); padding: 0.0625rem 0.375rem;">[ERR]</span>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #22c55e; font-size: 0.8125rem;">$ cdn-nodes</span>
        <span style="color: #4ade80; font-size: 0.75rem; border: 1px solid rgba(74,222,128,0.3); padding: 0.0625rem 0.375rem;">[OK]</span>
      </div>
    </div>
    <div style="color: #16a34a; font-size: 0.75rem; margin-top: 0.75rem; border-top: 1px solid rgba(74,222,128,0.15); padding-top: 0.5rem;">
      > 4/5 services operational | last check: 14:32:07 UTC
    </div>
  </div>
</div>

Command-line style form

[ NEW DEPLOYMENT ]
View code
<div style="padding: 1.5rem; background: #0a0f0a; font-family: 'Courier New', Courier, monospace;">
  <div style="border: 1px solid rgba(74,222,128,0.2); padding: 1.25rem; max-width: 28rem;">
    <div style="color: #4ade80; font-size: 0.8125rem; margin-bottom: 1rem;">[ NEW DEPLOYMENT ]</div>
    <div style="margin-bottom: 1rem;">
      <label style="display: block; color: #16a34a; font-size: 0.75rem; margin-bottom: 0.25rem;">> project_name</label>
      <input type="text" value="my-app-v2" style="width: 100%; background: #111611; border: 1px solid rgba(74,222,128,0.25); padding: 0.5rem 0.625rem; color: #4ade80; font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; border-radius: 0; outline: none; box-sizing: border-box;" />
    </div>
    <div style="margin-bottom: 1rem;">
      <label style="display: block; color: #16a34a; font-size: 0.75rem; margin-bottom: 0.25rem;">> target_env</label>
      <select style="width: 100%; background: #111611; border: 1px solid rgba(74,222,128,0.25); padding: 0.5rem 0.625rem; color: #4ade80; font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; border-radius: 0; outline: none; box-sizing: border-box; appearance: none;">
        <option>production</option>
        <option>staging</option>
        <option>development</option>
      </select>
    </div>
    <div style="margin-bottom: 1.25rem;">
      <label style="display: block; color: #16a34a; font-size: 0.75rem; margin-bottom: 0.25rem;">> commit_sha</label>
      <input type="text" value="a3f8c2d" style="width: 100%; background: #111611; border: 1px solid rgba(74,222,128,0.25); padding: 0.5rem 0.625rem; color: #4ade80; font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; border-radius: 0; outline: none; box-sizing: border-box;" />
    </div>
    <div style="display: flex; gap: 0.75rem;">
      <button style="background: transparent; border: 1px solid rgba(74,222,128,0.4); color: #4ade80; padding: 0.5rem 1rem; font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; cursor: pointer; text-transform: uppercase;">[ DEPLOY ]</button>
      <button style="background: transparent; border: 1px solid rgba(74,222,128,0.15); color: #16a34a; padding: 0.5rem 1rem; font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; cursor: pointer; text-transform: uppercase;">[ CANCEL ]</button>
    </div>
  </div>
</div>

Log / activity feed

+----[ DEPLOY LOG ]----+
14:32:01 [INFO] Starting deployment pipeline...
14:32:03 [INFO] Pulling image: registry/my-app:a3f8c2d
14:32:08 [OK]   Image pulled successfully (4.2s)
14:32:09 [INFO] Running health checks...
14:32:12 [WARN] High memory usage detected on node-03 (87%)
14:32:15 [OK]   Health checks passed (3/3 nodes)
14:32:16 [INFO] Swapping traffic to new version...
14:32:19 [ERR]  Connection timeout on node-02 (retrying...)
14:32:22 [OK]   Retry successful. Traffic swap complete.
14:32:23 [DONE] Deployment complete. v2.4.1 is live.
> 10 events | duration: 22s | exit_code: 0
View code
<div style="padding: 1.5rem; background: #0c0c0c; font-family: 'Courier New', Courier, monospace;">
  <div style="border: 1px solid rgba(74,222,128,0.2); padding: 1rem; max-width: 40rem;">
    <div style="color: #4ade80; font-size: 0.8125rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(74,222,128,0.15); padding-bottom: 0.5rem;">+----[ DEPLOY LOG ]----+</div>
    <div style="display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem;">
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:01</span>
        <span style="color: #4ade80; flex-shrink: 0;">[INFO]</span>
        <span style="color: #22c55e;">Starting deployment pipeline...</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:03</span>
        <span style="color: #4ade80; flex-shrink: 0;">[INFO]</span>
        <span style="color: #22c55e;">Pulling image: registry/my-app:a3f8c2d</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:08</span>
        <span style="color: #4ade80; flex-shrink: 0;">[OK]&nbsp;&nbsp;</span>
        <span style="color: #22c55e;">Image pulled successfully (4.2s)</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:09</span>
        <span style="color: #4ade80; flex-shrink: 0;">[INFO]</span>
        <span style="color: #22c55e;">Running health checks...</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:12</span>
        <span style="color: #fbbf24; flex-shrink: 0;">[WARN]</span>
        <span style="color: #eab308;">High memory usage detected on node-03 (87%)</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:15</span>
        <span style="color: #4ade80; flex-shrink: 0;">[OK]&nbsp;&nbsp;</span>
        <span style="color: #22c55e;">Health checks passed (3/3 nodes)</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:16</span>
        <span style="color: #4ade80; flex-shrink: 0;">[INFO]</span>
        <span style="color: #22c55e;">Swapping traffic to new version...</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:19</span>
        <span style="color: #ef4444; flex-shrink: 0;">[ERR]&nbsp;</span>
        <span style="color: #ef4444;">Connection timeout on node-02 (retrying...)</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:22</span>
        <span style="color: #4ade80; flex-shrink: 0;">[OK]&nbsp;&nbsp;</span>
        <span style="color: #22c55e;">Retry successful. Traffic swap complete.</span>
      </div>
      <div style="display: flex; gap: 0.75rem;">
        <span style="color: #16a34a; flex-shrink: 0;">14:32:23</span>
        <span style="color: #4ade80; flex-shrink: 0;">[DONE]</span>
        <span style="color: #4ade80; font-weight: bold;">Deployment complete. v2.4.1 is live.</span>
      </div>
    </div>
    <div style="color: #16a34a; font-size: 0.6875rem; margin-top: 0.75rem; border-top: 1px solid rgba(74,222,128,0.15); padding-top: 0.5rem;">
      > 10 events | duration: 22s | exit_code: 0
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a retro terminal style — the ghost of CRT monitors past. Everything looks like it belongs on a phosphor screen in 1983, but it actually works as modern UI. Monospace everything, green-on-black or amber-on-black, hard edges, no decoration except ASCII art. Nostalgic and functional, not a costume.

VISUAL RULES:
- Typography: Monospace ONLY. Every single element — headings, body, labels, buttons, inputs — uses `font-family: 'Courier New', Courier, monospace`. No sans-serif anywhere.
- Background: Near-black with optional green tint. #0c0c0c (pure dark) or #0a0f0a (green-tinted). Cards/panels use the same or very slightly lighter (#111611).
- Text color: Phosphor green (#4ade80 for bright, #22c55e for standard, #16a34a for dimmed). OR amber mode (#fbbf24 for bright, #eab308 for standard). Pick one phosphor color per component, don't mix green and amber.
- Borders: 1px solid in the accent color at low opacity. `border: 1px solid rgba(74,222,128,0.2)`. No thick borders. Sharp corners ONLY — border-radius: 0 everywhere.
- No shadows. Zero. Shadows don't exist on CRT monitors.
- No images or icons. Use ASCII characters for decoration: `[`, `]`, `|`, `-`, `+`, `*`, `>`, `$`, `_`, `#`, `=`.
- Labels: Prefix with `>` or `$`. Example: `$ username`, `> status`.
- Status indicators: Text badges like `[OK]`, `[ERR]`, `[WARN]`, `[...]`, `[DONE]`. Green for success, red (#ef4444) for errors, amber for warnings.
- Inputs: Dark background, monospace text, green/amber color, no border-radius, 1px accent border. Placeholder text uses dimmed accent.
- Spacing: Tight and grid-like. Padding p-3 to p-4. Think terminal rows, not airy layouts.

SPECIFIC PATTERNS:
- Panels: bg-[#0c0c0c] border 1px accent/20 p-4. Header row with ASCII borders like `+--- TITLE ---+` or `[ TITLE ]`.
- Buttons: bg-transparent border 1px accent text in accent color. Uppercase. Brackets around text: `[ SUBMIT ]`. Hover: bg accent/10.
- Inputs: bg-[#111] border 1px accent/30 text in accent color. Prefix label with `>`.
- Tables/lists: Use `|` for column separators. `-` or `=` for horizontal rules. Align with monospace grid.
- Activity logs: Each line prefixed with timestamp in dimmed color. Status codes in brackets. Newest on top or bottom, consistent.

ANTI-PATTERNS:
- No border-radius anywhere. Every corner is 90 degrees.
- No shadows of any kind.
- No images, SVGs, or emoji.
- No color variety — only the phosphor color (green or amber) plus red for errors. No blues, purples, pinks.
- No sans-serif or serif fonts. Monospace only.
- No gradients. Flat colors only.
- No rounded buttons or pill shapes.

Related prompts

// system metrics
cpu load 23.4%
memory 8.2 / 16 GB
disk i/o 94.1%
> uptime: 14d 6h 32m node-07
Retro

Cyberpunk Neon

🔥88system

Generates UI drenched in neon glow — cyan, magenta, and violet on near-black surfaces. Glowing borders, scan-line textures, HUD-style overlays. Blade Runner meets Bloomberg Terminal.

Now Playing
Live

Side B — Evening Mix

Recorded Feb 14, 2026 · C-90

27:14
Retro

Cassette Tape

🔥79system

Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.

* Lecture 12 — Data Structures

A binary search tree maintains sorted order through its structure. For any node n, all values in the left subtree are < n and all values in the right subtree are > n.

→ see also: AVL trees, Red-Black trees
Retro

Chalk Blackboard

🔥78system

Generates UI that feels hand-drawn on a dusty blackboard — chalky white text on dark slate green, imperfect lines, mathematical notation vibes, and the nostalgic warmth of a classroom after hours.