设计系统

ProductReady 使用基于 CSS 变量 的现代设计系统，可轻松自定义颜色、排版和组件以匹配您的品牌。

零配置主题：ProductReady 默认使用系统中性色调。您可以自定义任何内容，也可以保持原样 - 两者都很棒！

快速概览

什么可以自定义：

🎨 颜色（浅色/深色模式）
📐 圆角半径
🔤 字体和排版
🧩 组件样式

在哪里自定义：

src/app/global.css - CSS 变量和全局样式
tailwind.config.ts - Tailwind 配置
src/components/ui/ - 组件样式

颜色系统

CSS 变量

ProductReady 使用 CSS 变量进行颜色管理。所有颜色都在 src/app/global.css 中定义：

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    /* ... 更多变量 */
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    /* ... 深色模式变量 */
  }
}

颜色变量

语义变量：

--background - 页面背景
--foreground - 主要文本颜色
--primary - 主要颜色（按钮、链接）
--secondary - 次要元素
--muted - 静音/禁用元素
--accent - 强调/高亮
--destructive - 错误/危险操作
--border - 边框
--input - 输入字段
--ring - 焦点环

组件特定：

--card - 卡片背景
--popover - 弹出框背景
--sidebar - 侧边栏背景

更改颜色主题

方法 1：使用主题生成器

使用 Shadcn 主题生成颜色方案：

访问 ui.shadcn.com/themes

选择一个主题或自定义颜色

复制生成的 CSS

粘贴到 src/app/global.css 中的 :root 和 .dark

方法 2：手动自定义

紫色主题示例：

:root {
  --primary: 258 90% 66%;        /* 紫色 */
  --primary-foreground: 0 0% 100%;
  
  --secondary: 258 60% 90%;      /* 浅紫色 */
  --secondary-foreground: 258 90% 30%;
  
  --accent: 258 80% 70%;         /* 强调紫色 */
  --accent-foreground: 0 0% 100%;
}

.dark {
  --primary: 258 90% 66%;
  --primary-foreground: 0 0% 100%;
  
  --secondary: 258 30% 20%;
  --secondary-foreground: 258 60% 90%;
}

方法 3：使用在线工具

尝试这些颜色选择器：

Realtime Colors - 实时预览
HSL Color Picker - HSL 格式
Coolors - 调色板生成器

理解 HSL

ProductReady 使用 HSL（色相、饱和度、亮度）颜色：

--primary: 258 90% 66%;
           ↑   ↑   ↑
           H   S   L

H (色相)：0-360（颜色类型）
- 0° = 红色，120° = 绿色，240° = 蓝色
S (饱和度)：0-100%（颜色强度）
L (亮度)：0-100%（亮/暗）

示例：

--blue: 210 100% 50%;      /* 鲜艳的蓝色 */
--pale-blue: 210 50% 80%;  /* 浅蓝色 */
--dark-blue: 210 100% 25%; /* 深蓝色 */

深色模式

自动切换

ProductReady 使用 next-themes 自动深色模式：

// 已在 layout.tsx 中设置
<ThemeProvider attribute="class">
  {children}
</ThemeProvider>

主题切换器

添加主题切换按钮：

// components/theme-toggle.tsx
import { useTheme } from "next-themes";
import { Button } from "kui/button";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <Button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      {theme === "dark" ? "🌞" : "🌙"}
    </Button>
  );
}

测试深色模式

// 在浏览器控制台
document.documentElement.classList.add('dark');    // 深色
document.documentElement.classList.remove('dark'); // 浅色

排版

字体

ProductReady 使用 Next.js 字体优化：

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      {children}
    </html>
  );
}

更改字体

使用 Google 字体：

import { Poppins } from "next/font/google";

const poppins = Poppins({ 
  weight: ["400", "600", "700"],
  subsets: ["latin"] 
});

使用自定义字体：

import localFont from "next/font/local";

const myFont = localFont({
  src: "./fonts/MyFont.woff2",
  display: "swap",
});

圆角

全局圆角

在 global.css 中更改：

:root {
  --radius: 0.5rem; /* 默认 */
}

/* 更圆润 */
:root {
  --radius: 1rem;
}

/* 方形 */
:root {
  --radius: 0rem;
}

特定组件

/* 按钮更圆 */
button {
  border-radius: calc(var(--radius) + 0.25rem);
}

/* 卡片方形 */
.card {
  border-radius: 0;
}

自定义组件

方法 1：修改现有组件

// components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        // 添加新变体
        brand: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
      },
    },
  }
);

使用：

<Button variant="brand">My Brand Button</Button>

方法 2：扩展现有组件

// components/custom-card.tsx
import { Card } from "kui/card";

export function BrandCard({ children }) {
  return (
    <Card className="border-2 border-primary shadow-lg">
      {children}
    </Card>
  );
}

方法 3：创建新组件

