- 每月造訪次數
- 9.3K
- 下降56.6%較上月2026 年 9 月
- 公開營收
- 未公開
- 暫無公開營收證據
- 入門價
- 未知
- 收費方式為免費增值,方案價格尚未識別
- 首次發布
- 3 年前
- 2023-03-29 · 估算
訪問
行銷動作
發布、搜尋與內容、引薦、促銷X 帳號@divyanshudhruv
第三方評測與案例拆解
客戶來源管道拆解、工程師評測與開源檔案Show HN
2024-07-18查看原文
- 創作者原帖摘錄:
- When I started my career and built my first design system, I was beyond excited. It took a lot of iterations, learning and 6 months of work to launch it internally. In the next job, I did it again, then at the following job, again… And no matter which company I worked for, 80% of the design system was the same. I’ve decided to work full-time on the design sy
開源倉庫與自部署
GitHub 開源與智慧體接入
流量來源
2026 年 9 月
訪問構成
管道
- 直接訪問40%
- 自然搜尋33%
- 外部引薦10%
- 社交媒體6%
- 其他11%
國家/地區
- 美國44%
- 印度15%
- 俄羅斯13%
- 南韓11%
- 委內瑞拉9%
搜尋
站點權重 —網域名稱註冊 2023-02-17
| 關鍵字 | 月搜尋量 |
|---|---|
| once ui | 200 |
| onceui | 110 |
| once ui portfolio | 70 |
| one ui portfolio | 70 |
| ui fade effe t | 70 |
流量資料:Vaneform
定價
Free
免費
Unlimited seats · Products · Once UI Core · Once UI Figma · 3 free templates · 100+ copy-paste blocks
試用:未提供 · 含免費檔 · 觀察於 2026-11-04 · 原定價頁
頁面與變化
開始記錄於 2026-07-31
關鍵頁面
每週快照- 首頁once-ui.com/
- 定價once-ui.com/pricing 快照 2026-11-04
- 功能once-ui.com/products/once-ui-core 快照 2026-11-04
變化
設計
首屏畫面視覺分析與 :root CSS
白底搭配柔和薄荷綠與暖橙漸層光暈,黑色粗體標題居中突出,長圓角輸入框和深色產品預覽圖形成清晰視覺層次。
首屏畫面預覽 · 點擊放大
首屏畫面講了什麼與轉化路徑
“What are you building?”
頂部為細窄導航,中部依次居中排列提示標籤、標題與長輸入框,下方橫向鋪開四張產品範本預覽卡片。
首屏畫面轉化路徑:居中標題加輸入框 + 產品介面截圖或元件示意 → 首屏畫面直接輸入或試用 · 配合首屏畫面直接展示真實生成作品建立信任
- 目標人群點名
- 居中輸入框
- 首屏畫面大幅產品介面
色板 · 點擊複製
五維設計評分8.1 / 10
- 字體與排版
- 8.0
- 色彩與對比
- 8.0
- 構圖與留白
- 9.0
- 細節與工藝
- 8.0
- 風格辨識度
- 7.0
結構
- 字體
- Inter
- 首屏畫面版式
- 居中標題加輸入框
- 主視覺
- 產品介面截圖或元件示意
- 轉化動作
- 首屏畫面直接輸入或試用
- 信任背書
- 首屏畫面直接展示真實生成作品
- 導航
- 頂部通欄導航
- 明暗與密度
- 淺色 · 適中
- 圓角與層級
- 大圓角 · 細線分層
預覽 AI 設計說明全文(含 :root CSS 變量與版式規則)只寫風格參數,禁止復刻該產品的品牌名、標誌、文案與圖片
# 設計說明:柔和友好(兼備漸層光暈)
低飽和粉彩、大圓角與圓潤字體,配友好的插畫,面向大眾使用者。
## 設計參數
```css
:root {
--background: #ffffff;
--surface: #f7f8f7;
--foreground: #111111;
--muted-foreground: #8c8d8b;
--accent: #0c8f70;
--radius: 16px;
--font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}
```
色彩面積配比:背景 #FFFFFF(約 78%) · 面板 #F7F8F7(約 9%) · 正文 #111111(約 6%) · 次要文字 #8C8D8B(約 4%) · 強調 #0C8F70(約 3%)。背景與面板占絕大部分面積,強調色只用於主按鈕與當前激活狀態。
## 版式與轉化結構
- 首屏畫面版式:居中標題加輸入框
- 導航結構:頂部通欄導航
- 明暗與密度:淺色 · 適中
- 圓角與層級:大圓角;不用陰影,用細線與留白區分層級
- 主視覺載體:產品介面截圖或元件示意
- 轉化動作:首屏畫面直接輸入或試用 · 信任背書採用首屏畫面直接展示真實生成作品
- 標題切入點:目標人群點名
- 首屏畫面元件特徵:居中輸入框、首屏畫面大幅產品介面
- 空間布局拆解:頂部為細窄導航,中部依次居中排列提示標籤、標題與長輸入框,下方橫向鋪開四張產品範本預覽卡片。
- 視覺特徵總結:白底搭配柔和薄荷綠與暖橙漸層光暈,黑色粗體標題居中突出,長圓角輸入框和深色產品預覽圖形成清晰視覺層次。
## 避免
- 純黑大面積
- 直角
- 等寬字體
請按上面的設計參數與版式實現介面:顏色只用這些變量,強調色只給主要操作與當前狀態。只採用這種風格,禁止復刻任何參考產品的品牌名、標誌、文案與圖片。
問題與證據
同分類研究對象
軟體開發 / 啓動範本與元件
這些產品屬於同一目錄分類。選型時請進一步核對客戶任務、功能與部署要求。
| 產品 | 入門價 | 每月造訪次數 | 營收佐證 |
|---|---|---|---|
| 21st21st 為設計工程師和開發者提供可瀏覽、複製並安裝到專案中的 React 與 Tailwind CSS 元件、範本、主題和設計工具。 | $7.5/月 | 2.4M | 未公開 |
| Tailwind CSS一個實用優先的 CSS 框架,幫助開發者直接在標記中組合類來快速構建現代網站。 | — | 1.6M | 未公開 |
| Next.js面向 Web 開發社群、用於構建高品質 Web 應用的全棧 React 框架。 | — | 1.4M | 未公開 |
| React BitsReact Bits 為開發者提供可客製化的動畫 React 元件、介面區塊、範本和瀏覽器工具。 | $99/月 | 1.1M | $692.92 |
| Angular一個幫助開發者構建現代、可擴展 Web 應用的框架。 | — | 794.8K | 未公開 |
| Element Plus面向設計師和開發者的 Vue 3 元件庫,提供元件、設計指南和設計資源。 | — | 781.1K | 未公開 |