Sakuno v2.5
开始使用
纯 CSS + JS · 零依赖 · 110+ 组件

平面的界面，
也可以有温度。

Sakuno 把二次元的柔软收进纯色、细线与留白里。没有渐变，没有立体投影， 只有克制的排版和恰到好处的圆角 —— 像樱乃那样，安静但让人记得住。

开始使用 浏览组件
110+组件
80.1 KBgzip 体积
0运行时依赖
2个文件
瓜生樱乃
瓜生樱乃 Sakuno · 灵感来源
二次元

两个文件，直接接入

样式 + 脚本，图标已内置。没有构建、没有 npm、不绑定框架，静态页与后台模板都能用。

彻底的平面

纯色填充、1px 近同色描边、无渐变无投影。层级靠留白与背景差，不靠光影。

只动 transform

事件全部委托、rAF 节流、只跑合成属性；尊重「减弱动态效果」。

主题即变量

颜色、圆角、动效全是 CSS 变量。改三行就能换成你的品牌，深色自动跟随。

引入方式

样式与脚本两个文件放进项目，图标已内置在脚本里。所有组件都是普通 HTML 类名。

<html lang="zh-CN">
  <head>
    <link rel="stylesheet" href="sakuno.css">
  </head>
  <body>
    <button class="sk-btn sk-btn--primary">你好，樱乃</button>
    <script src="sakuno.js" defer></script>
  </body>
</html>
只用样式也完整
不引 JS 时，按钮、卡片、表单、徽章、表格等纯 CSS 组件照常工作；模态、下拉、Toast、命令面板才需要脚本。

响应式

同一份 HTML 在窄屏自动切单列：输入框升到 16px 防止 iOS 聚焦放大，触摸目标补到 32px，表格首列吸附，看板与拖拽列表长按就能拖。断点只有三档，不需要额外配置。

断点布局变化典型设备
< 640px全部单列；表格横滚、看板纵向堆叠、分栏上下排手机
640–860px组件内两列；文档目录折成顶部锚点条平板竖屏
> 860px完整双栏，左侧目录常驻平板横屏 / 桌面

给 Agent 用

让 AI 写 Sakuno 页面时，先给它这三样东西：接入说明、整页文档、机器可读索引。全部是纯文本，不需要联网。

SKILL.md

组件决策表、颜色 × 变体矩阵、可直接复制的结构、事件与数据属性清单，以及 29 条真实踩坑。

打开

整页 Markdown

当前文档站全部区块的标题、说明与示例源码，一次复制成 Markdown，直接贴进对话。

llms.txt

站点级索引：文件位置、CDN 地址、关键约束。放在根目录，Agent 抓一个文件就够。

打开
curl -s https://ui.sakuno.vip/SKILL.md > SKILL.md
curl -s https://ui.sakuno.vip/llms.txt
agent-1.html

色彩

7 组语义色 × 11 档色阶，由 OKLCH 感知均匀生成；同一档在不同色相上明暗一致。实心底的前景色按对比度配对，淡色底用主色透明度实现，因此明暗两模式共用一套规则。

语义色 · 实心

Aaprimary#1271ea
Aasecondary#ff94da
Aasuccess#2cc366
Aawarning#ffa910
Aadanger#e00657
Aainfo#00b0d3
Aadefault#70707a
colors-solid.html

色阶

primary
50
100
200
300
400
500
600
700
800
900
950
secondary
50
100
200
300
400
500
600
700
800
900
950
success
50
100
200
300
400
500
600
700
800
900
950
warning
50
100
200
300
400
500
600
700
800
900
950
danger
50
100
200
300
400
500
600
700
800
900
950
info
50
100
200
300
400
500
600
700
800
900
950
default
50
100
200
300
400
500
600
700
800
900
950
colors-scale.html

表面层级

--sk-bg
页面背景
--sk-surface
卡片
--sk-surface-2
柔和填充
--sk-surface-3
悬停
colors-surface.html

图标库

146 个 Font Awesome Pro 轮廓图标，已内置在 sakuno.js 里，不需要额外的图标脚本。点任意图标即可复制标签。

146 点击图标复制标签
icons.html

两种写法等价：<i data-sk-icon="house"></i> 会在运行时替换成 <svg class="sk-i"><use href="#i-house"></use></svg>。颜色继承 currentColor， 大小由 font-size 控制，也可加 sk-i--sm / lg / xl。

