チューリングミラー

React + Tauri · デザインテンプレート

チューリングミラー UI TRM UI

デスクトップ製品のための UI/UX テンプレート

チューリングミラーのデスクトップ製品はすべて同じ UI から始まります。同じデザイントークン、コンポーネント、モーションを共有し、改善もここに集約します。React コンポーネントライブラリ、サイドバー型アプリシェル、8 言語 i18n、すぐに起動できる Tauri シェルを含み、製品コードは含みません。

npm install && npm run dev でコンポーネントギャラリーをプレビュー。Rust は不要です。

主な機能

  • トークンとテーマ

    色・余白・角丸・モーションを一元管理し、ライト / ダーク / システム連動の 3 テーマに対応。

  • コンポーネント

    ボタン、フォーム、セグメント、メニュー、モーダル、ドロワー、カレンダー、通知など。すべて実際に操作できます。

  • サイドバー型シェル

    タイトルバー、サイドバー、方向のあるページ遷移をそのまま新製品に。

  • 8 言語 i18n

    ビルド時にバンドルして即時切り替え。3 段階の検証スクリプト付きで、UI とシェルで言語ファイルを共有します。

  • Tauri シェル

    フレームレスウィンドウ、トレイ、自動起動、ログ、設定のアトミック書き込みを備え、すぐにウィンドウを開けます。

  • 控えめなデザイン

    枠線は少なく、色は控えめ。表示も非表示もアニメーションし、ホバーしたカードは浮かずに沈みます。

はじめかた

  1. プレビュー

    npm install && npm run dev を実行し、http://localhost:1410 でギャラリーを表示します。

  2. シェルごと起動

    Rust を導入して npm run tauri:dev を実行すると、実際のデスクトップウィンドウが開きます。

  3. プロジェクトに組み込む

    テンプレート本体は src/trm/ です。フォルダごとコピーして使えます。

ほかのプロダクト