Visual Studio Code拡張機能で利用してきた個人向けのGemini Code Assistは2026年6月18日をもって提供を終了(リクエスト処理を停止)しました。
後継であるAntigravity IDEでStarshipのプロンプトシミュレータを作ってみました。

環境構築

  • Windows 11
    • Antigravity IDE
      • Gemini 3.6 Flash

コード生成

  • プロンプト
    starshipプロンプトのシミュレータを作りたいです。
  • 生成されたコード
    https://github.com/ktkr3d/starship-prompt-simulator
  • URL
    コード生成後にnpm run dev実行され、localhost:5173へのアクセスを促されました。
  • スクリーンショット

Starship プロンプトシミュレータの実装計画

Starship(クロスプラットフォームで高速かつカスタマイズ自在なシェルプロンプト)の設定 (starship.toml) を、ブラウザ上でインタラクティブに編集・リアルタイムプレビューできるモダンな Web アプリケーションを構築します。

概要と目的

  • 目標: ブラウザ上で starship.toml の編集、ビジュアルフォーム操作、環境状態(Git status, 言語バージョン, エラーコード等)の変更を行い、Starship プロンプトのレンダリング結果をリアルタイムでグラフィカルにシミュレーションできる環境を提供します。
  • 主要ターゲット: Starship の導入・カスタマイズを検討している開発者、自分好みの美しいプロンプトテーマを作りたいユーザー。

主な機能

  1. インタラクティブ・ターミナルプレビュー (Interactive Terminal Canvas)

    • リアルタイムな Shell 端末風プレビュー UI(ダークモード / Glassmorphism / Vibrant Colors)
    • コマンド入力シミュレーション(ダミーコマンドの実行によるプロンプト表示切替)
    • Nerd Fonts / Powerline 記号・カラーパレットの完全再現
  2. TOML コードエディタ & ビジュアルコンフィグレータ

    • TOML コードエディタ: starship.toml の直接編集・リアルタイム構文解析(Validation)
    • ビジュアル GUI コントロール: 各モジュール (directory, git_branch, git_status, nodejs, python, rust, cmd_duration, status, character など) の ON/OFF、formatstylesymbol を GUI フォームで調整可能
    • プリセットテーマ切り替え: Tokyo Night, Catppuccin, Gruvbox, Powerline Rainbow, Minimal, Cyberpunk などの人気テーマをワンクリック適用
  3. 環境・コンテキストシミュレータ (Environment Controls)

    • ディレクトリパスの変更 (~/projects/my-awesome-app 等)
    • Git 状態の変更 (Branch 名, Clean / Staged / Modified / Untracked / Ahead / Behind)
    • 言語・ツールツールのバージョン変更 (Node.js, Python, Rust, Go, Docker, AWS, K8s)
    • 直前コマンドのステータス (Exit status 0 / 1 / 130) および実行時間 (e.g. 3.5s)
  4. エクスポート & インポート & ガイド

    • 作成した starship.toml のワンクリックコピー & ファイルダウンロード
    • 既存の starship.toml ファイルのアップロード・読み込み
    • 各シェル (Bash, Zsh, Fish, PowerShell, Nushell) への適用コマンドガイド

技術スタック

  • フロントエンド: React + TypeScript (Vite)
  • スタイリング: Modern Vanilla CSS / CSS Modules (Dark mode, Powerline Font Rendering, Glassmorphism, smooth animations)
  • TOML パート/シリアライザ: @iarna/toml または smol-toml
  • アイコン / フォント: Nerd Fonts (FiraCode Nerd Font / JetBrains Mono Nerd Font 互換の WebFont/SVG エンコーディング)

提案するファイル構成 (starship-prompt-simulator)

starship-prompt-simulator/
├── index.html
├── package.json
├── vite.config.ts
├── src/
│ ├── main.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── components/
│ │ ├── Header.tsx
│ │ ├── TerminalPreview.tsx
│ │ ├── ConfigEditor.tsx
│ │ ├── VisualControls.tsx
│ │ ├── EnvironmentControls.tsx
│ │ └── PresetsModal.tsx
│ ├── utils/
│ │ ├── starshipParser.ts
│ │ ├── promptRenderer.ts
│ │ ├── defaultConfigs.ts
│ │ └── presets.ts
│ └── types/
│ └── starship.ts

実装ステップ

Phase 1: プロジェクト基盤のセットアップ
  • Vite + React + TypeScript プロジェクトの初期化 (%USERPROFILE%\.gemini\antigravity\scratch\starship-prompt-simulator)
  • 必要な依存ライブラリ (smol-tomllucide-react 等) の導入
  • モジュールの型定義 (starship.ts) とデフォルト設定・プリセットの構築
Phase 2: コアレンダリングエンジン & TOMLパーサーの実装
  • TOML テキスト ↔ 設定オブジェクト間の相互変換ロジック
  • Starship の format 文字列展開エンジン($directory, $git_branch, $character 等のモジュールフォーマット展開、[text](style) 形式の ANSI/CSS カラー変換)
Phase 3: リッチな Terminal UI と環境コントローラーの構築
  • 端末ウィンドウ風 UI(Mac風 window controls, ANSIカラーターミナルスタイル, NERD font表示)
  • カレントパス、Gitステータス、言語バージョン、エラーコード等をインタラクティブに変更できるコントローラーパネル
Phase 4: エディタ UI & テーマプリセット & エクスポート機能
  • コードエディタと GUI フォームの同期編集
  • プリセットテーマセレクター
  • starship.toml のコピー・ダウンロード・コピーガイド modal

検証計画

自動テスト / ビルドチェック
  • npm run build による TypeScript 型チェックおよびバンドルエラー検証
  • TOML パーサー・レンダラーのユニットテスト/検証スクリプトの実行
手動検証
  • 各種テーマプリセット(Powerline, Catppuccin, Minimal 等)のレンダリング表示チェック
  • 環境ステータス(Gitブランチ名変更、エラーコード発動時)におけるプロンプトの動的変化チェック
  • 編集した TOML が正しくエクスポートされ、コピー/保存可能であることの確認

ユーザー確認事項

  1. 本シミュレータアプリを Vite + React (TypeScript) の構成で %USERPROFILE%\.gemini\antigravity\scratch\starship-prompt-simulator ディレクトリ内に新規作成します。問題ないでしょうか?
  2. プロジェクト完成後、上記ディレクトリを作業用ワークスペースとして指定することを推奨いたします。