⭐ 全行业模型/产品效果对比

WeaveFox 是一款智能研发平台，提供的「图生码」能力能够将设计图按 1:1 精准还原到各技术栈代码。支持的技术栈包括：React、Vue、小程序等。

WeaveFox与业界模型技术对比

• 测试目标：仅针对「图生代码」任务进行测试，不涉及模型全维度对比内容。
• 测试范围：主要对业界领先模型进行测试。对于在大模型 API 基础上进行二次封装的产品，仅测试了 bolt.new，其他这类产品请直接参考下面模型本身的效果。

「图生码」还原细节对比

图片下方分数为与原设计稿比对的图片相似度

项	原设计图	Claude.ai	bolt.new	ChatGPT	Qwen	WeaveFox
主力模型	-	Claude 3.7 Sonnet	Claude 3.7 Sonnet	GPT-4o	Qwen2.5-VL	WeaveFox-VL
归属主体	-	Anthropic	Stackblitz	OpenAI	阿里千问	蚂蚁多模态
复杂布局 **
		7.69	5.94	6.01	6.34	8.76
列表 **
		5.19	6.41	6.30	7.07	9.08
卡片 **
		8.50	7.49	6.54	7.32	9.20
表单 **
		6.31	6.37	6.09	5.83	9.77
表格 **
		7.93	8.50	7.52	7.74	7.82
整页 **
		7.34	4.52	5.20	4.21	9.49
暗黑风格 **
		6.30	5.93	7.50	7.06	9.23

「图生码」代码细节对比

项	原设计图	Claude.ai	ChatGPT	Qwen	WeaveFox
图片处理		图片用icon组件处理，需要手动替换	图片用icon组件处理，需要手动替换	图片用默认占位图处理，需要手动替换	图片使用真实切图并自动上传CDN，无需额外处理
Icon 处理		antd icon	antd icon	antd icon	antd icon + 自动切图
组件化封装		平铺	平铺	平铺	拆分组件

补充信息

测试使用的 Prompt

You are a senior front-end developer specializing in React and Ant Design. Based on the provided UI screenshot/design, generate clean, production-ready React code that: 
1. Uses **Ant Design (v5.x)** components (e.g., Button, Layout, Grid, Form, Table) 
2. Implements **responsive design** for mobile/desktop breakpoints (use Ant Design’s Grid system or CSS media queries) 
3. Matches the visual structure, spacing, and styling (colors, fonts) of the reference image. 
Provide: 
- A single React functional component (`.jsx` or `.tsx`) 
- TypeScript interfaces if needed 
- Inline comments for complex logic 
- No external dependencies except React and Ant Design 
**Example Input:** 
[Attach screenshot/image of a UI with: header, navigation menu, card grid, form, table, footer] 
**Example Output:** 
[Well-structured React code using flex-box layout, Ant Design’s `<Row>`, `<Col>`, and responsive props like `xs`, `md`, `lg`]

模型测试地址：

欢迎反馈

:::tips 更新于：2025.03.31
您的反馈是我们的动力，欢迎提交任何对比效果和测试建议🫡

:::