Home/UI & Social Screens/Retro Claude Code Usage Gauge

UI & Social Screens

Retro Claude Code Usage Gauge

Retro Claude Code Usage Gauge is a reusable UI & Social Screens example from 潮留, including the full prompt, source link, and output media.

Case Media

Case Notes

This page keeps the media, full prompt, and original source together so you can inspect the result first and decide whether the prompt is worth copying, saving, or comparing.

Case Insights

To make this page easier to search, cite, and reuse later, the case is also broken down into practical guidance about usage, visual cues, and prompt structure.

Best Fit Scenarios

  • Use this as a ui & social screens benchmark when you need a fast style baseline before rewriting your own prompt.
  • It is especially helpful if your target overlaps with Neon, UI, Screenshot and you want to judge the image result before tuning wording.
  • Keep it as a control sample when you compare nearby prompt variants one variable at a time.

Visual Signals To Notice

  • The clearest style signals here are Neon, UI, Screenshot, so those should usually stay in your first rewrite.
  • The important layer is usually interface density, card hierarchy, and how the screen tells the story before you read small text.
  • This case keeps one primary output, so the first image should be treated as the main visual reference.

How The Prompt Is Structured

  • The prompt reads as a long, highly specified prompt, which is useful when you want to judge how much specificity this direction needs.
  • Its keyword cluster is centered on Neon, UI, Screenshot, so you can usually keep that cluster while swapping subject, camera, layout, or copy details.
  • A practical rewrite path is: keep the outcome, keep the strongest style cues, then replace only the subject and environment blocks.

Good Follow-up Questions

  • What changes first if you keep Neon, UI, Screenshot but switch the subject matter?
  • Which part of the result comes from section-level structure (UI & Social Screens) versus tag-level style cues?
  • Which related cases in the same section give you a cleaner or more extreme variation of the same direction?

Full Prompt

Using REFERENCE_0 as the functional layout and data source, redesign it as a polished monochrome neon-green retro terminal UI for an M5Stack-style low-resolution display. Keep the same concept of a Claude Code usage gauge with 2 usage panels: SESSION 5H and WEEKLY 7D. Convert the plain progress bars into segmented pixel bars with 24 rectangular blocks each, preserve the approximate usage values but update the visible numbers to {argument name="session percentage" default="18%"} and {argument name="weekly percentage" default="51%"}. Add thin glowing green borders around each panel, pixel/bitmap typography, small target/crosshair icons beside the panel titles, and clock icons beside the reset lines. Replace the simple title with a decorative header reading {argument name="headline text" default="CLAUDE CODE USAGE"}, flanked by terminal-like slashes and line ornaments. At the bottom, add a retro status row with a flag/terminal outline icon, green connection dot, {argument name="connection label" default="CONNECTED"}, MODE=FAST, {argument name="time" default="12:52"}, and CHG 75% with a small battery/charging icon. Use a black background, bright CRT green lines, crisp pixel art styling, and make the result look like a refined embedded-device dashboard rather than a flat chart.

Related Cases