直接从图片生成 html
1. 起因， 目的:
- 无意间碰到一个网站: https://wise.com/zh-cn/currency-converter/brl-to-cny-rate
- 其实我就是想搜一下巴西的货币单位是什么。
- 这个网站的设计很漂亮， 尤其是颜色搭配很不错，讨人喜欢。
- 所以我想让 AI 帮我生成类似的效果。
- 本文，对比2个模型: Grok 3 和 Gemini 2.5 Pro Preview 05-06
2. 先看效果
原始网站的效果
3. 过程:
1. Grok 3 代码和效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Card Component</title><style>body {font-family: Arial, sans-serif;background-color: #f5f5f5;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;padding: 20px;}.card-container {display: flex;gap: 20px;flex-wrap: wrap;justify-content: center;}.card {width: 300px;padding: 20px;border-radius: 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);color: white;display: flex;flex-direction: column;gap: 15px;}.card-left {background-color: #1A3C34;}.card-right {background-color: #A3E4B0;color: black;}.card p {font-size: 16px;line-height: 1.5;margin: 0;}.button {background-color: #28A745;color: white;padding: 10px 20px;border: none;border-radius: 25px;font-size: 14px;cursor: pointer;text-align: center;text-decoration: none;display: inline-block;}.button:hover {background-color: #218838;}</style>
</head>
<body><div class="card-container"><div class="card card-left"><p>“这正是我们需要的太棒了 生活成为可能。记住非常 简单，而且非常快。”</p><a href="#" class="button">Read review —— 来自 Trustpilot</a></div><div class="card card-right"><p>“交易超更快，收货合望。 这个网上订打手机合居性 在国外或者帮成折打的人。”</p><a href="#" class="button">Megan —— 来自 Trustpilot</a></div></div>
</body>
</html>
- 颜色不对劲，尺寸大小也不符合。
2. Gemini 2.5 Pro Preview 05-06
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户评价卡片</title><style>body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #f0f2f5; /* 一个浅色背景，让卡片更突出 */font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;padding: 20px;box-sizing: border-box;}.testimonial-container {display: flex;gap: 30px; /* 卡片之间的间距 */flex-wrap: wrap; /* 如果屏幕太小，则换行 */justify-content: center;}.testimonial-card {width: 320px; /* 卡片宽度 */padding: 30px;border-radius: 25px; /* 圆角 */display: flex;flex-direction: column;justify-content: space-between; /* 使内容和按钮分开 */min-height: 380px; /* 保证卡片有足够高度 */box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* 轻微阴影 */}/* 深色卡片 */.card-dark {background-color: #203406; /* 深橄榄绿 */}.card-dark .quote-text {color: #b7e57a; /* 亮绿色文本 */font-size: 24px; /* 字体稍大 */line-height: 1.5;font-weight: 500;}.card-dark .review-link {background-color: #a5d96f; /* 亮绿色背景 */color: #1a2b05; /* 深色文字 */padding: 12px 20px;border-radius: 50px; /* 胶囊形状 */text-decoration: none;display: inline-block;text-align: center;font-weight: 500;font-size: 14px;align-self: flex-start; /* 按钮靠左对齐 */}/* 浅色卡片 */.card-light {background-color: #a8f070; /* 亮绿色 */}.card-light .quote-text {color: #283810; /* 深绿色文本 */font-size: 24px;line-height: 1.5;font-weight: 500;}.card-light .review-link {background-color: #1f2e0a; /* 深色背景 */color: #c7f29b; /* 亮绿色文字 */padding: 12px 20px;border-radius: 50px;text-decoration: none;display: inline-block;text-align: center;font-weight: 500;font-size: 14px;align-self: flex-start;}.quote-text {margin-bottom: 25px; /* 引言和链接之间的间距 */}/* 针对小屏幕的响应式调整 */@media (max-width: 768px) {.testimonial-container {flex-direction: column;align-items: center;}.testimonial-card {width: 90%; /* 在小屏幕上卡片宽度更大 */max-width: 350px;min-height: auto; /* 高度自适应 */margin-bottom: 20px; /* 堆叠时间距 */}.testimonial-container > div:last-child {margin-bottom: 0;}}</style>
</head>
<body><div class="testimonial-container"><div class="testimonial-card card-dark"><p class="quote-text">“这让我们跨越大洲的生活成为可能。汇款非常简单，而且非常快。”</p><a href="#" class="review-link">Read review — 来自 Trustpilot</a></div><div class="testimonial-card card-light"><p class="quote-text">“交易速度快，收费合理。这个网上银行非常适合居住在国外或经常旅行的人。”</p><a href="#" class="review-link">Megan — 来自 Trustpilot</a></div></div></body>
</html>
- 颜色依然不准确，但是非常接近。
- 尺寸非常接近。
4. 结论 + todo
- 单单只看这一个问题， Gemini 完胜。
希望对大家有帮助。