@huangqianmin/design-system

个人作品站视觉风格的统一资产 —— Tailwind preset + 可复用 React 组件，源自 my-website 项目的设计语言。

特性

• Tailwind preset —— 一行引入，主题/动画/工具类齐全
• 核心组件 —— Navbar / BackgroundGlow / Button / IconBox / SectionHeader / ProjectCard / Tag / Footer / Eyebrow
• 纯黑 + 玻璃质感 —— dark-only，Inter 字体，white-translucent 边框
• 签名动效 —— 慢速脉动径向光晕、淡入上浮、错落延迟

在新项目中使用

1. 安装

# 在新项目里
npm install ../design-system
# （先在 design-system/ 跑 npm install 安装 peer deps）

2. 引入 Tailwind preset

// tailwind.config.ts
import preset from '@huangqianmin/design-system/preset'

export default {
  presets: [preset],
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    '../../design-system/src/components/**/*.{js,ts,jsx,tsx}',
  ],
}

3. 引入样式

/* src/app/globals.css */
@import '@huangqianmin/design-system/styles';
@tailwind base;
@tailwind components;
@tailwind utilities;

4. 使用组件

import { Navbar, BackgroundGlow, Button, ProjectCard, SectionHeader } from '@huangqianmin/design-system/components'

export default function Home() {
  return (
    <div className="min-h-screen bg-bg text-white">
      <BackgroundGlow variant="home" />
      <Navbar />
      <main>
        <SectionHeader eyebrow="作品集" title="从概念到落地的完整项目" />
        <ProjectCard
          title="概念层级图谱"
          description="可视化展示概念之间的层级继承关系"
          tags={['React', 'Fastify', 'D3.js']}
          accent="blue"
          href="https://example.com"
        />
      </main>
    </div>
  )
}

项目结构

design-system/
├── tailwind.preset.js        # Tailwind 主题扩展（颜色/字号/动画/容器）
├── src/
│   ├── index.ts              # 主入口
│   ├── styles/globals.css    # 动画 keyframes + 工具类
│   ├── lib/cn.ts             # className 合并工具
│   ├── tokens/               # 颜色/字号/间距/动效常量
│   └── components/           # 9 个核心组件
└── docs/DESIGN_SYSTEM.md     # 设计原则 + token 表 + 组件 API

设计原则

详见 docs/DESIGN_SYSTEM.md。

许可

MIT