# liuli-design

**Repository Path**: leehovan/liuli-design

## Basic Information

- **Project Name**: liuli-design
- **Description**: 璃DS 设计系统（Liuli Design System）— 琉璃质感 + 极浅马卡龙毛玻璃 + 温意质感 + 流光幻彩 + 清岚自然的高级视觉设计系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 设计系统, UI设计, 毛玻璃, 前端, CSS

## README

# 璃DS 设计系统（Liuli Design System）

> 璃DS — 琉璃质感设计
> 温意质感 · 流光幻彩 · 清岚自然
> Design System — Glaze · Light · Dimension

璃DS 是一套融合**琉璃质感 + 极浅马卡龙毛玻璃 + 温意质感 + 流光幻彩 + 清岚自然**的高级视觉设计系统。

## 设计理念

璃DS 的核心是**琉璃质感**——一种介于透明与不透明之间的材质美学。色彩从内部渗透而出，表面有釉面光泽，边缘有折射虹光，随角度变换呈现微妙的色相偏移。

### 三大设计基因

| 基因 | 核心 | 视觉表现 |
|------|------|----------|
| 温意质感 | 温暖触感、人文排版 | 衬线标题、金棕暖调、纸质肌理 |
| 流光幻彩 | 鲜活色彩、流动光影 | 橙色主调、渐变光泽、弹性动效 |
| 清岚自然 | 自然配色、圆润通透 | 青绿薰衣草、圆润组件、毛玻璃 |

### 琉璃质感五大特征

1. **釉面光泽** — 卡片顶部 45% 白色渐变高光
2. **色彩内渗** — 极浅马卡龙底色 (alpha 0.03-0.06) + 毛玻璃模糊
3. **边缘折光** — 白色边框 + 彩色发光阴影
4. **交互变色** — hover 时底色加深、光泽增强、轻微上浮
5. **流光扫过** — hover 时白光从左到右扫过卡片

## 覆盖格式

璃DS 可将任何内容转化为统一的视觉语言，支持以下格式：

| 格式 | 参考文件 | 技术栈 |
|------|----------|--------|
| 网页 (Next.js) | `references/web.md` | CSS 变量 + Tailwind + React |
| 独立 HTML 页面 | `references/html.md` | 单文件、无构建工具 |
| PDF (ReportLab) | `references/pdf.md` | Python 绘制 |
| PPT (python-pptx) | `references/ppt.md` | 幻灯片母版 + 形状 |
| Word (.docx) | `references/docx.md` | 表格模拟卡片 |
| 表格 (openpyxl) | `references/xlsx.md` | 单元格样式 |
| 微信公众号 | `references/wx.md` | 纯内联样式 + section 布局 |
| 邮件/EDM | `references/email.md` | table 布局 |
| 社交媒体图/海报 | `references/social.md` | HTML+Playwright 截图 |
| Markdown 文档 | `references/markdown.md` | 结构层级 + emoji 标记 |
| SVG 矢量图形 | `references/svg.md` | 图标设计 + 信息图 |

## 文件结构

```plaintext
liuli-design/
├── SKILL.md                    # 主规范文件（核心设计系统定义）
├── README.md                   # 本文件
├── CHANGELOG.md                # 变更日志
├── CONTRIBUTING.md             # 贡献指南
├── tokens.json                 # 设计 Token 结构化数据
├── .gitignore                  # 忽略大文件（字体通过 Release 分发）
├── tools/                      # 工具脚本
│   ├── font-subset.py          # 字体子集化工具（pyftsubset）
│   ├── liuli-cli.py            # CLI 格式选择与 Token 查看
│   └── validate_tokens.py      # Token 完整性验证
└── references/
    ├── web.md                  # 网页 (Next.js) 实施指南
    ├── showcase-nextjs.md      # 🆕 Showcase 完整实现代码（globals.css + layout.tsx + page.tsx）
    ├── html.md                 # 独立 HTML 页面实施指南
    ├── pdf.md                  # PDF (ReportLab) 实施指南
    ├── ppt.md                  # PPT (python-pptx) 实施指南
    ├── docx.md                 # Word (.docx) 实施指南
    ├── xlsx.md                 # 表格 (openpyxl) 实施指南
    ├── wx.md                   # 微信公众号排版指南
    ├── wechat-vol0011.html      # 🆕 公众号文章完整示例（创刊号 Vol.0011）
    ├── email.md                # 邮件/EDM 排版指南
    ├── social.md               # 社交媒体图/海报指南
    ├── markdown.md             # Markdown 文档排版指南
    ├── svg.md                  # SVG 矢量图形指南
    ├── composition.md          # 组件组合模式
    └── dark.md                 # 暗色模式规范
```

