Neon M5Stack 使用状況ゲージ

提供された参照画像を機能的な UI ベースとして使用し、M5Stack スタイルの 320×240 ディスプレイに適した洗練されたネオングリーンのサイバーパンク端末インターフェースに再設計します。同じ 2 つの使用メーターと全体的な情報階層を維持しますが、シンプルな黒のレイアウトを、細い光るベクター線画、角張ったフレーム付きパネル、ピクセル/等幅タイポグラフィ、および SF HUD 装飾に置き換えます。2 つのメーターを 2 つの積み重ねられたフレーム付きカードに変換します。1) 十字線アイコン、大きなパーセンテージ「{argument name="session percent" default="18%"}」、セグメント化された水平プログレスバー、および「{argument name="session reset text" default="RESET IN 2H 40M"}」と表示される時計/リセット行を備えた「SESSION 5H」。 2) 十字線アイコン付きの「WEEKLY 7D」、大きなパーセンテージ「{argument name="weekly percent" default="51%"}」、分割された水平プログレスバー、および「{argument name="weekly reset text" default="RESET IN 2D 17H"}」と表示される時計/リセット行を追加します。中央に「{argument name="header text" default="CLAUDE CODE USAGE"}」と表示される上部ヘッダーを追加し、両側に装飾的な斜めの目盛り、右上に小さなプラス記号を追加します。下部のステータスバーに、緑色のステータスドット、「RATE_LIM」、「MODE=FAST」、「13:28」、「CHG 75%」の5つの項目を正確に表示します。背景は黒、ストロークは明るい緑色、グリッド/バーのアウトラインは濃い緑色、レンダリングはピクセル単位で正確にレンダリングし、最終的な画像はフラットなモックアップではなく、洗練された組み込みデバイスのダッシュボードのように見えるようにします。