图标名不在表里时是空白，不会报错——先查这张表。JS 里拼字符串用 Sakuno.icon.check， 要 DOM 节点用 Sakuno.iconEl('house')。

按钮

38px 高、12px 圆角、14px 字、无投影。data-color 选色族，data-variant 选填充方式，两者自由组合。

基础用法

btn-basic.html

颜色

btn-colors.html

变体

btn-variants.html

颜色 × 变体

primary
secondary
success
danger
btn-matrix.html

尺寸

btn-sizes.html

状态

btn-state.html

文字链接

默认链接，跟随主色带下划线的链接樱粉色链接危险操作链接中性链接
link.html

分段控制器与开关组

同一层级里的互斥选择。选中态只靠一块纯白和 1px 线，不需要投影表达。

segment-1.html
segment-2.html

胶囊 Chip

小巧的标签。默认是主色 20% 的淡底加深档文字，可关闭、可带头像。

颜色

primarysecondarysuccesswarningdangerinfodefault
chip-colors.html

变体

solidflatborderedlight
chip-variants.html

尺寸

小默认大
chip-sizes.html

可关闭

Sakuno樱乃VueReact
chip-closable.html

带头像

樱瓜生樱乃乃图书委员
chip-avatar.html

徽章与标签

浅色底 + 同色文字，不使用边框描边，视觉噪音最低。

默认 Primary 樱粉 正常 待审核 失败 Beta Solid 描边 进行中
badge-1.html
CSS 变量 零依赖 深色模式 ⌘K 9 128
badge-2.html

角标

樱
badge-count.html

可关闭

Sakuno樱乃纯样式
badge-tag.html

头像

无图时用淡色块 + 首字，永远不会有裂图。三种色调、五种尺寸、状态点与头像组。

樱 乃 S K A 粉 灰 UI N B
A B C +6
avatar-1.html
樱
瓜生樱乃 图书委员 · 在线
可
九条可怜 2 小时前活跃
avatar-2.html

输入与选择

输入框、输入组、文本域、自定义下拉、复选与单选、卡片式选择。焦点态只加一圈 3px 淡色环。

2–16 个字符，支持中英文。
邮箱格式不正确
form-1.html
form-2.html
form-3.html

开关、滑块与评分

开关是纯色轨道 + 白色圆点；滑块只有一枚浅色 thumb，不加立体高光。

64
4.0/ 5.0
control-1.html

步进器、验证码与标签输入

三种高频「小控件」。验证码自动跳格、退格回退，标签输入支持回车与逗号。

输入后自动跳到下一格
CSS 零依赖
advanced-1.html

滑块验证

比图形验证码轻，比纯按钮有分量。指针事件实现，触屏可用，成功态整条变绿。

拖动滑块完成验证

拖到 90% 以上判定通过，成功后可监听 sakuno:verify。

verify-1.html

上传区

点击选择或直接拖入文件，虚线框在悬停时变为主色。

拖拽文件到此处，或点击选择 支持 PNG / JPG / SVG，单个不超过 5 MB
upload-1.html
sakuno.css49 KB
upload-2.html

卡片

一张卡片就是 1px 描边加一块背景。hover 只改变描边颜色和标题色，不位移、不投影。

基础卡片
描边 + 圆角 16
层级来自留白与背景差，而不是光影。
柔和卡片
无描边，用背景区分

适合放在已经分层的容器内。

强调卡片
左侧 3px 色条

用于推荐位、当前项。

横向卡片 --row
媒体区在左、内容在右，窄屏自动堆叠。
樱 2 小时前
card-1.html

颜色

primary
淡色底 + 同色描边
secondary
淡色底 + 同色描边
success
淡色底 + 同色描边
warning
淡色底 + 同色描边
danger
淡色底 + 同色描边
info
淡色底 + 同色描边
card-colors.html

统计卡与迷你图

数字用等宽数字字形，涨红跌绿遵循国内习惯。柱状图是纯 div，不需要图表库。

今日访问 12,480 12.4%
转化率 3.62% 0.8%
近 14 天
樱粉系列
stat-1.html

表格

点击表头排序，勾选行会出现批量操作条。窄屏横向滚动。

