AI IDE(Copilot/Cursor/Trae)图生代码能力测评

小明爱吃瓜2025-06-14 10:49

题目

给每个AI发送一致的图片和提示词，对比每个AI的生成效果。

提示词

根据我给你的图片生成页面，代码放在ui.html中

图片

评测结果（仅供参考）

评测时间2025/6/13，相对于该日期软件都是最新版本

所有软件和模型均为免费版本

AI IDE 模型 UI完成度 UI效果 代码质量 评语
Copilot GPT-4.1 ★★★★☆ ★★★★☆ ★★★☆☆ 美观但维护性较差
Copilot Claude Sonnet 3.5 ★★★☆☆ ★★★★☆ ★★★★☆ 最佳实践应用良好
Copilot GPT-4o ★★☆☆☆ ★☆☆☆☆ ★☆☆☆☆ 适合原型但功能有限
Cursor Auto Model ★★★★☆ ★★★★★ ★★★★☆ 移动端优化最佳
Cursor Claude Sonnet 3.5 ★★★☆☆ ★★★★★ ★★★★☆ 视觉平衡但扩展性弱
Cursor Gemini 2.5 Pro ★★★★★ ★★★★★ ★★★★★ 前端工程化典范
Trae CN Doubao Seed 1.6 ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ 不支持图生代码
Trae CN Doubao 1.5 Pro ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ 不支持图生代码
Trae CN DeepSeek R1 ★☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ 不支持图生代码，但靠深度思考（瞎猜）自己创造了部分功能

Github Copilot

GPT-4.1

编辑器反馈

