动效是用户交互体验中至关重要的一环，但在传统工作流中的交付成本却非常高。由于需要研发通过代码来手动还原设计师预设的动效内容，常常会导致无法批量化生产素材，交付周期长错过热点，以及最终视觉效果上的妥协。

为了降低或消除动效研发的相关成本，打通设计师创作到素材上线的自动化流程，腾讯内部历时 5 年研发了一套 PAG 动效工作流的解决方案，能够一键将 AE 动效内容导出并应用到几乎所有的主流平台。该方案目前已经接入服务了腾讯内 70+ App，包含微信、QQ、王者荣耀等头部 App，并于 2022 年 1 月正式对外开源。

本次分享除了介绍 PAG 的整体工作流及诞生背景外，将重点解读在产品需求驱动下遇到的重点技术挑战和架构演进细节，包括动效文件的极限压缩原理，如何支持所有 AE 特性的导出，以及让 SDK 包体直线降低 50% 的 4.0 全新渲染引擎等。

演讲提纲：

1. PAG 诞生背景

• 各种应用场景下的强烈动效需求
• 传统的动效工作流及其核心痛点 - 研发成本高 / 生产周期长 / 视觉动效弱

2. PAG 动效解决方案

• PAG 动效工作流介绍以及如何解决核心痛点
• PAG 与 Lottie 和 SVGA 等方案的区别和优势 - 文件格式 / AE 特性支持 / 平台支持

3. PAG 技术挑战与架构演进

• 版本迭代概述 - PAG 1.0 ~ 4.0 重点能力演进
• 高效的文件格式 - 格式设计目标 / 动效文件极限压缩策略
• AE 全特性支持 - 矢量和序列帧混合导出 / 透明视频及容器封装优化
• 渲染架构优化 - 利用静态区间跳过重复渲染 / 三级缓存架构设计
• 4.0 全新渲染引擎 - 替换 Skia 实现包体和性能的进一步突破

5. PAG 总结与展望

• 业务接入情况与开源成果
• 未来发展重点路线图

你将获得：

• 了解腾讯在解决动效工作流痛点方面的最新探索和思考
• 了解腾讯 PAG 动效方案背后的技术挑战和渲染架构细节
• 了解在 2D 绘图引擎领域除了 Skia 之外的一个全新选择
• 了解腾讯 PAG 动效方案的应用场景和未来重点规划

蓝湖目前在国内头部科技企业的渗透率超过 98%，拥有庞大的 SaaS 和私有化部署客户群体，在迎接设计协同方面的各种挑战时沉淀了丰富的经验，尤其在 SaaS 落地过程中，开发效率、稳定性、SaaS 与私有化版本同步等方面更具优势。

首先，在业务接入端，Sketch、XD、PS、Axure 等设计软件在前端运行时的环境差异巨大，针对各类设计软件生态，蓝湖通过底层抽象通用解析适配，上层通用业务复用，基于 Stencil 改造通用组件抽象，提升各类插件宿主环境的差异。

其次，在 SaaS 和私有化部署过程中，面对纷繁庞杂的企业部署环境，既要最大限度降低同步成本，也要保证系统和性能的稳定。面对类似的需求迭代时，蓝湖针对整体工程架构和编译改造，使用 Monorepo 编译改造适配通用模块复用、发布制品独立以及差异化代码隔离，来保证 SaaS 私有化过程的落地。

本次分享将结合蓝湖在协同领域工程化应用和企业落地过程中的技术实践经验做重点阐述，也将在未来设计协同形态，以及蓝湖在设计协作领域前沿技术的探索做简要介绍。

演讲提纲：

1. 背景介绍

• 设计协同工作流
  • 产研流程中产品/设计师/前端协作流程
  • SaaS 标准化与企业定制
• 企业设计协同落地痛点
  • 产品/设计师/前端协作成本
  • 设计工具多样性组件复用，研发效能
  • SaaS/私有化部署中差异化处理和能力同步

2. 设计协同工程化挑战

• 宿主平台多样性
  • Sketch 环境（包含 DSM）
  • MasterGo/Figma 宿主环境
  • XD、PS 中 CEP 和 UXP演进
  • Axure
• 设计协作方案（OT、CRDT 的探索和落地）
  • 同步效率——代码复用、制品独立、差异化隔离
  • 稳定性治理——性能排查和跟踪

3. 蓝湖 SaaS 设计协同落地方案

• 整体架构——架构演进
• 插件解析层适配
  • 底层宿主环境适配和改造
  • 上层业务通用组件抽象和复用
  • 通用数据模型设计（D2C）
