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>
相关推荐
OEC小胖胖7 分钟前
连接世界：网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling55520 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route21 分钟前
使用 Flask 构建 Web 应用：静态页面与动态 API 访问
前端·python·flask
IT_陈寒22 分钟前
Vite 5年迭代揭秘：3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏38 分钟前
vue3+vite，引入阿里巴巴svg图标，自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@39 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通40 分钟前
微服务项目-＞在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel44 分钟前
Vue3 响应式系统核心执行器：Reactive Effect 与依赖调度机制
前端
南玖i3 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗，可修改大小
前端·javascript·vue.js
excel3 小时前
Web发展与Vue.js导读
前端
热门推荐
01Multisim使用教程详尽版--(2025最新版)02UV 工具安装与国内镜像源配置指南03GitHub 镜像站点0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源06Spec-Kit 使用指南07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08VsCode远程Copilot无法使用Claude Agent问题09KGG转MP3工具|非KGM文件|解密音频102025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）