Claude-Code 使用体验
背景
随着 AI Agent 的发展，一批工具随之大火，如 OpenCode、CodeX、Claude Code、OpenClaw 等，极大提升了开发效率，同时也重塑了传统开发流程。
近期抽了些时间简单体验了 AI Agent 开发工具，并基于 Claude Code 和几个国产模型在 Web 开发上做了一些简单测试，这里做个分享。
Web开发能力测试
随便找了个图片用于测试Web开发能力，试了几个大模型。图片如下：
提示词
基于pnpm+vite+vue3+ts+tailwindcss技术栈，阅读并理解 @design/cover.png 图片
生成一个web页面，并基于playwright mcp server 来调试和验证，确保其与图片表现一致。
各模型表现
均能正确的生成要求技术栈所对应的模板代码，但在输出的结果上差异较大核心点在于图像理解。
图像理解能力截图如下：
就是单纯的胡言乱语。
DeepSeek
DeepSeek 不支持多模态这里直接弃权。
GLM-4.7
MiniMax M2.5
Claude-Opus4.6
这里没有Claude-Opus4.6的相关环境，是拜托一位有权限的热心朋友帮忙的，据称生成如下结果花了40RMB。
Figma-Mcp
这里把Figma-Mcp单独展示是因为其基本做到了像素级还原。
设计
结果
结论
关于模型
基础模型能力比你想象中的要重要。
价格与质量差异显著：
模型 输入价格 输出价格 Claude Opus 4.6 $15/M tokens $75/M tokens GLM-4.7 ¥1/M tokens ¥1/M tokens Minimax-M2.5 ¥1-2/M tokens ¥1-2/M tokens 国产模型图像理解能力基本为 0：在测试中，国产模型无法正确理解网页设计图，生成的代码与设计相差甚远。这并非模型不够努力，而是多模态能力存在代际差距。
关于 Design to Code
- Design To Code 已是现在进行时：不再是未来概念，而是当下可落地的技术。
- Figma MCP 带来质变：通过 Figma MCP 获取结构化的设计信息（而非仅一张图片），可大幅提升 AI 输出质量。
- 传统方式：设计图 → AI 理解 → 代码（依赖模型图像理解能力）
- Figma MCP：设计数据 → 结构化信息 → 代码（精准还原设计）
关于开发者
- 开发模式已从传统的「编码-调试」重塑为「构建完善文档-AI 生成代码」。
- 时间会惩罚每一个不习惯写文档的开发者。
- 相较于开发者薪资，Token 消耗成本几乎可以忽略不计。
- 必须跟上时代——传统开发模式已被 AI Agent 工具淘汰，初入行者更难有出路。