“City Walk”太费腿？那就让AI替你走一遍。
本文记录我如何用 Doubao-Seed-Code —— 国内首个具备原生视觉理解能力的AI编程模型，把一张手绘草图变成一个可交互的“电子城市漫步”应用。全程零代码基础，仅靠对话完成编程。
一.背景
“City Walk”——城市漫步，曾是年轻人逃离内卷的诗意解药：绿灯直行、红灯拐弯、路口掷骰子、遇见小店就进去坐坐，拍一百张照片，只为记录一条无人知晓的小巷。它不为打卡，只为“瞎溜达”。
但对我这种能坐绝不站、能躺绝不坐的懒人来说：
“走1公里，拍100张照，找3家店，最后发现没带充电宝。”
于是，我灵机一动：为什么不做一个“电子版City Walk”？如果有合适的，我在出门。
不用出门，打开网页，点击“开始漫步”，AI就带着我在城市里“瞎溜达”——绿灯直行、红灯拐弯、路口掷骰子，还能推荐路边的宝藏咖啡馆和涂鸦墙。
左侧为草稿图，右侧为使用 Doubao-Seed-Code 编程的效果。
二.相关介绍
工具选择：为什么是 Doubao-Seed-Code？
Doubao-Seed-Code 是一款专为 "Agentic Coding"任务深度优化的全新代码模型。它为真实的、复杂的编程任务而设计，在长上下文理解、任务规划、代码生成与调试方面均有卓越表现。
我试过多个主流AI编程模型（Claude 3.5、GPT-4o、GLM-4、DeepSeek-Coder），但它们要么：
- ❌ 无法理解图片（只能靠文字描述）
- ❌ 生成的界面五花八门，完全偏离草图
- ❌ 需要手动拆解“地图+随机路线+骰子+POI推荐”等复杂逻辑，效率极低
直到我发现了 火山引擎的 Doubao-Seed-Code。
✅ 它的三大杀手锏，直接击中我的痛点：
| 能力 | 普通模型 | Doubao-Seed-Code |
|---|---|---|
| 视觉理解 | ❌ 依赖OCR/文本转述（信息丢失） | ✅ 原生VLM，直接看图写代码，0损失 |
| 长上下文 | 通常≤32K | ✅ 256K，整项目代码+图片+需求全塞进去 |
| 成本 | 业内均价高 | ✅ 综合成本低62.7%，首月9.9元起 |
关键点： 它不是“能看图”，而是真正理解图中的布局、交互、语义关系——比如我草图里左下角的“骰子”和“向右喝咖啡”，它知道那是两个独立的交互模块，不是随便画的装饰。
三.全程“对话式开发”
前置准备
虽然使用的是Doubao-Seed-Code这个国内首个具备视觉理解能力的编程模型，但是这在他的人家官方公司，我们没办法直接用，所以可以通过 Claude Code去调用 Doubao-Seed-Code ，另外，在火山方舟平台也是提供API调用。
仅需 5s 在Claude Code 丝滑接入 Doubao-Seed-Code
在启动 Claude Code 前输入环境变量（以Windows为例）：
1setx ANTHROPIC_AUTH_TOKEN ARK_API_KEY 2setx ANTHROPIC_BASE_URL https://ark.cn-beijing.volces.com/api/coding 3setx ANTHROPIC_MODEL doubao-seed-code-preview-latest 4
📌注意：换为你自己的，来这里获取 -> console.volcengine.com/ark/region:…
📚如果有不会的地方可以看官方教程来配置：www.volcengine.com/docs/82379/…
真消费才敢说真话。
使用指令导航到指定目录，并启动claude:
1C:\Users\18432> D: 2D:> cd 目标 3D:\目标>claude 4
可以看到如图所示成功启动并使用Doubao-Seed-Code模型， 兼容了原本的 Anthropic API，对于使用Claude Code的开发者，几乎零成本 将 API 切换到 Doubao-Seed-Code，完全无缝，像换了“引擎”，但方向盘还是原来的。
🖼️ 图片理解测评
听说 Doubao-Seed-Code 是国内首个具备视觉理解能力的编程模型，我直接把我本次的草稿图直接给了他，看他理解的怎么样？
草稿图原图（其中有多个地名为干扰选项）
💡 不是“猜”出来的，是“看懂”了。
VLM训练需要专业团队和数据积累，有一定技术壁垒，doubao 系列模型一直以来视觉理解能力非常强，Seed-Code 模型保持了这个优势，在国内，要么模型不具备视觉理解能力，要么需要依赖MCP实现，将图片转化成语义描述供模型理解，过程中消耗token，效果远不及原生VLM能力，项目开发，只有真正的理解，才能大幅提升前端开发效率。
下面是端到端模型训练的下游指标评测结果：
📌 实战 AI 开发
直接把下面的提示词扔给他
1请帮我设计并生成一个“电子版City Walk”项目方案。规则如下： 21.项目简介： 3电子版City Walk基于“瞎溜达”理念，模拟城市漫无目的漫步。 4遵循“绿灯直行，红灯拐弯，遇路口随机选择方向”的逻辑生成步行路线。 5路线生成结合兴趣点推荐，重点推介小众有趣的咖啡馆、小店、街头艺术等。 6用户可以线上“电子走一遍”这条路线，查看地图和沿途店铺景点卡片。 7支持路线保存、复盘和分享。 82.主要功能需求： 9地图展示与交互（基于高德基础地图API，直接使用我的API： fdda8428fc94）：显示地图、起点、动态路线与兴趣点标记。 10起点选取与定位功能：自动定位或手动选择起点城市和具体位置。 11路线生成规则：结合步行路径规划API和随机决策算法，实现仿真“红绿灯”及“猜拳”路口选择。 12沿途兴趣点推荐模块，智能筛查高评分非连锁商店和特色地点。 13电子City Walk模拟导航，用户可点击“下一步”体验虚拟行走过程。 14路线生成后自动生成图文路线作品，支持用户收藏和分享。 15后续拓展包括路线评价、个性化推荐和自然语言描述。 163.技术架构 17采用前后端分离的方式去写代码，后端用Python代码，地图展示与交互（基于高德基础地图API，直接使用我的API： fdda8428fc9485f355b24b1c76f6f147） 184.草稿图如附件（（仅为例子，全部具体实现）） 19背景是当前的位置，会根据高德自动找到前方路口，选择路线会出现的兴趣点推荐 20左下角展示（仅为例子，你具体实现）： 21本次随机的结果 22向右可以喝咖啡(咖啡的特色） 23向左可以吃烧烤（这家烧烤..…..网上的具体评价等） 24右下角展示 25一个随机展示筛子 26绿灯直行，红灯拐弯（筛子左右） 27
第一次生成的效果如下：
虽然没有具体使用高德，但是在这个的布局上和我的草稿没有什么区别。
迭代：多轮对话，越聊越准
为让效果更好，我们多尝试、跟模型多轮对话，效果好于一次性对话
接下来就是漫长的迭代~
第一次生成的版本，骰子是静态图片。我说：“让它能转起来，像真骰子一样。”
它立刻改成了CSS动画 + JS随机数控制。
我说：“咖啡馆的推荐文案太假了，要真实评价。”
它从网络抓取了真实用户对“北京胡同咖啡馆”的点评，自动生成了3条风格迥异的文案。
我说：“能不能加个‘暂停’按钮？”
它加了，还顺手做了个“进度条”和“已走距离”。
全程无代码干预，纯对话。
看看最终效果吧~
左侧为草稿图，右侧为使用 Doubao-Seed-Code 编程的效果。
下面是生成的README.md的文件，准确的识别了图片，以及分析图片所描述的功能等。
1 # 电子城市盲盒 - 随机城市漫步导航应用 2 3## 项目简介 4 5电子城市盲盒是一款创新的城市漫步导航应用，通过随机路线生成和交互式导航，让用户体验充满惊喜的城市探索之旅。用户只需选择起点，系统将随机生成一条充满未知的路线，并在旅途中提供实时导航、兴趣点推荐和随机事件（如红绿灯决策），使每次漫步都充满新鲜感。 6 7## 核心功能 8 9### 🎲 随机路线生成 10- 基于起点位置智能生成1-5公里的随机探索路线 11- 结合高德地图API实现真实道路导航 12- 支持路径随机化，每次生成不同的探索体验 13 14### 🚦 交互式决策系统 15- 基于骰子结果的红绿灯决策机制 16- 提供多种可能的行进方向选择 17- 增强游戏化体验和探索趣味性 18 19### 📍 智能兴趣点推荐 20- 沿途兴趣点自动发现和推荐 21- 支持多种POI类型（咖啡厅、书店、公园、艺术馆等） 22- 丰富用户探索体验和文化发现 23 24### 🧭 沉浸式导航体验 25- 实时地图显示和路线追踪 26- 步骤式导航指引和进度显示 27- 暂停/继续功能，灵活控制探索节奏 28 29### 📸 路线作品生成与分享 30- 一键保存完整路线信息和探索轨迹 31- 自定义路线标题和描述 32- 生成分享链接和二维码，分享您的探索故事 33 34## 技术架构 35 36### 前端 37- **框架** : React 18 + Vite 38- **地图集成** : 高德地图JavaScript API 39- **状态管理** : React Hooks 40- **样式方案** : styled-components 41- **UI组件** : 自定义React组件 42 43### 后端 44- **框架** : FastAPI 45- **地图服务** : 高德地图REST API 46- **业务逻辑** : 路线生成算法、红绿灯决策系统、POI搜索服务 47- **部署** : Uvicorn ASGI服务器 48 49## 快速开始 50 51### 前置条件 52- Python 3.8+ 53- Node.js 16+ 54- npm 8+ 55 56### 安装与运行 57 58#### 1. 克隆项目 59```bash 60git clone [仓库地址] 61cd 电子城市盲盒
2. 配置环境变量
后端配置
在 backend/.env 文件中添加以下内容（可选）：
AMAP_KEY=your_amap_api_key
注意：项目已配置模拟模式，无需API Key也可运行基本功能
前端配置
在 frontend/public/index.html 中配置高德地图API：
1<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=your_amap_key"></script>
3. 启动后端服务
1cd backend 2pip install -r requirements.txt 3python main.py
后端服务将运行在 http://localhost:8000
4. 启动前端服务
1cd ../frontend 2npm install 3npm run dev
前端服务将运行在 http://localhost:3000
使用指南
- 选择起点 : 在地图上点击选择您的出发位置
- 生成路线 : 点击"生成路线"按钮，系统将创建一条随机探索路线
- 开始漫步 : 查看路线详情，点击"开始漫步"进入导航模式
- 决策互动 : 遇到路口时，掷骰子决定行进方向
- 探索兴趣点 : 沿途发现感兴趣的地点，可暂停导航进行探索
- 完成旅程 : 到达终点后，查看完整的探索记录
- 保存路线作品 : 填写路线标题和描述，保存您的探索轨迹
- 分享探索故事 : 获取分享链接或扫描二维码，与朋友分享您的城市漫步体验
项目结构
电子城市盲盒/
├── backend/ # 后端服务
│ ├── app/
│ │ ├── api/ # API路由
│ │ ├── services/ # 业务逻辑服务
│ │ └── config/ # 配置文件
│ ├── main.py # 应用入口
│ └── requirements.txt # 依赖列表
├── frontend/ # 前端应用
│ ├── src/
│ │ ├── components/ # React组件
│ │ ├── services/ # API服务
│ │ ├── App.jsx # 主应用组件
│ │ └── main.jsx # 应用入口
│ ├── public/ # 静态资源
│ └── package.json # 依赖配置
└── README.md # 项目说明文档
特色功能
- 模拟模式 : 无需真实API Key也能体验完整功能
- 随机算法 : 基于真实道路的智能随机路线生成
- 游戏化设计 : 骰子决策机制增强探索趣味性
- 响应式UI : 适配不同屏幕尺寸的设备
- 实时交互 : 流畅的地图操作和导航体验
开发说明
后端开发
- API文档: http://localhost:8000/docs
- 主要模块:
RouteGenerator: 路线生成服务TrafficLightManager: 红绿灯决策服务POISearcher: 兴趣点搜索服务
前端开发
- 组件结构:
MapComponent: 地图显示和交互ControlPanel: 控制面板和交互DiceComponent: 骰子组件NavigationComponent: 导航指引POICard: 兴趣点卡片RouteWorkComponent: 路线作品生成和分享
许可证
MIT License
致谢
- 高德地图API提供地图数据支持
- React、FastAPI等开源技术栈
- 所有为项目贡献代码的开发者
让城市探索充满惊喜，开启您的随机漫步之旅！ 🌆🎲✨
项目架构如下：
## 四.对比：为什么它赢了？
除了Doubao-Seed-Code，我用2个国外的模型进行了对比，做了相同任务：。
Doubao-Seed-Code生成的效果：
**模型一：**
仅简单的界面，其余功能都未实现。
**模型二：**
无法理解图片，仅生成了记得的前端，用的AI常用的紫色配色。
对比表如下：
| 模型 | 是否理解图片 | 是否生成完整项目 | 是否还原布局 | 成本（估算） |
| ---------------- | ------------ | ------------------- | ---------- | -------------- |
| Doubao-Seed-Code | ✅ 原生VLM，精准还原 | ✅ 前后端齐全，功能完整 | ✅ 100%还原草图 | ¥0.34（0-32K区间） |
| 模型一 | ❌ 仅靠文字描述 | ⚠️ 只生成前端UI，无后端逻辑 | ❌ 配色乱、布局错 | ¥4.05 |
| 模型二 | ❌ 无视图片 | ❌ 生成“标准模板”，紫色主题，无交互 | ❌ 完全跑偏 | ¥2.10 |
> 📌 **Doubao-Seed-Code的输入价格：1.20元/百万Token，输出8.00元/百万Token**
>
> 在相同任务下，成本**不到Claude的1/10**，且效果碾压。
## **五.Doubao-Seed-Code 超高性价比**
火山方舟推出了 **Coding Plan 订阅制**：
| 套餐 | 首月价格 | 续费价格 | 适合人群 |
| -------- | ----- | ------ | ------------- |
| **Lite** | ¥9.9 | ¥40/月 | 个人开发者、学生、轻量项目 |
| **Pro** | ¥49.9 | ¥200/月 | 团队、复杂项目、高频调用 |
> ✅ **支持Claude Code、Cursor、Cline、Codex** **CLI**等主流工具
>
> ✅ 全量透明缓存，实际成本再降80%
>
> ✅ **火山方舟平台提供** **API** **调用中心**：[console.volcengine.com/ark/region:…](https://link.juejin.cn?target=https%3A%2F%2Fconsole.volcengine.com%2Fark%2Fregion%3Aark%2Bcn-beijing%2Fmodel%2Fdetail%3FId%3Ddoubao-seed-code "https://console.volcengine.com/ark/region:ark+cn-beijing/model/detail?Id=doubao-seed-code")
**我用Lite套餐，首月9.9元，完成了这个项目，还顺手写了3个小程序。**
> 举例来说，创建一个美观的交互式 Python 学习网站，相同tokens量下（0-32k区间），Claude Sonnet 4.5成本约4.05元，GLM-4.6约0.77元，而Doubao-Seed-Code仅约0.34元。
---
另外，在**Terminal** **Bench、SWE-Bench-Verified-Openhands、Multi-SWE-Bench-Flash-Openhands**等主流测评集中表现出色，仅次于Sonnet4.5，碾压国内模型
## 六.总结：它不是工具，是“懂你”的伙伴
Doubao-Seed-Code 的革命性，不在于它“能写代码”，而在于它终于**看懂了人类的意图**。
过去，我们写需求文档，像给外星人写说明书：
> “请在页面左上角放一个地图，右下角放一个按钮，点击后触发随机算法，返回3个兴趣点，用蓝色字体，字体大小16px，悬停有阴影……”
而今天，我们只需画一张草图，说一句：“帮我做出来。”
它知道：
* 哪里是按钮，哪里是地图；
* 哪里该有动画，哪里该有真实评价；
* 哪个“咖啡杯”不是装饰，而是故事的起点。
它不靠你“说清楚”，它靠你“画出来”。
这不是AI编程的进化，这是**人机协作** **范式** **的跃迁**。
> “以前是人教AI怎么干活，现在是AI看懂人想干嘛。” —— 这才是真正的“原生智能”。
#### 为什么这很重要？
1. **降低技术门槛**：设计师、产品经理、普通用户，都能直接“画出产品”。
2. **提升创作效率**：从“写5000字需求”到“画5分钟草图”，效率提升10倍。
3. **释放创造力**：不再被语法、框架、API文档束缚，专注“我想做什么”。
4. **重塑开发流程**：未来，产品经理画原型 → AI生成代码 → 测试上线，三步完成。
这不是未来，这是**现在正在发生的现实**。
我用9.9元，让AI替我走了一条从未走过的城市小巷。 我没有出门，但我“走”过了整座城。
**当AI能读懂你的草图，它就不再是工具，而是你思维的延伸。**
> 🌆 **真正的City Walk，不是用脚走，而是用心看。** 而现在，AI，替你看了。
---
> 《[不愧是国内首个视觉编程模型，一张草稿图直接做了一个电子版City Walk](https://xplanc.online/1d7daa2798c27cfecf017a8f37c4555381f504576f0406053ff2f9e9b0ada0a9)》 是转载文章，[点击查看原文](https://juejin.cn/post/7576086557716824115)。
