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 代码和效果。
html
<!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
html
<!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 完胜。
希望对大家有帮助。