直接从图片生成 html

waterHBO

于 2025-05-16 19:18:44 发布

阅读量1k

点赞数 35

CC 4.0 BY-SA版权

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/waterHBO/article/details/147963670

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;