维护者发布
确认组件、样式和变更范围，补充更新说明，再发布资源库。
Pixso · Design System
设计系统工具
一套组件与规范，
让团队设计保持一致
把组件、样式与变量沉淀为可复用的团队资源。建立规范、发布更新、组合界面，让产品、设计与研发沿用同一套设计语言。
了解如何搭建设计系统
从一组组件，到团队共同使用的规则
设计系统，让规范真正用在每个页面上
设计系统（Design System）连接视觉规则、可复用组件、使用说明和维护机制。Pixso 将这些设计资产放进团队工作流：规范集中维护，项目按需复用，变更经过发布与确认，再进入具体界面。
已经有组件和样式？在 Pixso 在线 UI 设计工具 中把它们应用到真实页面，从一个业务流程开始完善设计系统。
02 / 构建组件
从基础控件到业务组件，
把状态一起设计好
按钮、输入框、导航和卡片都可以成为主组件。用变体组织尺寸与状态，用文本、图层可见性和实例交换属性控制内容，让同一类元素有一致的结构。
- 状态完整：以输入框为例，默认、聚焦、错误、禁用应有各自清晰的表达。
- 内容可变：配合自动布局处理长标题、不同按钮文案和内容增减，减少复制后逐个修尺寸。
- 用法明确：为组件写下用途和限制，再通过交互原型验证状态切换与任务路径。
03 / 发布复用
资源库连接多个项目，更新由团队有序接收
将组件和样式发布为团队资源库，其他设计文件启用后即可复用。主组件的修改通过发布传递；使用者查看变更说明，再选择应用单项或全部更新。
把已积累的设计资产交给 AI
让 AI 沿用你的设计系统
已有团队组件库可以直接成为 AI 的设计上下文。将已发布资源库设为“允许 AI 使用”，在 AI 面板选择“自定义设计系统”和目标库，再描述需要生成的页面。
在输入中用 @ 引用具体组件与变量，可以让 AI 获得更明确的规范。生成后选中按钮、输入框等对象，检查实例关系、变体与变量绑定；库里缺少的状态继续补充，再纳入团队维护。按团队组件库生成 UI 的步骤说明了从启用资源到检查结果的完整过程。
配置 AI 调用自定义设计系统 →
配置资源库需具备相应编辑或管理权限。未被库覆盖的模块，AI 会结合页面需求补充。
04 / 协作维护
让组件有负责人，让变更有上下文
一套设计系统需要持续使用和维护。用文件协作、评论、权限与版本记录，把组件的讨论、发布和研发交付连接起来。
接续已有资产
从已有设计文件、模板与组件开始整理。支持导入 Figma、Sketch、Adobe XD 等文件；导入后核对字体、组件关联和效果，再纳入团队规范。
矢量绘制用于统一图标，智能选择用于整理图层排列与间距，让基础资产更容易维护。
评审与版本留档
在具体图层上评论，把问题和处理结论留在文件中。为重要发布保存命名版本，说明本次修改影响的组件与使用场景。
按角色设置查看、编辑与分享权限；企业内网和信创环境可了解私有化部署方案。
面向研发交付
研发查看尺寸、间距、颜色与样式信息，设计团队同步组件名称、状态和使用规则。样式参考代码帮助对照实现，业务逻辑由工程项目承接。
需要让 AI 编程工具读取设计上下文，可通过 Pixso MCP连接设计与开发。
常见问题
设计系统和 UI 组件库有什么区别？
UI 组件库提供可复用的按钮、输入框、导航等界面元素。设计系统还包括视觉规范、使用原则、状态说明和维护规则，告诉团队什么时候使用、如何扩展、由谁更新。
组件变体和变量有什么区别？
变体组织同类组件的类型、尺寸和状态，例如按钮的大中小尺寸、默认与禁用状态。变量管理颜色、数值、文本和布尔值等属性，可用于尺寸、间距、内容或主题。两者配合，可减少重复组件和零散属性。
修改资源库后，所有项目会立即变化吗？
不会直接覆盖所有引用项目。维护者发布资源库更新后，使用文件收到通知，成员查看变更并选择应用。组件实例的覆写和脱离关系也会影响后续同步，重要更新可先在试点文件中检查。
团队应该从哪里开始？
从一个表单开始：把按钮与输入框做成主组件，补齐默认、错误和禁用变体，再用实例搭建页面。确认命名与用法后发布资源库；在另一个文件中启用它，接收一次更新并检查实例表现。把创建、复用与更新走通后，再扩展到更多业务。可继续阅读创建设计系统的实践步骤。
个人和团队如何选择版本？
个人可以从免费版开始设计。团队共享资源、组织管理和历史版本等权益按版本区分，可在价格与版本对比中选择适合协作规模的方案。
把规范用起来
从团队最常用的一组组件开始
建立清晰的规则，让下一张页面有据可依，让下一次协作少一些重复沟通。
