SHIUI
SHIUI 是一套扁平 2D 风格的可复用 UI 组件套件，只用三种颜色、1.5px 线条、无阴影，组件可在页面上直接试用并复制源码。
最后更新 2026/9/13
关于 SHIUI
SHIUI 是一套可复用的 UI 组件套件，视觉风格参照日本国旗海报式的扁平 2D 设计：只用三种颜色（纸白 #e5e3dc、墨色 #2a2926、朱红 #e14d2a），统一 1.5px 线条，全程不使用阴影。官网称目前包含 111 个可交互元素和 24 个区块，这些元素在展示页面上是真实可用的——可以点击、翻转、关闭等，并且每个卡片都支持直接复制对应的 import 语句或完整源码。它还提供设计 token（色彩体系）可一键复制，适合在项目中直接落地使用。
适合人群
需要一个扁平、无阴影、配色克制的组件风格的界面设计师
想在项目中快速复用现成组件的前端开发者
正在搭建以英文为主的展示型或内容型界面的团队
适合场景
为英文界面搭建扁平、克制的视觉系统，直接复制组件源码使用
需要统一色彩与线条规范时，复制三色设计 token 作为项目基础
在选定组件前，先在官网卡片上实际点击、翻转、关闭等试用交互效果
功能特性
可交互的组件目录
官网称包含 111 个可交互元素和 24 个区块，每个卡片都可在页面上实际点击、翻转或关闭。
一键复制导入语句或源码
每个组件卡片都支持直接复制对应的 import 语句或完整源码，便于在项目中使用。
三色设计 token
提供 Paper、Sumi、Shu 三色 token，可从官网一键复制，统一界面的颜色、线条与点缀色使用。
扁平海报式视觉风格
采用扁平 2D、统一 1.5px 线条、不使用阴影的视觉体系，并在官网上以组件形式展示。
优点
- 组件在官网上以真实可交互的形式展示，所见即所得
- 支持直接复制 import 或完整源码，接入成本低
- 提供可复制的三色设计 token，风格统一
缺点
- 该组件套件面向英文界面，界面文案主要按英文排版设计
常见问题
官网称每个展示卡片都是真实可交互的，并支持直接复制该组件的 import 语句或完整源码。
官网展示的颜色 token 为纸白 #e5e3dc、墨色 #2a2926、朱红 #e14d2a，可从官网的 Tokens 区域复制。
工具信息
开发商SHIUI
发布日期2026/9/13
定价模式Free