角色 组件 状态 更新
瓜生樱乃Button / Card已发布2 分钟前
九条可怜Modal / Drawer审核中1 小时前
爱丽丝Table已发布昨天
小路绫Toast已回滚3 天前
table-1.html

列表与描述列表

设置项、消息、成员名单。描述列表用于详情页的键值展示。

新
v2.5 已发布
新增柱状图、雷达图、签名板等 8 个组件
新
文
主题定制文档已更新
说明如何用 CSS 变量覆盖配色
2h
UI
无链接的列表项
不带 --link 就没有 hover 反馈
框架
Sakuno UI v2.5
许可
MIT
浏览器
Chrome 111+ / Safari 16.4+
体积
CSS 26.1 KB + JS 54.0 KB（gzip）
list-1.html

进度与加载

线性、分段、环形、不定长；骨架屏用透明度呼吸，不闪渐变。

68%
32%
90%
status-1.html
status-2.html

空状态与结果页

告诉用户「为什么空」，比只说「没有数据」有用得多。

还没有项目
创建第一个项目后，这里会显示它的运行状态。
提交成功
我们会在 1 个工作日内回复你。
empty-1.html

对话流

AI 对话、客服、评论回复都能用。左右分边、头像、时间、打字指示器，全部由类名控制。

雪
雪之下14:20
这套按钮的 hover 只改 1px 描边，很克制。用 data-variant 换样式也不用重写类名。
九
九条14:21
同意，暗色下描边也不发灰。
雪
雪之下14:22
chat-1.html

JSON 查看器

把一段 JSON 渲染成可折叠的树，键、字符串、数字、布尔、null 各自配色，直接读配置文件或接口返回。

json-1.html

标签页

胶囊与下划线两种形态。支持 ← → 方向键切换，符合 WAI-ARIA Tabs 模式。

概览面板：切换时只有一次 5px 的上浮淡入。

线性风格更贴近内容型页面。

tabs-1.html

变体

概览面板的内容。
概览面板的内容。
概览面板的内容。
概览面板的内容。
概览面板的内容。
tabs-variants.html

颜色

概览面板的内容。
概览面板的内容。
概览面板的内容。
tabs-colors.html

折叠面板与树形

折叠用 grid-template-rows 平滑过渡，不需要测像素；树形可逐级展开。

因为很多静态页面只需要一点交互，却被迫引入整个前端框架。
可以。纯展示组件不依赖 JS，需要交互时再补 sakuno.js。
不会。组件都在 @layer sk.components 里，你的选择器天然优先。
src
components
button.css
form.css
utils
index.html
accordion-1.html

面包屑与分页

导航辅助组件，低调但随时可被找到。

crumb-1.html

步骤条与时间线

流程用步骤，历史用时间线。状态由 is-done / is-active 控制。

填写信息
验证邮箱
3
设置偏好
4
完成
2026-06-08 14:20
发布 v2.0.0
全面平面化，移除所有渐变与投影。
2026-06-05
新增 28 个组件
日历、树、轮播、上传、OTP 等。
2026-06-01
项目启动
确定藤紫 + 樱粉的双色基调。
steps-1.html

模态框与抽屉

打开时锁滚动、焦点落入、Tab 在内部循环、Esc 或点遮罩关闭，关闭后焦点归位。

overlay-1.html

轻提示 Toast

顶部居中、可堆叠、悬停暂停倒计时。一个函数调用就够。

toast-1.html
Sakuno.toast.success('保存成功', { title: '已完成' });

命令面板

按 ⌘ K 或 Ctrl K。支持过滤与 ↑ ↓ 选择。

Esc 关闭 · ↑↓ 选择 · Enter 执行
command-1.html

可搜索、区间与强度

组合框在本地过滤，不依赖网络；区间滑块用两个原生 range 叠放，键盘与触摸都可用；密码强度只是启发式提示，真正的校验永远在服务端。

输入即过滤，↑ ↓ 选择，↵ 确认。
combo-1.html
¥200 – ¥760
两个原生滑块叠放，键盘与触摸都能用。
建议 8 位以上，混合大小写与符号
range-1.html

颜色、时间与树选择

颜色选择提供了固定色板与十六进制兜底；时间列用原生滚动，不需要虚拟列表；树选择把层级压平成一列，避免用户在小面板里来回钻。

