LiuLiDS · 琉璃设计系统 · 全场景设计 Token 与组件库

琉璃LiuLiDS

Name: LiuLiDS · 琉璃设计系统
Author: LiuLiDS

HERITAGE · DESIGN · SYSTEM

查看接入了解立意

SCROLL TO EXPLORE

Preface · 01

一套全场景设计系统，开箱即用。

LiuLiDS 提供从配色、字体、阴影到圆角、间距的全部设计 Token，以及 153 个原子组件的完整实现。所有 Token 以 CSS 变量形式给出，复制即可使用。

配色体系覆盖九套色阶，每套十档；阴影采用五档暖色立体双向系统；圆角克制在 4 到 12 像素之间。组件库含交互、表单、导航、布局、容器、浮层、反馈、展示、数据、排版、无障碍、印刷物料、社交媒体、图标十三个分类，每个组件均有独立预览页与 JSON 定义。

LiuLiDS · MIT

Foundations · 02

六类基础规范，构成设计系统的全部底层。

Color

02 · 01

配色

primary

cognac

gold

success

error

info

text

surface

warning

九套色阶，每套十档

展开预览

Type

02 · 02

字体

DISPLAY琉璃 Aa28/700

HEADING思源宋体 · Serif16/600

BODY思源黑体 · 正文 Sans13/400

MONOconst liuli = "design"12/400

WEIGHT

琉琉琉琉琉琉琉

SCALE

AaAaAaAaAaAaAaAa

思源宋体 · 思源黑体 · 思源等宽

展开预览

Shadow

02 · 03

阴影

Inset

输入框

Card

卡片

Hover

悬停

Float

浮层

Modal

模态

暖色双向 · Warm Dual-Shadow5 LEVELS

暗影

push ↓

高光

pull ↑

暖色推 · push

米色拉 · pull

五档暖色立体双向阴影

展开预览

Radius

02 · 04

圆角

none

分割

标签

按钮

卡片

模态

pill

胶囊

克制不过分圆润RESTRAINED

4-8px

常规组件

12px

大容器

9999px

胶囊徽章

克制不过分圆润

展开预览

Spacing

02 · 05

间距

4px

细线

8px

图标

12px

紧凑

16px

常规

24px

段落

32px

区块

48px

章节

64px

大留白

8 步体系 · 4 像素基底8-STEP · 4px BASE

8 步体系，4 像素基底

展开预览

Icons

02 · 06

图标

563

TOTAL

307

单色

256

彩色

viewBox 24×24 · 1.5px strokecurrentColor

563 个 SVG 图标

展开预览

Components · 03

八个核心组件，覆盖常用交互场景。

button

03 · 01

按钮 Button

立体按压效果，暖色双向阴影

展开预览

card

03 · 02

卡片 Card

羊皮纸般的表面，暖色多层阴影

Heritage Card

暖色双向阴影 · 羊皮纸表面

展开预览

input

03 · 03

输入框 Input

雕刻式凹槽，铜色聚焦环

FULL NAME

Li Wei

hello@liulids.com

展开预览

modal

03 · 04

模态框 Modal

羊皮纸背景，黄铜描边容器

Confirm Action

Are you sure you want to proceed?

展开预览

navigation

03 · 05

导航 Navigation

克制衬线导航，黄金分隔线

LiuLi

HomeAboutContact

Home/Collections/Heritage

全部配色字体阴影圆角

展开预览

tag

03 · 06

标签 Tag

蜡封风格的胶囊徽章

PrimarySuccessErrorWarning

CognacGoldInfo

展开预览

alert

03 · 07

告警 Alert

四个语义状态的暖色告警条

✓

操作成功

数据已保存到云端

⚠

请注意

字段不能为空

出错了

网络连接失败

展开预览

toast

03 · 08

通知 Toast

温暖底色弹出通知

保存成功

文件已保存

网络不稳定

展开预览

Crafts · 04

六类工艺，延伸到时间与维度。

SVG

04 · 01

矢量工艺

563 ICONS · 307 MONO + 256 COLOR

563 图标 · 1.5px 描边 · currentColor 可着色

viewBox 24×24 标准画布，stroke-linecap round，描边数据完整可复用，蜡封印章 / 装饰金线 / Hero 水晶等配方即取即用。

563 图标 · 1.5px 描边 · currentColor 可着色

展开预览

Motion

04 · 02

动态效果

LOADER

STAGGER

PROGRESS

10 配方 · 5 缓动曲线 · 180-1200ms 时长表

LiuLiDS 标准曲线 cubic-bezier(0.22, 1, 0.36, 1)，覆盖入场、按压、模态、视差、Toast 堆叠等高频场景。

10 配方 · 5 缓动曲线 · 180-1200ms 时长表

展开预览

Micro

04 · 03

微交互

通知

25 模式 · 6 大类 · 全部含完整代码

按钮 / 表单 / 卡片 / 导航 / 反馈 / 列表，Float Label、3D Tilt、Active Underline、Drag Reorder 等开箱即用。

25 模式 · 6 大类 · 全部含完整代码

展开预览

Image

04 · 04

AI 生图

$liulids generate --preset heritage

WARM · PARCHMENT · GOLDEN HOUR · HERITAGE

5 美学锚点 · 5 场景模板 · 负面词清单

暖调 / 材质 / 光影 / 构图 / 氛围，每个 prompt 必含 3 锚点 + 负面词，屏蔽 neon / cyberpunk / 高饱和。

5 美学锚点 · 5 场景模板 · 负面词清单

展开预览

Retouch

04 · 05

写实修图

BEFORE

AFTER

⇄

TEMP +8SAT -8GOLD HIGHLIGHTSGRAIN 12

5 调色预设 · 频率分离 · D&B · 三阶段锐化

Heritage Warm / Editorial Cool / Product Clean / Portrait Skin / Atmospheric，非破坏性工作流，保留皮肤纹理。

5 调色预设 · 频率分离 · D&B · 三阶段锐化

展开预览

Render

04 · 06

3D 渲染

KEY

FILL

RIM

琉

CYCLES 256 · FILMIC · 2.5:1:1.9

4 材质配方 · 三点布光 · Blender / Three.js

黄铜、羊皮纸、橄榄玻璃、胡桃木 PBR 材质，Key + Fill + Rim 比例 2.5:1:1.9，Cycles 256 samples + Filmic。

4 材质配方 · 三点布光 · Blender / Three.js

展开预览

Access · 05

两条路径，按需选择。

直接复制 CSS 文件到你的项目，或通过 AI Skill 让 AI Agent 按 LiuLiDS 规范生成界面。两种方式都无需构建步骤，复制即用。

bash — liulids

TERMINAL

01METHOD

方式一 · 直接复制 CSS

将 colors_and_type.css 与 components.css 引入到你的 HTML，所有 Token 以 CSS 变量形式提供，例如 var(--heritage-primary-500)。

02METHOD

方式二 · AI Skill 接入

将本仓库 SKILL.md 软链到你的 AI Agent 工具目录（Claude Code / Cursor / Codex CLI 等），AI 即可按 LiuLiDS 规范生成界面、图标、动画、生图、修图与 3D 渲染。

查看仓库GITEE · LIULI-DESIGN