# liuli-design

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

## Basic Information

- **Project Name**: liuli-design
- **Description**: 琉璃设计系统 LiuLiDS是一套以「克制奢华」为核心的全场景设计系统。9套色阶、11级字体、暖色双向立体阴影、153个原子组件、563个SVG图标。提供 Token 体系、组件库、图标库及 AI Agent 设计 Skill，支持按需加载。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://liulids.asia
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-15
- **Last Updated**: 2026-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 设计系统, 前端设计, UI设计, ux设计, skill

## README

# LiuLDS · 琉璃设计系统

> 一套以「克制奢华」为核心美学主张的全场景设计系统 — Token · 组件 · 图标 · AI Skill

[![version](https://img.shields.io/badge/version-2.1.0-3b4a3e?style=flat-square)](./CHANGELOG.md)
[![components](https://img.shields.io/badge/components-153-8b5e3c?style=flat-square)](./components/index.json)
[![icons](https://img.shields.io/badge/icons-563-b8963e?style=flat-square)](#图标)
[![license](https://img.shields.io/badge/license-MIT-3b4a3e?style=flat-square)](./LICENSE)

**在线预览**：<https://liulids.asia>

---

## 关于

LiuLDS（琉璃设计系统）的灵感源自自然材质——羊皮纸的温润质感、黄铜的沉稳光泽、陈年佳酿的醇厚色泽。将古典手工艺的温暖触感融入现代数字界面。

五大设计原则：**克制** · **温度** · **立体** · **对比** · **一致**

| 维度 | 关键值 |
|:---|:---|
| 主色 | `#3b4a3e` 深橄榄绿 |
| 辅色 | `#8b5e3c` 干邑琥珀 / `#b8963e` 陈年金 |
| 背景 | `#f5f0e8` 米白（surface-50） |
| 字体 | 衬线标题（Noto Serif SC）+ 无衬线正文（Noto Sans SC）+ 等宽代码（Noto Sans Mono） |
| 阴影 | 暖色双向立体（左上暖白高光 + 右下深褐投影，浮雕质感） |
| 色阶 | 9 套 × 10 级 = 90 色 |
| 间距 | 8 步（4 → 64px） |
| 圆角 | 5 档（4 / 6 / 8 / 12 / pill） |

---

## 快速开始

```html
<link rel="stylesheet" href="./colors_and_type.css">
<link rel="stylesheet" href="./components.css">

<div class="ll-card" style="
  background: var(--color-surface-50);
  color: var(--color-text-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
">
  <h3 class="ll-h3">克制奢华</h3>
  <p class="ll-body">羊皮纸般柔和的暖调背景，搭配深橄榄绿主色。</p>
</div>
```

所有 Token 以 CSS 变量暴露：`var(--color-primary-500)`、`var(--font-size-h2)`、`var(--space-4)` 等。组件 class 统一 `ll-` 前缀。图标直接用 SVG 文件引用。

程序化读取 Token：`css.json` 提供完整的 JSON 表达。

---

## 组件

153 个原子组件，覆盖 14 个分类。每个组件提供 JSON 定义 + 独立 HTML 预览页。

| 分类 | 数量 | 代表组件 |
|:---|:---:|:---|
| Print 印刷 | 69 | 名片、邀请函、贺卡、门票、海报 |
| Layout 布局 | 13 | Grid、Stack、Container、Section |
| Form 表单 | 11 | Input、Select、Switch、Slider |
| Container 容器 | 10 | Card、Modal、Hero、Gallery |
| Display 展示 | 8 | Stat、Timeline、Pricing Card |
| Interactive 交互 | 7 | Button、Copy Button、Rating |
| Overlay 浮层 | 7 | Tooltip、Toast、Dropdown |
| Feedback 反馈 | 7 | Alert、Progress、Skeleton |
| Navigation 导航 | 6 | Tabs、Breadcrumb、Pagination |
| Data 数据 | 5 | Table、Code Block、Blockquote |
| SocialMedia 社交 | 4 | WeChat Cover、Douyin Visual |
| 其他 | 7 | Accessibility / Typography / Icon |

完整注册表 → [`components/index.json`](./components/index.json)
可视化预览 → `preview/component-<slug>.html`

---

## 图标

563 个 SVG 图标。

| 类型 | 数量 | 命名 | 着色 |
|:---|:---:|:---|:---|
| 单色 | 307 | `<name>.svg` | `currentColor`，CSS `color` 可着色 |
| 彩色 | 256 | `icon-<name>-color.svg` | 固定配色 |

```html
<!-- 单色：跟随文本颜色 -->
<img src="./icons/heart.svg" style="width:20px;color:var(--color-primary-500)">

<!-- 彩色：固定配色 -->
<img src="./icons/icon-heart-color.svg" style="width:24px">
```

---

## AI Skill

[`SKILL.md`](./SKILL.md) 是面向 AI Agent 的设计系统入口。Agent 加载后可自主完成界面生成、图标绘制、动效配置、AI 生图 prompt 构建等任务。

架构采用按需加载设计：主文件 ~10KB（决策流 + Token + 美学锚点 + 自检清单），详细配方按需读取。

| 文件 | 内容 |
|:---|:---|
| `SKILL.md` | 主入口：决策流、Token 速查、美学原则、自检清单 |
| `references/svg-craft.md` | 8 个 SVG 完整代码配方 |
| `references/motion.md` | 10 个动效完整代码配方 |
| `references/image-gen.md` | 5 个 AI 生图 prompt 模板 |
| `references/examples.md` | 3 个完整案例（小红书 / 数据页 / 公众号封面） |

---

## 仓库结构

```
liuli-design/
├── SKILL.md                   # AI Agent 入口（按需加载架构）
├── references/                # Skill 详细配方（按需读取）
│   ├── svg-craft.md
│   ├── motion.md
│   ├── image-gen.md
│   └── examples.md
├── colors_and_type.css        # 颜色 + 字体 Token
├── components.css             # 153 个组件样式
├── css.json                   # Token JSON 表达
├── components/                # 组件 JSON 定义
│   └── index.json             # 组件注册表
├── icons/                     # 563 个 SVG 图标
├── preview/                   # 153 个组件预览 HTML
├── ui_kits/website/           # 网站 UI Kit 示例
├── CHANGELOG.md
├── CONTRIBUTING.md
└── LICENSE                    # MIT
```

---

## 设计原则

1. **克制奢华** — 不堆砌视觉元素，让每一处材质都有意义
2. **温暖触感** — 暖色调与浮雕质感传递手工艺温度
3. **全场景一致** — 同一套 Token 贯穿数字界面与物理物料
4. **可访问性优先** — Focus ring、Skip Link、`prefers-reduced-motion` 内建
5. **响应式** — 移动 / 平板 / 桌面三档断点 + Print 样式

---

## 贡献

详见 [CONTRIBUTING.md](./CONTRIBUTING.md)。提交信息遵循 [Conventional Commits](https://www.conventionalcommits.org/)。

## 许可

[MIT License](./LICENSE) © 2026 LiuLiDS