zeroheight翻译站点

zeroheight是什么

zeroheight 是一款面向企业和设计团队的设计系统管理平台，支持整合Figma、Storybook及代码仓库中的设计资源，统一管理UI组件、设计规范、设计令牌和开发文档，并通过AI和MCP将设计系统连接到Claude、Cursor、Codex等AI工具，帮助设计与开发团队保持产品界面的一致性。

zeroheight核心功能

1. 设计系统文档管理

集中创建和维护设计系统文档，统一管理颜色、字体、组件、布局及交互规范。

2. Figma设计资源同步

连接Figma，导入组件、样式、变量和设计文件，保持设计文档与实际设计资源同步。

3. Storybook组件集成

连接Storybook，将React、Vue等组件文档和交互预览整合到设计系统中。

4. UI组件管理

集中管理按钮、输入框、表格、弹窗等UI组件，记录组件属性、使用规范和状态。

5. Design Tokens管理

管理颜色、字体、间距、圆角等设计令牌，支持多品牌和多主题管理。

6. 设计令牌自动化

支持设计令牌从Figma同步至代码仓库，减少设计与开发之间的规范偏差。

7. AI文档生成

利用AI根据现有内容生成设计系统文档，并支持自动优化和完善文档。

8. AI设计系统助手

通过自然语言查询组件、设计规范和使用指南，并辅助发现文档缺失及优化问题。

9. AI设计系统集成

通过MCP将设计系统连接到Claude、Cursor、Codex等AI工具，为AI提供真实的组件和设计规范上下文。

10. 交互式代码示例

支持React、Angular和Vue组件的交互式预览，方便开发人员测试组件属性和获取代码。

11. 设计规范协作

支持设计师、开发人员和产品经理共同编辑文档、评论反馈及跟踪修改状态。

12. 文档版本管理

支持设计系统文档版本记录、历史版本查看和恢复，方便跟踪规范变化。

13. 设计系统发布

支持发布和维护Styleguide，生成版本更新说明，方便团队了解设计规范变更。

14. 多品牌设计系统管理

支持管理多个品牌、产品及主题的设计规范，适用于大型企业和多产品团队。

15. 设计系统权限管理

提供角色、权限和访问控制，支持团队协作及企业级管理。

16. 设计系统使用分析

追踪组件使用情况、文档访问情况和开发采用率，帮助团队评估设计系统的实际应用效果。

17. 设计规范审查

通过组件状态、文档完整性和使用数据发现设计系统中的缺失及过期内容。

18. 第三方工具集成

支持Figma、Sketch、Adobe XD、Storybook、GitHub、GitLab、Bitbucket、Slack及Microsoft Teams等工具。

19. API开发接口

提供API能力，支持将设计系统文档及相关数据接入企业现有工作流。

20. AI工作流自动化

通过AI工具连接和自动化工作流，让设计规范参与原型生成、代码开发及代码规范检查。

zeroheight产品优势

1. 统一设计规范

将设计文件、组件、代码和使用说明集中管理，建立统一的设计系统资料库。

2. 设计与开发同步

通过Figma、Storybook和代码仓库集成，减少设计稿与实际开发结果之间的差异。

3. AI深度集成

通过MCP向AI编程工具提供设计上下文，减少AI生成界面时出现的组件和样式偏差。

4. 降低文档维护成本

利用AI生成和更新设计文档，减少重复整理和人工维护工作。

5. 支持企业级协作

提供多团队、多品牌、权限管理和版本控制能力，适合复杂产品体系。

zeroheight应用场景

1. 企业设计系统建设

统一管理企业产品的颜色、字体、组件和交互规范，建立标准化设计体系。

2. SaaS产品UI管理

集中维护后台管理系统、业务平台及SaaS产品的组件和页面规范。

3. UI组件库管理

为前端开发团队提供组件说明、代码示例、属性配置及使用指南。

4. 设计与开发协作

打通设计师与开发人员的工作流程，减少设计交付和开发实现之间的信息差。

5. AI辅助前端开发

将设计系统接入Claude、Cursor和Codex，让AI按照真实设计规范生成界面代码。

6. 多品牌视觉管理

