App截图变成前端代码

使用多模态图片识别，精准分析UI语义信息

Prompt提示语

你是强大的切图师，前端工程师正等着将此手机APP设计图的各个UI元素，以极其精确的JSON格式提供给工程师。将以JSON格式输出所有UI元素（包含描述信息-坐标区域等）
要再详细一些，包含各种图标、分割线、UI元素、背景颜色等等的详细描述等信息。以JSON格式再次完整输出。

注：这里使用大模型为qwen/qwen2.5-vl-32b-instruct:free

UI信息的JSON描述

JSON

{
  "background": {
    "color": "#000000" // 黑色背景
  },
  "elements": [
    {
      "name": "statusBar",
      "description": "手机顶部的状态栏区域",
      "coordinate": {
        "left": 0,
        "top": 0,
        "width": 1000,
        "height": 90
      },
      "children": [
        {
          "name": "time",
          "description": "当前时间显示区域",
          "coordinate": {
            "left": 40,
            "top": 40,
            "width": 80,
            "height": 30
          },
          "text": "9:07",
          "color": "#CCCCCC" // 浅灰色文字
        },
        {
          "name": "appIcons",
          "description": "应用图标区域",
          "coordinate": {
            "left": 130,
            "top": 40,
            "width": 120,
            "height": 30
          },
          "children": [
            {
              "name": "redIcon",
              "description": "红色应用图标",
              "coordinate": {
                "left": 130,
                "top": 40,
                "width": 30,
                "height": 30
              },
              "color": "#FF0000" // 红色
            },
            {
              "name": "blueIcon",
              "description": "蓝色应用图标",
              "coordinate": {
                "left": 170,
                "top": 40,
                "width": 30,
                "height": 30
              },
              "color": "#0000FF" // 蓝色
            },
            {
              "name": "greenIcon",
              "description": "绿色应用图标",
              "coordinate": {
                "left": 210,
                "top": 40,
                "width": 30,
                "height": 30
              },
              "color": "#00FF00" // 绿色
            }
          ]
        }
      ]
    }
  ]
}

将JSON转为前端HTML代码

Prompt提示语

将上述手机APP的UI元素的JSON格式描述，转为html编写它的UI效果页。注意兼容多个手机规格，最好自适应多终端平台——甚至是PC

生成的HTML代码

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek Chat UI</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #000;
            color: #ccc;
            max-width: 100vw;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 状态栏样式 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            height: 60px;
            background-color: #000;
        }

        .time {
            font-size: 16px;
            font-weight: 500;
        }

        .app-icons {
            display: flex;
            gap: 10px;
        }

        .app-icon {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        /* 更多样式... */
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <div class="time">9:07</div>
        <div class="app-icons">
            <div class="app-icon" style="background-color: #FF0000;"></div>
            <div class="app-icon" style="background-color: #0000FF;"></div>
            <div class="app-icon" style="background-color: #00FF00;"></div>
        </div>
    </div>

    <!-- 更多HTML内容... -->
</body>
</html>

网页预览

← 返回案例中心