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