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>
相关推荐
testleaf18 分钟前
前端面经整理【1】
前端·面试
好了来看下一题20 分钟前
使用 React+Vite+Electron 搭建桌面应用
前端·react.js·electron
啃火龙果的兔子21 分钟前
前端八股文-react篇
前端·react.js·前端框架
小前端大牛马27 分钟前
react中hook和高阶组件的选型
前端·javascript·vue.js
刺客-Andy27 分钟前
React第六十二节 Router中 createStaticRouter 的使用详解
前端·javascript·react.js
萌萌哒草头将军2 小时前
🚀🚀🚀VSCode 发布 1.101 版本，Copilot 更全能！
前端·vue.js·react.js
GIS之路3 小时前
OpenLayers 图层叠加控制
前端·信息可视化
90后的晨仔3 小时前
ArkTS 语言中的number和Number区别是什么？
前端·harmonyos
菜鸡爱上编程3 小时前
React16,17,18,19更新对比
前端·javascript·reactjs·react
陈龙龙的陈龙龙4 小时前
uniapp 金额处理组件
前端·javascript·uni-app
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04零代码入门 | Coze——让大模型接入自己的数据库05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解08海康Visionmaster-常见问题排查方法-启动阶段09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10坚果投影仪J10如何用苹果Siri开关机并和米家联动