2026 年 01 月 30 日

#Lynx 3.6：面向 AI、reactlynx-use、为设计工程而生的 CSS

刘继龙

性能主管 @ Lynx

杜光瑜

设计工程 @ Lynx

Lynx 团队

lynxjs.org

Lynx 3.6 已经正式发布！

本次版本推出面向 AI 的 Lynx 以增强 AI 原生开发能力，引入 reactlynx-use 以提升开发体验，并围绕设计表达能力增强了 CSS 能力。

在原生侧，Lynx 3.6 进一步完善平台集成，在 HarmonyOS 上支持独立的 BackgroundRuntime 与异步创建 TemplateBundle，并在 iOS 上新增 LynxView 的 Auto Layout 支持。

下面我们一起来看看 Lynx 3.6 带来了哪些新变化。

#面向 AI 的 Lynx：AGENTS.md 与 MCP

AI 助手正在快速成为日常开发的一部分。Lynx 3.6 正式引入 Lynx for AI：我们在官网上线了 /ai 专区，帮助 coding agent 更容易理解 Lynx、遵循最佳实践，并更高效协助你交付。

本次版本我们提供 AGENTS.md 以及两项 MCP Server，让项目更懂 Lynx（Skills 即将发布！）。

#Lynx Docs MCP

Lynx Docs MCP 通过 MCP 将你的 coding agent（如 Gemini、Claude、Cursor 或 Copilot）接入 Lynx 文档，并结合 llms.txt 与精心设计的提示词，让 agent 能更快检索到正确资料并更好地完成开发任务。

#Lynx DevTool MCP

Lynx DevTool MCP 是一个 MCP 服务器，帮助编码代理连接设备并像 DevTools 一样检视与操控 Lynx 页面：读取元素/控制台/源码、执行点击拖拽等交互，并支持截图给多模态模型分析。

#reactlynx-use：为 ReactLynx 而生的 Hooks

reactlynx-use 是一套面向 ReactLynx 项目的 Hooks 工具集。

它包含两类 Hooks：一类是开源社区长期验证、遵循“标准 React”范式的通用 Hooks（如 useEffectOnce、useDebounce 等），并受益于 react-use 提供的优秀基础；另一类则是面向 Lynx 能力与双线程模型的特制 Hooks，把主线程交互、运行时事件等能力以更 React 的方式暴露出来。

其中，面向 Lynx 的 Hooks 代表包括：

• useVelocity：追踪主线程 Tap 事件的速度与方向。
• useTapLock：将主线程 Tap 事件限制在指定的方向与范围内。
• useMainThreadImperativeHandle：useImperativeHandle 的 Lynx 主线程版本。
• useEventListener：提供更灵活的事件监听能力，支持 exposure、disexposure 等。

这使你可以用熟悉的 Hooks 来处理日常逻辑，并在需要时顺畅接入 Lynx 的主线程输入模型与运行时事件。

#为设计工程而生的 CSS

从 Lynx 3.6 开始，CSS 在设计工程与设计系统中承担了更加明确的角色。作为一种表达设计意图的媒介，CSS 既描述设计决策如何在不同层级中被组合与生效，也直接参与界面中视觉结构与感知的形成。

本次版本围绕 CSS 变量、渐变与滤镜三个方面，增强了 CSS 的表达能力。

我们也为每一项能力准备了精彩的 Demo，它们都可以在 Web 端渲染并支持交互体验。

#内联 CSS 变量：用于可计算样式

自 Lynx 3.6 起，CSS Variable（CSS 变量）可以以内联方式定义和引用。这使它们能直接被应用在组件边界处（JS 参数进入 CSS 解析流程的地方），而无需依赖祖先节点的 class 切换（如 theme-light / theme-dark），也不需要命令式的 JS setProperty 调用。

当组件的样式由用户选择或在运行时计算得到时，这种能力尤为关键，因为此类连续值无法通过有限的预定义 class 集合来表达，否则就只能退回到命令式的样式更新方式。

style={{
  '--x': pointer.x,  // normalized parameter from JS
  backgroundColor: 'var(--dot-accent-color)', //defer resolution to component CSS
}}

