跳转到主要内容
90% 的自定义集中在三个文件：src/config/site.ts、src/app/globals.css、 messages/{en,zh}.json。剩下是换 logo SVG、改邮件模板、重排营销 block。本页是地图。

​
品牌

改 src/config/site.ts —— 中心配置： 
export const siteConfig = {
  name: 'YourProduct',
  description: '一段话的产品介绍。',
  shortDescription: '一句话的标语。',
  url: 'https://your-domain.com',
  ogImage: '/og.png',
  links: {
    github: 'https://github.com/yourorg/yourrepo',
    twitter: 'https://twitter.com/yourhandle',
    discord: 'https://discord.gg/yourchannel',
    contact: 'mailto:[email protected]',
  },
  mail: {
    fromName: 'YourProduct',
    supportEmail: '[email protected]',
  },
};
文件保持在 250 行内。重业务逻辑（定价数学、AI provider 设置）放各自模块——参考 src/ai/pricing.ts 的写法。

​
颜色

Tailwind v4 从 src/app/globals.css 的 @theme 读 token。所有颜色都是 OKLCH——感知均匀、色相旋转可预测、用 OKLCH 取色器复制粘贴友好。 
:root {
  --primary: oklch(0.205 0 0);          /* 接近黑、中性 */
  --primary-foreground: oklch(0.985 0 0);
  --background: oklch(1 0 0);
  /* ……完整 token 在 globals.css */
}

.dark {
  --primary: oklch(0.985 0 0);          /* 暗色模式反转 */
  /* ... */
}
用 OKLCH 取色器选品牌色，再扫一遍 --primary、--primary-foreground、--accent、--ring、 --chart-{1..5}。shadcn/ui 组件按名引用这些 token，改一处全部翻新。

​
字体

默认 Geist Sans + Geist Mono，在 src/app/layout.tsx 通过 next/font/google 加载： 
import { Geist, Geist_Mono } from 'next/font/google';
const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] });
const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'] });
换成任意 next/font/google 字体即可。把 globals.css 里的 --font-sans / --font-mono 同步 到对应 CSS 变量名就行——不用动 Tailwind 配置。

​
营销文案

所有页面文案在 messages/en.json 和 messages/zh.json 的 Home 命名空间下。两文件 key 结构 必须完全一致——next-intl 在 build 时对 key 漂移会报错。 
"Home": {
  "hero": {
    "title": "你的 hero 标题",
    "subtitle": "你的副标题。"
  }
}
热更新立即生效。加新 key 时同一个 commit 里两边都加。

​
Hero / features 排版

首页是一摞独立 block，在 src/app/[locale]/(marketing)/page.tsx 组合： 
<Hero />
<LogoCloud />
<Features />
<UseCases />
<WhyVibestrap />
<Quickstart />
<Pricing />
<FAQ />
<NewsletterCard />
<CTA />
任意重排或删除。每个 block 是 src/components/blocks/ 里自包含的组件，从 messages/{locale}.json 读文案——跨边界不需要 prop 传递。

​
定价

siteConfig 里有两套独立的定价面： vibestrap 自身的定价（你卖给买家的）： 
product: {
  standardPriceCents: 9900,        // $99
  promo: { active: true, priceCents: 4900 }, // $49 限时
}
切 promo.active 在两档之间翻转。hero、pricing block、checkout 都读 activePriceCents()， 改一处全联动。 下游 app 示例定价（买家给自己用户展示的订阅+积分包）： 
plans: { free, pro, lifetime },
creditPacks: [ basic, standard, premium, enterprise ],
会渲染到 /settings/billing 和 /settings/credits。买家产品收什么价，就把示例换成什么。 默认 header 和 footer 用 lucide-react 的 Sparkles 图标。两处都换： 
// src/components/layout/header.tsx
import { Sparkles } from 'lucide-react';
// → 换成你自己的 SVG 组件或 <Image src="/logo.svg" .../>
<Sparkles className="size-5 text-primary" />
同一处改在 src/components/layout/footer.tsx。OG 图换 public/og.png（1200x630，PNG 或 JPG）。

​
邮件模板

React Email 模板在 src/mail/templates/：
  • verify-email.tsx —— 注册验证。
  • welcome.tsx —— 验证完毕后发。
  • forgot-password.tsx —— 密码重置链接。
像普通 React 组件一样改。品牌信息（siteConfig.name、siteConfig.mail.supportEmail）已经接上。 email-dev 脚本上线前的本地预览：触发 auth 流，看 dev 控制台的渲染输出。

​
加 locale

  1. 在 src/config/site.ts 加 locale 代码： 
    i18n: { defaultLocale: 'en', locales: ['en', 'zh', 'ja'] }
  2. 建 messages/ja.json，key 结构镜像 en.json。
  3. 文档若要上线，每篇 *.zh.mdx 都翻一份 *.ja.mdx。
  4. 完事。URL 自动变成 /ja/...。

​
另见

  • 配置 —— 每个 siteConfig 字段。
  • 架构 —— block、主题、provider 怎么串起来。
  • Env 参考 —— 控制 feature 开关的 key。