Back to Details

generic-fullstack-design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Fullstack Design System

全栈应用设计系统

Design system patterns for Next.js/NestJS full-stack applications.
Extends: Generic Design System - Read base skill for color theory, typography scale, spacing system, and component states.
适用于Next.js/NestJS全栈应用的设计系统模式。
扩展自：通用设计系统 - 请阅读基础技能文档了解色彩理论、排版比例、间距系统及组件状态相关内容。

Theme Configuration

主题配置

lib/theme.ts Structure

lib/theme.ts 文件结构

typescript
// lib/theme.ts - Single source of truth
export const theme = {
  colors: {
    primary: "hsl(220, 100%, 55%)",
    secondary: "hsl(180, 100%, 50%)",
    accent: "hsl(270, 70%, 60%)",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
  },
};
typescript
// lib/theme.ts - Single source of truth
export const theme = {
  colors: {
    primary: "hsl(220, 100%, 55%)",
    secondary: "hsl(180, 100%, 50%)",
    accent: "hsl(270, 70%, 60%)",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
  },
};

CSS Variables (globals.css)

CSS 变量（globals.css）

css
:root {
  --background: #ffffff;
  --foreground: #0a0a0f;
  --primary: hsl(220, 100%, 55%);
  --primary-foreground: #ffffff;
}

.dark {
  --background: #0a0a0f;
  --foreground: #fafafa;
}
css
:root {
  --background: #ffffff;
  --foreground: #0a0a0f;
  --primary: hsl(220, 100%, 55%);
  --primary-foreground: #ffffff;
}

.dark {
  --background: #0a0a0f;
  --foreground: #fafafa;
}

Tailwind Integration

Tailwind 集成

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: "var(--primary)",
      },
    },
  },
};
javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: "var(--primary)",
      },
    },
  },
};

shadcn/ui Patterns

shadcn/ui 组件模式

Button Variants

按钮变体

tsx
import { Button } from '@/components/ui/button';

<Button>Primary</Button>
<Button variant="outline">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Cancel</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
tsx
import { Button } from '@/components/ui/button';

<Button>Primary</Button>
<Button variant="outline">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Cancel</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Form Components

表单组件

tsx
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="user@example.com" />
</div>;
tsx
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="user@example.com" />
</div>;

Dialog/Modal

对话框/模态框

tsx
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
    </DialogHeader>
    {/* Content */}
  </DialogContent>
</Dialog>;
tsx
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
    </DialogHeader>
    {/* Content */}
  </DialogContent>
</Dialog>;

Visual Effects

视觉效果

Glassmorphism

毛玻璃效果

css
.glass {
  background: hsl(var(--card) / 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border) / 0.5);
}
css
.glass {
  background: hsl(var(--card) / 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border) / 0.5);
}

Gradient Backgrounds

渐变背景

css
.bg-gradient {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
css
.bg-gradient {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

Dark Mode Implementation

暗黑模式实现

Next.js + next-themes

Next.js + next-themes

tsx
// app/layout.tsx
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
tsx
// app/layout.tsx
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Theme Toggle

主题切换器

tsx
import { useTheme } from "next-themes";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}
tsx
import { useTheme } from "next-themes";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}

Asset Organization

资源文件组织

public/
├── images/
│   ├── logo.svg
│   └── og-image.png    # 1200x630, < 1MB
├── favicons/
│   ├── favicon.ico
│   ├── apple-touch-icon.png
│   └── favicon-32x32.png
└── site.webmanifest
public/
├── images/
│   ├── logo.svg
│   └── og-image.png    # 1200x630, < 1MB
├── favicons/
│   ├── favicon.ico
│   ├── apple-touch-icon.png
│   └── favicon-32x32.png
└── site.webmanifest

See Also

相关参考

  • Generic Design System - Token organization, spacing
  • Design Patterns - Atomic Design, component docs
  • UX Principles - Visual hierarchy
  • 通用设计系统 - 令牌管理、间距设置
  • 设计模式 - 原子设计、组件文档
  • UX 原则 - 视觉层级