legs+ 发表于 2025-1-2 20:01:56

我给AI（Claude-3.5-sonnet）喂了一张图，然后它写出了代码：



我给AI(Claude-3.5-sonnet模型）喂了一张图片，然后它写出了flutter代码


然后，我渲染生产了这段界面






还是有点瑕疵，估计我给它（Claude-3.5-sonnet）的喂料估计少了，如果是多了，我估计会生成上面的相似的布局

注：那女的我用ai（stable diffusion）生成的，不是真人，防止误解！







legs+ 发表于 2025-1-2 20:04:29



它的布局应该是这样

legs+ 发表于 2025-1-10 14:38:07

本帖最后由 legs+ 于 2025-1-10 14:40 编辑

真的是太完美了，直接把激情拉满！

首先，我找了一个卡片格式的图片切了下来




然后给Claude-3.5-sonnet喂了这张图，它生成了代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>卡片</title>
    <style>
      .card {
      width: 350px;
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      }

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

      .card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      }

      .card-content {
      padding: 20px;
      }

      .card-title {
      font-size: 24px;
      color: #333;
      margin: 0 0 10px 0;
      }

      .card-text {
      font-size: 16px;
      color: #666;
      line-height: 1.5;
      margin: 0;
      }

      /* 可选的容器样式 */
      .container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      background-color: #f5f5f5;
      }
    </style>
</head>
<body>
    <div class="card">
      <img src="1.jpg" alt="Card Image" class="card-image" />
      <div class="card-content">
      <h2 class="card-title">Card Title Here</h2>
      <p class="card-text">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque
          voluptatem necessitatibus omnis corrupti facere...
      </p>
      </div>
    </div>
</body>
</html>

注意，只要把图片的url替换掉，就是你的完美作品








legs+ 发表于 2025-1-10 15:02:48

下面是Claude-3.5-sonnet生成的图片，根本没有区别




完美，没有区别
页: [1]
查看完整版本: 我给AI（Claude-3.5-sonnet）喂了一张图，然后它写出了代码：