deepseek、Claude 3.7 Sonnet、GPT-4.5、文心一言4.5根据UI设计稿生成前端html页面效果对比

徐同保

487人浏览 · 2025-03-21 10:17:18

徐同保 · 2025-03-21 10:17:18 发布

UI设计稿：

提示词：

你是一个前端代码工程师，根据UI设计稿，编写对应html页面，样式写在<style>标签里，类名都以"m-"开头

claude 3.7 Sonnet:

根据提供的UI设计稿，我将编写对应的HTML页面，所有类名都以"m-"开头，样式写在<style>标签里。
 
```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>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
        }
        
        /* 状态栏 */
        .m-status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #fff;
        }
        
        .m-time {
            font-weight: 600;
            font-size: 16px;
        }
        
        .m-status-icons {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 标题栏 */
        .m-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            background-color: #fff;
        }
        
        .m-back {
            position: absolute;
            left: 15px;
            font-size: 24px;
        }
        
        .m-title {
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 导航Tab */
        .m-tabs {
            display: flex;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }
        
        .m-tab {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 16px;
            color: #666;
        }
        
        .m-tab.m-active {
            color: #333;
            font-weight: 500;
            position: relative;
        }
        
        .m-tab.m-active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 30%;
            width: 40%;
            height: 3px;
            background-color: #f44336;
            border-radius: 3px;
        }
        
        /* 账单列表 */
        .m-bill-list {
            background-color: #fff;
        }
        
        .m-bill-item {
            display: flex;
            padding: 20px 15px;
            border-bottom: 1px solid #f5f5f5;
            align-items: center;
        }
        
        .m-bill-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 18px;
            font-weight: bold;
        }
        
        .m-icon-income {
            background-color: #ff7043;
        }
        
        .m-icon-expense {
            background-color: #29b6f6;
        }
        
        .m-bill-info {
            flex: 1;
        }
        
        .m-bill-type {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }
        
        .m-bill-date {
            font-size: 14px;
            color: #999;
        }
        
        .m-bill-amount {
            font-size: 24px;
            font-weight: 500;
        }
        
        .m-income {
            color: #ff7043;
        }
        
        .m-expense {
            color: #999;
        }
        
        /* 底部指示条 */
        .m-bottom-indicator {
            position: fixed;
            bottom: 8px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 120px;
            height: 5px;
            background-color: #000;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="m-status-bar">
        <div class="m-time">9:41</div>
        <div class="m-status-icons">
            <span>●●●</span>
            <span>●●●●</span>
            <span>●●</span>
        </div>
    </div>
    
    <!-- 标题栏 -->
    <div class="m-header">
        <div class="m-back">&#10094;</div>
        <div class="m-title">账单明细</div>
    </div>
    
    <!-- 导航Tab -->
    <div class="m-tabs">
        <div class="m-tab m-active">全部</div>
        <div class="m-tab">收入</div>
        <div class="m-tab">支出</div>
    </div>
    
    <!-- 账单列表 -->
    <div class="m-bill-list">
        <div class="m-bill-item">
            <div class="m-bill-icon m-icon-income">收</div>
            <div class="m-bill-info">
                <div class="m-bill-type">收入-资金分配</div>
                <div class="m-bill-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-bill-amount m-income">+200</div>
        </div>
        
        <div class="m-bill-item">
            <div class="m-bill-icon m-icon-income">收</div>
            <div class="m-bill-info">
                <div class="m-bill-type">收入-资金分配</div>
                <div class="m-bill-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-bill-amount m-income">+200</div>
        </div>
        
        <div class="m-bill-item">
            <div class="m-bill-icon m-icon-income">收</div>
            <div class="m-bill-info">
                <div class="m-bill-type">收入-资金归集</div>
                <div class="m-bill-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-bill-amount m-income">+200</div>
        </div>
        
        <div class="m-bill-item">
            <div class="m-bill-icon m-icon-expense">支</div>
            <div class="m-bill-info">
                <div class="m-bill-type">支出-预授权加油</div>
                <div class="m-bill-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-bill-amount m-expense">-200</div>
        </div>
        
        <div class="m-bill-item">
            <div class="m-bill-icon m-icon-expense">支</div>
            <div class="m-bill-info">
                <div class="m-bill-type">支出-室内支付</div>
                <div class="m-bill-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-bill-amount m-expense">-200</div>
        </div>
    </div>
    
    <!-- 底部指示条 -->
    <div class="m-bottom-indicator"></div>
</body>
</html>
```
 
