Files

T

admin 9cfbb95b1e feat: launch Roncarve Harness product page

2026-08-22 21:49:25 +08:00

38 KiB

Raw Permalink Blame History

荣刻驭境（Roncarve Harness）产品入口与产品介绍页设计文档

文档状态：设计基线 v1.1（关键决策已确认）编写日期：2026-08-22 适用范围：荣刻科技官网导航、产品列表入口、荣刻驭境产品介绍页参考页面：DeepSeek Harness 当前仓库基线：单页静态官网 index.html + 原生 CSS/JavaScript + Three.js Hero

1. 设计结论

本次新增内容由两个层级组成：

官网主导航新增“产品 / Products”入口，在下拉产品列表中展示“荣刻驭境 / Roncarve Harness”。
点击产品卡片进入独立产品介绍页，推荐正式路由为 /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 信息层级

访客应按以下顺序理解产品：

这是什么：面向大语言模型与 Agent 的 Harness。
为什么不同：定制插件引擎、精准检索、高效热插拔。
如何使用：个人版通过本地客户端在浏览器中操作本地项目。
团队如何用：平台版让所有成员在共享工作空间中协同。
下一步是什么：通过邮箱咨询产品、选择版本或查看技术资料。

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 能力可以持续扩展，而不必反复重建。

三张能力卡：

海量插件精准检索：从定制插件数据库中按任务、能力、兼容性和工作空间策略检索合适插件。
更高效率热插拔：在明确生命周期与依赖关系的前提下完成加载、卸载、替换和组合。
本地项目到共享协作：个人版通过本地客户端操作本地项目；平台版让所有成员进入同一个共享工作空间协同。

滚动进入第二屏后，Logo 的轮廓开始出现深度：外环向不同 Z 层展开，右上角品牌切面形成高亮近景粒子，部分粒子转化为插件节点。卡片依次进入，但不与粒子同时进行大幅运动。

5.3 第三屏：定制插件引擎

标题建议：为插件规模化而优化的引擎

内容使用四步能力链：

发现 / Discover：连接定制插件数据库，建立能力、版本、依赖与兼容性索引。
匹配 / Match：结合任务语义、运行环境、权限和工作空间策略完成候选筛选。
装配 / Compose：按需加载、卸载和替换插件，降低重新构建 Agent 的成本。
观测 / Observe：记录插件状态、依赖、调用和异常，为团队复用与治理提供依据。

视觉建议使用真实 UI 风格的信息卡、状态标签和节点连线，不使用无含义的伪监控数字。

5.4 第四屏：个人版与平台版

采用两张并列版本卡。平台版可以略大，但不使用“推荐”标签和价格信息；产品当前统一显示“即将开放”。

能力	个人版 Personal	平台版 Platform
部署对象	当前设备上的本地项目	需要共同协作的团队
部署形态	本地客户端 + 浏览器界面	组织级平台服务
定制插件引擎	精准检索、安装、卸载、替换与热插拔	同等引擎能力，并增加组织级策略
插件数据库	本地项目索引、收藏与本地配置	团队共享目录、可见范围与版本管理
工作空间	本地项目上下文	所有成员共享的团队工作空间
成员与角色	本地客户端，不包含多人协同	成员、角色与协作权限
配置复用	本地项目预设、导入与导出	团队预设、共享插件组合与配置
运行记录	本地项目运行记录	团队共享活动与运行历史
凭据边界	本地连接配置保留在当前设备	团队工作空间凭据引用，页面不回显明文
CTA	`邮件咨询个人版`	`邮件咨询平台版`

5.4.1 首发能力决策

个人版首发范围

采用本地客户端形态，通过浏览器界面操作当前设备上的本地项目。
完整使用定制插件引擎与定制插件数据库。
支持插件语义检索、筛选、安装、卸载、替换、版本固定和热插拔。
本地文件、运行环境、项目预设和运行记录保留在当前设备。
不提供团队成员、角色、组织策略和跨用户共享。

平台版首发范围

面向组织部署，所有成员围绕同一个团队共享工作空间协作。
通过成员与角色权限管理项目、策略、插件组合、共享配置和记录。
支持组织级插件目录、团队可见范围、版本管理和基础允许列表。
支持共享项目、团队预设、插件组合、配置、活动记录和运行上下文。
支持工作空间级凭据引用；前端仅展示凭据名称和状态，不回显明文。

不纳入首发公开承诺

SSO、SCIM、跨组织协作和复杂的字段级权限。
多级插件审批流、企业审计导出和合规报表。
商业计费、资源配额、用量结算与成本中心。
多地域高可用、自动容灾和托管云服务等级协议。

这些能力可以进入平台版后续路线图，但“即将开放”页面不将其包装为已具备能力。

5.5 第五屏：使用路径

标题建议：从一个任务，生长为团队能力

内容顺序：

描述目标或任务。
检索并选择匹配插件。
在运行中装配或替换能力。
个人版将有效配置保存到本地项目；平台版同步到团队共享工作空间。

该段用于把抽象的 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 官方截图作为荣刻产品截图发布。

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。

建议流程：

将 Logo 绘制到离屏 Canvas。
从 alpha 高于阈值的像素中进行分层采样。
生成每个粒子的二维 Logo 目标坐标 aLogoPosition。
按八个方位生成椭圆形远场入场坐标 aIntroPosition，并分配稳定的延迟和弧线路径。
为每个粒子生成稳定随机种子、深度目标、旋转半径和颜色权重。
使用统一的 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：青、蓝、紫的颜色混合权重。

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 包。

推荐结构：

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 状态优先级

粒子最终位置按以下优先级组合：

基础状态：由 uScroll 在 Logo 位置与空间位置之间混合。
时间状态：根据 uTime 添加旋转和微漂移，强度受 uScroll 控制。
指针状态：在基础目标上叠加局部排斥。
点击状态：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。
发布物必须保留上游版权声明和 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 作为粒子聚拢目标。
视觉重点从“插件构成一切”转向“本地项目控制、精准插件检索、高效热插拔和团队共享协同”。
沿用荣刻官网蓝青紫色与现有组件语言。
第二屏直接连接个人版的本地项目形态与平台版的共享协同价值，强化商业产品定位。
采用独立文案、独立结构和独立粒子运动逻辑，不复刻参考页资产。

38 KiB Raw Permalink Blame History Unescape Escape