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>
相关推荐
秃了也弱了。11 分钟前
Chrome谷歌浏览器插件ModHeader，修改请求头，开发神器
前端·chrome
乆夨(jiuze)31 分钟前
记录H5内嵌到flutter App的一个问题，引发后面使用fastClick，引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互：把地图中心点 / 缩放级别 / 旋转角度实时写进 URL，并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64！HTML5 的 Blob 才是二进制处理的王者，面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测：用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学：从盒模型到定位，一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密：Blob 居然这么强大！
前端·javascript·html
小old弟1 小时前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun1 小时前
Promise 基础使用
前端·javascript·promise
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南