这段代码实现了UI设计稿中的所有元素：
- 顶部状态栏（时间和信号图标）
- 标题栏（返回按钮和"账单明细"标题）
- 导航Tab（全部、收入、支出，"全部"处于选中状态）
- 账单列表（带有图标、类型、日期和金额）
- iPhone的底部指示条
 
所有样式均写在`<style>`标签内，所有类名都以"m-"开头，符合要求。

效果：

deepseek:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>账单明细</title>
    <style>
        .m-container {
            max-width: 400px;
            margin: 20px auto;
            padding: 0 15px;
            font-family: -apple-system, sans-serif;
        }

        .m-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 16px;
        }

        .m-header-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }

        .m-amount-group {
            display: flex;
            gap: 20px;
            color: #666;
        }

        .m-bill-item {
            padding: 16px 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .m-bill-title {
            font-size: 15px;
            color: #333;
            margin-bottom: 8px;
        }

        .m-bill-time {
            font-size: 13px;
            color: #999;
        }

        .m-amount {
            font-size: 16px;
            font-weight: 500;
            float: right;
        }

        .m-income {
            color: #00b578;
        }

        .m-expense {
            color: #ff3141;
        }

        .m-divider {
            height: 1px;
            background: #eee;
            margin: 12px 0;
        }
    </style>
</head>
<body>
    <div class="m-container">
        <div class="m-header">
            <span class="m-header-title">全部</span>
            <div class="m-amount-group">
                <span>收入</span>
                <span>支出</span>
            </div>
        </div>

        <div class="m-bill-item">
            <div class="m-bill-title">收人-资金分配</div>
            <div class="m-bill-time">2024-6-01 12:09:23</div>
            <span class="m-amount m-income">+200</span>
        </div>
        <div class="m-divider"></div>

        <div class="m-bill-item">
            <div class="m-bill-title">收入-资金分配</div>
            <div class="m-bill-time">2024-6-01 12:09:23</div>
            <span class="m-amount m-income">+200</span>
        </div>
        <div class="m-divider"></div>

        <div class="m-bill-item">
            <div class="m-bill-title">收入-资金归集</div>
            <div class="m-bill-time">2024-6-01 12:09:23</div>
            <span class="m-amount m-income">+200</span>
        </div>
        <div class="m-divider"></div>

        <div class="m-bill-item">
            <div class="m-bill-title">支出-预授权加油</div>
            <div class="m-bill-time">2024-6-01 12:09:23</div>
            <span class="m-amount m-expense">-200</span>
        </div>
        <div class="m-divider"></div>

        <div class="m-bill-item">
            <div class="m-bill-title">支出-室内支付</div>
            <div class="m-bill-time">2024-6-01 12:09:23</div>
            <span class="m-amount m-expense">-200</span>
        </div>
    </div>
</body>
</html>

效果：

GPT-4.5:

以下是根据UI设计稿实现的HTML页面，其中样式定义在<style>标签中，且所有类名均以 "m-" 开头：

html页面代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账单明细</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #f5f8fa;
        }
        .m-container {
            background: #ffffff;
            min-height: 100vh;
        }
        .m-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            font-size: 18px;
            font-weight: bold;
            position: relative;
            border-bottom: 1px solid #f0f0f0;
        }
        .m-header .m-back {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
        .m-tabs {
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #e6e6e6;
            margin-top: 10px;
        }
        .m-tab {
            padding: 10px 5px;
            font-size: 16px;
            color: #666;
            position: relative;
        }
        .m-tab-active {
            color: #333;
        }
        .m-tab-active::after {
            content: "";
            display: block;
            width: 20px;
            height: 3px;
            background-color: #ff4500;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        .m-list {
            padding: 0 15px;
        }
        .m-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .m-item-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: white;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        .m-income-icon {
            background-color: #ff7631;
        }
        .m-expense-icon {
            background-color: #3aa2fe;
        }
        .m-item-info {
            flex: 1;
        }
        .m-item-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }
        .m-item-time {
            font-size: 12px;
            color: #aaa;
        }
        .m-amount {
            font-size: 16px;
            font-weight: bold;
        }
        .m-income {
            color: #ff7631;
        }
        .m-expense {
            color: #bbb;
        }
    </style>
</head>
<body>