Inline CSS Variables（内联 CSS 变量）通过 JS 将设计参数交由 CSS 的继承与计算体系处理，使设计意图能够被动态解析与表达，并在不破坏组件作用域隔离的前提下，维持声明式的样式模型。

design-guidesrc/force_field/field.tsx

预览

#嵌套 CSS 变量：用于设计变量分层

自 Lynx 3.6 起，CSS Variable（CSS 变量）可以基于其他变量进行定义，从而支持 Design Token（设计变量）的分层组合与逐步解析。

Design Token 用于承载高层级的设计决策，例如颜色、排版、间距、阴影与光影效果。通过 Nested CSS Variables（嵌套 CSS 变量），这些设计决策可以层层向下传递，落到组件级变量，并最终形成具体的视觉样式。

/* Resolve and compose shadow tokens via nested CSS variables. */
.card {
  --blur: 12px;
  --ambient-shadow: 0 0 var(--blur) var(--color);
  box-shadow: var(--ambient-shadow), var(--rim-shadow);
}

这一能力在处理 box-shadow 这类复合声明时尤为关键。一个 box-shadow 往往包含多个阴影层，每一层又由位移、模糊、扩散和颜色等多个相互关联的维度共同定义。 借助 Nested CSS Variables，阴影层现在可以由 Design Token 派生并进行组合，并在 CSS 中保持清晰、可追溯的结构关系。

design-guidesrc/soft_glow/index.css

预览

#圆锥渐变：作为设计原语

Lynx 3.6 新增支持 conic-gradient() 这一 CSS 图像函数。它可以用于支持 <image> 类型值的 CSS 属性中，例如 background-image 和 mask-image，用于在 CSS 中直接生成连续的角度型颜色过渡。

.bg {
  background-image: conic-gradient(from 30deg, #ff7385, #fe69a1, #00d0f1);
}

圆锥渐变（Conic Gradient）非常适合用于表达角度或周期性结构，例如颜色环、色相选择器等。在实际场景里，它更像一种轻量的设计原语，可以被组合进交互控件与可视化工具中。

design-guidesrc/color_wheels/index.css

预览

#CSS 滤镜：用于形态生成

Lynx 3.6 扩展了 CSS Filter（CSS 滤镜）能力，新增支持 brightness、contrast 与 saturate。

随着这些能力的引入，CSS filter 属性成为一种可组合的形态生成工具。将新增支持的 contrast 滤镜与既有的 blur 能力配合使用，可以放大重叠区域的视觉响应，使原本柔和、分散的形状逐渐融合为连贯的整体。 诸如形状融合、感知分组与流动边界等视觉结构，可以直接通过 CSS 构建，而无需依赖位图资源或额外的自定义渲染管线。

design-guidesrc/gooey_effect/index.css

预览

#Native APIs

#HarmonyOS 支持独立的 BackgroundRuntime

HarmonyOS 新增支持独立的 BackgroundRuntime，与 Android 和 iOS 的现有能力进一步对齐。

借助独立的 BackgroundRuntime，开发者可以在不依赖渲染的情况下独立运行后台 JS 任务，或提前创建后台运行时，以降低 LynxView 初始化阶段的延迟。

#HarmonyOS 平台新增异步创建 TemplateBundle 的方法

在 Android 和 iOS 平台上，TemplateBundle.fromTemplate 可以在任意线程执行；而在 HarmonyOS 上，ArkTS 逻辑必须运行在应用主线程。

为减少主线程 I/O 阻塞，Lynx 3.6 在 HarmonyOS 上引入了异步创建 TemplateBundle 的 API：

• TemplateBundle.fromTemplateAsync
• TemplateBundle.fromTemplateAsyncWithOption

#iOS 平台 LynxView 新增 enableAutoLayout 能力

iOS 平台新增方法 [LynxView enableAutoLayout]。

开启后，LynxView 可以直接从客户端的 Auto Layout 约束中解析排版参数，无需再手动设置 LynxView 的布局配置。

#升级指南

参照官网接入 Lynx 到现有应用，更新 Lynx 依赖版本，即可完成 Lynx 3.6 版本升级。