豐富的元件目錄
目錄將 111 個即時元件分為 24 個區塊，涵蓋常見控制項與介面狀態，而不只是靜態視覺範例。
適用於海報風格介面的扁平墨韻元件
SHIUI 是用於打造具日本日之丸海報視覺特色介面的扁平墨韻 UI 套件。其標示的色彩以紙張、墨色與朱紅為核心，設計方向明確採用零陰影。目錄提供即時範例，而非純靜態清單，讓讀者能在情境中檢視互動狀態。
這套件以實用的介面建構區塊為核心：操作、標籤與印章、表單、導覽、回饋及進度。它適合需要一致印刷風格處理的編輯、目錄、典藏、商務或流程導向介面，供團隊或個人使用。現有網站內容顯示複製匯入與原始碼操作，但未說明框架、安裝方式、套件格式、整合、定價或授權條款。
主要特色
操作層級
按鈕包含主要、次要、外框、幽靈、墨色、破壞性、載入中、箭頭、分割、小型、大型及圖示等變體，並提供不同操作優先級的使用指引。
具備狀態的表單控制項
套件包含文字輸入框、多行文字框、選取框、核取方塊、單選控制項、切換按鈕、開關、滑桿、搜尋、密碼、檔案、日期、OTP 及數量控制項，並搭配標籤、提示與錯誤訊息。
導覽模式
分頁標籤、麵包屑、分頁、步驟、側邊欄、選單清單、連結、頁面圓點、回到頂端控制項及區段導軌，支援目錄、流程與多步驟導覽模式。
回饋與進度狀態
警示、提示訊息、橫幅、進度列、環形進度及 enso 載入動畫可呈現通知、完成、進行中工作與操作狀態；部分範例可關閉或互動。
受日本日之丸啟發的視覺語言
視覺系統以扁平紙張、墨色與朱紅質感為核心，採用以墨色為主的邊框與狀態取代陰影。範例包含懸停擦拭效果、筆刷底線、印章、數字及編輯標籤。
潛在使用情境
編輯目錄與典藏
運用操作變體、標籤、印章、標示與導覽軌，為藝廊、典藏或展覽目錄打造一致的印刷導向介面語言。
印刷品與版本商品商務
結合產品導向標籤、價格印章、數量控制項、結帳風格的大型按鈕、配送欄位及進度步驟，用於小量版本或印刷品商務流程。
提交與收件表單
以欄位控制項、驗證訊息、OTP 輸入、檔案上傳及日期欄位作為委託、投稿、註冊或作品收件流程的起點。
結構化內容導覽
當資訊豐富的網站需要在內容集合、流程頁面與參考區段之間清楚移動時，採用分頁標籤、麵包屑、分頁、側邊欄、選單清單及區段導軌。
製作與狀態儀表板
運用警示、提示訊息、橫幅、載入狀態、乾燥／進度指示器及狀態膠囊，在工作室、出版或生產導向介面中傳達操作更新。
Pros and Cons
Pros
- 大型目錄包含 24 個區塊中的 111 個即時元件。
- 同時涵蓋視覺基礎元件與實用互動狀態，包括載入中、錯誤、選取、可關閉及進度狀態。
- 提供多種操作優先級與表單控制項變體，有助於建立一致的介面層級。
- 目錄包含互動範例，以及用於評估與交接的複製匯入／原始碼操作。
Cons
- 現有內容未記載框架、套件、安裝及整合詳情。
- 無法取得定價與授權條款；定價頁面回傳找不到頁面的回應。
- 視覺方向具有明確特色，因此不適合扁平海報風格的產品可能需要調整。
FAQ
SHIUI 是什麼？
SHIUI 是受日本日之丸海報啟發的扁平墨韻 UI 套件。其範例以紙張、墨色與朱紅作為主要視覺語言，並避免使用陰影。
這套件包含哪些內容？
目錄呈現 24 個區塊中的 111 個即時元件。文件所列範例包括按鈕、徽章與印章、表單控制項、導覽、警示、提示訊息、進度指示器及其他介面狀態。
如何評估這些元件？
範例具備互動性：按鈕展示懸停行為，控制項呈現選取或按下狀態，而滑桿、切換按鈕、密碼欄位與可關閉通知等元件都能直接在目錄中試用。
文件記載了哪些實作或框架支援？
網站展示元件範例及複製匯入／原始碼操作，但目前蒐集的資料未指定框架、套件格式、安裝流程或整合方式。
在哪裡可以找到定價與授權詳情？
現有產品內容未說明定價與授權條款。網站的定價頁面目前回傳找不到頁面，因此購買或使用條件應另行確認。
Quick Facts
- 類別
- 設計工具／UI 套件
- 目錄
- 24 個區塊中的 111 個即時元件
- 視覺系統
- 紙張、墨色與朱紅；零陰影
- 主要模式
- 操作、表單、導覽、回饋與進度
- 評估流程
- 試用即時範例，再使用複製匯入或原始碼操作
- 定價與授權
- 現有網站內容未說明
SHIUI 替代品
Refero MCP
Refero MCP 連接相容 MCP 的 AI agent 與 Refero 精選的網頁與 iOS 產品介面、使用流程庫，協助在生成 UI 前先研究真實設計模式；此功能包含於 Refero Pro 方案。
Wowable
Wowable 是一款 AI 網站建立工具，可將 Google Maps 名單、社群檔案、截圖與其他公開商家資訊快速轉成可預覽、可編輯並可發布的網站，另有免費預覽方案與付費自訂網域及成長功能。
Pixso
Pixso 是一款新一代的 AI 原生 UI 設計工具，允許用戶一鍵生成設計草稿和代碼，是 Figma 的國內替代品。
Fronty
Fronty 是一款 AI 網頁應用程式，可將截圖與圖片檔轉成 HTML 與 CSS，並提供無代碼編輯器與主機服務，方便微調後發布。
Appllama
Appllama 是專為高營收 iOS App 打造的網頁版 UI/UX 靈感庫，可瀏覽畫面、流程、付費牆與 App 成效數據；提供付費方案以解鎖完整內容與團隊協作。
Quarkdown
Quarkdown 是一款開源、以 Markdown 為基礎的排版系統，適合撰寫論文、簡報、知識庫與靜態網站，支援命令列流程、即時預覽、HTML 輸出與 PDF 匯出。