color-1.html
time-1.html
treeselect-1.html
待选 0
按钮 Button
标签页 Tabs
模态框 Modal
表格 Table
已选 0
transfer-1.html

热力、文件与数据表

热力格用五档纯色表达强度；文件列表把进度收进 3px 细线；数据表工具条只做组合，不引入新的表格抽象。

提交记录
过去 26 周 · 共 248 次提交
连续 12 天
少 多
heatmap-1.html
PDF
sakuno-design-guide.pdf
2.4 MB · 正在上传 64%
PNG
sakuno-hero@2x.png
860 KB · 上传完成
ZIP
components-v2.zip
5.1 MB · 等待中
files-1.html
成员
成员角色状态提交
瓜瓜生樱乃
设计在线128
雪雪村千鹤
前端在线96
绫绫小路清隆
后端离开74
白白井黑子
测试离线51
共 24 条 · 每页 10 条
datatable-2.html

灯箱与水印

点缩略图放大，支持同组左右切换、Esc 关闭。水印用 canvas 生成平铺纹理，不占 DOM。

项目周报

水印铺在内容上层，不挡点击，主题切换会自动重绘。

media-1.html

仪表盘、环形图与迷你折线

图表也是平面的：只用纯色描边和留白，不加渐变和投影。进度用 pathLength="100" 归一化，改数值不需要算弧长。

72%
本月目标完成度
gauge-1.html
34%
CPU
86%
磁盘
gauge-2.html
表单46%
展示27%
导航18%
反馈9%
donut-1.html
日活
8,412 12.4%
近 7 天
spark-1.html

柱状图、雷达图、甘特图与数字滚动

数据展示的第二批组件：柱状图与雷达图由 data- 属性驱动、入场自动生长；甘特图用纯 CSS 变量定位任务条；数字滚动在滚进视野时播放一次。

柱状图

bars-basic.html

data-highlight 指定强调某一天，其余柱子变淡；数值与悬浮提示自动生成。

数字滚动

0
累计用户
0
好评率
0
本周评论
countup.html

评分分布

ratebars.html

甘特图

需求评审
5.6 – 5.7
视觉稿
5.7 – 5.10
前端开发
5.9 – 5.13
联调测试
5.12 – 5.15
灰度发布
5.14 – 5.15
5.65.75.85.95.105.115.125.135.145.15
gantt.html

雷达图

radar.html

折线图、面积图与漏斗

折线图用纯 SVG 绘制，支持多系列、面积填充、坐标轴与网格；悬停或触摸会出现游标和各系列数值，点图例可隐藏系列。漏斗图按数值递减宽度，右侧标注相邻两级的转化率。两者都不依赖图表库。

line-basic.html
line-compare.html
funnel-basic.html

data-series 用 | 分隔系列，每个系列写作 名称:值,值,…；名称后跟 #颜色 可指定颜色，缺省时按语义色轮换。加 data-area 开启面积填充。

图片对比、瀑布流与签名板

媒体处理三件套：对比滑块用 clip-path 切分两层图片，支持拖拽与左右方向键；瀑布流是纯 CSS 多列布局；签名板基于 canvas，导出为 PNG dataURL。

图片对比

原图 滤镜后 原图 滤镜后
compare.html

瀑布流

水墨樱花
用平面色块表现花瓣飘落的层次，主色只出现一次。
夜行电车站
低饱和的蓝绿配一点暖灯，画面安静但不冷。留白比例参考了杂志排版的三分法。
便利店黄昏
暖色灯箱是画面的唯一光源。
天台远眺
把地平线压到画面下三分之一，天空用大面积纯色留出呼吸感，云的边缘只用两三个色阶做分层。
雨后小巷
湿路面的反光用一两个亮色块点出。
masonry.html

签名板

在这里写下名字
sign.html

导出按钮会触发 sakuno:sign 事件，携带 detail.dataUrl（PNG base64），可以上传或写回表单。

拖拽、分栏、通知与引导

这几个组件只做一件事：排序返回顺序，分栏返回比例，通知返回未读数，引导返回完成状态。没有额外的状态管理。

设计评审01
接口联调02
补充文档03
灰度发布04
sortable-1.html
文件树
src
button.css
form.css
index.html
预览
可拖拽分栏
拖动中间的把手改变宽度，范围锁在 18%–82%。
split-1.html
三态主题
notify-1.html

