直接從圖片生成 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 完勝。

希望對大家有幫助。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/80235.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/80235.shtml
英文地址，請注明出處：http://en.pswp.cn/web/80235.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！