01101 个生产级组件
从基础元件到完整的页面组合——101 个组件，每一个都提炼自我们已上线的产品，而不是闭门设计出来的。只要组件在 PDS 里，就已经真实干过活：本网站、产品演示和客户仪表盘，全都基于它渲染。
功能
Protocore Design System 的全部功能。
- 01101 个生产级组件
- 02设计令牌
- 03两种主题，五种强调色
- 04深色优先
- 05表单基础组件
- 06布局与组合
- 07导航
- 08浮层
- 09数据展示
- 10反馈与状态
- 11字体
- 12动效
- 13默认无障碍
- 14零运行时 CSS
- 15与框架无关的 CSS 层
- 16按技术栈导出令牌
- 17主题提供者与 Hooks
- 18白标主题
- 19llms.txt 地图
- 20MCP 服务器
- 21全程文档
- 22版本化发布
- 23私有仓库
- 24离线许可密钥
- 25按团队授权
详细阅读全部 25 项功能
02设计令牌
颜色、字体、间距和动效都来自同一层令牌。改一个令牌，所有组件随之更新——无需逐个组件覆盖，产品之间也不会出现偏差。
03两种主题，五种强调色
深色和浅色两种主题、五种强调色，全部由同一套令牌驱动。品牌变体只需替换令牌，无需分叉——家族中的每个产品都基于同一套系统渲染。
04深色优先
对比度、层级和色彩先在深色主题上打磨，浅色主题再由同一套令牌派生。得到的是原生质感的深色模式，而不是简单反色。
05表单基础组件
按钮、输入框、选择器、开关、滑块和字段脚手架——标签、提示和错误信息一应俱全。各种状态都已设计好：聚焦、禁用、无效和加载，在每个产品中表现一致。
06布局与组合
堆叠、网格、分隔线和页面外壳，无需临时拼凑 CSS 就能组合出界面。最大的组件是完整的页面组合——取自我们已上线页面的 hero、区块和页脚模式。
07导航
页眉、标签页、面包屑和菜单，内置响应式与键盘操作行为。本网站的导航就是该组件本身，而不是仿制品。
08浮层
模态框、底部面板、抽屉、弹出框和提示气泡共用一套层级模型——焦点锁定、关闭方式和叠放顺序统一集中处理。没有哪个产品需要自己去算 z-index。
09数据展示
表格、列表、统计卡片、徽标和时间线，专为依赖数字的产品而设计。家族中各个运营控制台的高信息密度，正是由这些组件呈现的。
10反馈与状态
Toast、横幅、空状态、进度条和骨架屏——这些不起眼的状态，一开始就设计到位。基于 PDS 构建的产品，对加载、为空和失败都有周全的应对。
11字体
编辑风格的字阶，搭配用于技术语境的等宽标签——这是你在 Protocore 每个界面上看到的声音。字阶本身就是令牌，各产品无需脱离系统即可调整。
12动效
时长和缓动曲线以令牌形式提供，组件已经在使用它们。各产品的界面动效保持一致，因为没有人需要手动重调动画时间。
13默认无障碍
对比度、焦点状态和键盘操作行为都内置于组件之中，而不是留给你自己去实现。使用默认配置，无障碍便随之而来。
14零运行时 CSS
样式是在构建时解析的静态 CSS——没有 CSS-in-JS 运行时，浏览器中也无需计算。样式层不会为页面增加任何 JavaScript。
15与框架无关的 CSS 层
该系统同时提供纯 CSS 包——令牌和工具类，无需 React。服务端渲染页面、邮件以及非 React 技术栈，都取自同一个事实来源。
16按技术栈导出令牌
令牌可导出为 Web 端的 CSS 变量、Tailwind 预设，以及移动平台的原生格式。品牌只有一份定义，在产品运行的任何地方通用。
17主题提供者与 Hooks
React 层用 provider 包裹应用，并通过 hooks 提供令牌——组件读取当前主题和强调色，而不是写死数值。切换主题只是状态变化，无需重新构建。
18白标主题
PDS 的五种强调色靠的是同一套机制，白标产品的品牌也靠它实现：替换令牌值，保留组件。家族中的每一款白标应用都证明了它行之有效。
19llms.txt 地图
整个系统的机器可读地图——组件、令牌、模式——以 llms.txt 发布。让 LLM 读取它，生成的代码就会使用真实的 PDS 组件，而不是凭空编造看似合理的组件。
20MCP 服务器
MCP 服务器把系统直接开放给编码智能体：组件、属性和令牌，在智能体构建时随时可查。设计系统自己回答问题，而不是被粘贴进提示词。
21全程文档
每个组件都在 pds.protocore.io 上提供实时示例、属性说明和可复制的代码。文档本身就基于 PDS 渲染——所读即所得。
22版本化发布
PDS 以带语义化版本号和更新日志的版本化包发布。升级由你掌控：团队自行选择何时迁移，更新日志会准确说明改动了什么。
23私有仓库
软件包从 Protocore 的私有 npm 仓库安装，只需在 .npmrc 中配置团队专属令牌——标准的 npm 工作流，仅面向已授权团队。无需手动分发的 zip 文件，也不用复制粘贴安装。
24离线许可密钥
签名的许可密钥在本地验证——无需回连服务器，构建过程中也没有网络检查。许可问题只会在开发阶段以警告形式提示，绝不会影响生产环境中的应用。
25按团队授权
PDS 为专有软件，按团队授权。申请访问后由我们为你完成配置——软件包、文档和令牌源文件——团队一个下午就能上手。
FAQ
设计系统，一问一答。
按团队授权，而非按席位或项目。一份授权覆盖团队内所有使用 PDS 进行构建的成员：token、组件和文档。费用只随采用它的团队数量变化，别无其他；我们为您构建的 whitelabel 产品也已基于它渲染。
通过 npm.protocore.io 的私有 registry 安装。获得访问凭据后，您的构建即可拉取 @protocore 包；之后 token 和组件的安装方式与普通依赖无异。
Token 面向 web、.NET 和原生平台输出，同一个颜色或圆角在您交付的每个平台上含义一致。组件提供 React 版本，另有与框架无关的 CSS 层，为不使用 React 的团队提供相同的 token 和类名。
默认深色优先，并默认支持无障碍——两套主题、五种强调色，全部由 token 驱动，采用零运行时 CSS，样式在加载时不产生任何开销。我们的产品和客户的仪表盘使用的是同一套组件。
它正是为此而设计：llms.txt 地图和 MCP 服务器让 agent 能够读取这套系统并正确地使用它进行构建，pds.protocore.io 还为每个组件和 token 提供在线示例、props 和可复制的代码。
定价
PDS 如何授权。
01
按团队授权
PDS 按团队授权，而非按席位或项目——一份授权覆盖团队内所有使用它进行构建的成员：token、组件和文档。
02
随组织规模扩展
从一个团队起步，随着应用推广再扩展到更多团队。决定费用的只有使用 PDS 进行构建的团队数量，别无其他。
03
Protocore 项目内置
我们为您构建的 whitelabel 产品已基于 PDS 渲染——独立授权适用于在自有产品上采用它的团队。
授权按团队计算，与人数或用量无关。申请访问，我们会根据将使用它的团队来确定范围。
评估
用 PDS 搭建一个页面。
01
在线文档
在 pds.protocore.io 浏览完整系统——每个组件和 token 都有在线示例、props 和可复制的代码。
02
Token 包
面向 web、.NET 和原生平台输出的设计 token，让同一个颜色或圆角在您交付的每个平台上含义一致。
03
按团队授权
PDS 按团队授权——一份授权覆盖所有使用它进行构建的成员，包括 token、组件和文档。
04
Registry 访问权限
用于访问 npm.protocore.io 私有 registry 的凭据，以安装您的构建所依赖的 @protocore 包。
可用地区
PDS 为专有产品，按团队授权。申请访问，我们来为您完成配置。
选一款产品，或直接采用核心。
上面的一切都有生产环境演示，我们可以带您逐一体验——独立部署、whitelabel 或整体平台均可。告诉我们您在构建什么，我们为您指出最短路径。