气泡确认、底部面板与内联编辑

移动端优先的浮层形态，以及三个减少页面跳转的小交互：就地确认、就地修改、就地复制。

popconfirm-1.html
sheet-1.html
项目名
Sakuno UI
点一下就能改，回车保存，Esc 还原。
editable-1.html
https://ui.sakuno.vip
npm i sakuno-ui
copyfield-1.html
公告
v2.5 新增折线图、漏斗图、代码 Diff、终端、多选下拉与虚拟列表 6 个组件，全部纯 CSS + JS。 v2.5 新增折线图、漏斗图、代码 Diff、终端、多选下拉与虚拟列表 6 个组件，全部纯 CSS + JS。
marquee-1.html
乃
瓜生樱乃 12 分钟前
把圆角从 10 调到 12，整体气质立刻软下来了。
K
Kano 8 分钟前
同意，1px 描边也比阴影干净。
九
九条可怜 半小时前
深色模式下的描边也很稳，没有发灰。
comment-1.html

看板与价格卡

看板用原生拖拽实现，卡片跟手插入；价格卡带推荐角标与倒计时，营销页可以直接拼。

待处理2
整理色板77 色阶 · 高优先
补 4 个图标icon-list 白名单
进行中1
文档站改版侧栏 + 图标库
已完成1
v2.5 发布6 个组件

移动端长按卡片即可拖动换列；松手后抛 sakuno:board，计数自动更新。

board-1.html
个人版
¥0/ 月

自己玩、写 demo 够用。

  • 全部组件与图标
  • 单文件版
  • 团队协作
推荐 团队版
¥49/ 月

多人维护一套设计语言。

  • 全部组件与图标
  • 私有 CDN
  • 协作与历史
企业版
¥199/ 月

定制主题与私有部署。

  • 全部功能
  • 主题定制
  • 专属支持

限时优惠还剩

紧凑模式

plan-1.html

提示与横幅

五种语气用纯色淡底表达，不加描边；横幅用于页面级的单行通知。

信息
所有组件都支持深色模式。
保存成功
配置已同步到 3 个节点。
注意
该操作不可撤销。
连接失败
请检查网络后重试。
描边变体：中性语气，用于补充说明。
alert-1.html
v2.5 已发布：图表与开发者组件 + 6 个新组件
alert-2.html

代码 Diff、终端、多选与虚拟列表

面向开发者页面的四件套：Diff 展示行级增删与统计，终端带标题栏和逐行打字动画，多选下拉支持搜索与键盘操作，虚拟列表在万级数据下只渲染可视区。

--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'

 export default defineConfig({
-  base: '/old/',
+  base: '/sakuno/',
+  build: { target: 'es2018' },
   server: { port: 5173 },
-  plugins: []
+  plugins: [svgSprite()]
 })
diff-basic.html
$ npm i sakuno
✓ 已安装 0 个依赖
$ sakuno build
✓ 输出 dist/index.html
✓ 输出 dist/sakuno.min.css
✓ 输出 dist/sakuno.min.js
# 零依赖，直接打开 index.html 即可
terminal-basic.html
multiselect-basic.html
vlist-basic.html

Diff 的源码放在隐藏的 .sk-diff__src 里，行首 + / - 决定增删；「仅变更」可折叠上下文行。终端源码放在 .sk-terminal__src，$ 开头是命令，✓ 成功、! 警告、# 注释。多选下拉在值变化时派发 sakuno:change；虚拟列表派发 sakuno:vlist-select，也可用 Sakuno.virtualList(el, { items, rowHeight, render }) 编程式接入。

日历、代码与键帽

日历可切换月份与选择日期，加 data-range 变成区间选择；代码块带复制按钮；键帽用于说明快捷键。

一二三四五六日
calendar-range.html
一二三四五六日
// 初始化（脚本会自动执行）
Sakuno.init();
Sakuno.theme.toggle();
⌘K Esc ↵ ⇧Tab
简洁不是极简主义。把不必要的东西去掉，让核心目的发光。 — Apple 设计原则
misc-1.html
或者
分段一：分隔由 .sk-divided 自动生成
分段二：不用手写每一条 hr
分段三：间距与线宽全局统一
misc-2.html