<div class="m-container">
    <div class="m-header">
        <div class="m-back">＜</div>
        账单明细
    </div>
    <div class="m-tabs">
        <div class="m-tab m-tab-active">全部</div>
        <div class="m-tab">收入</div>
        <div class="m-tab">支出</div>
    </div>

    <div class="m-list">
        <div class="m-list-item">
            <div class="m-item-icon m-income-icon">收</div>
            <div class="m-item-info">
                <div class="m-item-title">收入-资金分配</div>
                <div class="m-item-time">2024-6-01 12:09:23</div>
            </div>
            <div class="m-amount m-income">+200</div>
        </div>

        <div class="m-list-item">
            <div class="m-item-icon m-income-icon">收</div>
            <div class="m-item-info">
                <div class="m-item-title">收入-资金分配</div>
                <div class="m-item-time">2024-6-01 12:09:23</div>
            </div>
            <div class="m-amount m-income">+200</div>
        </div>

        <div class="m-list-item">
            <div class="m-item-icon m-income-icon">收</div>
            <div class="m-item-info">
                <div class="m-item-title">收入-资金归集</div>
                <div class="m-item-time">2024-6-01 12:09:23</div>
            </div>
            <div class="m-amount m-income">+200</div>
        </div>

        <div class="m-list-item">
            <div class="m-item-icon m-expense-icon">支</div>
            <div class="m-item-info">
                <div class="m-item-title">支出-预授权加油</div>
                <div class="m-item-time">2024-6-01 12:09:23</div>
            </div>
            <div class="m-amount m-expense">-200</div>
        </div>

        <div class="m-list-item">
            <div class="m-item-icon m-expense-icon">支</div>
            <div class="m-item-info">
                <div class="m-item-title">支出-室内支付</div>
                <div class="m-item-time">2024-6-01 12:09:23</div>
            </div>
            <div class="m-amount m-expense">-200</div>
        </div>

    </div>
</div>

</body>
</html>

说明：
- 页面头部包含返回按钮和标题。
- tabs栏定义了选中和未选中的状态，当前为“全部”状态显示选中。
- 收入和支出的图标使用了圆形加背景色区分，收入为橙色，支出为蓝色。
- 金额颜色也有所区别：收入金额为橙色，支出金额为灰色。

文心一言4.5

<!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 {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .m-header {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
        }
        .m-back-btn {
            font-size: 24px;
            color: #333;
            text-decoration: none;
        }
        .m-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            color: #333;
        }
        .m-tab-container {
            display: flex;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
        }
        .m-tab {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 16px;
            color: #666;
            text-decoration: none;
        }
        .m-tab.active {
            color: #333;
            border-bottom: 2px solid #ff6600;
        }
        .m-list-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
        }
        .m-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            margin-right: 15px;
        }
        .m-icon.income {
            background-color: #ff6600;
        }
        .m-icon.expense {
            background-color: #999;
        }
        .m-item-content {
            flex: 1;
        }
        .m-item-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }
        .m-item-date {
            font-size: 14px;
            color: #999;
        }
        .m-item-amount {
            font-size: 16px;
            color: #ff6600;
        }
        .m-item-amount.expense {
            color: #999;
        }
    </style>
</head>
<body>
    <header class="m-header">
        <a href="#" class="m-back-btn">&lt;</a>
        <div class="m-title">账单明细</div>
    </header>
    <div class="m-tab-container">
        <a href="#" class="m-tab active">全部</a>
        <a href="#" class="m-tab">收入</a>
        <a href="#" class="m-tab">支出</a>
    </div>
    <div class="m-list">
        <div class="m-list-item">
            <div class="m-icon income">收</div>
            <div class="m-item-content">
                <div class="m-item-title">收入-资金分配</div>
                <div class="m-item-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-item-amount">+ 200</div>
        </div>
        <div class="m-list-item">
            <div class="m-icon income">收</div>
            <div class="m-item-content">
                <div class="m-item-title">收入-资金分配</div>
                <div class="m-item-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-item-amount">+ 200</div>
        </div>
        <div class="m-list-item">
            <div class="m-icon income">收</div>
            <div class="m-item-content">
                <div class="m-item-title">收入-资金归集</div>
                <div class="m-item-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-item-amount">+ 200</div>
        </div>
        <div class="m-list-item">
            <div class="m-icon expense">支</div>
            <div class="m-item-content">
                <div class="m-item-title">支出-预授权加油</div>
                <div class="m-item-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-item-amount expense">- 200</div>
        </div>
        <div class="m-list-item">
            <div class="m-icon expense">支</div>
            <div class="m-item-content">
                <div class="m-item-title">支出-室内支付</div>
                <div class="m-item-date">2024-6-01 12:09:23</div>
            </div>
            <div class="m-item-amount expense">- 200</div>
        </div>
    </div>
</body>
</html>

