01101 個正式環境元件
從基礎元件到完整頁面組合——101 個元件，皆取自我們實際交付的產品，而非憑空設計。凡是收錄於 PDS 的元件，都已實戰過：本網站、產品示範與客戶儀表板，全都以它渲染。
功能
Protocore Design System 內建的一切功能。
- 01101 個正式環境元件
- 02設計 Token
- 03兩種主題，五種強調色
- 04深色優先
- 05表單基礎元件
- 06版面與組合
- 07導覽
- 08浮層
- 09資料呈現
- 10回饋與狀態
- 11字體
- 12動態
- 13預設即無障礙
- 14零執行期 CSS
- 15與框架無關的 CSS 層
- 16各技術堆疊的 Token 匯出
- 17主題 Provider 與 Hooks
- 18Whitelabel 主題
- 19llms.txt 地圖
- 20MCP 伺服器
- 21端到端完整文件
- 22版本化發行
- 23私有 Registry
- 24離線授權金鑰
- 25依團隊授權
詳閱全部 25 項功能
02設計 Token
色彩、字型、間距與動態，皆由同一層 token 解析。改動一個 token，所有元件隨之更新——無需逐一覆寫，產品之間也不會走樣。
03兩種主題，五種強調色
深色與淺色兩種主題、五種強調色，全由同一組 token 驅動。品牌差異只需替換 token，不必分叉——家族中的每項產品都由同一套系統渲染。
04深色優先
對比、層次與色彩先在深色主題上調校完成，淺色主題再由同一組 token 衍生。成果是原生質感的深色模式，而非單純反相。
05表單基礎元件
按鈕、輸入框、下拉選單、開關、滑桿與欄位骨架——標籤、提示與錯誤訊息一併涵蓋。各種狀態早已設計完成：聚焦、停用、無效與載入，在每項產品中表現一致。
06版面與組合
堆疊、格線、分隔線與頁面外殼，無需臨時撰寫 CSS 就能組出畫面。最大型的元件是完整頁面組合——取自我們上線頁面的 hero、區塊與頁尾樣式。
07導覽
標頭、分頁標籤、麵包屑與選單，內建響應式與鍵盤操作行為。本網站的導覽就是這個元件本身，而非仿製品。
08浮層
互動視窗、底部面板、側邊抽屜、彈出層與提示氣泡，共用同一套層級模型——焦點鎖定、關閉與堆疊一次集中處理。沒有任何產品需要自行計算 z-index。
09資料呈現
表格、清單、數據卡片、徽章與時間軸，專為靠數字運轉的產品而生。家族中各營運主控台的資訊密度，都來自這些元件。
10回饋與狀態
Toast、橫幅、空狀態、進度條與骨架屏——這些不起眼的狀態，一開始就設計到位。以 PDS 打造的產品，對載入中、無資料與失敗，都有周全的答案。
11字體
編輯風格的字級比例，搭配等寬字型標籤呈現技術語境——這是 Protocore 所有介面的共同語調。字級比例即 token，產品可在系統內自行微調。
12動態
時長與緩動曲線以 token 形式提供，元件已直接採用。各產品的介面動態保持一致，因為沒有人需要手動重調動畫時間。
13預設即無障礙
對比、焦點狀態與鍵盤操作行為已內建於元件，而非留給你自行補足。採用預設值，無障礙隨之而來。
14零執行期 CSS
樣式是在建置時解析的靜態 CSS——沒有 CSS-in-JS 執行期，瀏覽器中不做任何運算。樣式層不為頁面增加任何 JavaScript。
15與框架無關的 CSS 層
系統也提供純 CSS 套件——token 與工具類別，無需 React。伺服器端渲染頁面、電子郵件與非 React 技術堆疊，皆取自同一個單一事實來源。
16各技術堆疊的 Token 匯出
Token 可匯出為網頁用的 CSS 變數、Tailwind preset，以及行動平台的原生格式。品牌只定義一次，產品在哪裡運行就在哪裡使用。
17主題 Provider 與 Hooks
React 層以 provider 包覆應用程式，並透過 hooks 提供 token——元件讀取當前主題與強調色，而非寫死數值。切換主題只是狀態變更，無需重新建置。
18Whitelabel 主題
讓 PDS 擁有五種強調色的同一套機制，也讓 whitelabel 產品擁有自己的品牌：替換 token 值，保留元件。家族中每一款 whitelabel 應用，都是它行得通的證明。
19llms.txt 地圖
整套系統的機器可讀地圖——元件、token、模式——以 llms.txt 發布。讓 LLM 讀取它，產生的程式碼就會使用真正的 PDS 元件，而非自行捏造看似合理的元件。
20MCP 伺服器
MCP 伺服器將系統直接開放給程式開發 agent：元件、props 與 token，在 agent 建置時即可查詢。設計系統能直接回答問題，不必再貼進提示詞。
21端到端完整文件
每個元件都收錄於 pds.protocore.io，附有即時範例、props 與可直接複製的程式碼。文件本身也以 PDS 渲染——所見即所得。
22版本化發行
PDS 以版本化套件發行，採用語意化版本並附變更紀錄。升級由你掌握：團隊自行決定何時升級，變更紀錄則清楚說明改了什麼。
23私有 Registry
套件從 Protocore 的私有 npm registry 安裝，只需在 .npmrc 中設定各團隊專屬的 token——標準的 npm 工作流程，僅限已授權團隊使用。沒有隨附的 zip 檔，也不必複製貼上安裝。
24離線授權金鑰
簽署過的授權金鑰在本機即可驗證——無需回傳連線，建置中也沒有網路檢查。授權問題只會在開發階段以警告呈現，絕不會讓正式環境的應用程式中斷。
25依團隊授權
PDS 為專有軟體，依團隊授權。提出存取申請，我們會為你完成設定——套件、文件與 token 原始檔——讓團隊一個下午就能上手。
FAQ
設計系統，一次解答。
依團隊計算，不按席位或專案。一份授權涵蓋團隊內所有使用 PDS 進行開發的成員：Token、元件與文件。費用只隨採用的團隊數量增加，別無其他；我們為您打造的 whitelabel 產品本身也已採用 PDS 呈現。
從 npm.protocore.io 的私有 registry 安裝。取得存取憑證後，您的建置流程即可拉取 @protocore 套件，Token 與元件的安裝方式與一般相依套件無異。
Token 同時輸出至網頁、.NET 與原生平台，讓一個顏色或圓角在您發行的每個平台上意義一致。元件提供 React 版本，不使用 React 的團隊則可採用與框架無關的 CSS 層，它承載相同的 Token 與 class。
預設即為深色優先並支援無障礙——兩種主題、五種強調色，全由 Token 驅動，搭配零執行期成本的 CSS，載入時不增加任何負擔。我們的產品與客戶儀表板皆使用相同的元件。
這正是設計目標：llms.txt 地圖與 MCP 伺服器讓 agent 能讀懂整個系統並正確使用，pds.protocore.io 也為每個元件與 Token 提供即時範例、props 與可直接複製的程式碼。
定價
PDS 的授權方式。
01
依團隊授權
PDS 以團隊為單位授權，不按席位或專案計費——一份授權即涵蓋該團隊中所有使用它進行開發的成員：Token、元件與文件。
02
隨組織規模擴展
先從一個團隊開始，隨著採用範圍擴大再延伸至更多團隊。費用只取決於使用 PDS 進行開發的團隊數量，別無其他。
03
Protocore 專案內含
我們為您打造的 whitelabel 產品本身就以 PDS 呈現——單獨授權則適用於想在自家產品上採用 PDS 的團隊。
授權依團隊計算，而非人數或用量。申請存取權限，我們會依實際參與開發的團隊評估範圍。
評估
用 PDS 打造一個畫面。
01
即時文件
在 pds.protocore.io 瀏覽完整系統——每個元件與 Token 都有即時範例、props 與可直接複製的程式碼。
02
Token 套件
設計 Token 同時輸出至網頁、.NET 與原生平台，讓一個顏色或圓角在您發行的每個平台上意義一致。
03
依團隊授權
PDS 依團隊授權——一份授權涵蓋所有使用者，Token、元件與文件一體適用。
04
Registry 存取權限
用於存取 npm.protocore.io 私有 registry 的憑證，讓您的建置流程能安裝所需的 @protocore 套件。
供應情況
PDS 為專有軟體，以團隊為單位授權。申請存取權限，我們會協助您完成設定。
選一項產品，或直接採用核心。
上述一切都有可實際運作的正式環境展示，我們可以帶您逐一了解——單獨部署、whitelabel，或整合為一個平台皆可。告訴我們您要打造什麼，我們會為您找出最短路徑。