TUI Studio – ターミナルUIデザインツール

 (tui.studio)
33 ポイント 投稿者 GN⁺ 2026-03-14 | 1件のコメント | WhatsAppで共有
  • ターミナルベースのアプリケーションUIを視覚的に設計できる、Figmaに似たエディタ形式のツールで、ドラッグ＆ドロップ方式のインターフェースを提供
  • 20種類以上のTUIコンポーネントとCSSライクなレイアウトエンジンをサポートし、Box・Button・Table など多様な構成要素をリアルタイムANSIプレビューで配置可能
  • 8種類のカラーテーマとプロジェクトの保存・読み込み機能を提供し、.tui JSONファイルでチーム間共有が可能
  • 今後は Ink, BubbleTea, Blessed, Textual, OpenTUI, Tview など6つのフレームワークへのコード書き出し機能をサポート予定（現在はアルファ段階のため未動作）
  • macOS、Windows、Docker環境で実行可能で、オープンソースとして公開

概要

  • TUIStudio は、ターミナルアプリケーション向けの**テキストベースユーザーインターフェース（TUI）**を視覚的に設計できるツール
    • ユーザーはコードを書くことなく、視覚的なキャンバス上でコンポーネントを配置し、プロパティをリアルタイムで調整可能
    • Figmaに似た編集環境を提供

主な機能

  • Visual Canvas: ドラッグ＆ドロップで構成要素を配置し、リアルタイムANSIプレビューで結果を確認可能
  • 20種類以上のコンポーネント: Screen, Box, Button, TextInput, Table, List, Tree, Tabs, Modal, Spinner, ProgressBar などを含む
  • レイアウトエンジン: Absolute、Flexbox、Grid モードをサポートし、CSSに似たプロパティ制御が可能
  • 8種類のカラーテーマ: Dracula, Nord, Solarized, Monokai, Gruvbox, Tokyo Night, Nightfox, Sonokai などを提供
  • プロジェクトの保存/読み込み: .tui JSONファイル形式で保存し、可搬性とコラボレーションを支援

コード書き出し（Export）

  • 6つのフレームワークに対応予定: Ink(TypeScript), BubbleTea(Go), Blessed(JavaScript), Textual(Python), OpenTUI(TypeScript), Tview(Go)
  • 一度デザインしたUIを複数のフレームワーク向けコードへ変換可能
  • 現在はアルファ段階のため、コード書き出し機能は動作しない

対応プラットフォーム

  • macOS、Windows、Docker 環境で実行可能
  • macOS の場合、Gatekeeper のセキュリティ警告で実行がブロックされた際は、「右クリック → 開く → Open Anyway」の手順が必要
  • Windows ではSmartScreen 警告が表示されるが、「More info → Run anyway」で実行可能
  • Linux では特別な制約なくインストール可能 (dpkg -i またはファイルをダブルクリック)

ライセンスとアクセス

  • 現在はアーリーアクセス段階で、中核となる編集機能は無料で提供
  • 今後はPro バージョンで、チーム機能、クラウド同期、優先サポートなどの有料機能を追加予定
  • アカウントやクラウド接続なしでローカル保存およびGitコミット共有が可能

はじめに

  • Apple Silicon(M1〜M4) ベースの macOS 向けネイティブアプリを提供
  • インストール不要で、ダウンロード後すぐに実行可能
  • Windows および Docker 版もあわせて提供

関連記事