完成效果

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exam App UI</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      background: #f6fafd;
      font-family: 'Montserrat', Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
    }
    .container {
      display: flex;
      gap: 32px;
      margin-top: 32px;
    }
    .phone {
      background: #fff;
      border-radius: 32px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
      width: 340px;
      min-height: 720px;
      padding: 32px 24px 24px 24px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      float: right;
    }
    .greeting {
      font-size: 1.1rem;
      color: #7a7a7a;
      margin-bottom: 0.2em;
    }
    .username {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1.2em;
      color: #222;
    }
    .exam-card {
      background: #2566a6;
      color: #fff;
      border-radius: 16px;
      padding: 24px 16px;
      text-align: center;
      margin-bottom: 24px;
    }
    .exam-card-title {
      font-size: 1.1rem;
      margin-bottom: 12px;
    }
    .countdown {
      display: flex;
      justify-content: center;
      gap: 12px;
      font-size: 2rem;
      font-weight: 700;
    }
    .countdown-labels {
      display: flex;
      justify-content: center;
      gap: 32px;
      font-size: 0.9rem;
      margin-top: 4px;
      color: #b3d0ea;
    }
    .section-title {
      font-weight: 700;
      font-size: 1.1rem;
      margin: 24px 0 12px 0;
      color: #222;
    }
    .category-list {
      display: flex;
      gap: 12px;
      margin-bottom: 8px;
    }
    .category {
      background: #f6fafd;
      border-radius: 24px;
      padding: 8px 18px;
      font-size: 1rem;
      color: #2566a6;
      border: 1px solid #e0eafc;
      cursor: pointer;
      transition: background 0.2s;
    }
    .category.selected {
      background: #2566a6;
      color: #fff;
      border: none;
    }
    .see-more {
      color: #2566a6;
      font-size: 0.95rem;
      float: right;
      cursor: pointer;
      text-decoration: underline;
    }
    .course-card {
      display: flex;
      align-items: center;
      background: #f6fafd;
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 12px;
      gap: 12px;
    }
    .course-thumb {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      object-fit: cover;
      background: #e0eafc;
    }
    .course-info {
      flex: 1;
    }
    .course-title {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 2px;
      color: #222;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 160px;
    }
    .course-meta {
      font-size: 0.85rem;
      color: #7a7a7a;
      margin-bottom: 2px;
    }
    .course-price {
      font-weight: 700;
      color: #2566a6;
      font-size: 1.1rem;
    }
    .search-bar {
      display: flex;
      align-items: center;
      background: #f6fafd;
      border-radius: 16px;
      padding: 10px 16px;
      margin-bottom: 18px;
      gap: 8px;
    }
    .search-bar input {
      border: none;
      background: transparent;
      outline: none;
      font-size: 1rem;
      flex: 1;
    }
    .search-icon, .filter-icon {
      width: 20px;
      height: 20px;
      opacity: 0.6;
    }
    .horizontal-scroll {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      margin-bottom: 18px;
    }
    .horizontal-card {
      min-width: 200px;
      background: #2566a6;
      color: #fff;
      border-radius: 16px;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-sizing: border-box;
    }
    .horizontal-card .course-title {
      color: #fff;
      font-size: 1.1rem;
      margin-bottom: 6px;
    }
    .horizontal-card .course-meta {
      color: #b3d0ea;
    }
    .horizontal-card .course-price {
      color: #fff;
      font-size: 1.2rem;
    }
    .participants {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 8px;
    }
    .participant-img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
      margin-left: -10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .participant-count {
      color: #2566a6;
      font-size: 0.95rem;
      margin-left: 8px;
      cursor: pointer;
    }
    .desc-title {
      font-weight: 700;
      margin-bottom: 6px;
      color: #222;
    }
    .desc-text {
      color: #7a7a7a;
      font-size: 0.98rem;
      margin-bottom: 18px;
    }
    .buy-btn {
      background: #2566a6;
      color: #fff;
      border: none;
      border-radius: 16px;
      padding: 16px 0;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      margin-top: 12px;
      transition: background 0.2s;
    }
    .buy-btn:hover {
      background: #17416b;
    }
    .nav-bar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: auto;
      padding-top: 18px;
      border-top: 1px solid #e0eafc;
      gap: 8px;
    }
    .nav-icon {
      width: 28px;
      height: 28px;
      opacity: 0.5;
    }
    @media (max-width: 1100px) {
      .container { flex-direction: column; align-items: center; }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 首页 -->
    <div class="phone">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" class="avatar" alt="avatar">
      <div class="greeting">Hello</div>
      <div class="username">grahacaesara</div>
      <div class="exam-card">
        <div class="exam-card-title">Are you ready for exam ?</div>
        <div class="countdown">
          <span>08</span><span>26</span><span>08</span>
        </div>
        <div class="countdown-labels">
          <span>Days</span><span>Hours</span><span>Minutes</span>
        </div>
      </div>
      <div class="section-title">Category <span class="see-more">See more</span></div>
      <div class="category-list">
        <div class="category">Biology</div>
        <div class="category selected">UIUX Design</div>
      </div>
      <div class="section-title">Other Course <span class="see-more">See more</span></div>
      <div class="course-card">
        <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=56&h=56" class="course-thumb" alt="course">
        <div class="course-info">
          <div class="course-title">UIUX Design - Introducing..</div>
          <div class="course-meta">By Caleb Kingston · 1h45min · 4.5(173 review)</div>
          <div class="course-price">$150.00</div>
        </div>
      </div>
      <div class="nav-bar">
        <img src="https://img.icons8.com/ios-filled/50/000000/home.png" class="nav-icon" alt="home">
        <img src="https://img.icons8.com/ios-filled/50/000000/calendar.png" class="nav-icon" alt="calendar">
        <img src="https://img.icons8.com/ios-filled/50/000000/chat.png" class="nav-icon" alt="chat">
        <img src="https://img.icons8.com/ios-filled/50/000000/user.png" class="nav-icon" alt="user">
      </div>
    </div>
    <!-- 课程列表页 -->
    <div class="phone">
      <div class="search-bar">
        <img src="https://img.icons8.com/ios-filled/50/000000/search--v1.png" class="search-icon" alt="search">
        <input type="text" placeholder="Search">
        <img src="https://img.icons8.com/ios-filled/50/000000/filter.png" class="filter-icon" alt="filter">
      </div>
      <div class="section-title">Popular Design Course</div>
      <div class="horizontal-scroll">
        <div class="horizontal-card">
          <div class="course-title">UIUX Design - Introducing...</div>
          <div class="course-meta">By Caleb Kingston · 1h45min · 4.5(173 review)</div>
          <div class="course-price">$150.00</div>
        </div>
        <div class="horizontal-card" style="background:#a14eea;">
          <div class="course-title">Illustration</div>
          <div class="course-meta">By Caleb Kingston · 1h45min</div>
          <div class="course-price">$150.00</div>
        </div>
      </div>
      <div class="section-title">Other Course</div>
      <div class="course-card">
        <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=56&h=56" class="course-thumb" alt="course">
        <div class="course-info">
          <div class="course-title">Foundation of mastering...</div>
          <div class="course-meta">By Caleb Kingston · 1h45min · 4.5(173 review)</div>
          <div class="course-price">$150.00</div>
        </div>
      </div>
      <div class="course-card">
        <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=56&h=56" class="course-thumb" alt="course">
        <div class="course-info">
          <div class="course-title">How to be Illustrator</div>
          <div class="course-meta">By Eleanor Pena · 1h45min</div>
          <div class="course-price">$150.00</div>
        </div>
      </div>
    </div>
    <!-- 课程详情页 -->
    <div class="phone">
      <div class="horizontal-card" style="margin-bottom:24px;">
        <div style="font-size:1.1rem;font-weight:700;">Design</div>
        <div class="course-title">Introducing user interface</div>
      </div>
      <div class="desc-title">Participant</div>
      <div class="participants">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="participant-img" alt="p1">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" class="participant-img" alt="p2">
        <img src="https://randomuser.me/api/portraits/women/46.jpg" class="participant-img" alt="p3">
        <span class="participant-count">+283 participant <span style="color:#2566a6;text-decoration:underline;cursor:pointer;">See more</span></span>
      </div>
      <div class="desc-title">Description</div>
      <div class="desc-text">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
      <div style="color:#2566a6;font-size:1rem;margin-bottom:8px;">Introducing uiux class</div>
      <div class="course-price" style="font-size:1.3rem;margin-bottom:12px;">$73.00</div>
      <button class="buy-btn">Buy this Class</button>
    </div>
  </div>
</body>
</html>

Claude Sonnet-3.5

编辑器反馈

完成效果

代码

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;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: #f5f7fb;
        }

        .container {
            max-width: 390px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }

        .page {
            padding: 20px;
            display: none;
        }

        .page.active {
            display: block;
        }

        /* 首页样式 */
        .header {
            padding: 20px 0;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ff4757;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

        .greeting {
            margin-top: 20px;
        }

        .username {
            font-size: 24px;
            font-weight: bold;
            color: #2f3542;
        }

        .exam-countdown {
            background: #2980b9;
            color: white;
            padding: 20px;
            border-radius: 15px;
            margin-top: 20px;
        }

        .countdown-title {
            margin-bottom: 15px;
        }

        .countdown-numbers {
            display: flex;
            justify-content: space-between;
            max-width: 300px;
        }

        .countdown-item {
            text-align: center;
        }

        .countdown-value {
            font-size: 24px;
            font-weight: bold;
        }

        .countdown-label {
            font-size: 12px;
            opacity: 0.8;
        }

        .categories {
            margin-top: 30px;
        }

        .category-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .see-more {
            color: #2980b9;
            text-decoration: none;
            font-size: 14px;
        }

        .category-list {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding: 5px 0;
        }

        .category-item {
            background: #f1f2f6;
            padding: 10px 20px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .category-icon {
            width: 20px;
            height: 20px;
        }

        /* 课程列表页样式 */
        .search-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f1f2f6;
            padding: 10px 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .search-input {
            border: none;
            background: transparent;
            flex: 1;
            outline: none;
            font-size: 16px;
        }

        .course-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .course-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .course-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
            background: #2980b9;
        }

        .course-info {
            padding: 15px;
        }

        .course-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #2f3542;
        }

        .course-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            color: #747d8c;
            margin-bottom: 10px;
        }

        .course-price {
            color: #2980b9;
            font-weight: 600;
        }

        /* 课程详情页样式 */
        .course-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .back-button {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f1f2f6;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

        .course-banner {
            width: 100%;
            height: 200px;
            background: #2980b9;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .course-banner-pattern {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 24px;
            opacity: 0.2;
        }

        .participants {
            margin-top: 20px;
        }

        .participants-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .participant-avatars {
            display: flex;
            margin-right: 10px;
        }

        .participant-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid white;
            margin-right: -10px;
            background: #dfe4ea;
        }

        .buy-button {
            background: #2980b9;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
        }

        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 15px;
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #f1f2f6;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            color: #747d8c;
            text-decoration: none;
            font-size: 12px;
        }

        .nav-item.active {
            color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 首页 -->
        <div class="page active" id="home">
            <div class="header">
                <div class="avatar">G</div>
            </div>
            <div class="greeting">
                <div>Hello</div>
                <div class="username">grahacaesara</div>
            </div>
            <div class="exam-countdown">
                <div class="countdown-title">Are you ready for exam ?</div>
                <div class="countdown-numbers">
                    <div class="countdown-item">
                        <div class="countdown-value">08</div>
                        <div class="countdown-label">Days</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-value">02</div>
                        <div class="countdown-label">Hours</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-value">60</div>
                        <div class="countdown-label">Minutes</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-value">08</div>
                        <div class="countdown-label">Seconds</div>
                    </div>
                </div>
            </div>
            <div class="categories">
                <div class="category-title">
                    <h2>Category</h2>
                    <a href="#" class="see-more">See more</a>
                </div>
                <div class="category-list">
                    <div class="category-item">
                        <span class="category-icon">🧬</span>
                        Biology
                    </div>
                    <div class="category-item">
                        <span class="category-icon">🎨</span>
                        UI/UX Design
                    </div>
                    <div class="category-item">
                        <span class="category-icon">💻</span>
                        Programming
                    </div>
                </div>
            </div>
            <div class="courses">
                <div class="category-title">
                    <h2>Other Course</h2>
                    <a href="#" class="see-more">See more</a>
                </div>
                <div class="course-card">
                    <div class="course-info">
                        <div class="course-title">UI/UX Design - Introducing...</div>
                        <div class="course-meta">
                            <span>By Caleb Kingston</span>
                            <span>⭐ 4.5 (173 review)</span>
                        </div>
                        <div class="course-price">$150.00</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程列表页 -->
        <div class="page" id="courses">
            <div class="search-bar">
                <input type="text" placeholder="Search" class="search-input">
                <button class="filter-button">🔍</button>
            </div>
            <h2>Popular Design Course</h2>
            <div class="course-grid">
                <div class="course-card">
                    <div class="course-image"></div>
                    <div class="course-info">
                        <div class="course-title">UI/UX Design - Introducing...</div>
                        <div class="course-meta">
                            <span>By Caleb Kingston</span>
                            <span>⭐ 4.5</span>
                        </div>
                        <div class="course-price">$150.00</div>
                    </div>
                </div>
                <!-- 更多课程卡片 -->
            </div>
        </div>

        <!-- 课程详情页 -->
        <div class="page" id="course-detail">
            <div class="course-header">
                <button class="back-button">←</button>
                <h2>Course</h2>
                <button class="back-button">⋮</button>
            </div>
            <div class="course-banner">
                <div>
                    <h3>Design</h3>
                    <h2>Introducing user interface</h2>
                </div>
                <div class="course-banner-pattern">+ + + + +</div>
            </div>
            <div class="participants">
                <div class="participants-header">
                    <h3>Participant</h3>
                    <a href="#" class="see-more">See more</a>
                </div>
                <div style="display: flex; align-items: center;">
                    <div class="participant-avatars">
                        <div class="participant-avatar"></div>
                        <div class="participant-avatar"></div>
                        <div class="participant-avatar"></div>
                    </div>
                    <span>+283 participant</span>
                </div>
            </div>
            <div class="description">
                <h3>Description</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
            <button class="buy-button">Buy this Class</button>
        </div>

        <!-- 底部导航栏 -->
        <nav class="nav-bar">
            <a href="#home" class="nav-item active">🏠<span>Home</span></a>
            <a href="#courses" class="nav-item">📚<span>Course</span></a>
            <a href="#messages" class="nav-item">✉️<span>Message</span></a>
            <a href="#profile" class="nav-item">👤<span>Profile</span></a>
        </nav>
    </div>

    <script>
        // 简单的页面切换逻辑
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const targetId = item.getAttribute('href').substring(1);
                
                // 切换页面显示
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(targetId)?.classList.add('active');

                // 切换导航项激活状态
                document.querySelectorAll('.nav-item').forEach(navItem => {
                    navItem.classList.remove('active');
                });
                item.classList.add('active');
            });
        });
    </script>
