OpenDots 官网拆解：这个 AI Agent 产品页的设计与功能，值得逐帧学习
OpenDots 官网拆解：这个 AI Agent 产品页的设计与功能，值得逐帧学习
这是近期第三个名字里带 "OpenDot" 的项目了。前两个分别是 CopilotKit 的 OpenDots（软件里的持久化 AI 同事）和 opendot.ai 的 OpenDot（真机语音 Agent 平台）。而今天这个 open-dots.dev 又是完全不同的第三个项目——它既不是一个能 clone 下来的开源框架，也不是硬件平台，而是一个 $OPENDOTS 代币项目。
但它有一个特别扎眼的地方：官网做得太漂亮了。
我把它整个下载下来看了一眼——一份 83KB 的单文件 HTML，一个前端框架都没用，所有动画、所有角色、那个"跟真人聊天"的演示，全是原生 JavaScript 手写的。在动辄几百 MB 依赖的今天，这种克制本身就值得单独写一篇。
所以这篇文章不谈代币值不值得买，只做两件事：把它的功能一个个列清楚，再把它的设计一层层拆开。
目录
一、先搞清楚它是什么
首页第一句话就点明了主题：
Meet your dot. OpenDots are always-on agents that run on open weights, live on their own cloud computer, hold their own wallet and learn your standards. They work 24/7 so you get your time back.
翻译一下：OpenDots 是一群 always-on（常驻在线）的 Agent。它们跑在开放权重的模型上，拥有自己的云电脑和自己的钱包，会学习你的标准，7×24 小时替你干活。
网页顶部滚动的那条黑色横条，基本把这个产品的全部卖点喊完了：
ALWAYS ON · OPEN WEIGHTS · OWN CLOUD COMPUTER · OWN WALLET ·
LEARNS YOUR STANDARDS · YOU STAY IN CONTROL · $OPENDOTS核心概念就是 dot（点）——一只只独立的 AI 助手。你可以给主 dot 起名字，再按需要添加"专科 dot"，它们共享上下文、互相交接工作。它把 AI 助手从"一次性对话"重新包装成了"一群你雇佣的同事"。
二、功能全清单
2.1 六个角色，各管一摊
官网给了六个具名角色，每个都有固定的职责、配色和"性格"：
| 角色 | 领域 | 一句话职责 | 接入的东西 |
|---|---|---|---|
| Otto | Research | 帮你读完所有资料，新证据出现时重跑分析并标出变化 | 论文 / 数据 / 报告 |
| Pixel | Code | 盯反馈、定位修复、构建测试，最后给你带变更视频的 PR | GitHub / 测试 / 部署 |
| Nib | Content | 学你的文风，剪 Space 片段、起草推文和节目笔记 | X / 剪辑 / 话题串 |
| Hex | Onchain | 全天候盯钱包、资金池和叙事，只在限定额度内交易 | 钱包 / 资金池 / 告警 |
| Bloop | Community | 用你的语气回私信和工单，维持 Discord 秩序，该升级的升级给你 | Discord / Telegram / 客服 |
| Ward | Guard | "看管其他 dot 的 dot"，审查风险操作、拦截可疑授权，随时暂停任何一只 | 规则 / 审查 / 急停 |
这套命名和配色不是随便搭的——后面设计部分会讲，它们其实是程序化生成出来的。
2.2 每个 dot 的能力：有自己的电脑
这块是整个产品的骨架，也是它和"普通聊天机器人"最大的区别：
- Own cloud computer（独立云电脑）：每个 dot 独享一个隔离的 microVM，里面有真实的浏览器、shell 和文件系统。你的笔记本电脑还是你自己的，除非你主动连接它。
- Always on, many projects（常驻在线，多项目并行）：随手丢新任务给它，它能同时推进多个项目，不需要你开新会话、也不需要你一步步喂指令。
- You approve what matters（关键动作由你拍板）：dot 把完成好的工作交给你——带预览、diff 和回执。任何有后果的操作，都停下来等你点头。
配合一个 Activity View（活动视图）：任何时候打开它的"屏幕"，都能看到它在干嘛；你回来时也能用活动视图补看这段时间发生了什么。官网用了一个会自己滚动的实时事件流来演示这个视图——Otto 在重跑分析、Hex 在报一个钱包动向并附上「Approve / Deny」按钮、Ward 在拦截一笔可疑授权。
2.3 dot-1 模型家族
它宣称自研了一个 dot-1 模型家族，专门为"长时间运行的 agent 任务"训练，工具调用、浏览、写代码、记忆都是原生能力而非后挂上去的：
| 模型 | 参数 | 上下文 | 定位 |
|---|---|---|---|
| dot-1 Nano | 8B dense | 128K | 端侧：聊天、语音、路由；能跑在笔记本或手机上，默认隐私 |
| dot-1 Core | 72B dense | 256K | 每个 dot 的"默认大脑"：规划、浏览、写作、写码，能连续跑几小时不跑偏 |
| dot-1 Swarm | 480B MoE（32B 激活） | 1M | 长周期项目：多 dot 协作、拆活、互相审查 |
外加三个配套能力：dot-voice（实时语音，低于 300ms 的轮次切换）、dotmem（长期记忆引擎，学你的偏好和"什么算好"）、dot-guard（独立的审查模型，在风险动作发生前先过一遍你的规则）。
官网还贴了这么一行：
$ ollama pull opendots/dot-1-core并配了一句口号："Weights, runtime and protocol are open. Run a dot on our network or fully on your own hardware."
2.4 五层技术栈
它把一个 dot 拆成五层，每层都号称开源且可替换——"没有哪一家公司能决定你的 dot 能做什么"：
| 层 | 名称 | 职责 |
|---|---|---|
| 01 | Brain | dot-1 模型负责规划、推理、挑工具；按任务在 Nano / Core / Swarm 之间路由 |
| 02 | Hands | 一台私有云电脑，带浏览器、shell 和 1000+ 个 MCP 原生工具与应用连接器（dot-runtime） |
| 03 | Memory | dotmem 跨所有渠道保存笔记、偏好和项目状态 |
| 04 | Wallet | 每个 dot 拥有一个带每日额度的智能账户，密钥放在安全飞地，从不进入模型 |
| 05 | Guard | dot-guard 用你的规则审查每个动作，允许 / 询问 / 拦截，能瞬间暂停一只 dot |
2.5 它能出现在哪些渠道
dots 的目标是"你在哪它就在哪"，上下文跟着它走：
- 已支持：Telegram、Discord、X、Farcaster、Web app、Voice
- 即将支持：Slack、SMS
官网用了三组聊天气泡来演示：在 Telegram 里让 Pixel 修个 bug、在 Discord 里让 Hex 报一笔交易、在语音里让 Otto 汇报论文变化——同一个 dot，不同入口，记忆是连续的。
2.6 规则系统：允许 / 询问 / 拦截
这是我最喜欢的一块交互。默认有四条"永远属于你"的护栏：
- Read-only background：主动研究只用只读工具，能看不能发
- Keys stay sealed：密码和钱包密钥在使用时也不会展示给模型
- Spend limits：链上动作在钱包层面按天封顶，不是靠提示词约束
- Kill switch：dot-guard 发现异常可立即暂停一只 dot
再往下是自定义规则，每条都有三档开关——Allow / Ask / Block：
| 规则 | 档位 | 说明 |
|---|---|---|
| 用我的语气回私信 | Allow | 直接放行 |
| 开 Pull Request | Allow | 直接放行 |
| 发推 | Ask | 每次问你 |
| 额度内的交易 | Ask | 由智能钱包强制执行额度 |
| 向未验证合约做代币授权 | Block | 内置，永远开启 🔒 |
| 修改密码或密钥 | Block | 永远归你 🔒 |
带锁的两条不可修改（界面上直接变灰、禁用点击）——把"安全底线"从可配置项变成了硬约束，这个设计取舍很聪明。
2.7 造点器：自己捏一个 dot
官网给了个完全可玩的 builder，你可以：
- 起名字（默认叫 Pip）
- 选 Shape（圆 / 方 / 三角 / 六边形 / 胶囊 / 星形）
- 选 Color（黄 / 橙 / 粉 / 紫 / 蓝 / 薄荷 / 红）
- 选 Eyes（Big / Dots / Sleepy / Happy / Wink / None）
- 选 Wearing（圆眼镜 / 方眼镜 / 墨镜 / 单片镜 / 领结 / 耳机 / 皇冠 / 毛线帽 / 天线）
- Shuffle 一键随机、Download PNG 把头像导出成 1024×1024 的图片当 PFP
而且，你捏的形状会实时同步到下面那个对话演示里——同一个 localStorage 状态驱动两处 UI。不同形状还对应不同人设：圆形是 "all-rounder"、方形是 "builder"、三角是 "researcher"、六边形是 "onchain analyst"、胶囊是 "community lead"、星形是 "guardian"。
2.8 实时演示：和一只醒着的 dot 对话
首页最狠的一点：那个聊天框是真的。它明确标注：
This one is real. It runs on open-weight models, calls live tools, reads Robinhood Chain, searches the web and remembers you.
演示里挂了一组真实工具：
opendots_stats wallet_lookup token_lookup web_search read_url remember你可以问它 $OPENDOTS 链上在干嘛、查任意 Robinhood Chain 钱包、让它上网搜、或者告诉它你的偏好让它记住。左侧还有一个 dotmem 计数器，每记住一条就 +1，配一个「Forget everything」按钮。对话和记忆都存进 localStorage，刷新不丢。
有意思的是，演示窗口上标着它当前用的模型是 gpt-oss-120b——一个真实存在、确实开放权重的模型。也就是说，"开放权重"这句口号至少在演示里是能对上的。
2.9 代币、路线图与 FAQ
$OPENDOTS 是这个项目的经济层，页面给了四项用途：Fuel（为更深的活儿付费）、Spawn（添加专科 dot）、Nodes（质押运行承载云电脑的 Dot Node 并赚收益）、Govern（投票决定上哪些模型、默认安全规则、国库如何资助开放研究）。
| 项 | 值 |
|---|---|
| Ticker | $OPENDOTS |
| Chain | Robinhood Chain |
| Supply | 1,000,000,000 |
| Contract | 0x93bb40175cc357e937d6046aa2c960369f017a07 |
路线图分三栏：Shipped（dot-1 Nano/Core 开放权重、Dot Runtime、dotmem、智能钱包、Telegram/Discord/X 渠道）、Now（$OPENDOTS 上线、dot-1 Swarm、面向持有者开放造点、Farcaster 与语音通话、公开 Activity View）、Next（Dot Nodes 质押、专科 dot 市场、Slack 与 SMS、移动端、社区治理的 dot-2 训练）。
三、设计拆解：为什么它好看
功能可以堆，但"好看"是手艺。下面这些都不是巧合。
3.1 色彩与字体：暖纸张 + 一抹彩色
整站的基础色不是常见的纯白或冷灰，而是一套暖纸张色系：
--bg: #F5F3EE /* 暖白纸张 */
--bg2: #ECE9E1 /* 次级背景 */
--ink: #111111 /* 正文墨色 */
--ink2: #55524C /* 次级文字（带一点暖调）*/
--ink3: #8C877E /* 三级文字 */
--dark: #0E0E0E /* 深色区块 */点缀色则是一整套高饱和的"点的颜色"：黄 #F6C31C、橙 #FF7A1A、粉 #F03FC8、紫 #7B5CFF、蓝 #1E8BFF、薄荷 #2FD69A、红 #FF4B4B。暗色区块用纯黑铺底、浅色区块用暖纸色铺底，两种底交替出现，段落节奏就出来了。
字体只用三款，各司其职：
- Inter Tight：全站主字体，字距收得很紧（标题
letter-spacing: -.055em），大标题能撑到clamp(54px, 9.4vw, 128px)，撑满一屏。 - Instrument Serif（斜体）：专门用来点缀。
- JetBrains Mono：终端、参数、代码，一律等宽。
3.2 角色是"算"出来的，不是画出来的
这是全站最精彩的一处。那六只可爱的小家伙，没有一个是图片素材——它们全是 JavaScript 现场生成的 SVG。
生成函数 dotSVG() 把一只 dot 拆成几个参数：
- 6 种形状：圆、方、三角、六边形、胶囊、星形，每种用一个
draw()返回几何路径； - 6 种眼睛：
dots / big / sleepy / happy / wink / none，各是一小段内联 SVG 路径； - 9 种配饰：分成"眼镜组"和"帽子组"，同组互斥（选方眼镜自动摘掉圆眼镜），外加一个领结。
真正让它们"有质感"的是两个 SVG 滤镜：
feTurbulence(fractalNoise) → feDisplacementMap用分形噪声做位移，给每个形状加上手绘般的轻微抖动边缘——所以它看起来不像规整的矢量图形，而像贴了毛毡。再叠一层径向渐变做左上方高光 + 边缘暗角，脚底画一个椭圆当投影，角色就"落地"了。
最后，每只 dot 的眨眼节奏是随机的（4-8 秒一个循环），六只站一起就永远不会同步眨眼——这个细节，是把"程序生成"变成"有生命感"的关键。
3.3 眼睛会跟着你的鼠标转
全站所有带瞳孔的 dot，眼睛都会追随你的光标。实现很省：一个全局 pointermove 监听，用 requestAnimationFrame 做节流，算出光标相对每只 dot 的方向，再把瞳孔 translate 过去。有瞳孔的（big eyes）动 5px，没瞳孔的整体动 3.5px，配饰层则以一半速度跟动——所以眼镜和眼睛之间有微妙的视差。
同样的机制也用在了 hero 区那块 canvas 点阵上：一屏随机着色的点阵，平时微微呈波浪起伏，光标靠近时，附近的点会"隆起来"并显色（半径随距离衰减）。这不是 GIF，是每帧画的。
3.4 滚动叙事，一格一格喂给你
- Marquee：黑底横条无缝滚动（
translateX(-50%)无限循环），每个词后面缀一个彩色小圆点。 - Statement：中间那段大字是逐词点亮的——根据滚动进度，把每个词的透明度从
rgba(17,17,17,.16)渐变到纯墨色，像有人在你读的时候把字一个个"按亮"。 - Reveal：卡片进场用
IntersectionObserver触发，只播一次就unobserve。 - Sticky Terminal：架构区右侧那个终端窗口是
position: sticky的，滚到才启动打字机循环，打完停 6 秒再重播。 - 导航栏：滚过 20px 后变半透明毛玻璃（
backdrop-filter: blur(14px)）。
3.5 那些"拟真"的小 UI
- Activity View：深色终端窗口 + 顶部渐隐遮罩（
mask-image），事件从底部滑入，一条条替换，最多留 9 条。带「Approve / Deny」的事件点下去会变成「Approved by you」，它真的会回你。 - 规则开关：绿色=放行、琥珀色=询问、红色=拦截，上锁的两条直接
pointer-events: none变灰。 - 造点器导出：把 SVG 序列化后画到 canvas 上导出 PNG，还会按名字自动命名文件（
pip-opendot.png）。
3.6 克制：一份文件，一个框架都不用
打开 DevTools 会有点不适应——全站没有一个 React/Vue/Svelte，没有打包器，没有 CSS 框架。整个页面就是一份 index.html，内联一个 <style>（约 370 行）和一个 <script>（约 370 行）。外部依赖只有一个 Google Fonts。
它还懂得"省电"：requestAnimationFrame 循环在 document.visibilityState !== "visible" 时会自动降频（改用 setTimeout 500ms 兜底），devicePixelRatio 上限锁到 2。一个营销页，做到了接近原生的性能。
四、整体技术架构
把上面这些东西串起来，就是这样一个结构：
flowchart TB Visitor["Visitor browser"] --> Static["Single-file HTML: inline CSS + vanilla JS"] Static --> Grid["Hero canvas dot grid"] Static --> Gen["Procedural SVG dot generator"] Static --> Builder["Dot builder + PNG export"] Static --> Store["localStorage: dot, memory, chat"] Static -->|POST /api/chat| ChatAPI["Chat API (streaming NDJSON)"] ChatAPI --> Model["Open-weight model (demo shows gpt-oss-120b)"] Model --> Tools["Live tools: stats, wallet, token, web search, read url, remember"] Tools --> Chain["Robinhood Chain data"] Tools --> Web["Web search"] ChatAPI -.->|events: tool, memory, text| Static Fonts["Google Fonts (only external dependency)"] -.-> Static
聊天部分的流式协议值得一提：后端返回的是 NDJSON 事件流，前端按行解析，事件分四类——tool（开始调用工具）、tool_result（工具返回摘要）、memory（写入一条长期记忆）、text（正文，前端用打字机效果逐字渲染）。工具调用会在气泡上方**长出一行"正在使用 xxx"**的中间态，这就是那种"看着它干活"的观感来源。
五、几个值得注意的细节
夸完了，也得说点实话：
它自称开源，但站内找不到仓库。 页面反复强调 "open weights / open protocol / each layer is open source and swappable"，还给了
ollama pull opendots/dot-1-core这条命令，但整站没有指向 GitHub 或文档站的链接——唯一的跳转是 X（@opendotsRH）。所以目前"开源"更像是一句承诺，而不是可以立刻 clone 下来的事实。它本质上是个代币项目，而且是"代币先行"。 页面有独立的代币区块、购买按钮、合约地址，路线图里 "Now" 一栏的第一条就是
$OPENDOTS launch，造点功能也是"先向持有者开放"。产品叙事很完整，但完成度要靠后续兑现。"Robinhood Chain" 以它的说法为准。 页面反复提到这条链和"读 Robinhood Chain"，这是项目方自己的描述，本文只做转述，不代它背书。
演示用的不是 dot-1。 官方喊的是 dot-1 家族，但实时演示窗口标的是
gpt-oss-120b——一个真实开放的权重模型。这算是诚实，也说明 dot-1 目前可能还没到能在网页里跑起来的状态。
一句话总结：这是一个"官网完成度远高于产品完成度"的典型样本。功能讲得极全，设计做得极细，值得任何做 AI 产品页的人逐帧扒一遍；但它承诺的那套开源 dot 生态，现在还得先打个问号。
想自己感受，直接打开 open-dots.dev——捏一只自己的 dot，再跟它聊两句，就知道这套东西的完成度在哪了。
🔗 官网: https://open-dots.dev/ 🔗 X: https://x.com/opendotsRH ⛓️ Chain: Robinhood Chain（项目方说法） 📄 合约: 0x93bb40175cc357e937d6046aa2c960369f017a07 🧩 技术形态: 单文件 HTML（内联 CSS + 原生 JS，无框架）
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
