roncarve/roncarve-official-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: launch Roncarve Harness product page

Browse Source
This commit is contained in:
admin
2026-08-22 21:49:25 +08:00
parent 28574f367a
commit 9cfbb95b1e
18 changed files with 3561 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
荣刻驭境-Roncarve-Harness-产品页设计文档.md
+717
View File
@@ -0,0 +1,717 @@
# 荣刻驭境（Roncarve Harness）产品入口与产品介绍页设计文档
> 文档状态：设计基线 v1.1（关键决策已确认）
> 编写日期：2026-08-22
> 适用范围：荣刻科技官网导航、产品列表入口、荣刻驭境产品介绍页
> 参考页面：[DeepSeek Harness](https://www.deepseek.com/harness/)
> 当前仓库基线：单页静态官网 `index.html` + 原生 CSS/JavaScript + Three.js Hero
## 1. 设计结论
本次新增内容由两个层级组成：
1. 官网主导航新增“产品 / Products”入口，在下拉产品列表中展示“荣刻驭境 / Roncarve Harness”。
2. 点击产品卡片进入独立产品介绍页，推荐正式路由为 `/products/roncarve-harness/`。
产品页采用“深色空间舞台 + 品牌 Logo 粒子 + 滚动叙事”的视觉方向。首屏加载时，粒子从四面八方与不同景深层进入，并在约 3 秒内减速汇聚为完整荣刻 Logo；汇聚完成后维持轻微漂浮，只有在用户开始滚动后才逐渐进入 3D 旋转、景深缩放和空间展开。鼠标靠近粒子产生局部排斥，点击非交互背景时粒子短暂重新聚拢，再回到当前滚动位置对应的空间状态。
页面表达的核心不是“又一个 Harness”，而是三项差异化价值：
- 定制优化的插件引擎：面向海量插件进行精准检索、匹配与发现。
- 更高效率的热插拔：插件可以快速加载、卸载、替换和组合。
- 从本地到协同：个人版以本地客户端连接本地项目，并通过浏览器界面操作；平台版以团队共享工作空间承载所有成员协同。
视觉上参考 DeepSeek Harness 的深色、网格、光晕、克制排版与滚动节奏，但不复制其品牌标识、文案、图形资产或页面结构细节。荣刻页面继续使用现有官网的蓝青紫品牌色、圆角、按钮和字体体系。
### 1.1 已确认决策
| 项目 | 决策 |
| --- | --- |
| 产品状态 | 统一展示为“即将开放 / Coming Soon” |
| 转化渠道 | 当前只使用 `contact@roncarve.com` 邮箱 |
| 版本边界 | 采用本文第 5.4 节定义的个人版/平台版首发能力 |
| 演示参考 | 使用 DeepSeek Harness 官方 Web UI、插件状态页和运行轨迹界面作为研究参考 |
| 上游许可 | 已确认允许二次开发；发布物继续保留上游许可证与必要署名 |
| 前端架构 | 确认引入 React/Vite，产品页采用 React Three Fiber + GSAP |
## 2. 背景与目标
### 2.1 产品背景
产品中文名为“荣刻驭境”，英文名为“Roncarve Harness”。产品基于 DeepSeek Harness 进行二次开发，面向大语言模型与 Agent 场景，重点强化插件检索、插件热插拔、浏览器操作本地项目的个人客户端，以及团队共享工作空间。
“驭境”对应 Harness 对运行环境、工具与能力的组织和驾驭；英文名称保留 Harness，便于开发者快速理解产品类别。
### 2.2 设计目标
- 在官网中建立清晰、可扩展的产品入口，为后续新增产品预留结构。
- 在首屏 10 秒内让访客理解产品类别、差异能力和适用对象。
- 用品牌 Logo 粒子从“完整标识”到“空间插件生态”的变化，形成产品记忆点。
- 第二屏立即解释 Harness 的价值，避免页面只有视觉效果而缺乏产品信息。
- 同时服务技术决策者、开发者、企业团队负责人三类受众。
- 在桌面端保持沉浸感，在移动端、低性能设备和减少动态效果模式下保持可读与可用。
### 2.3 非目标
- 本阶段不设计完整控制台、插件市场或工作空间内部界面。
- 不在官网中展示未经确认的插件数量、性能倍数、客户数量或兼容模型数量。
- 不复制 DeepSeek Harness 的 Logo、动态图形、代码卡片、具体文案与视觉资产。
- 不让粒子交互覆盖导航、按钮、表单等核心操作。
- 不要求首页现有 Three.js Hero 与产品页共用同一套 3D 场景。
## 3. 产品定位与信息优先级
### 3.1 一句话定位
> 荣刻驭境是一套面向大语言模型与 Agent 的可组合 Harness，通过定制插件引擎实现海量插件精准检索和高效热插拔；个人版以本地客户端连接本地项目，平台版以共享工作空间连接团队协作。
### 3.2 目标受众
| 受众 | 主要任务 | 页面需要回答的问题 |
| --- | --- | --- |
| AI 开发者 | 快速组合模型、工具和插件 | 插件如何发现、加载、替换与调试？ |
| 技术负责人 | 评估 Agent 基础设施 | 是否可私有部署、可扩展、可治理？ |
| 企业团队负责人 | 组织多人协作 | 如何划定工作空间、管理成员与共享能力？ |
| 本地项目使用者 | 通过浏览器操作当前设备上的项目 | 客户端如何连接本地文件、运行环境与插件？ |
### 3.3 信息层级
访客应按以下顺序理解产品：
1. 这是什么：面向大语言模型与 Agent 的 Harness。
2. 为什么不同：定制插件引擎、精准检索、高效热插拔。
3. 如何使用：个人版通过本地客户端在浏览器中操作本地项目。
4. 团队如何用：平台版让所有成员在共享工作空间中协同。
5. 下一步是什么：通过邮箱咨询产品、选择版本或查看技术资料。
## 4. 官网产品入口设计
### 4.1 导航位置
建议主导航顺序调整为：
`产品` → `能力链路` → `解决方案` → `核心优势` → `交付网络` → `邮件咨询`
“产品”放在能力与解决方案之前，先呈现可购买/可体验的具体对象，再承接企业能力说明。英文导航使用 `Products`。
### 4.2 桌面端交互
- “产品”是带下拉面板的导航项，点击和键盘操作都可打开；悬停只作为增强，不作为唯一触发方式。
- 面板位于导航下方，宽度建议 `420–520px`，使用现有深色半透明表面、`16px` 圆角和低对比边框。
- 当前只有一个产品时，仍使用产品卡片结构，为后续扩充产品保留空间。
- 点击卡片任意非禁用区域进入 `/products/roncarve-harness/`。
- 点击外部、按 `Esc`、选择产品或导航离开后关闭面板。
- 打开时首个产品卡获得逻辑焦点；焦点不能被困在面板中。
### 4.3 移动端交互
- “产品”作为一级折叠项，点击后在移动导航中展开产品列表。
- 产品卡改为全宽纵向条目，不使用桌面浮层定位。
- 展开按钮使用 `aria-expanded`，列表与按钮通过 `aria-controls` 关联。
- 产品卡最小触控高度 `56px`，与语言、主题和邮件咨询按钮保持足够间距。
### 4.4 产品列表卡文案
**中文**
- 分类标签：`AGENT INFRA / HARNESS`
- 产品名：`荣刻驭境`
- 英文名：`Roncarve Harness`
- 简介：`本地客户端连接本地项目，平台共享工作空间承载团队协同，并内置精准插件检索与高效热插拔。`
- 状态标签：`即将开放`
**英文**
- Product: `Roncarve Harness`
- Description: `A local client for browser-based local projects and a shared workspace for team collaboration, with precise plugin discovery and hot swapping.`
- Status: `Coming Soon`
### 4.5 路由与返回逻辑
- 推荐正式路由：`/products/roncarve-harness/`。
- 推荐面包屑：`首页 / 产品 / 荣刻驭境`，视觉上可弱化，但保留语义和返回能力。
- 产品页品牌 Logo 点击返回官网首页；“产品”导航保持当前激活态。
- 现有 Nginx `try_files` 规则支持目录式静态路由，但实现阶段仍需确认构建产物确实生成 `products/roncarve-harness/index.html`。
- 上线时同步更新 `sitemap.xml`、canonical、Open Graph 和结构化数据。
## 5. 产品介绍页信息架构
页面采用 6 个内容阶段。粒子舞台在前两屏连续存在，第二屏结束后逐渐退为环境背景，正文接管注意力。
| 阶段 | 建议高度 | 核心任务 | 主要内容 | 粒子状态 |
| --- | ---: | --- | --- | --- |
| 01 Hero | `100svh`，最小 `760px` | 说明产品是什么 | 品牌、主标题、简介、CTA、能力摘要 | 四向入场后汇聚为完整 Logo，不旋转、不展开 |
| 02 Harness 价值 | `100–120svh` | 说明为什么需要它 | 三项核心能力与一句方法论 | Logo 展开为空间插件网络，进入景深与旋转 |
| 03 插件引擎 | 内容自适应 | 解释差异化能力 | 精准检索、匹配、热插拔、运行可观测 | 粒子退到背景，形成节点流 |
| 04 双版本 | 内容自适应 | 帮助选择版本 | 本地客户端、团队共享工作空间、协同 | 仅保留低密度环境粒子 |
| 05 使用路径 | 内容自适应 | 建立落地感 | 发现插件 → 装配能力 → 运行 → 团队沉淀 | 局部连线与状态点 |
| 06 CTA | `70–90svh` | 推动转化 | 邮件咨询、版本选择、技术资料 | 粒子再次轻度聚拢为品牌轮廓 |
### 5.1 第一屏：完整 Logo 与产品价值
首屏必须在 WebGL 初始化前先显示可读文案，粒子就绪后直接从画面边缘入场，不先闪现完整静态 Logo。静态 Logo 仅用于减少动态效果模式或 WebGL 失败回退。
建议内容：
- 状态标签：`即将开放 / COMING SOON`
- Eyebrow：`RONCARVE HARNESS / 荣刻驭境`
- H1：`让 Agent 驾驭每一种能力`
- 副标题：`面向大语言模型的可组合 Harness，以定制插件引擎实现精准检索与高效热插拔；个人版在浏览器中操作本地项目，平台版以共享工作空间连接团队协作。`
- 主按钮：`邮件咨询`
- 次按钮：`查看版本能力`
- 能力摘要：`精准插件检索`、`高效热插拔`、`个人 / 平台双版本`
英文对应文案：状态为 `COMING SOON`，主按钮为 `Email Us`，次按钮为 `Compare Editions`。
桌面端采用左侧文案、右侧/居中偏右 Logo 粒子构图。Logo 不应被正文遮挡，文字区占页面宽度约 `38–44%`，空间舞台占 `56–62%`。
首屏背景由近黑渐变、低对比网格、青蓝环境光晕和边缘暗角组成。网格与光晕是环境层，不随鼠标进行大幅移动。
### 5.2 第二屏：Harness 价值与空间展开
第二屏是本设计的关键说明屏，不允许只展示粒子动画。
标题建议：
> `插件构成能力，Harness 组织运行`
说明建议：
> `荣刻驭境把插件发现、装配、替换和协作放进同一套运行环境，让 Agent 能力可以持续扩展，而不必反复重建。`
三张能力卡：
1. `海量插件精准检索`：从定制插件数据库中按任务、能力、兼容性和工作空间策略检索合适插件。
2. `更高效率热插拔`：在明确生命周期与依赖关系的前提下完成加载、卸载、替换和组合。
3. `本地项目到共享协作`：个人版通过本地客户端操作本地项目；平台版让所有成员进入同一个共享工作空间协同。
滚动进入第二屏后，Logo 的轮廓开始出现深度：外环向不同 Z 层展开，右上角品牌切面形成高亮近景粒子，部分粒子转化为插件节点。卡片依次进入，但不与粒子同时进行大幅运动。
### 5.3 第三屏：定制插件引擎
标题建议：`为插件规模化而优化的引擎`
内容使用四步能力链：
- `发现 / Discover`：连接定制插件数据库，建立能力、版本、依赖与兼容性索引。
- `匹配 / Match`：结合任务语义、运行环境、权限和工作空间策略完成候选筛选。
- `装配 / Compose`：按需加载、卸载和替换插件，降低重新构建 Agent 的成本。
- `观测 / Observe`：记录插件状态、依赖、调用和异常，为团队复用与治理提供依据。
视觉建议使用真实 UI 风格的信息卡、状态标签和节点连线，不使用无含义的伪监控数字。
### 5.4 第四屏：个人版与平台版
采用两张并列版本卡。平台版可以略大，但不使用“推荐”标签和价格信息；产品当前统一显示“即将开放”。
| 能力 | 个人版 Personal | 平台版 Platform |
| --- | --- | --- |
| 部署对象 | 当前设备上的本地项目 | 需要共同协作的团队 |
| 部署形态 | 本地客户端 + 浏览器界面 | 组织级平台服务 |
| 定制插件引擎 | 精准检索、安装、卸载、替换与热插拔 | 同等引擎能力，并增加组织级策略 |
| 插件数据库 | 本地项目索引、收藏与本地配置 | 团队共享目录、可见范围与版本管理 |
| 工作空间 | 本地项目上下文 | 所有成员共享的团队工作空间 |
| 成员与角色 | 本地客户端，不包含多人协同 | 成员、角色与协作权限 |
| 配置复用 | 本地项目预设、导入与导出 | 团队预设、共享插件组合与配置 |
| 运行记录 | 本地项目运行记录 | 团队共享活动与运行历史 |
| 凭据边界 | 本地连接配置保留在当前设备 | 团队工作空间凭据引用，页面不回显明文 |
| CTA | `邮件咨询个人版` | `邮件咨询平台版` |
#### 5.4.1 首发能力决策
**个人版首发范围**
- 采用本地客户端形态，通过浏览器界面操作当前设备上的本地项目。
- 完整使用定制插件引擎与定制插件数据库。
- 支持插件语义检索、筛选、安装、卸载、替换、版本固定和热插拔。
- 本地文件、运行环境、项目预设和运行记录保留在当前设备。
- 不提供团队成员、角色、组织策略和跨用户共享。
**平台版首发范围**
- 面向组织部署，所有成员围绕同一个团队共享工作空间协作。
- 通过成员与角色权限管理项目、策略、插件组合、共享配置和记录。
- 支持组织级插件目录、团队可见范围、版本管理和基础允许列表。
- 支持共享项目、团队预设、插件组合、配置、活动记录和运行上下文。
- 支持工作空间级凭据引用；前端仅展示凭据名称和状态，不回显明文。
**不纳入首发公开承诺**
- SSO、SCIM、跨组织协作和复杂的字段级权限。
- 多级插件审批流、企业审计导出和合规报表。
- 商业计费、资源配额、用量结算与成本中心。
- 多地域高可用、自动容灾和托管云服务等级协议。
这些能力可以进入平台版后续路线图，但“即将开放”页面不将其包装为已具备能力。
### 5.5 第五屏：使用路径
标题建议：`从一个任务，生长为团队能力`
内容顺序：
1. 描述目标或任务。
2. 检索并选择匹配插件。
3. 在运行中装配或替换能力。
4. 个人版将有效配置保存到本地项目；平台版同步到团队共享工作空间。
该段用于把抽象的 Harness 转化为可理解的工作流。若后续已有真实产品截图，应优先替换概念图，不长期使用占位界面。
#### 5.5.1 官方演示环境参考
截至 2026-08-22，DeepSeek Harness 官方提供的可验证演示形态是本地 Web UI，而非一个无需配置即可登录的公共 SaaS 演示账号：安装 Node.js 后可运行 `npx @deepseek-ai/dsh web`，默认启动于 `http://127.0.0.1:3080`。官方使用流程是配置模型、选择工作空间、创建会话并运行任务。
内部设计研究可参考以下官方材料：
- [DeepSeek Harness 官方介绍页](https://www.deepseek.com/harness/)
- [官方 Web UI 使用指南](https://github.com/deepseek-ai/deepseek-harness/blob/master/docs/user/guide/index.md)
- [官方插件安装状态界面](https://www.deepseek.com/harness/images/harness/feat-plugin.en.png)
- [官方运行轨迹界面](https://www.deepseek.com/harness/images/harness/trajectory-real-view.en.png)
- [官方页面演示视频](https://www.deepseek.com/harness/videos/demo.mp4)
荣刻驭境可借鉴其“配置模型 → 选择工作空间 → 运行任务 → 查看插件与运行记录”的信息组织，但对外演示必须使用荣刻自己的界面、品牌和数据。建议后续完成一个可运行的最小演示环境并截取四个真实状态：
1. 在定制插件数据库中搜索并筛选插件。
2. 查看已安装插件、依赖、版本和热插拔状态。
3. 在本地项目与团队共享工作空间两种形态中验证配置和成员协作。
4. 查看一次运行的插件调用与活动记录。
在荣刻真实演示尚未完成前，官网保留文字能力卡和粒子视觉，不制作容易被误认为真实产品的伪控制台截图，也不直接把 DeepSeek 官方截图作为荣刻产品截图发布。
### 5.6 第六屏：转化 CTA
标题建议：`让下一套 Agent 能力，从可组合开始`
- 主 CTA：`邮件咨询荣刻驭境`
- 次 CTA：`咨询个人版 / 平台版`
- 可选链接：`查看技术资料`，仅在资料真实可访问时展示。
所有对外 CTA 统一打开 `contact@roncarve.com`。基础链接为 `mailto:contact@roncarve.com?subject=%5B%E8%8D%A3%E5%88%BB%E9%A9%AD%E5%A2%83%5D%20%E4%BA%A7%E5%93%81%E5%92%A8%E8%AF%A2`；版本卡分别追加“个人版”或“平台版”主题。邮件正文可预填以下字段：关注版本、使用场景、部署环境、团队规模和联系人。页面不再展示尚不存在的预约表单、企业微信或独立申请入口。
## 6. 视觉系统
### 6.1 与现有官网的关系
沿用现有官网：
- 蓝青主色、蓝紫辅助色和近黑背景。
- `Inter / PingFang SC / Microsoft YaHei` 正文字体体系。
- 等宽字体用于标签、状态和技术元信息。
- `10px / 16px / 24px` 圆角层级。
- 低透明边框、克制光晕、明确 `:focus-visible`。
- 最大内容宽度 `1200px`，导航高度桌面 `72px`。
产品页第一版建议固定为深色艺术方向，不提供浅色粒子主题。官网首页的主题偏好不被清除；进入产品页时可隐藏外观切换，仅保留语言切换，离开产品页后恢复用户原有偏好。这样避免产品页在视觉上承诺一个尚未设计的浅色 3D 场景。
### 6.2 建议颜色令牌
| 用途 | 令牌 | 建议值 |
| --- | --- | --- |
| 页面底色 | `--harness-bg` | `#05070A` |
| 次级底色 | `--harness-bg-soft` | `#07131C` |
| 表面 | `--harness-surface` | `rgba(13, 29, 41, .72)` |
| 主文字 | `--harness-text` | `#F4FBFF` |
| 次文字 | `--harness-text-soft` | `rgba(229, 244, 247, .66)` |
| 主强调 | `--harness-cyan` | `#47E5EF` |
| 高亮强调 | `--harness-cyan-bright` | `#8BFBFF` |
| 深度蓝 | `--harness-blue` | `#42A5FF` |
| 空间紫 | `--harness-violet` | `#8982FF` |
| 边框 | `--harness-line` | `rgba(183, 229, 231, .13)` |
| 强边框 | `--harness-line-strong` | `rgba(139, 251, 255, .34)` |
粒子颜色以青蓝为主，紫色只用于深度和状态过渡。近景粒子更亮但不使用纯白大面积闪烁。
### 6.3 背景与网格
- 基础使用纵向近黑渐变，避免纯黑导致层次丢失。
- 网格建议 `64–80px` 单元，线宽 `1px`，透明度控制在 `0.025–0.055`。
- Hero 光晕集中在 Logo 后方和页面右上区域，正文后方保持较干净的暗色。
- 使用 CSS mask 让网格在页面边缘、正文区域和段落过渡处自然淡出。
- 内容卡片只使用局部玻璃效果，不在全页叠加大面积 `backdrop-filter`。
### 6.4 字体与排版
- H1 桌面：`clamp(46px, 5.2vw, 76px)`，字重 `650–750`，行高 `1.04–1.1`。
- H2 桌面：`clamp(36px, 4vw, 58px)`。
- 正文：桌面 `17–19px`，移动端 `16px`，最大行宽 `36–42em`。
- 技术标签：`10–12px` 等宽字体，字距 `0.10–0.16em`。
- 中英文名称第一次出现时并列；正文不反复堆叠双语，语言切换后使用单一语言。
### 6.5 按钮与卡片
- 主按钮使用青色实底和深色文字，延续现有官网 CTA。
- 次按钮使用透明底、低透明边框；悬停时提高边框和背景亮度。
- 卡片采用 `16px` 圆角、`1px` 边框和轻微内高光。
- Hover 位移不超过 `4px`，粒子活跃时卡片动效进一步收敛。
- 所有按钮必须有与 Hover 不同的键盘焦点状态。
## 7. Logo 空间粒子体验
### 7.1 粒子来源
使用现有 `assets/brand-logo-final.png` 的透明通道作为采样掩模。不得凭空绘制近似 Logo。
建议流程：
1. 将 Logo 绘制到离屏 Canvas。
2. 从 alpha 高于阈值的像素中进行分层采样。
3. 生成每个粒子的二维 Logo 目标坐标 `aLogoPosition`。
4. 按八个方位生成椭圆形远场入场坐标 `aIntroPosition`，并分配稳定的延迟和弧线路径。
5. 为每个粒子生成稳定随机种子、深度目标、旋转半径和颜色权重。
6. 使用统一的 `uIntro` 进度把粒子从远场坐标平滑汇聚到 Logo 目标坐标；汇聚完成前不启用滚动展开旋转。
入场位置必须是稳定、可复现的 BufferGeometry 属性，不在每帧重新随机。粒子沿八个方向和不同 Z 深度进入，通过错峰延迟与阻尼缓动汇聚；动画完成后才以 Logo 目标坐标为基础叠加轻微漂浮，避免形成无序爆炸或加载即被 3D 投影打散的观感。
### 7.2 滚动状态
| 页面滚动进度 | 粒子混合 | 旋转 | 景深与大小 | 内容状态 |
| ---: | --- | --- | --- | --- |
| `0–0.06` | 100% 完整 Logo | 无持续旋转 | Z 接近平面，大小统一 | Hero 完整可读 |
| `0.06–0.22` | Logo 轮廓轻微松动 | 仅轻微 Y 轴偏转 | 少量 Z 深度 | Hero 文案开始上移 |
| `0.22–0.55` | 向插件节点空间展开 | X/Y/Z 三轴缓慢旋转 | 近大远小、近亮远暗 | 第二屏标题与卡片进入 |
| `0.55–0.82` | 形成稳定空间网络 | 持续慢旋转 | 景深最明显 | 三项能力完整展示 |
| `0.82–1.00` | 粒子向背景节点过渡 | 旋转减弱 | 大粒子数量下降 | 进入正文内容 |
滚动进度只驱动“展开强度、空间位置、整体旋转基准、粒子尺寸范围和透明度”。时间 `uTime` 只负责持续但缓慢的微旋转与漂移，避免滚动停止后场景完全冻结。
### 7.3 鼠标排斥
- 仅在 `pointer: fine` 且未启用减少动态效果时开启。
- 将鼠标位置投射到粒子主平面，计算每个粒子到指针的距离。
- 在排斥半径内使用平滑衰减，不使用硬边界。
- 靠近中心的粒子位移更大，边缘粒子渐近归零。
- 指针离开舞台后，粒子使用阻尼回到当前滚动状态对应的目标，而不是回到页面顶部的 Logo 状态。
- 排斥不改变卡片、文字和可点击元素的位置。
建议 Shader 参数：
- 排斥半径：桌面视觉半径约 `90–140px`。
- 最大位移：Logo 尺寸的 `3–6%`。
- 回弹阻尼：约 `350–650ms` 的视觉恢复感。
### 7.4 点击重新聚拢
- 点击粒子画布或非交互背景时触发；点击导航、链接、按钮、卡片和表单不得触发。
- `uGather` 在约 `500–800ms` 内升至 1，使粒子重新聚拢为完整 Logo。
- 保持约 `250–400ms` 后，`uGather` 回落，粒子返回“当前滚动进度”对应的空间状态。
- 点击不强制滚动回顶部，不打断用户阅读位置。
- 连续点击时复用当前动画，不创建叠加 tween。
- 触屏设备可通过点击舞台触发同样效果，但不实现持续触摸排斥。
### 7.5 透视、大小与亮度
顶点 Shader 根据视图空间 Z 值计算点大小：远处粒子更小，近处粒子更大。片元 Shader 同时根据深度、Logo 权重和指针作用计算透明度与亮度。
推荐属性：
- `aLogoPosition`：Logo 聚拢位置。
- `aIntroPosition`：首屏远场入场位置。
- `aIntroDelay`：每个粒子的错峰入场延迟。
- `aIntroBend`：入场弧线的方向与幅度。
- `aSpreadPosition`：空间展开位置。
- `aSeed`：稳定随机种子。
- `aScale`：个体大小扰动。
- `aColorMix`：青、蓝、紫的颜色混合权重。
推荐 uniforms：
- `uTime`：持续旋转与漂移。
- `uIntro`：首屏从四周入场并汇聚为 Logo 的统一进度。
- `uScroll`：前两屏滚动进度。
- `uGather`：点击重新聚拢强度。
- `uPointer`：标准化指针坐标。
- `uRepelRadius` / `uRepelStrength`：排斥参数。
- `uPixelRatio`：DPR 控制。
- `uReducedMotion`：减少动态效果状态。
点精灵使用柔和圆点或轻微六边形切面，边缘通过 `smoothstep` 淡出；避免每个粒子都是高亮十字星。
### 7.6 初始加载保护
为确保首屏是完整 Logo：
- HTML 先渲染静态 Logo 轮廓或品牌 PNG。
- WebGL 初始化完成后，粒子以与静态 Logo 完全一致的位置和尺寸出现。
- 两层短暂交叉淡化，静态 Logo 再退出。
- `uScroll` 初值强制为 0，并在读取实际滚动位置后再同步；若用户通过历史记录恢复到页面中部，则直接进入对应滚动状态，不播放首屏入场。
- 相机初始视角、Logo 平面尺寸和容器比例必须预先确定，不能依赖第一帧之后的随机校正。
## 8. 技术方案
### 8.1 架构决策
已确认引入 React/Vite 构建链。当前仓库首页仍使用原生 HTML、JavaScript 和本地 Three.js 文件；产品页采用隔离的 React/Vite 入口，构建结果输出到现有静态站点目录，不改写首页运行方式。首页导航只负责链接到产品路由，不加载 React、R3F 或 GSAP 包。
推荐结构：
```text
src/harness/
main.tsx
HarnessProductPage.tsx
components/
ProductNav.tsx
ParticleStage.tsx
LogoParticleSystem.tsx
FeatureSection.tsx
EditionComparison.tsx
ProductCTA.tsx
shaders/
logo-particles.vert.glsl
logo-particles.frag.glsl
styles/
harness.css
public/assets/harness/
dist/products/roncarve-harness/
```
根目录新增统一的 `package.json` 与 Vite 配置，开发入口指向 `src/harness/`，生产构建固定输出 `dist/products/roncarve-harness/index.html` 及带内容哈希的资源文件。部署流程需要把该目录与现有首页静态文件一起发布。产品页只维护 React Three Fiber 场景，不再增加一套原生 Three.js 粒子实现。
DeepSeek Harness 官方当前仍将上游标记为开发者预览，并明确提示可能出现破坏性兼容变更。产品研发应固定已验证的上游提交或发行版本，把定制插件引擎、工作空间扩展和上游适配层分开维护，并为升级建立兼容性测试，不直接让生产版本持续追踪上游 `master`。
### 8.2 推荐技术栈
- React：产品页组件与内容组织。
- Three.js / React Three Fiber：粒子场景、相机和渲染循环。
- 自定义 Shader：位置混合、排斥、深度尺寸、亮度和点精灵外观。
- GSAP + ScrollTrigger：前两屏滚动进度、内容进入和场景参数编排。
- CSS mask：网格渐隐、画布边缘暗角、章节过渡与局部光晕裁切。
- 原生 CSS variables：复用荣刻品牌颜色、圆角、排版和响应式断点。
### 8.3 组件职责
| 组件 | 职责 |
| --- | --- |
| `HarnessProductPage` | 页面语义结构、语言和 CTA 数据 |
| `ProductNav` | 产品页导航、返回首页、语言切换 |
| `ParticleStage` | Canvas、相机、DPR、可见性和降级策略 |
| `LogoParticleSystem` | Logo 采样、BufferGeometry、自定义 Shader、交互状态 |
| `ScrollController` | 将 ScrollTrigger 进度写入 R3F/Shader 状态 |
| `FeatureSection` | 第二屏及插件引擎内容 |
| `EditionComparison` | 个人版/平台版对比与 CTA |
| `ProductCTA` | 页面底部转化与联系渠道 |
### 8.4 状态优先级
粒子最终位置按以下优先级组合：
1. 基础状态：由 `uScroll` 在 Logo 位置与空间位置之间混合。
2. 时间状态：根据 `uTime` 添加旋转和微漂移，强度受 `uScroll` 控制。
3. 指针状态：在基础目标上叠加局部排斥。
4. 点击状态：`uGather` 临时覆盖前述展开与排斥，使粒子重新聚拢。
这样可以保证点击反馈确定、滚动状态可恢复、指针离开后粒子不会回到错误位置。
### 8.5 ScrollTrigger 编排
- 前两屏外层使用约 `200–220svh` 的滚动容器。
- 粒子舞台使用 `position: sticky; top: 0; height: 100svh`，文案层在其上方滚动。
- 使用一个主 ScrollTrigger 计算归一化进度，避免多个 trigger 同时写入相同粒子属性。
- 内容卡片可使用独立 trigger，但只控制 `opacity` 和 `transform`。
- `scrub` 建议使用轻微阻尼，不追求完全逐像素同步。
- 组件卸载时销毁 ScrollTrigger，防止重复注册。
### 8.6 CSS mask 用法
- 网格层：中心清晰、边缘淡出。
- 粒子画布：正文侧增加暗色遮罩，保证文字对比度。
- 第二屏过渡：让粒子从完整舞台逐步退到背景，而不是突然隐藏 Canvas。
- 卡片高光：仅在上边缘或角部使用渐变 mask，不做全边框跑马灯。
## 9. 响应式设计
| 视口 | 布局 | 粒子策略 | 交互策略 |
| --- | --- | --- | --- |
| `≥ 1200px` | Hero 左文右景，内容宽 `1200px` | `28k–42k` 粒子，完整 Z 深度 | 鼠标排斥 + 点击聚拢 + 滚动旋转 |
| `768–1199px` | 文案与粒子更接近 1:1 | `18k–28k` 粒子，降低近景尺寸 | 保留排斥，减小半径与旋转幅度 |
| `480–767px` | 单列，文案在上、Logo 居中 | `8k–14k` 粒子，压缩 Z 深度 | 无悬停排斥，点击聚拢，滚动效果减弱 |
| `< 480px` | 单列、按钮全宽或双行 | `6k–10k` 或静态回退 | 只保留轻量滚动过渡与点击反馈 |
移动端注意：
- 使用 `svh` 处理浏览器地址栏高度变化。
- Logo 不能被标题和按钮完全覆盖。
- 第二屏卡片纵向排列，先保证文案，再呈现空间效果。
- 不使用横向滚动作为核心阅读方式。
- 触摸滚动时不得因为 Canvas 指针事件造成页面无法滚动。
## 10. 性能与降级
### 10.1 性能目标
- Hero 文案不等待 Three.js 或 Shader 加载即可显示。
- 桌面主流设备目标为稳定接近 `60fps`；移动端目标不低于可感知流畅的 `30fps`。
- DPR 桌面建议上限 `1.5`，移动端建议上限 `1.25`。
- 粒子舞台离开可视区域后停止持续渲染或降到按需渲染。
- 页面隐藏时暂停渲染。
- Resize 使用 `ResizeObserver`，避免每帧读取布局。
- 不开启 `preserveDrawingBuffer`，不使用大面积实时阴影和后期模糊。
### 10.2 自适应质量
启动时根据视口、DPR、`prefers-reduced-motion` 和基础设备能力选择质量档位：
- High：完整粒子数量、景深和颜色层次。
- Medium：减少粒子与旋转幅度，关闭昂贵混合。
- Low：静态 Logo + CSS 光晕 + 轻量内容入场。
不通过读取敏感或不稳定的设备信息做复杂设备指纹判断。
### 10.3 WebGL 失败回退
- 保留静态品牌 Logo PNG。
- 背景使用 CSS 网格、径向光晕和渐变。
- 页面内容、导航、CTA 和版本对比不依赖 Canvas。
- 发生 `webglcontextlost` 时切换回静态视觉，不反复重建渲染器。
## 11. 无障碍与可用性
- Canvas 使用 `aria-hidden="true"`；所有产品信息由 HTML 文本提供。
- 提供“跳到主要内容”链接。
- 导航产品菜单支持键盘打开、方向移动、`Esc` 关闭和清晰焦点。
- 普通正文对比度目标至少达到 WCAG AA。
- `prefers-reduced-motion: reduce` 下：关闭粒子旋转、鼠标排斥、滚动 scrub 和大幅位移，显示完整静态 Logo。
- 不使用快速闪烁、高频缩放和突然的相机推进。
- 点击聚拢只绑定非交互背景，不抢占按钮和链接事件。
- 所有 CTA 文案应明确说明动作，不使用只有“了解更多”的模糊文本作为唯一按钮。
- 语言切换后同步更新 `lang`、title、description、导航和按钮文案。
## 12. SEO、分析与合规
### 12.1 SEO
建议中文 title：
`荣刻驭境 Roncarve Harness｜插件驱动的 Agent 运行环境 - 荣刻科技`
建议中文 description：
`荣刻驭境是一套面向大语言模型与 Agent 的可组合 Harness，通过定制插件引擎提供精准插件检索、高效热插拔，支持浏览器操作本地项目的个人客户端与团队共享工作空间。`
同时补充：
- canonical：`https://www.roncarve.com/products/roncarve-harness/`
- Open Graph 图片：后续制作独立产品分享图，不直接截取动态粒子帧。
- JSON-LD：根据实际发布形态选择 `SoftwareApplication` 或 `Product`，不填写未经确认的价格和评分。
- sitemap 新增产品页 URL。
### 12.2 建议分析事件
- `product_menu_open`
- `product_card_click`，参数 `product=roncarve_harness`
- `harness_email_click`，参数 `placement=hero|personal|platform|footer`
- `harness_edition_view`
- `harness_personal_cta_click`
- `harness_platform_cta_click`
粒子悬停和每次点击聚拢不建议上报，避免制造高频、低价值事件。
### 12.3 品牌与许可边界
- 页面可以说明产品的技术来源，但不得使用 DeepSeek 品牌视觉或暗示官方联合、授权或背书。
- 已确认上游允许二次开发；截至 2026-08-22，DeepSeek Harness 官方仓库采用 [MIT License](https://github.com/deepseek-ai/deepseek-harness/blob/master/LICENSE)。
- 发布物必须保留上游版权声明和 MIT 许可文本，并建立第三方依赖许可证清单。
- MIT 许可不等同于商标授权。产品页在“定制插件引擎”内容区展示“基于开源 DeepSeek Harness 二次开发的独立产品”，不在页脚重复来源说明；页脚仅保留公司、版权与备案信息。
- “PLUGIN IS ALL YOU NEED”作为首屏滚动展开后第二幕的核心口号，与“插件构成能力，Harness 组织运行”的价值主张共同出现。
- 页面状态固定为“即将开放”；不使用 DeepSeek 的“开发者预览”状态，也不在当前阶段宣称荣刻驭境已开源。
- “兼容某模型”、性能提升比例和插件数量仍需测试数据支撑后才能进入对外文案。
## 13. 验收标准
### 13.1 导航与路由
- [ ] 首页主导航存在“产品 / Products”。
- [ ] 桌面端产品菜单可点击、可键盘操作、可按 `Esc` 关闭。
- [ ] 移动端产品列表可折叠展开。
- [ ] 点击“荣刻驭境”进入 `/products/roncarve-harness/`。
- [ ] 产品页 Logo 可返回官网首页，“产品”保持激活态。
### 13.2 首屏粒子
- [ ] 初始加载呈现完整荣刻 Logo，不从随机散点开始。
- [ ] 未滚动时不发生明显 3D 展开或大幅旋转。
- [ ] 开始滚动后，粒子逐渐出现 Z 深度、透视缩放和空间旋转。
- [ ] 远处粒子更小、更暗；近处粒子更大、更亮。
- [ ] 粒子持续缓慢空间旋转，但内容阅读不受干扰。
- [ ] 鼠标靠近产生平滑排斥，离开后回到当前滚动目标。
- [ ] 点击非交互背景时重新聚拢，再恢复当前滚动状态。
### 13.3 内容与第二屏
- [ ] 第二屏明确呈现精准检索、热插拔、个人/平台双版本三项价值。
- [ ] 第二屏进入与粒子展开同步，但文字不依赖 Canvas 才能显示。
- [ ] 后续内容解释插件引擎、版本差异、工作空间和使用路径。
- [ ] Hero、版本卡和页尾 CTA 均可打开 `contact@roncarve.com`，并带有正确的邮件主题。
### 13.4 响应式与无障碍
- [ ] 在 `375px`、`768px`、`1280px`、`1440px` 视口检查布局。
- [ ] 移动端滚动不被 Canvas 阻塞。
- [ ] 减少动态效果模式显示完整静态 Logo，无持续旋转与排斥。
- [ ] WebGL 不可用时页面仍完整可读、可导航、可转化。
- [ ] 所有交互元素具有清晰 Hover、Active 和 Focus 状态。
### 13.5 性能与稳定性
- [ ] Canvas 离开可视区域后暂停或显著降频。
- [ ] 页面隐藏时暂停渲染。
- [ ] 重复进入/离开页面不会叠加 ScrollTrigger 或事件监听器。
- [ ] Resize、语言切换和返回历史位置后粒子状态正确。
- [ ] WebGL context 丢失后能安全降级。
## 14. 实施顺序
### 阶段 A：入口与静态内容
- 新增“产品”导航与产品下拉列表。
- 建立 `/products/roncarve-harness/` 路由。
- 完成产品页语义结构、双语文案、CTA、版本对比与静态视觉。
- 更新 SEO、sitemap 和分享信息。
### 阶段 B：粒子原型
- 以真实品牌 Logo alpha mask 生成粒子。
- 先完成“首屏完整聚拢 → 滚动展开 → 第二屏稳定空间状态”。
- 再增加景深尺寸、亮度、持续旋转和画布遮罩。
### 阶段 C：交互与降级
- 增加鼠标排斥与点击重新聚拢。
- 增加触屏策略、减少动态效果和 WebGL 回退。
- 完成性能档位与可见性暂停。
### 阶段 D：视觉与体验验收
- 同视口比较设计目标与实现截图。
- 检查卡片间距、文字行宽、光晕强度、Logo 比例和滚动节奏。
- 完成键盘、移动端、低性能和 context lost 测试。
## 15. 设计决策记录
| 编号 | 原待确认项 | 最终决策 | 对实现的影响 |
| ---: | --- | --- | --- |
| 1 | CTA 目标 | 仅使用 `contact@roncarve.com` | 所有主要 CTA 使用带预填主题的 `mailto:`，不建设表单 |
| 2 | 产品状态 | 即将开放 | 中英文统一为“即将开放 / Coming Soon”，不提供下载或立即体验按钮 |
| 3 | 版本能力边界 | 采用第 5.4 节首发方案 | 个人版聚焦本地客户端和本地项目；平台版聚焦团队共享工作空间、成员协同、共享配置和活动记录 |
| 4 | 演示环境 | 参考 DeepSeek Harness 官方 Web UI | 研究插件状态、工作空间和运行轨迹；对外只使用荣刻自有界面 |
| 5 | 上游许可 | 已确认允许二次开发 | 保留 MIT 许可与版权声明，并避免商标或官方背书暗示 |
| 6 | 前端构建链 | 引入 React/Vite | 产品页使用 R3F、Shader 和 GSAP；首页继续保持原生静态实现 |
当前设计已无阻塞性待确认项。开发阶段若真实产品能力与第 5.4 节不一致，应先调整公开文案和版本表，再进入上线验收。
## 16. 参考页观察摘要
本设计对 DeepSeek Harness 页面的借鉴限于设计方法：
- 首屏在深色空间背景中直接提出一句核心产品主张。
- 首屏提供明确行动按钮，而不是把视觉效果当作唯一内容。
- 第二屏马上解释 `MODEL + HARNESS` 的关系，并用三张卡片拆解能力。
- 页面使用近黑背景、低透明表面、细边框、胶囊按钮、网格和少量蓝色强调。
- 长页通过连续章节解释设计理念、运行模式和开始使用方式。
荣刻驭境的差异化处理：
- 用荣刻真实 Logo 作为粒子聚拢目标。
- 视觉重点从“插件构成一切”转向“本地项目控制、精准插件检索、高效热插拔和团队共享协同”。
- 沿用荣刻官网蓝青紫色与现有组件语言。
- 第二屏直接连接个人版的本地项目形态与平台版的共享协同价值，强化商业产品定位。
- 采用独立文案、独立结构和独立粒子运动逻辑，不复刻参考页资产。