mcpField
T
tinyship-brand

tinyship-brand

github.com/tinyshipcnデザイン・UI573 回インストール1 週間前に更新
リポジトリ

tinyship-brand について

TinyShipアプリの名前、ロゴ、テーマ、言語設定をカスタマイズするスキルです。設定ファイルの変更方法と、アプリで更新内容を確認する手順を説明します。

主な機能

  1. 01アプリ名のカスタマイズ
  2. 02アイコンとフルロゴの設定
  3. 03組み込み配色の選択
  4. 04カスタムテーマの登録
  5. 05デフォルト言語の設定
  6. 06ブランド設定の確認手順

活用シーン

  1. 01TinyShipプロジェクトのリブランド
  2. 02カスタム配色テーマの適用
  3. 03アプリのデフォルト言語の変更

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tinyshipcn/tinyship-skills --skill tinyship-brand

インストール後、Claude Code で/tinyship-brandを入力して読み込まれたか確認します。

詳細

TinyShip ブランドのカスタマイズ

カスタム名、ロゴ、テーマ、言語設定を使って TinyShip プロジェクトをリブランドするためのガイドです。

ステップ 1：アプリ名

プロジェクトルートの config.ts を編集します。

export const config = {
  app: {
    name: 'YourAppName',  // was 'TinyShip'

この名前は、ページタイトル、ナビバー、メールテンプレート、UI 全体に表示されます。

ステップ 2：ロゴ

TinyShip は 2 種類のロゴモードに対応しています。

モード A：アイコン＋テキスト（デフォルト）
  1. 正方形のアイコンを用意します（推奨：24x24px の SVG。色付きの背景に使用する場合は白で塗りつぶします）
  2. 使用するアプリの public/ フォルダーにファイルを配置します（例：apps/next-app/public/logo.svg）
  3. ドキュメントアプリが存在する場合は、apps/docs-app/public/ にも配置します
  4. config.ts を更新します。
logo: {
  iconUrl: '/my-logo.svg',
  fullLogoUrl: '',
  iconClassName: 'bg-blue-500 rounded-full p-1',
}
モード B：ロゴ画像全体
  1. 横長のロゴ画像を用意します（推奨：200x40px の PNG/SVG）
  2. 使用するアプリの public/ フォルダーに配置します
  3. config.ts を更新します。
logo: {
  iconUrl: '/my-icon.svg',
  fullLogoUrl: '/my-full-logo.png',
  iconClassName: '',
}

ステップ 3：カラーテーマ

TinyShip には、組み込みのカラースキームが 5 種類あります。

スキームスタイル
default青紫のグラデーションをあしらったクラシックなグレー
claude温かみのあるオレンジ系
cosmic-night深みのある紫、宇宙的な雰囲気
modern-minimal紫と青を基調にしたミニマルなデザイン
ocean-breeze爽やかな青緑系

config.ts を更新します。

theme: {
  defaultTheme: 'light',           // 'light' or 'dark'
  defaultColorScheme: 'claude',    // pick from table above
  storageKey: 'yourapp-ui-theme'   // change to avoid conflicts
}
カスタムテーマ

完全に独自のカラースキームを作成するには、次の手順を実行します。

  1. tweakcn.com/editor/theme にアクセスします
  2. ビジュアルエディターでテーマをデザインします
  3. CSS をエクスポートします
  4. libs/ui/styles/themes/ に新しいファイルを作成します（例：my-theme.css）
  5. エクスポートした CSS をクラスセレクター（例：.theme-my-theme）とともに追加します
  6. テーマ設定にテーマを登録します

テーマシステムの詳細については、libs/ui/AGENTS.md をお読みください。

ステップ 4：デフォルト言語

config.ts を更新します。

i18n: {
  defaultLocale: 'en',        // 'en' or 'zh-CN'
  locales: ['en', 'zh-CN'],
  cookieKey: 'NEXT_LOCALE',
  autoDetect: false            // set true to detect browser language
}

ステップ 5：確認

  1. 開発サーバーを起動して、次の項目を確認します。
    • ナビバーに新しい名前とロゴが表示される
    • テーマカラーが適用されている
    • デフォルト言語が正しい
  2. ダークモードに切り替えて、どちらのモードでもテーマが機能することを確認します
  3. 言語を切り替えて、i18n が引き続き機能することを確認します

TinyShip リポジトリ内の参考ファイル

  • config.ts — 編集するメインの設定ファイル
  • docs/user-guide/basic-config.md — ブランディングに関する詳細なドキュメント
  • libs/ui/styles/themes/ — テーマの CSS ファイル
  • libs/ui/AGENTS.md — テーマシステムのアーキテクチャ

コメント

Markdown 対応