// components/feature-card.tsx
export function FeatureCard({ title, icon, description }) {
  return (
    <div className="rounded-lg border bg-card p-6 shadow-sm hover:shadow-md transition-shadow">
      <div className="text-4xl mb-4">{icon}</div>
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </div>
  );
}

间距

Tailwind 间距比例

ProductReady 使用 Tailwind 的默认间距：

// 间距值
p-0   = 0px
p-1   = 0.25rem  (4px)
p-2   = 0.5rem   (8px)
p-4   = 1rem     (16px)
p-6   = 1.5rem   (24px)
p-8   = 2rem     (32px)
p-12  = 3rem     (48px)

自定义间距

在 tailwind.config.ts 中添加：

export default {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

阴影

默认阴影

/* Tailwind 阴影 */
shadow-sm   /* 小 */
shadow      /* 中 */
shadow-md   /* 大 */
shadow-lg   /* 超大 */
shadow-xl   /* 巨大 */

自定义阴影

// tailwind.config.ts
export default {
  theme: {
    extend: {
      boxShadow: {
        'glow': '0 0 20px rgba(124, 58, 237, 0.5)',
        'brutal': '8px 8px 0px rgba(0, 0, 0, 1)',
      },
    },
  },
};

使用：

<div className="shadow-glow">发光卡片</div>

动画

默认动画

ProductReady 包含：

animate-fade-in - 淡入
animate-slide-up - 向上滑动
animate-spin - 旋转（加载器）

添加自定义动画

// tailwind.config.ts
export default {
  theme: {
    extend: {
      keyframes: {
        bounce-horizontal: {
          '0%, 100%': { transform: 'translateX(0)' },
          '50%': { transform: 'translateX(25px)' },
        },
      },
      animation: {
        'bounce-x': 'bounce-horizontal 1s infinite',
      },
    },
  },
};

使用：

<div className="animate-bounce-x">← →</div>

响应式设计

断点

ProductReady 使用 Tailwind 的默认断点：

/* 移动优先 */
sm:  /* 640px */
md:  /* 768px */
lg:  /* 1024px */
xl:  /* 1280px */
2xl: /* 1536px */

示例

<div className="
  grid grid-cols-1    // 移动端：单列
  md:grid-cols-2      // 平板：2 列
  lg:grid-cols-3      // 桌面：3 列
">
  {/* 卡片 */}
</div>

可访问性

颜色对比度

始终测试对比度（WCAG AA）：

普通文本：4.5:1 最小
大文本：3:1 最小

工具：

焦点状态

确保可见的焦点状态：

/* 已包含在 global.css 中 */
* {
  outline-color: hsl(var(--ring) / 0.5);
}

button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

最佳实践

✅ 应该做

使用语义颜色：bg-primary 而不是 bg-blue-500
保持一致：坚持使用间距比例
测试两种模式：在浅色和深色模式下验证
移动优先：从移动样式开始，向上扩展
检查对比度：确保可读性

❌ 不应该做

不要硬编码颜色值
不要混合颜色系统（CSS 变量 + 直接颜色）
不要忘记深色模式变体
不要忽略可访问性
不要过度设计 - 保持简洁

预设主题

专业紫色

:root {
  --primary: 258 90% 66%;
  --secondary: 258 60% 90%;
  --accent: 280 80% 70%;
}

海洋蓝

:root {
  --primary: 200 90% 50%;
  --secondary: 200 60% 85%;
  --accent: 180 80% 60%;
}

森林绿

:root {
  --primary: 142 70% 45%;
  --secondary: 142 40% 85%;
  --accent: 160 60% 50%;
}

日落橙

:root {
  --primary: 25 90% 55%;
  --secondary: 25 60% 90%;
  --accent: 15 80% 60%;
}

组件库（KUI）

ProductReady 使用 KUI（内部组件库）进行 UI 组件。

位置：packages/kui/src/components/ui/

可用组件：

Button、Input、Select
Card、Dialog、Sheet
Table、Tabs、Tooltip
还有更多...

文档：参见 UI Components

迁移现有设计

如果您有现有品牌：

提取颜色：

主要颜色 → --primary
次要颜色 → --secondary
背景 → --background
文本 → --foreground

转换为 HSL：使用 HSL Color Picker

更新 CSS 变量：在 global.css 中更新 :root 和 .dark

测试所有页面：确保浅色和深色模式下的对比度

工具和资源

颜色工具

Shadcn Themes - 主题生成器
Realtime Colors - 实时预览
Coolors - 调色板

可访问性

WebAIM - 对比度检查器
WAVE - 可访问性评估
axe DevTools - 浏览器扩展

设计系统

Tailwind 文档
Radix UI - KUI 的基础
shadcn/ui - 组件灵感

下一步

设计自定义后：

📱 响应式布局 - 页面结构
🧩 UI Components - 组件库
🎨 部署 - 发布您的自定义品牌

设计系统

On this page