在 AI Coding 百花齐放的今天，每个模型都有其独特的优势。豆包编程模型（Doubao-Seed-Code）是国内“首发”的编程模型，自带视觉理解能力，而不是使用工具调用实现。同时，Claude Code 凭借强大的代码工程化和逻辑推理能力，扮演着“全栈工程师”的角色。
本文将结合 Doubao-Seed-Code 与 Claude Code 进行实战，从一张电商商品列表页的UI设计稿开始，无缝衔接地完成从视觉到代码、再到功能完善和测试的完整开发流程，重点实测豆包编程模型的视觉模型能力。
1、Claude Code 安装与配置
- 需要 Node.js 18 或更新版本环境。
- Windows 用户需安装 Git for Windows。
安装：
npm install -g @anthropic-ai/claude-codeclaude --version
环境验证：
如上图，已配置完成。其中 Model 配置的是 doubao-seed-code-preview-latest。
具体配置请参考官方文档：https://www.volcengine.com/docs/82379/1928261
2、输入准备：商品列表设计图
注：设计稿使用的是墨刀上的免费资源，如若涉及侵权请联系。
1、创建项目目录
创建的项目目录为：
/claude-demo/mall
将上述的设计稿放到这个目录下。
2、准备提示词
请识别当前目录下的UI设计稿【商品列表设计.png】，生成的H5页面代码，只需要前端部分，且页面为「精美」风格。要求：1、使用Tailwind CSS，商品卡片采用响应式网格布局。2、禁止使用任何改变应用结构或组件化范式的JavaScript框架/库（例如：React，Vue，Angular）。3、可以cdn引用第三方库以满足题目要求，如Three.js，p5js。4、最终产物必须是纯粹的HTML、CSS和JS文件。如果需要创建多个文件（HTML/CSS/JS），请确保所有文件引用均使用相对路径。5、所有文件需要保存在当前项目目录下
3、运用 Claude Code 开发
进入到上述 /claude-demo/mall 目录中，运行命令：
claude
输入上述提示词后会进行图片分析及思考，如下：
在生成代码的过程中，需要进行确认，如：
当然，你也可以设置 Always Allow。
整个生产过程大概耗费15-20分钟，当然也看个人电脑配置了。
1、开发实践过程分析
下面是全部的过程：
（1）查看目录中的“商品列表设计.png”，并进行分析，分析完成后，根据要求生成 index.html。
（2）生成 style.css，并更新 index.html 代码。
（3）生成 script.js，并更新 index.html 代码。代码生成后，进行目录结构分析与验证。
（4）自动测试，运用 python 启动服务后，测试页面是否正常。
（5）创建 README 文件，这个不错，省了写文档了！全部完成后，关闭服务。
（6）总结每个文件的用途以及功能特点，总结得很好。
2、效果验证与调优
（1）首先看一下第一版的效果
可以看到效果还是不错，但是与设计稿相比，还是有些差别的，下面就针对设计稿进行一次优化。
（2）页面调优
对比设计稿后发现，在手机上展示商品列表时，应该是两个商品并排，上方也少了搜索框，那我们来让它进一步优化吧。
直接告诉 Claude Code 做什么就可以了，输入：
请对比设计稿文件，增加搜索框功能，以及在手机端展示时，满足90%的手机尺寸中，商品卡片两个并排展示
处理过程，下面只截图了一部分：
最后还总结了优化的功能以及代码变更部分，确实非常清晰。
注：以上没有展示全部过程，过程中还做了多设备的兼容验证等。
看下优化后的效果了。
优化后的效果，确实与设计稿更加的接近了，而且体验也很好！通过豆包编程模型（Doubao-Seed-Code）和 Claude Code 的协同，我们在极短的时间内获得了与原设计稿高保真的源代码，此依赖于豆包编程模型（Doubao-Seed-Code）视觉模型能力的精准还原！
当前豆包编程模型具有极致的性价比，发布了 Coding Plan，最低9.9即可畅享豆包编程模型，有兴趣可自行了解。
如果您有AI应用困难，如果您有企业AI需求，欢迎关注交流。持续分享实企业AI解决方案、电商应用、模型定制、RPA等实战经验。致力为中小企业提供实用的企业级AI解决方案！