这是Gemini 2.0 Flash做的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>账单明细</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }

    .m-container {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
    }

    .m-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      font-size: 18px;
    }

    .m-header-title {
      text-align: center;
      flex-grow: 1;
    }

    .m-tabs {
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      border-bottom: 1px solid #ddd;
    }

    .m-tab {
      padding: 8px 16px;
      cursor: pointer;
      font-size: 16px;
      color: #333;
    }

    .m-tab-active {
      color: #ff4d4f;
      border-bottom: 2px solid #ff4d4f;
    }

    .m-list-item {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #eee;
    }

    .m-list-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #ff4d4f;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 16px;
      font-size: 14px;
    }
    .m-list-icon.m-blue {
      background-color: #1890ff;
    }

    .m-list-details {
      flex-grow: 1;
    }

    .m-list-title {
      font-size: 16px;
      margin-bottom: 4px;
    }

    .m-list-date {
      font-size: 12px;
      color: #999;
    }

    .m-list-amount {
      font-size: 16px;
      font-weight: bold;
    }
    .m-list-amount.m-income {
      color: #ff4d4f;
    }
    .m-list-amount.m-expense {
      color: #999;
    }
  </style>
</head>
<body>
  <div class="m-container">
    <div class="m-header">
      <span>&lt;</span>
      <h1 class="m-header-title">账单明细</h1>
      <span></span>
    </div>

    <div class="m-tabs">
      <div class="m-tab m-tab-active">全部</div>
      <div class="m-tab">收入</div>
      <div class="m-tab">支出</div>
    </div>

    <div class="m-list">
      <div class="m-list-item">
        <div class="m-list-icon">收</div>
        <div class="m-list-details">
          <div class="m-list-title">收入-资金分配</div>
          <div class="m-list-date">2024-6-01 12:09:23</div>
        </div>
        <div class="m-list-amount m-income">+200</div>
      </div>

      <div class="m-list-item">
        <div class="m-list-icon">收</div>
        <div class="m-list-details">
          <div class="m-list-title">收入-资金分配</div>
          <div class="m-list-date">2024-6-01 12:09:23</div>
        </div>
        <div class="m-list-amount m-income">+200</div>
      </div>

      <div class="m-list-item">
        <div class="m-list-icon">收</div>
        <div class="m-list-details">
          <div class="m-list-title">收入-资金归集</div>
          <div class="m-list-date">2024-6-01 12:09:23</div>
        </div>
        <div class="m-list-amount m-income">+200</div>
      </div>

      <div class="m-list-item">
        <div class="m-list-icon m-blue">支</div>
        <div class="m-list-details">
          <div class="m-list-title">支出-预授权加油</div>
          <div class="m-list-date">2024-6-01 12:09:23</div>
        </div>
        <div class="m-list-amount m-expense">-200</div>
      </div>

      <div class="m-list-item">
        <div class="m-list-icon m-blue">支</div>
        <div class="m-list-details">
          <div class="m-list-title">支出-室内支付</div>
          <div class="m-list-date">2024-6-01 12:09:23</div>
        </div>
        <div class="m-list-amount m-expense">-200</div>
      </div>
    </div>
  </div>
</body>
</html>

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

3分钟掌握Codex技能安装：一键部署你的AI助手工具库

想要为你的Codex AI助手安装新技能？不用再手动复制文件了！skill-installer为你提供了一套完整的解决方案，让你能够从GitHub仓库快速获取和安装各种实用的Codex技能。无论你是AI开发新手还是经验丰富的开发者，这个工具都能让你在几分钟内扩展Codex的功能边界。## 为什么选择skill-installer？ 🤔在AI辅助编程的时代，Codex技能已经成为提升开发效

AI编程社区

DB-GPT分布式AI数据引擎：企业级智能分析平台架构解析

DB-GPT作为新一代AI数据助手，通过分布式架构和智能代理引擎重构了传统数据分析范式。该平台将大型语言模型的自然语言理解能力与企业级数据处理需求深度融合，构建了面向生产环境的可扩展AI数据平台。其核心价值在于将复杂的SQL生成、数据分析和可视化任务转化为简单的自然语言交互，同时确保系统安全性、可追溯性和企业级可靠性。## 技术定位与生态分析在当前数据智能生态中，DB-GPT填补了传统BI

AI编程社区

如何用Awesome Claude Skills将AI助手打造成你的全能创作伙伴和职业顾问

你是否曾想过，如果有一个AI伙伴能帮你完成从专业文章撰写到完美简历定制的所有工作，工作效率会提升多少倍？Awesome Claude Skills正是这样一个神奇的AI技能宝库，它汇集了1000+个精心筛选的Claude技能，覆盖内容创作、职业发展、文档处理等各个方面，让你在AI的帮助下轻松应对各种工作挑战。## 痛点分析：传统工作流程的三大瓶颈在内容创作和职业发展中，我们常常面临这样的困