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. 01为 TinyShip 项目更换品牌
  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'

此名称会显示在页面标题、导航栏、电子邮件模板以及整个界面中。

步骤 2：徽标

TinyShip 支持两种徽标模式：

模式 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