</body>
</html>

GPT-4o

编辑器反馈

完成效果

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam UI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 24px;
            margin: 0;
        }

        .countdown {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
        }

        .countdown div {
            text-align: center;
            padding: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
        }

        .category {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }

        .category div {
            padding: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            text-align: center;
            flex: 1;
            margin: 0 5px;
        }

        .course-list {
            margin: 20px 0;
        }

        .course-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .course-item img {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }

        .course-item .details {
            flex: 1;
            margin-left: 10px;
        }

        .course-item .details h3 {
            margin: 0;
            font-size: 16px;
        }

        .course-item .details p {
            margin: 5px 0 0;
            font-size: 14px;
            color: #666;
        }

        .course-item .price {
            font-size: 16px;
            font-weight: bold;
        }

        .button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #ffffff;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 20px;
        }

        .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Hello, grahacaesara</h1>
            <p>Are you ready for exam?</p>
        </div>

        <div class="countdown">
            <div>
                <p>Days</p>
                <p>08</p>
            </div>
            <div>
                <p>Hours</p>
                <p>26</p>
            </div>
            <div>
                <p>Minutes</p>
                <p>08</p>
            </div>
        </div>

        <div class="category">
            <div>Biology</div>
            <div>UIUX Design</div>
        </div>

        <div class="course-list">
            <div class="course-item">
                <img src="design/08d3520ac7e380062ce3bf2af99bb5bb.webp" alt="Course Image">
                <div class="details">
                    <h3>UIUX Design - Introducing...</h3>
                    <p>By Caleb Kingston</p>
                </div>
                <div class="price">$150.00</div>
            </div>

            <div class="course-item">
                <img src="design/27d7b122b254f7eac3fb0c69c7ef380b.webp" alt="Course Image">
                <div class="details">
                    <h3>Illustration</h3>
                    <p>By Caleb Kingston</p>
                </div>
                <div class="price">$150.00</div>
            </div>
        </div>

        <a href="#" class="button">Buy This Class</a>
    </div>