统一管理不同品牌、产品线及主题的设计规范，保证品牌视觉一致性。

7. 企业设计规范沉淀

将设计经验、组件规范和交互标准转化为可查询、可维护的知识库。

8. 设计系统质量管理

通过组件采用率和文档使用数据，发现设计系统中的问题并持续优化。

zeroheight使用教程

第一步：注册账号

进入 zeroheight 官网，注册账号并创建团队工作空间。

第二步：创建Styleguide

选择设计系统模板或创建空白Styleguide，建立文档结构。

第三步：连接设计工具

连接Figma、Sketch或Adobe XD，导入设计组件、变量和样式。

第四步：连接开发工具

接入Storybook、GitHub或GitLab，将代码组件及开发文档整合到平台。

第五步：建立设计规范

创建颜色、字体、间距、组件和交互规范，完善设计系统内容。

第六步：使用AI完善文档

利用AI生成文档初稿、优化现有内容并检查规范完整性。

第七步：配置MCP

根据官方教程配置MCP Server，将Styleguide连接到Claude、Cursor或Codex。

第八步：发布设计系统

完成内容审核后发布Styleguide，向团队开放设计规范和组件文档。

第九步：持续维护

通过版本管理、组件状态跟踪和使用分析，持续更新设计系统。

zeroheight收费标准

zeroheight 采用免费版、Starter和Enterprise三档套餐，提供按月及按年付费方式。

1. Free免费版

• 1名编辑者
• 1个Styleguide
• 1组Design Tokens
• 连接设计和开发工具
• AI助手（编辑者）
• AI文档创建与维护
• 自定义Logo及品牌颜色
• MCP Server，每月500次标准搜索调用

2. Starter团队版

• 最多5名编辑者
• 2个Styleguide
• 3组Design Tokens
• 自定义主题和域名
• 文档评论与协作
• 隐藏页面
• 密码保护
• MCP Server，每月500次标准搜索调用
• 基础设计系统治理功能

3. Enterprise企业版

• 5名以上编辑者及审核人员
• 5个以上Styleguide
• 10组Design Tokens
• SSO单点登录及可信IP管理
• 设计系统版本发布
• 编辑者和查看者AI助手
• 组件采用率追踪
• API接口
• MCP快速搜索
• 多主题及多品牌管理
• 高级角色和权限管理
• Google Analytics及Hotjar集成
• 专属客户成功经理及实施支持

收费说明：

1. Starter年付价格为每位编辑者每月49美元，至少购买1个编辑者席位。
2. Starter月付标准价格为每位编辑者每月59美元。
3. Starter提供14天免费试用。
4. Enterprise采用定制报价。
5. 以上价格为官网展示价格，实际费用以购买页面为准。

zeroheight常见问题（FAQ）

1. zeroheight是什么工具？

zeroheight 是一款设计系统管理平台，支持设计规范文档、UI组件、Design Tokens及开发资源的统一管理。

2. zeroheight可以免费使用吗？

可以。平台提供Free免费版，支持基础设计系统文档管理、工具集成和AI助手功能。

3. zeroheight支持Figma吗？

支持。可以同步Figma组件、样式、变量和设计资源，构建设计系统文档。

4. zeroheight支持Storybook吗？

支持。可以将Storybook组件集成到设计文档中，提供交互式组件预览。

5. zeroheight支持哪些前端框架？

支持React、Angular和Vue组件的交互式代码示例及预览。

6. zeroheight支持MCP吗？

支持。通过MCP可以将设计系统连接到Claude、Cursor、Codex等AI工具。

7. zeroheight可以自动生成设计文档吗？

可以。平台提供AI文档创建、内容优化和设计系统助手，帮助团队生成和维护文档。

8. zeroheight适合管理多个品牌吗？

支持。Enterprise套餐提供多Styleguide、多主题和多品牌管理能力。

9. zeroheight与Figma有什么区别？

Figma主要用于界面设计、原型制作和协作，zeroheight主要用于设计系统文档、组件规范、设计令牌及开发协作管理，两者可以集成使用。

10. zeroheight适合哪些用户？

适合UI/UX设计师、产品经理、前端开发人员、设计系统负责人及拥有多个产品线的大型企业。