企业官网建设流程全解析

Pinterest Gestalt：Pinterest 的设计系统

Gestalt 是目前 Pinterest 内部使用的设计系统，在开源社区已有超过四千颗星。它既包含 React 组件库，也覆盖了配套的设计指南、最佳实践和开发工具，目标是为工程和设计团队提供统一的产品构建方式。

1、这个项目能做什么

Gestalt 的核心是一个 React 组件库。你常用的按钮、文本、图标、表单控件、弹窗等基础组件基本都有现成的。组件都作为 ES6 模块导出，项目还自带一个预编译的 CSS 文件，直接引入就能用。

项目同时把设计规范也一起开源了。组件怎么用、什么场景适合什么组件、交互上有什么注意事项，官方文档里都有说明。对前端开发者来说，不用再到处翻设计稿的说明；对设计师来说，最终落地效果更可控。

2、项目结构

Gestalt 是一个 Monorepo，用 Yarn Workspaces 管理。文档、组件、日期选择器、图表等都被拆成了独立的包，各自维护，但共享同样的构建和测试工具链。

这种结构的优势是每个包的依赖关系清晰，改了某个组件不会牵动整个库。代价是要跑完整功能之前需要装一下依赖，但官方 yarn 和 yarn test 两条命令就能搞定，不算复杂。

3、安装和使用

通过 npm 安装：

npmi gestalt--savenpmi gestalt-charts--savenpmi gestalt-datepicker--save

或者用 yarn：

yarnaddgestaltyarnaddgestalt-chartsyarnaddgestalt-datepicker

引入组件时需要同时加载组件和样式文件：

import{Text}from'gestalt';import'gestalt/dist/gestalt.css';import'gestalt/dist/gestalt-datepicker.css';

Gestalt 官方维护 TypeScript 类型定义，TypeScript 项目可以直接使用。

4、开发工具

项目自带 codemod，每次发布可能有破坏性变更时，官方会提供代码自动迁移脚本。用法是把 Gestalt clone 下来之后，在你自己项目的目录里跑对应的 codemod，指定解析器和要转换的文件即可。dry run 模式可以先看改动，不会直接改文件。

每次向 master 合入代码都会触发一次发布。PR 标题需要按组件命名，例如 Avatar: Add outline prop。提交类型决定了版本 bump 的级别：文档修正走 patch，新增组件或属性走 minor，不兼容变更走 major。

5、谁适合用 Gestalt

在做 React 项目并且希望界面风格统一的中大型团队，会从这个设计系统里获益最多。现成的组件减少了重复开发，配套的设计文档减少了设计师和开发之间的沟通成本。

如果你正在从零搭建产品或者重构现有系统，也可以参考 Gestalt 的组件划分方式和文档组织方式，即使不用它的代码，这套体系本身也值得一看。

补充一点，项目对社区贡献者的支持资源有限。Pinterest 的工程师团队主要面向内部需求迭代，外部 issues 和功能请求不一定能及时响应。遇到问题时优先看 FAQ 和邮件频道，通常比提 issue 更快。

求迭代，外部 issues 和功能请求不一定能及时响应。遇到问题时优先看 FAQ 和邮件频道，通常比提 issue 更快。