1件のコメント

 
GN⁺ 2026-03-14
Hacker News の意見

  • メインページの動画デモに再生/一時停止とコントロールバーがあればよかった
    見たい箇所へすぐ移動できるように、という意味
    実際の動画はここにある
    また、ターミナルのサイズを変更したときに要素を左/右に固定するオプションがあるのか、それともウィンドウを狭めるとテキストが折り返されたり画面外に押し出されたりするのか気になる

    • Firefox では右クリックして「Show controls」を選ぶとコントロールバーを表示できる

  • これらの UI はテキストベースではないと思う
    文字セル内で概念を 1:1 で表現しているからといって GUI ではないとは言えない
    UX の本質が重要で、TUI は効率性と強力さのために作られてきた（例: lazygit）
    しかし、マウスでクリック可能なタブ、ボタン、チェックボックスを追加したら、実質的には GUI の UX を適用しているのであって、GUI のように見える TUI にすぎない

    • 強く反対する。Borland TurboVision は DOS 時代最高の TUI ツールキットの 1 つで、チェックボックス、ラジオボタン、メニューなどのマウス対応が組み込まれていた
      Turbo Vision の Wikipedia 記事を参照
    • テキストで構成された要素を使っているなら、それは TUI だ
      どんなインターフェースでも効率的にも非効率的にもなりうる
      人々が TUI を好むのは、SSH 経由でのアクセス性と簡潔さのためだ
    • TUI はテキストで作られ、ターミナルの制約の中で動作する
      GUI はピクセル単位で制御されるグラフィックベースだ
      マウスも TUI も GUI より先に登場しており、今また実用上の理由から回帰してきている
    • これらの UI はテキストだけで構成されているので、明らかに TUI だ
      複数の TUI フレームワークにエクスポートできることがその証拠だ
    • Zellij のような例を見ると、すべてをキーボードで操作できる一方で、たまにマウスでタブをクリックしても機能は失われない
      そこまで哲学的・言語的な区別を強く設ける必要はないと思う

  • 興味深いのは、問題よりもツールの進化が 5〜10 年遅れて追いつくというパターンだ
    運用の複雑さはすでに存在しているが、多くの小さな主体に分散しているため、構造化されたソリューション市場の形成が遅れる
    これは行き止まりではなくシグナルだ。実際のワークフローに合った最初のツールが現れれば、大きなレバレッジを持てる

  • 私は TUI が低解像度の GUI のように見えることを望まない
    TUI の魅力は複雑さを捨てて、簡潔なテキスト中心のデザインを追求することにある

    • でも 1980〜1990 年代の TUI は実際に低解像度 GUI のように見えていた
      マウスがあるなら、発見しやすさ（discoverability） を高めるために活用したほうがいいと思う
    • だから私は TUI が好きではない
      複雑な情報や相互作用を表現しにくく、組み合わせ方を見つけるのも難しい

  • アイデアは面白いが、今は「コードのエクスポート機能が動いていない」
    つまり、まだ実際に TUI を作れる状態ではない

    • それでもレイアウト設計は可能だ
      ただ、彼らが目指しているレベルにはまだ達していない

  • 批判は無視するとしても、これは素晴らしいアイデアだと思う
    Borland 時代のノスタルジーを感じる。今後の発展が楽しみだ

    • ただし、根拠のある批判まで無視してはいけない
      「肯定だけを強調する態度」はかえって有害になりうる

  • Readme にもある通り、「vibe-coded trash」 のように見える
    こんなものがなぜフロントページに上がったのかわからない

    • これからはほぼすべてのソフトウェアがAI 支援を活用するようになるだろう
      AI で素晴らしいものも、ひどいものも作れる
      AI に対するイデオロギー的な反感は、思われているほど多数派ではない

  • プロジェクトが「vibe-coded」だということは、Web サイトの第一印象だけでも感じ取れる
    最近こういうサイトはどれも似たようなビジュアルスタイルをしている

    • ページを開いた瞬間にファンが回り始めた
      アニメーションが過剰で、特にgenAI 系サイトはその傾向が強い

  • コード生成がまだ動かないのに、なぜこれを使うべきなのかわからない
    このアプリの核心はまさにその機能ではないのか

    • 最近はTUI ブームが起きている
      レトロな美学とコマンドライン習熟への一種の「専門家文化」が結びついた現象だ
    • 単にAI で作った Web サイトを見せるためのもののようにも見える

  • メインページに成果物のスクリーンショットがもっとたくさんあればよかった