## 在线 Showcase

**🔗 体验地址：[liuli-design.pages.dev](https://liuli-design.pages.dev)**

璃DS 完整展示站点已实现，包含三大设计基因、五色体系、马卡龙色板、LiuliDS 字体展示、11 种格式覆盖、三档输出模式等全部核心内容。完整源码见 `references/showcase-nextjs.md`。

展示站特色：
- 三层极光背景 + SVG 噪点纹理
- glass-card 毛玻璃卡片（流光扫过 + 交互变色）
- LiuliDS 可变字体（圆角笔画 + 字宽扩展 + 通透呼吸感）
- 全站自适应（移动端/桌面端差异化参数）

## 快速开始

1. 阅读 `SKILL.md` 了解核心设计规范（色彩、字体、间距、组件）
2. 根据你的输出格式，阅读对应的 `references/*.md` 实施指南
3. 严格按照规范中的精确数值执行，不允许模糊或近似

## 关键原则

- **马卡龙色必须极浅**：alpha 0.03–0.06，宁可看不见也不要太浓
- **璃DS定制字体**：LiuliDS 可变字体（wght 300-700），通过 Release 分发，未安装时回退微软雅黑
- **每张卡片只一个 accent**：warm/mint/sky/wine/bloom 五选一
- **留白比内容更重要**：卡片内边距 24–32px
- **发光是点缀不是主角**：彩色发光 alpha 0.03–0.05
- **图片输出必须一屏截图**：海报/封面/社交媒体图按目标类型使用固定尺寸（如 1080×1920），视口即画布，只留核心内容（品牌标题 + 关键要点 ≤6项 + 联系方式+CTA + 品牌落款），字大图标大，5秒内看清核心信息。不做自适应、不做长图、不堆内容。详见 `references/social.md`
- **网页应用与图片输出的区分**：Next.js 网页应用仍需自适应布局；图片输出使用固定尺寸一屏截图，两者不可混淆

## Accent 五色体系

| 变体 | 主色 | 渐变 | 用途 |
|------|------|------|------|
| warm | #FF6D3B | #FF6D3B → #FFAD33 | 橙色系，最常用，默认推荐 |
| mint | #2EC4B6 | #66BB6A → #2EC4B6 | 青绿系，自然/同步类 |
| sky | #5C6BC0 | #4FC3F7 → #5C6BC0 | 蓝紫系，云端/技术类 |
| wine | #9E2A2B | #9E2A2B → #FF6B6B | 酒红系，开发/代码类 |
| bloom | #FB7299 | #FB7299 → #8B5CF6 | 粉紫系，交互/流光类内容 |

## 定制字体

璃DS 定制字体 **LiuliDS** 基于 Noto Serif SC (SIL Open Font License 1.1) 系统性变换而来，注入三大设计基因：

| 设计基因 | 字体变换 | 效果 |
|---------|---------|------|
| 清岚自然 | 转角圆化（尖角→二次贝塞尔曲线） | 笔画圆润不锋利 |
| 温意质感 | SemiBold 基底 + 字宽扩展 2.5% | 笔画有厚度感 |
| 流光幻彩 | 字面微扩 + 侧边距+行距增加 | 通透呼吸感 |

- **类型**：可变字体 (Variable Font)，单一文件包含 wght 300–700 字重轴
- **命名实例**：Light(300) / Regular(400) / Medium(500) / Bold(700)
- **字符**：30928 glyphs（CJK 汉字 27938 + 符号/拉丁 2990）
- **设计师/制造商**：LeeHovan
- **协议**：SIL Open Font License 1.1（可自由使用、修改、分发）
- **下载**：[Gitee Release v1.2.2](https://gitee.com/leehovan/liuli-design/releases/tag/v1.2.2)（约 41MB，未安装时回退微软雅黑）

## 许可

- 设计规范：MIT License
- 定制字体 (LiuliDS)：SIL Open Font License 1.1