• 设计协作
  • 画布渲染性能——画布演进
  • 画布协同能力落地——协同方案调研和改造，领域模型设计，以及协同过程回放
  • 代码生成——代码标注、DDS 低代码、差异化对比
  • SaaS/私有化部署工程化改造——Monorepo 模块分包管理，改造编译流程做差异化代码隔离，制品独立部署避免迭代冲突

4. 总结与展望

• 设计协作未来的形态
• 蓝湖的前沿探索

你将获得：

• 了解 SaaS 设计协同在企业工作流中的工程化落地方案
• 了解设计协同中各类设计软件的接入适配和改造方案
• 了解设计协同未来的发展方向和前沿技术

在产品交付链路中，前端设计协同的高效与否直接关系到产品的上线节奏。长期以来，由于设计师与工程师思维方式、关注点和使用工具上的差异，前端设计协同存在两大痛点：沟通成本高、局部效率低。

为了解决这两大痛点，网易云音乐以产品的快速交付为目标导向，对现有的协同流程进行解构，提出了基于 C2D2C（Design2Code2Design）的无损设计协同，尝试利用组件代码及其衍生物统一协作语言，将设计意图无损传递给下游开发，消除不确定性，解决沟通成本大的问题。

而在设计侧，通过 C2D（Code2Design）实现代码驱动设计，设计师从绘制设计稿转变成配置设计稿，提高出稿效率；在开发侧，通过 D2C（Design2Code）实现设计稿自动生成代码，提高出码的效率。本场将重点分享云音乐在 C2D2C 无损设计协同上的思考和实践。

演讲提纲：

1. 背景介绍

• 设计协同简介
• 设计协同需要解决的两大问题
• 传统有损设计协同的工作流程及其痛点

2. 云音乐基于 C2D2C 的无损设计协同

• C2D2C 设计协同的工作流程以及解决的核心痛点
• 相比「有损」设计协同，C2D2C 设计协同的优势
  • 维护成本低——只需开发侧维护组件库即可
  • 协作效率高—— 用组件代码及其衍生物统一协作语言，设计意图无损传递给开发
  • 局部效率高

3. 基于 C2D2C 的无损设计协同的方案设计与技术挑战

• 产品大图 & 技术架构图介绍
• 插件
  • 如何跨设计平台（Sketch、Figma）
  • 如何实现 Sketch / Figma 组件的可配置
• C2D
  • 如何做技术选型（html2sketch vs react-sketchapp / html2figma vs react-figmaapp）
  • 如何保证 95% 以上的视觉还原度
• D2C
  • D2C 是否一定需要借助 AI？
  • 基于元数据的 D2C 原理介绍
  • 如何实现能力的跨平台和多端（Sketch 、Figma 平台、Android、iOS、RN、Web 四端）

4. 总结与展望

• 业务接入情况 & 开源计划
• 未来发展路线图

你将获得：

• 了解网易云音乐在解决设计协同方面的最新思考和探索
• 了解如何借助 C2D 为设计师提效
• 了解如何借助基于元数据的 D2C 为开发提效 

最近几年，在线协同文档作为办公提效神器广受欢迎，也有很多新形态的协同类产品开始崭露头角，如 Figma、Notion、Miro 等。这些趋势背后反映的是 Web 应用性能和体验的进一步增强，可以协同的场景不止文档。但对于前端同学，要让应用真正“协同”起来，依然有较高的学习门槛和落地成本。为了让协同更普适，更容易上手和实践，我们在长期的协同文档研发过程中抽象沉淀了通用型协同框架 KoKo.js，并在 5 月份对外发布的轻雀文档概念版（https://x.qingque.cn/）中做了实际应用，用户反馈积极。本场分享将重点介绍 KoKo 的特点、实现原理及其适用场景。

演讲提纲：

1. 增强产品体验的秘密—协同

• 协同产品的演进
• 更多产品的 “协同化”
• 一切皆可协同

2. 如何设计一款通用协同框架 (koko.js)

• 起因—传统协同方案面临的挑战
• 解法—更通用场景、块级协同、块内协同
• 简单而“眼熟”的 API 设计
• 数据模型与分发协议
• 通信保障与冲突解决

3. 与传统方案（OT/CRDT）的差异化

• 面向块（block）的价值
• 灵活的引用与组装
• 优劣的对比

你将获得：

• 框架如何应对业务的变化
• 协同技术如何在传统业务中应用
• 协同的原理
• 从 0 到 1 设计一款协同框架