Best Robot in the World
项目背景
"One Prompt Away" 公众号在持续追踪全球机器人行业动态的过程中，积累了大量一手素材。我们发现读者最常问的问题是："这个领域目前最强的机器人是哪个？" — 但不同机器人在不同维度上各有所长，没有单一答案。
于是我们决定将这个问题产品化：不做一个模糊的"综合排名"，而是按能力维度策展 — 工厂最强是谁？跑得最快是谁？最便宜的呢？让每个维度都有自己的冠军。
产品设计
8 大能力维度
| 类别 | 冠军 | 亮点 |
|---|---|---|
| 🏭 Best Factory Worker | Figure 03 | 白宫亮相，BMW 效率提升 400% |
| 🦿 Best Locomotion | Atlas (Electric) | CES 2026 发布，56 DoF，2026 产能全部售罄 |
| 🤌 Best Dexterous Hands | Galbot G1 | 95-97% 抓取率，北京首个药房机器人 |
| 💰 Most Affordable | 小布米 | ¥9,998 起，春晚同款京东在售 |
| 🐕 Best Quadruped | Spot | 进驻 AI 数据中心，$175-300K/台 |
| 🧠 Best Robot Brain | π₀ (Pi-Zero) | 通用基础模型，估值 $11B |
| 🏃 Best Endurance | N2 小顽童 | 半马亚军，连续后空翻 |
| 💬 Best Interaction | MagicBot Z1 | 春晚后京东秒售罄 |
设计语言
- 风格: Editorial 杂志感 + 数据仪表盘
- 主题: 暗色背景 (
#0a0a0b)，每个类别独立 accent color - 字体: Space Mono（标签/工业感）+ Inter（正文/清晰）
- 交互: 卡片渐入动画、类别筛选、hover 微交互
- 图片: 机器人图片 + 四周暗角遮罩自然融入卡片
数据架构
所有机器人数据集中在一个 robots.json 文件中，页面从 JSON 渲染。这个设计让数据更新变得极简 — 编辑一个文件、推送即部署。JSON schema 支持未来扩展（多个 contender、历史冠军 changelog 等）。
技术实现
- 框架: Next.js 16 + Tailwind CSS 4，静态导出 (
output: "export") - 部署: GitHub Actions 自动构建 → GitHub Pages
- CI/CD: 推送到
main分支即触发构建和部署，零手动操作 - 响应式: 移动端单列、桌面端双列卡片网格
从 0 到上线的过程
这个项目是一次 AI-assisted rapid prototyping 实验 — 从需求文档到线上部署，全程与 Claude Code 协作完成：
- 需求定义: 一份 Markdown prompt 文档定义了设计方向、数据结构、页面布局
- 项目搭建: Next.js 16 项目初始化、Tailwind 配置、静态导出设置
- 核心开发: 暗色主题、卡片组件、筛选交互、动画效果
- 迭代优化: 根据实际截图反馈修复滚动条、文字对比度、图片裁切等问题
- 数据更新: 联网搜索 2026 年 3 月最新信息，批量更新 8 个机器人的数据
- 部署上线: GitHub repo 创建、Actions workflow、Pages 配置一站完成
经验与反思
- 内容即产品: 公众号文章的深度研究可以沉淀为独立的数据产品，排行榜本身就是一种内容分发形式
- 数据驱动更新: JSON 单文件架构让月度数据更新变得极低成本，未来可以接入自动化抓取
- 暗色主题的坑: 文字对比度需要反复调试，
#4a4a52这类灰色在暗底上几乎不可读，最低不应低于#8a8a92 - 图片适配: 机器人图片主体位置不一，
object-cover会裁掉头脚，object-contain+ 暗角遮罩是更好的方案