</body>
</html>

Cursor

Auto Model

编辑器反馈

完成效果

代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程APP界面</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', 'PingFang SC', Arial, sans-serif;
      background: #f6fafd;
      color: #222;
    }
    .container {
      max-width: 400px;
      margin: 30px auto;
      background: #fff;
      border-radius: 32px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      padding: 24px 20px 16px 20px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .welcome {
      font-size: 18px;
      color: #6b7a8f;
    }
    .username {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .countdown {
      background: #2563eb;
      color: #fff;
      border-radius: 18px;
      padding: 18px 0;
      text-align: center;
      margin-bottom: 20px;
    }
    .countdown-title {
      font-size: 16px;
      margin-bottom: 8px;
    }
    .countdown-timer {
      font-size: 28px;
      letter-spacing: 6px;
      font-weight: bold;
    }
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin: 18px 0 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .see-more {
      font-size: 13px;
      color: #2563eb;
      cursor: pointer;
    }
    .categories {
      display: flex;
      gap: 12px;
      margin-bottom: 10px;
    }
    .category {
      background: #f1f5fa;
      border-radius: 16px;
      padding: 7px 18px;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 6px;
      border: none;
      cursor: pointer;
    }
    .course-card, .other-course-card {
      background: #f8fafc;
      border-radius: 18px;
      padding: 16px;
      margin-bottom: 14px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }
    .course-img {
      width: 70px;
      height: 70px;
      border-radius: 14px;
      background: #2563eb;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 22px;
      flex-shrink: 0;
    }
    .course-info {
      flex: 1;
    }
    .course-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .course-author {
      font-size: 13px;
      color: #6b7a8f;
      margin-bottom: 2px;
    }
    .course-meta {
      font-size: 12px;
      color: #a0aec0;
      margin-bottom: 2px;
    }
    .course-price {
      font-size: 16px;
      color: #2563eb;
      font-weight: bold;
    }
    .bottom-nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 24px;
      padding-top: 10px;
      border-top: 1px solid #e5eaf1;
    }
    .nav-icon {
      font-size: 22px;
      color: #b0b8c1;
      cursor: pointer;
    }
    /* 课程详情页样式 */
    .detail-container {
      max-width: 400px;
      margin: 30px auto;
      background: #fff;
      border-radius: 32px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      padding: 24px 20px 16px 20px;
    }
    .detail-img {
      width: 100%;
      height: 140px;
      border-radius: 18px;
      background: #2563eb;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 28px;
      margin-bottom: 18px;
    }
    .detail-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .participants {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .participant-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #eee;
      border: 2px solid #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }
    .more-participants {
      font-size: 13px;
      color: #2563eb;
      margin-left: 4px;
      cursor: pointer;
    }
    .detail-desc {
      font-size: 14px;
      color: #6b7a8f;
      margin-bottom: 18px;
    }
    .detail-price {
      font-size: 18px;
      color: #2563eb;
      font-weight: bold;
      margin-bottom: 18px;
    }
    .buy-btn {
      width: 100%;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 16px;
      padding: 14px 0;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      margin-bottom: 10px;
    }
    @media (max-width: 500px) {
      .container, .detail-container {
        max-width: 100vw;
        border-radius: 0;
        margin: 0;
        padding: 18px 4vw 10px 4vw;
      }
    }
  </style>
</head>
<body>
  <!-- 首页 -->
  <div class="container">
    <div class="header">
      <div>
        <div class="welcome">Hello</div>
        <div class="username">grahacaesara</div>
      </div>
      <div class="avatar">G</div>
    </div>
    <div class="countdown">
      <div class="countdown-title">Are you ready for exam ?</div>
      <div class="countdown-timer">08 26 08</div>
      <div style="font-size:12px;opacity:.8;">Days Hours Minutes</div>
    </div>
    <div class="section-title">
      <span>Category</span>
      <span class="see-more">See more</span>
    </div>
    <div class="categories">
      <button class="category">🧬 Biology</button>
      <button class="category">🎨 UIUX Design</button>
    </div>
    <div class="section-title">
      <span>Other Course</span>
      <span class="see-more">See more</span>
    </div>
    <div class="other-course-card">
      <div class="course-img">🎨</div>
      <div class="course-info">
        <div class="course-title">UIUX Design - Introducing...</div>
        <div class="course-author">By Caleb Kingston</div>
        <div class="course-meta">⏱ 1h45min · ★4.5(173 review)</div>
        <div class="course-price">$150.00</div>
      </div>
    </div>
    <div class="bottom-nav">
      <span class="nav-icon">🏠</span>
      <span class="nav-icon">💬</span>
      <span class="nav-icon">📧</span>
      <span class="nav-icon">👤</span>
    </div>
  </div>

  <!-- 课程列表页 -->
  <div class="container" style="margin-top:40px;">
    <div class="section-title">
      <span>Popular Design Course</span>
    </div>
    <div class="course-card">
      <div class="course-img">🎨</div>
      <div class="course-info">
        <div class="course-title">UIUX Design - Introducing...</div>
        <div class="course-author">By Caleb Kingston</div>
        <div class="course-meta">⏱ 1h45min · ★4.5(173 review)</div>
        <div class="course-price">$150.00</div>
      </div>
    </div>
    <div class="course-card">
      <div class="course-img" style="background:#a21caf;">🖌️</div>
      <div class="course-info">
        <div class="course-title">Illustration</div>
        <div class="course-author">By Caleb Kingston</div>
        <div class="course-meta">⏱ 1h45min · ★4.5(172 review)</div>
        <div class="course-price">$150.00</div>
      </div>
    </div>
    <div class="section-title">
      <span>Other Course</span>
    </div>
    <div class="other-course-card">
      <div class="course-img">📚</div>
      <div class="course-info">
        <div class="course-title">Foundation of mastering...</div>
        <div class="course-author">By Caleb Kingston</div>
        <div class="course-meta">⏱ 1h45min · ★4.5(170 review)</div>
        <div class="course-price">$150.00</div>
      </div>
    </div>
    <div class="other-course-card">
      <div class="course-img">✏️</div>
      <div class="course-info">
        <div class="course-title">How to be Illustrator</div>
        <div class="course-author">By Eleanor Pena</div>
        <div class="course-meta">⏱ 1h45min · ★4.5(168 review)</div>
        <div class="course-price">$150.00</div>
      </div>
    </div>
  </div>

  <!-- 课程详情页 -->
  <div class="detail-container" style="margin-top:40px;">
    <div class="detail-img">Design<br>Introducing user interface</div>
    <div class="detail-title">UIUX Design - Introducing user interface</div>
    <div class="participants">
      <img class="participant-avatar" src="https://randomuser.me/api/portraits/women/1.jpg" alt="" />
      <img class="participant-avatar" src="https://randomuser.me/api/portraits/men/2.jpg" alt="" />
      <img class="participant-avatar" src="https://randomuser.me/api/portraits/women/3.jpg" alt="" />
      <span class="more-participants">+283 participant</span>
      <span class="see-more">See more</span>
    </div>
    <div class="detail-desc">
      这是一门关于UIUX设计基础的课程，帮助你了解用户界面设计的核心理念和实用技巧。
    </div>
    <div class="detail-price">$73.00</div>
    <button class="buy-btn">Buy this Class</button>
  </div>
</body>
</html>

Claude Sonnet 3.5

编辑器反馈

完成效果

代码

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;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
        }

        .container {
            max-width: 390px;
            margin: 20px auto;
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #ff4757;
            margin-right: 15px;
        }

        .greeting {
            font-size: 24px;
            color: #2d3436;
        }

        .username {
            font-size: 28px;
            font-weight: bold;
            color: #2d3436;
            margin-top: 5px;
        }

        .exam-countdown {
            background: #2980b9;
            color: white;
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
        }

        .countdown-title {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .countdown-timer {
            display: flex;
            justify-content: space-between;
            max-width: 300px;
        }

        .timer-section {
            text-align: center;
        }

        .timer-number {
            font-size: 24px;
            font-weight: bold;
        }

        .timer-label {
            font-size: 14px;
            opacity: 0.9;
        }

        .category-section {
            margin: 20px 0;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
        }

        .see-more {
            color: #2980b9;
            text-decoration: none;
        }

        .category-list {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 5px 0;
        }

        .category-item {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            background: #f8f9fa;
            border-radius: 20px;
            white-space: nowrap;
        }

        .category-icon {
            margin-right: 8px;
        }

        .course-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .course-image {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            margin-right: 15px;
            object-fit: cover;
        }

        .course-info {
            flex: 1;
        }

        .course-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .course-author {
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .course-meta {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #666;
        }

        .course-price {
            color: #2980b9;
            font-weight: bold;
            font-size: 18px;
            margin-top: 5px;
        }

        .bottom-nav {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            border-top: 1px solid #eee;
            margin-top: 20px;
        }

        .nav-item {
            color: #666;
            text-decoration: none;
            text-align: center;
        }

        .nav-icon {
            font-size: 20px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="avatar"></div>
            <div>
                <div class="greeting">Hello</div>
                <div class="username">grahacaesara</div>
            </div>
        </div>

        <div class="exam-countdown">
            <div class="countdown-title">Are you ready for exam ?</div>
            <div class="countdown-timer">
                <div class="timer-section">
                    <div class="timer-number">08</div>
                    <div class="timer-label">Days</div>
                </div>
                <div class="timer-section">
                    <div class="timer-number">26</div>
                    <div class="timer-label">Hours</div>
                </div>
                <div class="timer-section">
                    <div class="timer-number">08</div>
                    <div class="timer-label">Minutes</div>
                </div>
            </div>
        </div>

        <div class="category-section">
            <div class="section-header">
                <div class="section-title">Category</div>
                <a href="#" class="see-more">See more</a>
            </div>
            <div class="category-list">
                <div class="category-item">
                    <span class="category-icon">🔬</span>
                    Biology
                </div>
                <div class="category-item">
                    <span class="category-icon">💻</span>
                    UI/UX Design
                </div>
                <div class="category-item">
                    <span class="category-icon">📊</span>
                    Statistics
                </div>
            </div>
        </div>

        <div class="category-section">
            <div class="section-header">
                <div class="section-title">Other Course</div>
                <a href="#" class="see-more">See more</a>
            </div>
            <div class="course-card">
                <img src="https://via.placeholder.com/80" class="course-image" alt="UI/UX Design">
                <div class="course-info">
                    <div class="course-title">UI/UX Design - Introducing..</div>
                    <div class="course-author">By Caleb Kingston</div>
                    <div class="course-meta">
                        <span>1h 45 minute</span>
                        <span style="margin: 0 8px">•</span>
                        <span>4.5 (173 review)</span>
                    </div>
                    <div class="course-price">$150.00</div>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <a href="#" class="nav-item">
                <div class="nav-icon">🏠</div>
                <div>Home</div>
            </a>
            <a href="#" class="nav-item">
                <div class="nav-icon">📚</div>
                <div>Courses</div>
            </a>
            <a href="#" class="nav-item">
                <div class="nav-icon">📧</div>
                <div>Messages</div>
            </a>
            <a href="#" class="nav-item">
                <div class="nav-icon">👤</div>
                <div>Profile</div>
            </a>
        </div>
    </div>
</body>
</html>

Gemini 2.5 Pro

编辑器反馈

完成效果

代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程 App UI</title>
    <script src="https://unpkg.com/phosphor-icons"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-dark-teal: #2A6F78;
            --primary-light-blue: #4AC0E0;
            --primary-yellow: #FBCB4C;
            --primary-red: #E85E5E;
            --text-dark: #333;
            --text-light: #888;
            --bg-color: #f0f4f8;
            --card-bg: #ffffff;
            --border-radius-md: 16px;
            --border-radius-lg: 24px;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 2rem;
            gap: 2rem;
            color: var(--text-dark);
            overflow-x: auto;
        }

        .mobile-screen {
            background-color: var(--card-bg);
            border-radius: 40px;
            width: 375px;
            min-height: 812px;
            padding: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            position: relative;
        }

        .screen-content {
            flex-grow: 1;
            overflow-y: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .screen-content::-webkit-scrollbar {
            display: none;
        }
        
        h1, h2, h3, h4, p {
            margin: 0;
        }
        
        /* --- Screen 1: Home --- */
        .home-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .home-header .user-info p {
            font-size: 14px;
            color: var(--text-light);
        }
        .home-header .user-info h1 {
            font-size: 24px;
            font-weight: 600;
        }
        .home-header .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-image: url('https://img.cached.io/https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80');
            background-size: cover;
        }

        .exam-timer {
            background-color: var(--primary-dark-teal);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            color: white;
            text-align: center;
            margin-bottom: 24px;
        }
        .exam-timer p {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 16px;
        }
        .exam-timer .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .exam-timer .time-unit {
            font-size: 36px;
            font-weight: 600;
            line-height: 1;
        }
        .exam-timer .time-label {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 4px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .section-header h2 {
            font-size: 18px;
            font-weight: 600;
        }
        .section-header .see-more {
            font-size: 14px;
            color: var(--primary-dark-teal);
            font-weight: 500;
            text-decoration: none;
        }

        .category-list {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
        }
        .category-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: 1px solid #eee;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .category-chip i {
            font-size: 20px;
        }
        .category-chip.active {
            background-color: var(--primary-dark-teal);
            color: white;
            border-color: var(--primary-dark-teal);
        }

        .course-list .course-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px;
            background: var(--card-bg);
            border-radius: var(--border-radius-md);
            border: 1px solid #f0f0f0;
            margin-bottom: 12px;
        }
        .course-card .course-image {
            width: 80px;
            height: 80px;
            border-radius: var(--border-radius-md);
            object-fit: cover;
            flex-shrink: 0;
        }
        .course-card .course-info {
            flex-grow: 1;
        }
        .course-card .course-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 4px;
        }
        .course-card .course-author {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        .course-card .course-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: var(--text-light);
        }
        .course-card .course-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .course-card .course-price {
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-dark-teal);
            margin-left: auto;
        }
        
        .bottom-nav {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            margin-top: auto;
            border-top: 1px solid #f0f0f0;
        }
        .bottom-nav i {
            font-size: 28px;
            color: var(--text-light);
        }
        .bottom-nav i.active {
            color: var(--primary-dark-teal);
        }


        /* --- Screen 2: Search --- */
        .search-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        .search-bar {
            flex-grow: 1;
            position: relative;
        }
        .search-bar input {
            width: 100%;
            padding: 12px 16px 12px 40px;
            border-radius: 12px;
            border: 1px solid #eee;
            background-color: #f8f8f8;
            font-size: 14px;
        }
        .search-bar i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            font-size: 20px;
        }
        .filter-btn {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background-color: var(--primary-dark-teal);
            color: white;
            display: grid;
            place-items: center;
            font-size: 24px;
        }

        .popular-courses .course-scroll {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 16px;
            margin-left: -20px;
            padding-left: 20px;
            margin-right: -20px;
            padding-right: 20px;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .popular-courses .course-scroll::-webkit-scrollbar {
            display: none;
        }

        .popular-courses .course-card-lg {
            flex-shrink: 0;
            width: 220px;
            border-radius: var(--border-radius-lg);
            background: var(--card-bg);
            border: 1px solid #f0f0f0;
            overflow: hidden;
        }
        .popular-courses .course-card-lg .course-image-lg {
            height: 120px;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .popular-courses .course-image-lg.uiux {
            background-color: var(--primary-dark-teal);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .popular-courses .course-image-lg.illustration {
            background-image: url('https://img.cached.io/https://images.unsplash.com/photo-1547891654-e66ed7ebb968?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
        }

        .deco-plus {
            position: absolute;
            top: 16px;
            left: 16px;
            color: rgba(255,255,255,0.3);
            font-size: 10px;
            line-height: 0.8;
            letter-spacing: 2px;
        }
        .deco-rect {
            position: absolute;
            top: 20px;
            right: 50px;
            width: 20px;
            height: 20px;
            background-color: var(--primary-red);
            border-radius: 4px;
        }
        .deco-circle-yellow {
            position: absolute;
            bottom: 20px;
            right: 70px;
            width: 48px;
            height: 48px;
            background-color: var(--primary-yellow);
            border-radius: 50%;
        }
        .deco-circle-blue {
            position: absolute;
            top: 30px;
            right: 15px;
            width: 60px;
            height: 60px;
            background-color: var(--primary-light-blue);
            border-radius: 50%;
        }
        .deco-semicircle {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
        }


        .popular-courses .course-info-lg {
            padding: 16px;
        }
        .popular-courses .course-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .popular-courses .course-author {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 12px;
        }
        .popular-courses .course-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .popular-courses .course-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--text-light);
        }
        .popular-courses .course-meta .rating i { color: var(--primary-yellow); }

        .popular-courses .course-price {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-dark-teal);
        }

        .other-courses-grid .course-card {
            margin-bottom: 16px;
        }
        .other-courses-grid .course-card:last-child {
            margin-bottom: 0;
        }


        /* --- Screen 3: Details --- */
        .details-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .details-header .icon-btn {
            font-size: 24px;
            color: var(--text-dark);
        }
        .details-header h2 {
            font-size: 18px;
            font-weight: 600;
        }

        .details-hero {
            border-radius: var(--border-radius-lg);
            background-color: var(--primary-dark-teal);
            height: 200px;
            position: relative;
            overflow: hidden;
            padding: 24px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin-bottom: 24px;
        }
        .details-hero .deco-plus { left: 24px; top: 24px; }
        .details-hero .deco-rect { top: 24px; right: 80px; }
        .details-hero .deco-circle-yellow { bottom: 60px; right: 100px; }
        .details-hero .deco-circle-blue { top: 40px; right: 40px; }
        .details-hero .deco-semicircle { top: -40px; right: -40px; }

        .details-hero .category-label {
            font-size: 14px;
            font-weight: 500;
            opacity: 0.8;
            margin-bottom: 8px;
        }
        .details-hero .course-title-main {
            font-size: 28px;
            font-weight: 600;
            line-height: 1.2;
        }
        
        .participants {
            margin-bottom: 24px;
        }
        .participants .section-header { margin-bottom: 12px; }
        .participant-list {
            display: flex;
            align-items: center;
        }
        .participant-avatars {
            display: flex;
        }
        .participant-avatars .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid white;
            background-size: cover;
            margin-left: -12px;
        }
        .participant-avatars .avatar:first-child {
            margin-left: 0;
        }
        .participant-info {
            margin-left: 16px;
        }
        .participant-info p {
            font-weight: 600;
            font-size: 14px;
        }
        .participant-info .see-more {
            font-size: 12px;
            font-weight: 500;
            color: var(--primary-dark-teal);
        }

        .description {
            margin-bottom: 24px;
        }
        .description p {
            color: var(--text-light);
            line-height: 1.6;
            font-size: 14px;
        }

        .details-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f0f0f0;
            padding-top: 20px;
        }
        .details-footer .price-info .label {
            font-size: 12px;
            color: var(--text-light);
        }
        .details-footer .price-info .price {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-dark-teal);
        }
        .details-footer .buy-btn {
            background-color: var(--primary-dark-teal);
            color: white;
            padding: 16px 32px;
            border-radius: var(--border-radius-md);
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <!-- Screen 1: Home -->
    <div class="mobile-screen">
        <div class="screen-content">
            <header class="home-header">
                <div class="user-info">
                    <p>Hello</p>
                    <h1>grahacaesara</h1>
                </div>
                <div class="avatar"></div>
            </header>

            <section class="exam-timer">
                <p>Are you ready for exam ?</p>
                <div class="countdown">
                    <div>
                        <div class="time-unit">08</div>
                        <div class="time-label">Days</div>
                    </div>
                    <div>
                        <div class="time-unit">26</div>
                        <div class="time-label">Hours</div>
                    </div>
                    <div>
                        <div class="time-unit">08</div>
                        <div class="time-label">Minutes</div>
                    </div>
                </div>
            </section>

            <section class="categories">
                <div class="section-header">
                    <h2>Category</h2>
                    <a href="#" class="see-more">See more</a>
                </div>
                <div class="category-list">
                    <div class="category-chip">
                        <i class="ph-atom"></i>
                        <span>Biology</span>
                    </div>
                    <div class="category-chip active">
                        <i class="ph-desktop-tower"></i>
                        <span>UIUX Design</span>
                    </div>
                    <div class="category-chip">
                        <i class="ph-clock"></i>
                    </div>
                </div>
            </section>

            <section class="other-courses">
                <div class="section-header">
                    <h2>Other Course</h2>
                    <a href="#" class="see-more">See more</a>
                </div>
                <div class="course-list">
                    <div class="course-card">
                        <img src="https://img.cached.io/https://images.unsplash.com/photo-1588702547919-26089e690ecc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80" alt="UIUX Design Course" class="course-image">
                        <div class="course-info">
                            <h3 class="course-title">UIUX Design - Introducing..</h3>
                            <p class="course-author">By Caleb Kingston</p>
                            <div class="course-meta">
                                <span><i class="ph-clock"></i> 1h 45minute</span>
                                <span><i class="ph-star-fill" style="color: #FBCB4C;"></i> 4.5 (173 review)</span>
                            </div>
                        </div>
                        <div class="course-price">$150.00</div>
                    </div>
                </div>
            </section>
        </div>
        <nav class="bottom-nav">
            <i class="ph-house-fill active"></i>
            <i class="ph-clipboard-text-fill"></i>
            <i class="ph-envelope-simple-fill"></i>
            <i class="ph-user-fill"></i>
        </nav>
    </div>

    <!-- Screen 2: Search -->
    <div class="mobile-screen">
        <div class="screen-content">
            <header class="search-header">
                <div class="search-bar">
                    <i class="ph-magnifying-glass"></i>
                    <input type="text" placeholder="Search">
                </div>
                <div class="filter-btn">
                    <i class="ph-sliders-horizontal"></i>
                </div>
            </header>

            <section class="popular-courses">
                <div class="section-header">
                    <h2>Popular Design Course</h2>
                </div>
                <div class="course-scroll">
                    <div class="course-card-lg">
                        <div class="course-image-lg uiux">
                             <div class="deco-plus">+++++++++<br>+++++++++<br>+++++++++<br>+++++++++</div>
                             <div class="deco-rect"></div>
                             <div class="deco-circle-yellow"></div>
                             <div class="deco-circle-blue"></div>
                             <div class="deco-semicircle"></div>
                        </div>
                        <div class="course-info-lg">
                            <h3 class="course-title">UIUX Design - Introducing..</h3>
                            <p class="course-author">By Caleb Kingston</p>
                            <div class="course-meta">
                                <span><i class="ph-clock"></i> 1h 45minute</span>
                                <span class="rating"><i class="ph-star-fill"></i> 4.5 (173 review)</span>
                            </div>
                            <div class="course-price">$150.00</div>
                        </div>
                    </div>
                    <div class="course-card-lg">
                        <div class="course-image-lg illustration"></div>
                        <div class="course-info-lg">
                            <h3 class="course-title">Illustration</h3>
                            <p class="course-author">By Caleb Kingston</p>
                            <div class="course-meta">
                                <span><i class="ph-clock"></i> 1h 45minute</span>
                            </div>
                            <div class="course-price">$150.00</div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="other-courses-grid">
                <div class="section-header" style="margin-top: 24px;">
                    <h2>Other Course</h2>
                </div>
                <div class="course-card">
                    <img src="https://img.cached.io/https://images.unsplash.com/photo-1541339907198-e08756ded668?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80" alt="Mastering Course" class="course-image">
                    <div class="course-info">
                        <h3 class="course-title">Foundation of mastering...</h3>
                        <p class="course-author">By Caleb Kingston</p>
                        <div class="course-meta">
                            <span><i class="ph-clock"></i> 1h 45minute</span>
                            <span><i class="ph-star-fill" style="color: #FBCB4C;"></i> 4.5 (173 review)</span>
                        </div>
                    </div>
                    <div class="course-price">$150.00</div>
                </div>
                 <div class="course-card">
                    <img src="https://img.cached.io/https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80" alt="Illustrator Course" class="course-image">
                    <div class="course-info">
                        <h3 class="course-title">How to be Illustrator</h3>
                        <p class="course-author">By Eleanor Pena</p>
                        <div class="course-meta">
                            <span><i class="ph-clock"></i> 1h 45minute</span>
                            <span><i class="ph-star-fill" style="color: #FBCB4C;"></i> 4.5 (173 review)</span>
                        </div>
                    </div>
                    <div class="course-price">$150.00</div>
                </div>
            </section>
        </div>
    </div>

    <!-- Screen 3: Course Details -->
    <div class="mobile-screen">
        <div class="screen-content">
            <header class="details-header">
                <a href="#" class="icon-btn"><i class="ph-arrow-left"></i></a>
                <h2>Course</h2>
                <a href="#" class="icon-btn"><i class="ph-dots-three-outline-vertical-fill"></i></a>
            </header>

            <section class="details-hero">
                <div class="deco-plus">+++++++++<br>+++++++++<br>+++++++++</div>
                <div class="deco-rect"></div>
                <div class="deco-circle-yellow"></div>
                <div class="deco-circle-blue"></div>
                <div class="deco-semicircle"></div>
                
                <p class="category-label">Design</p>
                <h1 class="course-title-main">Introducing user interface</h1>
            </section>

            <section class="participants">
                <div class="section-header">
                    <h2>Participant</h2>
                </div>
                <div class="participant-list">
                    <div class="participant-avatars">
                        <div class="avatar" style="background-image: url('https://img.cached.io/https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80')"></div>
                        <div class="avatar" style="background-image: url('https://img.cached.io/https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80')"></div>
                        <div class="avatar" style="background-image: url('https://img.cached.io/https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80')"></div>
                    </div>
                    <div class="participant-info">
                        <p>+283 participant</p>
                        <a href="#" class="see-more">See more</a>
                    </div>
                </div>
            </section>

            <section class="description">
                 <div class="section-header">
                    <h2>Description</h2>
                </div>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </section>

        </div>
        <footer class="details-footer">
            <div class="price-info">
                <p class="label">Introducing uiux class</p>
                <p class="price">$73.00</p>
            </div>
            <a href="#" class="buy-btn">Buy this Class</a>
        </footer>
    </div>

</body>
</html>

Trae CN

不支持图生代码功能，只能将图片放到上下文中

Doubao Seed 1.6

完成效果

代码

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 {
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .image-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="../design/6c136a7b19669020d1158acf75e47e0c.webp" alt="用户提供的图片">
    </div>
</body>
</html>

Doubao 1.5 Pro

完成效果

代码

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>
</head>
<body>
    <img src="../design/6c136a7b19669020d1158acf75e47e0c.webp" alt="图片">
</body>
</html>

DeepSeek R1

完成效果

代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern UI Design</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        :root {
            --primary: #2563eb;
            --secondary: #64748b;
            --background: #f8fafc;
        }

        .navbar {
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
            max-width: 1200px;
            margin: 2rem auto;
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-4px);
        }

        @media (max-width: 768px) {
            .card-container {
                grid-template-columns: 1fr;
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <h2>Exam System</h2>
        <div class="nav-links">
            <a href="#">首页</a>
            <a href="#">考试</a>
            <a href="#">成绩</a>
        </div>
    </nav>

    <div class="card-container">
        <div class="card">
            <h3>模拟考试</h3>
            <p>通过真实场景模拟练习提升应试能力</p>
            <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--primary); color: white; border: none; border-radius: 4px;">开始练习</button>
        </div>
        <!-- 添加更多卡片区块 -->
    </div>
</body>
</html>
相关推荐
funfan05174 小时前
Claude4、GPT4、Kimi K2、Gemini2.5、DeepSeek R1、Code Llama等2025主流AI编程大模型多维度对比分析报告
ai编程
草梅友仁4 小时前
草梅 Auth 1.1.0 发布与最新动态 | 2025 年第 30 周草梅周报
开源·github·ai编程
LinXunFeng4 小时前
AI - Gemini CLI 摆脱终端限制
openai·ai编程·gemini
灵感__idea5 小时前
JavaScript高级程序设计(第5版)：好的编程就是掌控感
前端·javascript·程序员
程序员X小鹿6 小时前
腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）
ai编程
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02vue数据变化但页面不变03全球最强模型Grok4，国内已可免费使用！（附教程）04KGG转MP3工具|非KGM文件|解密音频05sqli-labs 靶场 less-8、9、10 第八关到第十关详解：布尔注入，时间注入06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！08【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致09ChatGPT Agent 完全使用指南：2025年7月最新功能详解10《魔兽世界》提示lua警告的含义及解决方法