バイブコーディングでMicrosoft Editの見た目を変えてもらった

先日リリースされたMicrosoft Editは、クロスプラットフォーム対応で、TUIなのにメニューがマウスクリックできるなど、なかなか興味深い。

でも見た目がどことなくDOSっぽいので、今時のTUIアプリケーションっぽくしてもらいました。

Geminiにつくってもらった、Gemini CLIへの依頼がこちら。

### UI Improvement Instructions for GeminiCLI

**Theme: Modernizing the Retro TUI (Text User Interface)**

Please update the UI design based on the following requirements to move away from the "Classic DOS" look while maintaining its functional layout:

#### 1. Typography & Font Rendering
* **Recommendation:** Switch from the system default monospace font to a modern, high-quality Nerd Font (e.g., **JetBrains Mono**, **SF Mono**, or **Fira Code**).
* **Instruction:** "Use a modern programming font with ligatures and adequate line-height (around 1.2 to 1.4) to improve readability and eliminate the cramped DOS-era feel."

#### 2. Borders and Frames (The Menu Box)
* **The Issue:** The heavy, double-line or ASCII borders contribute to the dated look.
* **Instruction:** "Replace the heavy ASCII borders with **Unicode thin-line characters** or **rounded corner borders**. Alternatively, remove the hard borders of the dropdown menus and use a subtle **drop shadow** effect or a contrasting background color to create depth without using lines."

#### 3. Color Palette Refresh
* **The Issue:** The high-contrast "Navy Blue and Bright White" is straining.
* **Instruction:** "Adopt a more sophisticated color scheme such as **Nord**, **Solarized**, or **Tokyo Night**. Use a slightly desaturated background (e.g., `#24283b`) and utilize softer foreground colors for the text. Highlight the selected menu item using a subtle pastel accent color rather than high-contrast neon green."

#### 4. UI Elements & Spacing
* **Instruction:** "Add **horizontal padding** to the menu items so the text doesn't sit directly against the border. Ensure the status bar at the bottom uses consistent spacing and perhaps small icons (via Nerd Fonts) for [CRLF] and [UTF-8] to make it look like a modern IDE/Neovim setup."

この時点では絵文字が文字化けしてたり、まだ改善が必要な状況でした。

そこで今度はClaudeに改善点を考えてもらい、指示を書き起こしてもらいました。

Please update the UI with the following changes. 
The goal is a "modern code editor" feel (like VS Code or Zed), not a terminal emulator.

#### 1. Remove Menu Box Borders Entirely
- Do NOT use any box-drawing characters (─ │ ┌ ┐ └ ┘ etc.) for the dropdown menu frame.
- Instead, create depth using ONLY background color contrast and a simulated drop shadow 
  (offset by 1 row/col using a darker background block).

#### 2. Font: Switch Away from Monospace
- Use a **sans-serif** or **proportional** fallback font stack:
  `font: "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif`
- If the UI framework supports it, set font-weight to 400 for body and 600 for menu headers.
- Increase line-height to 1.4.

#### 3. Cross-Platform Emoji Safety
- For icons, use ONLY emoji from the "Basic Multilingual Plane" that render consistently 
  on Windows (PowerShell), macOS Terminal, and Linux (GNOME Terminal / Alacritty):
  - ✓ Safe: U+2500–U+25FF range symbols, or simple emoji like 📄 📁 ✏️ 🔍
  - ✗ Avoid: Nerd Font private-use codepoints (U+E000–U+F8FF) unless Nerd Font is confirmed installed.
- Specifically for the status bar, replace the ◆ separator with a safe alternative: 
  a simple space-padded pipe " | " or the bullet "·" (U+00B7), which is universally supported.

#### 4. Color Palette: Tokyo Night
Apply these exact hex values:
- Background:        #1a1b26
- Menu background:   #24283b
- Menu selected bg:  #364A82
- Text (normal):     #c0caf5
- Text (dim):        #565f89
- Accent / active:   #7aa2f7
- Drop shadow color: #0d0e17

#### 5. Menu Item Padding & Spacing
- Add at least 2 character widths of horizontal padding inside each menu item.
- Ensure the keyboard shortcut hints (Ctrl+Z etc.) are right-aligned within the menu column,
  separated from the label by flexible spacing, not hard-coded spaces.

#### 6. Status Bar
- Left side:  show CRLF and UTF-8 with a leading emoji for quick recognition:
  `↵ CRLF  |  🔤 UTF-8  |  ␣×4  |  Ln 1, Col 1`
- Right side: filename only, no icon needed.
- Background: slightly lighter than editor bg, e.g., #16161e.

そしてメニューの枠線を取り除いてもらいました。

#### 7. Borderless Floating Menu (Most Important Change)
- Remove ALL borders from the dropdown menu, including drop shadows made of characters.
- The menu should appear as a plain colored rectangle floating over the editor content,
  distinguished ONLY by its background color (#24283b) against the editor background (#1a1b26).
- This is how modern TUI apps like lazygit, Helix, and btop render overlays.
- The selected item should be highlighted with a full-width background color change (#364A82),
  with NO underline, NO bullet, and NO arrow prefix.
- Menu should have 1 blank line of top/bottom padding (empty row inside the menu area),
  and each item should have 2 spaces of left/right padding: "  Undo        Ctrl+Z  "

コンパイル時のエラーを修正してもらい、完成！

そしてMacで起動した様子がこちら。
DOSっぽさがかなり軽減できましたね。

コードはこちらにあります