从草图到UI实现，你还差一个Doubao-Seed-Code
本篇围绕以下内容展开分享：
1.豆包编程是什么？
2.千问APP-->引发"王者荣耀生成器"的想法-->设计UI草图
3.UI设计完善
4.CloudCode+豆包code实现
4.1 CloudCode配置
4.2 让豆包干活+修改修改
前言
最近AI编程很火，看了豆包编程模型的评测，仅次于Sonnet4.5。
想评测个项目的同时，千问App也上新了。 我看到一泽Eze佬的分享：很多人晒王者荣耀战绩图，但形式单一。
小红书上很多“优化战绩图”的需求，虽然用千问App只要2步。
但还是难住了 不会使用ai工具的小白们。
那能不能直接写个前端来“简化”这个过程，让分享战绩更有成就感？
于是我画了个简单的UI草图，用CloudCode配合豆包编程，实现了个初步的想法。
整个过程不需要太深的编程基础，只要你会描述需求，就能跟着做出来。
这篇文章我会从灵感出发，带你走通从设计到实现的全流程！
1.豆包编程(Doubao-Seed-Code)
上周双十一，火山引擎正式发布了豆包编程模型（ Doubao-Seed-Code）：专为 Agentic 编程任务深度优化，在 SWE-Bench-Verified 官方榜单中刷新 SOTA ，更兼容 Anthropic API 等主流开发环境。
详细解读和9.9大礼包见火山引擎官方发布-豆包Code
Doubao-Seed-Code具备以下三大核心优势：
1.面向Agentic编程任务深度优化
- 支持256K长上下文，让模型轻松处理长代码文件、多模块依赖等复杂场景，更好支持端到端自主编程，在全栈开发中表现良好，前端能力尤为突出。
- 国内首个支持视觉理解能力的编程模型，可参照UI设计稿、截图或手绘草图生成代码，或对生成页面进行视觉比对，自主完成样式修复和Bug修复，大幅提升前端开发效率。
2.多生态兼容
- 模型兼容Anthropic API，对于使用Claude Code的团队，只需几行代码即可切换到Doubao-Seed-Code，可以在熟悉的开发环境中享受更高性价比的服务。
- 针对Claude Code、TRAE等主流开发工具进行特别优化，提供稳定可靠的调用体验。
3.综合成本降低62.7%
- 通过火山方舟提供安全可靠的API服务，支持快速集成与大规模部署。凭借极低的定价和全量透明Cache能力，综合使用成本相比业界平均水平降低62.7%，已达国内最低价格水平。
- 对于个人开发者，火山引擎推出Coding Plan订阅服务，即享最低首月9.9元的服务。
优势总结（省流版）：①长文、②多生态、③9.9
2.王者荣耀生成器
这么优惠，不得上手试试AI编程。
那么为什么想写个 王者荣耀生成器？
因为正值“千问App”的上新，小红书出现了一个新场景：更有仪式感的王者荣耀战绩截图
在小红书上，已经有不少用户求助网友帮忙改造自己的战绩图：（原创：一泽Eze）
2.1 战绩创作教程
（原创：一泽Eze） 第一步：准备原材料 首先，你需要一张清晰的王者荣耀战绩结算截图。 第二步：在千问内，使用“改造指令” 打开千问 App，上传这张截图，然后输入下面这段 Prompt：
帮我修改图片：只改变左边的人物姿势，优雅地坐在一个与她身份匹配的、镶有黄金装饰的奢华红色天鹅绒宝座上。她慵懒地跷着二郎腿，其中一条腿完全朝向镜头优雅地伸展。她脚上穿着一只极致性感的亮面高跟鞋。构图采用极具冲击力的超广角、低角度仰拍视角，高跟鞋在前景中被放大，占据画面的绝对主导地位，鞋尖几乎要碰到屏幕底部边缘，创造出强烈的纵深感和画面张力。她的表情自信而从容，目光仿佛穿透屏幕。人物的服装、发型和饰品与原图风格保持一致。战绩 UI 自然的在画面中展示。画面细节丰富，超高分辨率
2.2 图生图应用
本质是个图生图的应用场景，非常适合设计一个简单的UI界面，提供给小白使用。
小白内心OS：上传战绩，获得新战绩图
是的，我也是这么想的。 于是，我画了这个UI草图：
3.UI设计
我不会描述配色，前端框架等内容。
尝试过直接丢草图，对话n轮也设计不好UI界面。
于是，在给豆包Code编程之前，我用豆包给UI草图上个色（确定配色）；然后用chatgpt生成了一份《UI需求文档》。
3.1 UI需求说明
输入提示词如下：
这是UI原型图，根据图详细描述一下需求，等会要写代码（先不写）。最上方是预设图片(也是战绩图，每个是16:9的比例，图片和新图也是16:9的比例。中间是上传图片，生成图片按钮，最后是新图片。
得到一份《UI说明.md》
注：完整说明，请在文末领取
3.2 前端提示词
再用UI原型图+UI需求说明，生成前端提示词：
我写了个"UI说明.md",画了"UI原型图.png"，我想让大模型根据这些1:1复刻，写出前端代码。后端先不写，我把3张预设图片放在image/input文件夹下（虞姬.png、韩信.png、甄姬.png），3张预设图片的输出放在image/output文件夹下（虞姬.png、韩信.png、甄姬.png）。读取展示3秒生成中的动画，把输出图片展示在生成区域。帮我设计提示词。
得到如下：
## **🎯（总体目标）任务要求**
请根据 **UI说明.md** 和 **UI原型图.png** 的视觉样式，**100% 还原 UI**，并生成可直接运行的前端代码框架Vue。
请严格执行以下逻辑：
---
## **功能要求**
### **1. 顶部预设图片部分**
* 从 `image/input/` 文件夹加载三张预设图片
* 虞姬.png
* 韩信.png
* 甄姬.png
* 并在界面上展示这三个模板按钮（对应 UI 原型图的顶部结构）
* 点击后切换模板，选中态需高亮（参考原型图样式）
---
### **2. 上传图片区域**
* 中间区域显示「点击上传战绩图」
* 点击后可选择本地图片并展示缩略图
* 比例保持 16:9（必要时自动缩放）
---
### **3. 一键生成按钮**
用户点击后需：
1. 禁用按钮
2. 显示“生成中”动画（持续 **3 秒**）
3. 3 秒后自动在底部展示 **输出图片**
---
完整提示词，请在文末领取
4. Cloude Code + 豆包code
UI准备工作处理完毕，我们可以上编程了。
参考豆包Coding，安装和配置都写的比较全。 我是window环境，不用跳转外面再找教程配置。
4.1 安装CloudCode
在命令行界面，执行以下命令安装 Claude Code。
npm install -g @anthropic-ai/claude-code
安装结束后，执行以下命令查看安装结果，若显示版本号则安装成功。
claude --version
4.2 配置环境变量（豆包code）
配置环境变量的意思是，把CloudCode内置大模型换成 doubao-seed-code，不用科学也能用CloudCode。
配置以下环境变量。各系统的命令这都有
- ANTHROPIC_BASE_URL：
https://ark.cn-beijing.volces.com/api/coding - ANTHROPIC_AUTH_TOKEN：获取API Key。
- ANTHROPIC_MODEL:
doubao-seed-code-preview-latest。
新开一个cmd，输入 claude，看到以下内容说明配置成功。
4.3 让豆包code干活
新建一个文件夹，把 “UI原型图.png” 和 “UI说明.md”放进去。
在新文件夹下，输入claude。
在claude界面中，输入 #3.2 的提示词。
等待3分钟，中间只管Enter。 得到如输出：
同时浏览器可以得到这样的界面v1.0。
4.3.1 修改需求
对界面v1.0我有以下几点修改建议。 可以直接用大白话，也可以让大模型优化后再输入。
我的v2.0修改如下：
修改：1.点击预设图片，要显示在“上传战绩图”中。2.图片上传区域有内部有云朵上传图标。3.点击一键生成前，新生成战绩图展示区域要显示。4.新生成战绩图区域和上传战绩图区域是等宽的。5.生成完成，不要显示“输出图片”四个字。
得到 界面v2.0
4.3.2 加标题
最后让doubao-seed-code 再加个标题
就能得到如下效果啦！
写在最后
这是工具的最基本的雏形，上传图片让它真正调用“千问修图”进行处理，中间的提示词优化还没加上。感兴趣的小伙伴可以继续探索一下~
- Lite版本（9.9）的Coding Plan
- 轻量级体验也可以通过火山引擎体验中心，选择Doubao-Seed-Code