# My Design Lib
> 为 AI 编程助手优化的前端设计库

## 简介
My Design Lib 是一套纯 HTML + CSS 的前端组件库和页面灵感画廊。
零框架依赖，复制即用。专为 AI 编程助手设计，提供结构化的组件和页面素材。

## 设计变量 (Design Tokens)
- 颜色/字体/间距: http://101.37.166.208:11930/tokens/tokens.css
- 颜色文档: http://101.37.166.208:11930/tokens/colors.html
- 字体文档: http://101.37.166.208:11930/tokens/typography.html
- 间距文档: http://101.37.166.208:11930/tokens/spacing.html

## 组件列表 (25个)
### 基础组件
- Button: http://101.37.166.208:11930/components/button.html — 多种尺寸变体
- Card: http://101.37.166.208:11930/components/card.html — 内容卡片
- Badge: http://101.37.166.208:11930/components/badge.html — 标签徽章
- Avatar: http://101.37.166.208:11930/components/avatar.html — 头像
- Tooltip: http://101.37.166.208:11930/components/tooltip.html — 文字提示

### 表单组件
- Input: http://101.37.166.208:11930/components/input.html — 输入框
- Toggle: http://101.37.166.208:11930/components/toggle.html — 开关
- Slider: http://101.37.166.208:11930/components/slider.html — 滑块
- Dropdown: http://101.37.166.208:11930/components/dropdown.html — 下拉菜单

### 导航组件
- Tabs: http://101.37.166.208:11930/components/tabs.html — 标签页
- Sidebar: http://101.37.166.208:11930/components/sidebar.html — 侧边栏
- Breadcrumb: http://101.37.166.208:11930/components/breadcrumb.html — 面包屑
- Pagination: http://101.37.166.208:11930/components/pagination.html — 分页
- Stepper: http://101.37.166.208:11930/components/stepper.html — 步骤条

### 反馈组件
- Modal: http://101.37.166.208:11930/components/modal.html — 弹窗
- Toast: http://101.37.166.208:11930/components/toast.html — 通知
- Progress: http://101.37.166.208:11930/components/progress.html — 进度条
- Accordion: http://101.37.166.208:11930/components/accordion.html — 折叠面板
- Empty State: http://101.37.166.208:11930/components/empty-state.html — 空状态

### 数据展示
- Table: http://101.37.166.208:11930/components/table.html — 表格
- Carousel: http://101.37.166.208:11930/components/carousel.html — 轮播

### 炫酷组件
- Glassmorphism: http://101.37.166.208:11930/components/glassmorphism.html — 毛玻璃
- Gradient Border: http://101.37.166.208:11930/components/gradient-border.html — 渐变边框
- Skeleton: http://101.37.166.208:11930/components/skeleton.html — 骨架屏
- 3D Tilt: http://101.37.166.208:11930/components/3d-tilt.html — 3D 倾斜
- Aurora Background: http://101.37.166.208:11930/components/aurora-bg.html — 极光背景
- Magnetic Button: http://101.37.166.208:11930/components/magnetic-btn.html — 磁性按钮

## 页面画廊 (5个)
- SaaS 落地页: http://101.37.166.208:11930/pages/saas-landing.html (评分 9.2)
- 创意作品集: http://101.37.166.208:11930/pages/portfolio.html (评分 9.5)
- 数据仪表盘: http://101.37.166.208:11930/pages/dashboard-dark.html (评分 9.0)
- 电商结账页: http://101.37.166.208:11930/pages/checkout.html (评分 8.8)
- 404 创意页: http://101.37.166.208:11930/pages/404-creative.html (评分 9.3)

## 布局模式
- Landing Page: http://101.37.166.208:11930/patterns/landing.html
- Dashboard: http://101.37.166.208:11930/patterns/dashboard.html

## 使用方式
1. 读取设计变量: 引用 /tokens/tokens.css 获取颜色、字体、间距
2. 选择组件: 从上面的列表找到需要的组件
3. 复制代码: 每个组件页面都有完整的 HTML + CSS 代码
4. 自定义: 修改 CSS 变量即可全局换肤

## 技术细节
- 纯 HTML + CSS，零 JavaScript 框架依赖
- 支持暗色模式 (data-theme="dark")
- 所有样式使用 CSS 自定义属性 (CSS Variables)
- 响应式设计，适配移动端

## 联系方式
- 网站: http://101.37.166.208:11930
- GitHub: https://github.com/zhengyehui/my-design-lib
- 邮箱: weta_zheng@qq.com
- 微信: weta010730