如何通过将旧版 UI 迁移至 Asterix 来缩短开发时间

现有 UI 与 Asterix 的共存

将全新的设计系统直接覆盖到现有项目中很容易引发事故。布局往往会崩溃，功能也会变得混乱。使用 Meta 在 8 年间管理超过 13,000 个应用程序所开发的 StyleX 引擎，可以安全地与现有的 CSS-in-JS 共存。

请分离命名空间以防止样式混淆：

修改 @astryxdesign/build 配置，使库源代码编译为 .astryx- 前缀，现有代码编译为 .x- 前缀。
使用 CSS 的 @layer 将 layers.css 置于顶层，并按照 [reset, astryx-base, astryx-theme, product] 的顺序设定优先级。
创建一个矩阵，按原子 UI、布局、复合模块的顺序确定转换范围。

使用这种隔离结构，比进行全面重构可以节省 40% 的开发时间。

设计师与令牌（Token）同步

如果 Figma 的设计令牌与 Asterix 的主题设置不一致，视觉误差将持续存在。不要让开发人员手动修复代码，而是通过基于 JSON 的流水线来解决此问题。

在存储库根目录下放置定义颜色、排版和间距的 JSON 模式。
配置 CI/CD，使设计师推送 Figma 令牌时，GitHub Actions 能自动重新生成 theme.ts。
设置 @stylexjs/eslint-plugin 以禁止内联数值输入。

此过程完成后，开发人员将使用 var(--spacing-3) 等令牌变量，而非硬编码。UI 碎片化现象将消失，得益于自动补全，犯错的几率也会降低。

领域组件自动化

只有减少重复的业务逻辑和 UI 组装，才能提升新页面的开发速度。模块越复杂，就越应将渲染区域与状态管理逻辑分离。

将数据获取和状态控制分离为纯 React Hook 进行管理。
使用 Asterix CLI 的 swizzle 命令将核心组件提取到本地目录，以获取控制权。
将 CLI 模板与自定义脚本连接，根据 API 规范自动生成页面标记（Markup）和 Hook。

这样做，每制作一个页面，都能节省 2 小时从零开始构建组件的时间。

构建时性能管理

运行时注入样式的方式会随着组件的增加而降低性能。StyleX 在构建时提取原子 CSS，从而减小包体积。根据 Meta 开发团队的数据，引入静态编译后，样式包体积减少了 80%，渲染效率提高了 30%。

在 vite.config.ts 的 astryxStylex 选项中设置 runtimeInjection: false，以强制提取静态 CSS。
在 rollupOptions 中将 @astryxdesign 和 @stylexjs 分离为单独的 Chunk。
在 Chrome 开发者工具的 Performance 面板中查看 INP 指标，找出耗时超过 50ms 的样式计算瓶颈。

转换为静态构建后，即使在大规模服务中，也能在没有运行时开销的情况下呈现稳定的界面。

现有 UI 与 Asterix 的共存

请分离命名空间以防止样式混淆：

修改 @astryxdesign/build 配置，使库源代码编译为 .astryx- 前缀，现有代码编译为 .x- 前缀。

使用 CSS 的 @layer 将 layers.css 置于顶层，并按照 [reset, astryx-base, astryx-theme, product] 的顺序设定优先级。

创建一个矩阵，按原子 UI、布局、复合模块的顺序确定转换范围。

使用这种隔离结构，比进行全面重构可以节省 40% 的开发时间。

设计师与令牌（Token）同步

如果 Figma 的设计令牌与 Asterix 的主题设置不一致，视觉误差将持续存在。不要让开发人员手动修复代码，而是通过基于 JSON 的流水线来解决此问题。

在存储库根目录下放置定义颜色、排版和间距的 JSON 模式。

配置 CI/CD，使设计师推送 Figma 令牌时，GitHub Actions 能自动重新生成 theme.ts。

设置 @stylexjs/eslint-plugin 以禁止内联数值输入。

此过程完成后，开发人员将使用 var(--spacing-3) 等令牌变量，而非硬编码。UI 碎片化现象将消失，得益于自动补全，犯错的几率也会降低。

领域组件自动化

只有减少重复的业务逻辑和 UI 组装，才能提升新页面的开发速度。模块越复杂，就越应将渲染区域与状态管理逻辑分离。

将数据获取和状态控制分离为纯 React Hook 进行管理。

使用 Asterix CLI 的 swizzle 命令将核心组件提取到本地目录，以获取控制权。

将 CLI 模板与自定义脚本连接，根据 API 规范自动生成页面标记（Markup）和 Hook。

这样做，每制作一个页面，都能节省 2 小时从零开始构建组件的时间。

构建时性能管理

在 vite.config.ts 的 astryxStylex 选项中设置 runtimeInjection: false，以强制提取静态 CSS。

在 rollupOptions 中将 @astryxdesign 和 @stylexjs 分离为单独的 Chunk。

在 Chrome 开发者工具的 Performance 面板中查看 INP 指标，找出耗时超过 50ms 的样式计算瓶颈。

转换为静态构建后，即使在大规模服务中，也能在没有运行时开销的情况下呈现稳定的界面。

如何通过将旧版 UI 迁移至 Asterix 来缩短开发时间

Related Video

Meta 推出了自己的 shadcn (Astryx)

如何通过将旧版 UI 迁移至 Asterix 来缩短开发时间

现有 UI 与 Asterix 的共存

设计师与令牌（Token）同步

领域组件自动化

构建时性能管理

More from the community

사내 시스템에 llm api 붙일 때 마주하는 현실적인 한계와 대응법

레거시 백엔드에 GPT-6 Astra 붙일 때 예산 승인과 보안 통과를 먼저 끝내는 법이 있습니다

에이전트끼리 대화하다 6천만 원 청구서가 나오는 이유

사내 RAG 벡터 검색에 Okta 권한 필터를 직접 거는 방법

브라우저 에이전트에게 내 구글 계정을 통째로 넘기면 안 되는 이유

Apple Won the AI Race

Comments (0)

如何通过将旧版 UI 迁移至 Asterix 来缩短开发时间

现有 UI 与 Asterix 的共存

设计师与令牌（Token）同步

领域组件自动化

构建时性能管理