不愧是国内首个视觉编程模型，一张草稿图直接做了一个电子版City Walk

“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这个国内首个具备视觉理解能力的编程模型，但是这在他的人家官方公司，我们没办法直接用，所以可以通过 Claude Code去调用 Doubao-Seed-Code ，另外，在火山方舟平台也是提供API调用。

仅需 5s 在Claude Code 丝滑接入 Doubao-Seed-Code

在启动 Claude Code 前输入环境变量（以Windows为例）：

setx ANTHROPIC_AUTH_TOKEN ARK_API_KEY
setx ANTHROPIC_BASE_URL https://ark.cn-beijing.volces.com/api/coding
setx ANTHROPIC_MODEL doubao-seed-code-preview-latest

📌注意：换为你自己的，来这里获取 -> https://console.volcengine.com/ark/region:ark+cn-beijing/apikey

📚如果有不会的地方可以看官方教程来配置：https://www.volcengine.com/docs/82379/1928262

真消费才敢说真话。

使用指令导航到指定目录，并启动claude:

C:\Users\18432> D:
D:> cd 目标
D:\目标>claude

可以看到如图所示成功启动并使用Doubao-Seed-Code模型， 兼容了原本的 Anthropic API，对于使用Claude Code的开发者，几乎零成本 将 API 切换到 Doubao-Seed-Code，完全无缝，像换了“引擎”，但方向盘还是原来的。

🖼️ 图片理解测评

听说 Doubao-Seed-Code 是国内首个具备视觉理解能力的编程模型，我直接把我本次的草稿图直接给了他，看他理解的怎么样？

草稿图原图（其中有多个地名为干扰选项）

💡 不是“猜”出来的，是“看懂”了。

VLM训练需要专业团队和数据积累，有一定技术壁垒，doubao 系列模型一直以来视觉理解能力非常强，Seed-Code 模型保持了这个优势，在国内，要么模型不具备视觉理解能力，要么需要依赖MCP实现，将图片转化成语义描述供模型理解，过程中消耗token，效果远不及原生VLM能力，项目开发，只有真正的理解，才能大幅提升前端开发效率。

下面是端到端模型训练的下游指标评测结果：

📌 实战 AI 开发

直接把下面的提示词扔给他

暂时无法在飞书文档外展示此内容

第一次生成的效果如下：

虽然没有具体使用高德，但是在这个的布局上和我的草稿没有什么区别。

迭代：多轮对话，越聊越准

为让效果更好，我们多尝试、跟模型多轮对话，效果好于一次性对话

接下来就是漫长的迭代~

第一次生成的版本，骰子是静态图片。我说：“让它能转起来，像真骰子一样。”

它立刻改成了CSS动画 + JS随机数控制。

我说：“咖啡馆的推荐文案太假了，要真实评价。”

它从网络抓取了真实用户对“北京胡同咖啡馆”的点评，自动生成了3条风格迥异的文案。

我说：“能不能加个‘暂停’按钮？”

它加了，还顺手做了个“进度条”和“已走距离”。

全程无代码干预，纯对话。

看看最终效果吧~

左侧为草稿图，右侧为使用 Doubao-Seed-Code 编程的效果。

下面是生成的README.md的文件，准确的识别了图片，以及分析图片所描述的功能等。

请帮我设计并生成一个“电子版City Walk”项目方案。规则如下：
1.项目简介：
电子版City Walk基于“瞎溜达”理念，模拟城市漫无目的漫步。
遵循“绿灯直行，红灯拐弯，遇路口随机选择方向”的逻辑生成步行路线。
路线生成结合兴趣点推荐，重点推介小众有趣的咖啡馆、小店、街头艺术等。
用户可以线上“电子走一遍”这条路线，查看地图和沿途店铺景点卡片。
支持路线保存、复盘和分享。
2.主要功能需求：
地图展示与交互（基于高德基础地图API，直接使用我的API： fdda8428fc94）：显示地图、起点、动态路线与兴趣点标记。
起点选取与定位功能：自动定位或手动选择起点城市和具体位置。
路线生成规则：结合步行路径规划API和随机决策算法，实现仿真“红绿灯”及“猜拳”路口选择。
沿途兴趣点推荐模块，智能筛查高评分非连锁商店和特色地点。
电子City Walk模拟导航，用户可点击“下一步”体验虚拟行走过程。
路线生成后自动生成图文路线作品，支持用户收藏和分享。
后续拓展包括路线评价、个性化推荐和自然语言描述。
3.技术架构
采用前后端分离的方式去写代码，后端用Python代码，地图展示与交互（基于高德基础地图API，直接使用我的API： fdda8428fc9485f355b24b1c76f6f147）
4.草稿图如附件（（仅为例子，全部具体实现））
背景是当前的位置，会根据高德自动找到前方路口，选择路线会出现的兴趣点推荐
左下角展示（仅为例子，你具体实现）：
本次随机的结果
向右可以喝咖啡(咖啡的特色）
向左可以吃烧烤（这家烧烤..…..网上的具体评价等）
右下角展示
一个随机展示筛子
绿灯直行，红灯拐弯（筛子左右）

项目架构如下：

四.对比：为什么它赢了？

除了Doubao-Seed-Code，我用2个国外的模型进行了对比，做了相同任务：。

Doubao-Seed-Code生成的效果：

模型一：

仅简单的界面，其余功能都未实现。

模型二：

无法理解图片，仅生成了记得的前端，用的AI常用的紫色配色。

对比表如下：

表格 还在加载中，请等待加载完成后再尝试复制

📌 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调用中心：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，替你看了。