当前位置： 首页 > article >正文

初探ai利用图片生成前端代码

article 2025/2/23 22:58:23

继ai生成figma设计后，我在想设计最终的目的还是变成ui代码，那我们可以直接将设计转变成前端代码就完事了呗。但是，根据之前的实验。当只是简单的叫ai设计一个什么什么界面时。ai 会很粗糙的生成一个大概的界面。前面也提到只描述的越详细，ai 生成的效果就越好。比如：这是一个xxx界面。背景为白色，宽度960px,高度800px.在（0,15)（左上角为原点）处有一个宽度为30px,高度为30px的图标logo，该图标是一个红色（#ff0000）的西红柿。在它的右边10px处是字体为微软雅黑字号为24px的黑色（#000000)文本,内容为”小番茄"
。。。。。。
如果这样的描述，那么生成的界面应该更符合预期。但是对于程序员来说，如果要这么详细的写完，那还不如直接自己用代码写完。（因为写代码也是如此操作）。那有没有什么方法让ai将描述写仔细了。那这就是今天的实验内容。
今天使用到的ai工具有：

  1. 通义千问2.5-VL-72B阿里云百炼
  2. deepseek
  3. 妙多
    具体步骤如下：

图片准备

使用妙多ai生成界面功能。例如：生成一个磁盘清理软件界面。
ai生成磁盘清理界面

这一个图片看上去整体还是不错了（以我程序员的审美）

获得界面的详细描述

将上述图片丢给通义千问2.5-VL-72B（按token收费,这就是为撒后面我用deepseek生成代码，而不是qwen 系列。因为实验咱也不知道到底需要消耗多少。。。。）.总的来说千问2.5-72B的图片理解是顶级的。
以下是交互过程：
演示过程图
返回的结果：

专业UI设计师的评价
这张图展示了一个磁盘清理应用的界面，整体设计简洁明了，功能分区清晰。以下是对该设计的一些具体评价：
优点：
色彩搭配：使用了蓝色和绿色作为主色调，给人一种清新、科技感的感觉。蓝色用于表示进度和重要信息，绿色则用于强调操作按钮，视觉上非常直观。
布局合理：界面分为顶部的状态栏、中间的功能区域和底部的导航栏，层次分明，用户可以快速找到所需功能。
图标设计：每个功能模块都配有相应的图标，如系统文件、下载文件等，图标简洁且易于理解，提升了用户体验。
信息展示清晰：磁盘使用情况以圆形进度条的形式展示，百分比和具体数值一目了然，用户可以快速了解磁盘的使用状况。
改进建议：
字体大小和间距：部分文字的字体大小和行间距可以适当调整，以提高可读性，特别是在小屏幕设备上。
交互反馈：可以增加一些交互反馈效果，如点击按钮时的动画效果，提升用户的操作体验。
个性化设置：提供更多的个性化设置选项，如主题颜色、字体样式等，满足不同用户的需求。
设计过程
需求分析
首先，与产品团队沟通，明确应用的核心功能和目标用户群体。确定需要展示的信息和操作流程，确保设计符合用户需求。
线框图设计
根据需求分析的结果，绘制出初步的线框图，确定界面的基本结构和布局。在这个阶段，主要关注功能的合理分布和用户操作的便捷性。
视觉设计
在确定了基本结构后，进行视觉设计。选择合适的色彩搭配和图标风格，使界面看起来既美观又专业。同时，注意保持设计的一致性，确保整个应用的风格统一。
交互设计
设计交互细节，如按钮的点击效果、页面的切换动画等，提升用户的操作体验。通过原型工具制作交互原型，进行测试和优化。
测试与迭代
将设计稿交付开发团队实现，并进行多轮测试，收集用户反馈，不断优化设计细节，最终完成产品的上线。
UI控件树JSON结构数据
{
  "type": "Screen",
  "children": [
    {
      "type": "StatusBar",
      "children": [
        {
          "type": "Time",
          "text": "9:41"
        },
        {
          "type": "NetworkIcon"
        },
        {
          "type": "BatteryIcon"
        }
      ]
    },
    {
      "type": "Header",
      "children": [
        {
          "type": "Title",
          "text": "磁盘清理专家"
        },
        {
          "type": "SettingsIcon"
        }
      ]
    },
    {
      "type": "DiskUsageWidget",
      "children": [
        {
          "type": "ProgressCircle",
          "percentage": 75,
          "text": "已使用"
        },
        {
          "type": "Text",
          "text": "总容量：512GB\n已用：384GB\n可用：128GB"
        },
        {
          "type": "Button",
          "text": "快速扫描"
        }
      ]
    },
    {
      "type": "FileCategoryList",
      "children": [
        {
          "type": "FileCategoryItem",
          "icon": "system_files",
          "title": "系统文件",
          "clearableSize": "12.8GB"
        },
        {
          "type": "FileCategoryItem",
          "icon": "download_files",
          "title": "下载文件",
          "clearableSize": "8.6GB"
        },
        {
          "type": "FileCategoryItem",
          "icon": "temp_files",
          "title": "临时文件",
          "clearableSize": "5.2GB"
        },
        {
          "type": "FileCategoryItem",
          "icon": "recycle_bin",
          "title": "回收站",
          "clearableSize": "2.1GB"
        },
        {
          "type": "FileCategoryItem",
          "icon": "browser_cache",
          "title": "浏览器缓存",
          "clearableSize": "3.7GB"
        },
        {
          "type": "FileCategoryItem",
          "icon": "windows_update",
          "title": "Windows更新",
          "clearableSize": "6.4GB"
        }
      ]
    },
    {
      "type": "ActionButtons",
      "children": [
        {
          "type": "Button",
          "text": "分析"
        },
        {
          "type": "Button",
          "text": "清理"
        },
        {
          "type": "Button",
          "text": "定时"
        }
      ]
    },
    {
      "type": "NavigationBar",
      "children": [
        {
          "type": "NavItem",
          "icon": "overview",
          "text": "概览"
        },
        {
          "type": "NavItem",
          "icon": "tools",
          "text": "工具"
        },
        {
          "type": "NavItem",
          "icon": "history",
          "text": "历史"
        },
        {
          "type": "NavItem",
          "icon": "settings",
          "text": "设置"
        }
      ]
    }
  ]
}
这个JSON结构描述了界面的各个部分及其子元素，便于开发人员理解和实现。

可以看到，如果将这个结果给到前端人员的话，前端人员是不能复现界面的，这里可以看到其实千问vl是有审美的。他能说出界面整体的风格、色彩搭配、布局等描述。但是和文章开头的所说的要很详细那种还是没有。并且可以看到生成的json数据中只是有 界面有哪些元素的描述，并没有布局、颜色、大小等数据。所以还需要继续再一步的反馈给ai模型。
进一步反馈：
演示图片

你说得对，为了确保开发人员能够准确地实现界面设计，我们需要在JSON结构中提供更详细的信息，包括控件的具体属性、样式和布局等。以下是改进后的JSON结构数据：
{
  "type": "Screen",
  "children": [
    {
      "type": "StatusBar",
      "style": {
        "backgroundColor": "#FFFFFF"
      },
      "children": [
        {
          "type": "Time",
          "text": "9:41",
          "style": {
            "fontSize": "16px",
            "color": "#000000"
          }
        },
        {
          "type": "NetworkIcon",
          "style": {
            "width": "20px",
            "height": "20px",
            "marginLeft": "auto",
            "marginRight": "10px"
          }
        },
        {
          "type": "BatteryIcon",
          "style": {
            "width": "20px",
            "height": "20px",
            "marginRight": "10px"
          }
        }
      ]
    },
    {
      "type": "Header",
      "style": {
        "padding": "10px",
        "backgroundColor": "#FFFFFF"
      },
      "children": [
        {
          "type": "Title",
          "text": "磁盘清理专家",
          "style": {
            "fontSize": "20px",
            "color": "#000000",
            "fontWeight": "bold"
          }
        },
        {
          "type": "SettingsIcon",
          "style": {
            "width": "24px",
            "height": "24px",
            "marginLeft": "auto",
            "marginRight": "0"
          }
        }
      ]
    },
    {
      "type": "DiskUsageWidget",
      "style": {
        "padding": "20px",
        "backgroundColor": "#F5F5F5",
        "borderRadius": "10px",
        "marginTop": "10px"
      },
      "children": [
        {
          "type": "ProgressCircle",
          "percentage": 75,
          "style": {
            "width": "100px",
            "height": "100px",
            "strokeWidth": "10px",
            "strokeColor": "#3498db",
            "fillColor": "#ffffff",
            "fontSize": "24px",
            "color": "#3498db"
          },
          "text": "已使用"
        },
        {
          "type": "Text",
          "text": "总容量：512GB\n已用：384GB\n可用：128GB",
          "style": {
            "fontSize": "16px",
            "color": "#000000",
            "marginLeft": "20px"
          }
        },
        {
          "type": "Button",
          "text": "快速扫描",
          "style": {
            "width": "150px",
            "height": "40px",
            "backgroundColor": "#3498db",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px",
            "marginTop": "10px"
          }
        }
      ]
    },
    {
      "type": "FileCategoryList",
      "style": {
        "marginTop": "20px"
      },
      "children": [
        {
          "type": "FileCategoryItem",
          "icon": "system_files",
          "title": "系统文件",
          "clearableSize": "12.8GB",
          "style": {
            "width": "calc(50% - 10px)",
            "height": "100px",
            "backgroundColor": "#ffffff",
            "borderRadius": "10px",
            "padding": "10px",
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between"
          },
          "children": [
            {
              "type": "Icon",
              "src": "system_files.png",
              "style": {
                "width": "40px",
                "height": "40px"
              }
            },
            {
              "type": "Text",
              "text": "系统文件",
              "style": {
                "fontSize": "16px",
                "color": "#000000"
              }
            },
            {
              "type": "ProgressBar",
              "percentage": 50,
              "style": {
                "height": "5px",
                "backgroundColor": "#e0e0e0",
                "borderRadius": "5px"
              },
              "progressStyle": {
                "backgroundColor": "#3498db",
                "borderRadius": "5px"
              }
            },
            {
              "type": "Text",
              "text": "可清理：12.8GB",
              "style": {
                "fontSize": "14px",
                "color": "#888888"
              }
            }
          ]
        },
        {
          "type": "FileCategoryItem",
          "icon": "download_files",
          "title": "下载文件",
          "clearableSize": "8.6GB",
          "style": {
            "width": "calc(50% - 10px)",
            "height": "100px",
            "backgroundColor": "#ffffff",
            "borderRadius": "10px",
            "padding": "10px",
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "marginLeft": "20px"
          },
          "children": [
            {
              "type": "Icon",
              "src": "download_files.png",
              "style": {
                "width": "40px",
                "height": "40px"
              }
            },
            {
              "type": "Text",
              "text": "下载文件",
              "style": {
                "fontSize": "16px",
                "color": "#000000"
              }
            },
            {
              "type": "ProgressBar",
              "percentage": 40,
              "style": {
                "height": "5px",
                "backgroundColor": "#e0e0e0",
                "borderRadius": "5px"
              },
              "progressStyle": {
                "backgroundColor": "#3498db",
                "borderRadius": "5px"
              }
            },
            {
              "type": "Text",
              "text": "可清理：8.6GB",
              "style": {
                "fontSize": "14px",
                "color": "#888888"
              }
            }
          ]
        },
        // 其他 FileCategoryItem 类似...
      ]
    },
    {
      "type": "ActionButtons",
      "style": {
        "marginTop": "20px",
        "display": "flex",
        "justifyContent": "space-around"
      },
      "children": [
        {
          "type": "Button",
          "text": "分析",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#3498db",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        },
        {
          "type": "Button",
          "text": "清理",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#2ecc71",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        },
        {
          "type": "Button",
          "text": "定时",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#95a5a6",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        }
      ]
    },
    {
      "type": "NavigationBar",
      "style": {
        "position": "fixed",
        "bottom": "0",
        "left": "0",
        "right": "0",
        "height": "60px",
        "backgroundColor": "#ffffff",
        "borderTop": "1px solid #e0e0e0",
        "display": "flex",
        "justifyContent": "space-around",
        "alignItems": "center"
      },
      "children": [
        {
          "type": "NavItem",
          "icon": "overview",
          "text": "概览",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "overview.png",
              "style": {
                "width": "24px",
                "height": "24px"
              }
            },
            {
              "type": "Text",
              "text": "概览",
              "style": {
                "fontSize": "12px",
                "color": "#000000"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "tools",
          "text": "工具",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "tools.png",
              "style": {
                "width": "24px",
                "height": "24px"
              }
            },
            {
              "type": "Text",
              "text": "工具",
              "style": {
                "fontSize": "12px",
                "color": "#000000"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "history",
          "text": "历史",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "history.png",
              "style": {
                "width": "24px",
                "height": "24px"
              }
            },
            {
              "type": "Text",
              "text": "历史",
              "style": {
                "fontSize": "12px",
                "color": "#000000"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "settings",
          "text": "设置",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "settings.png",
              "style": {
                "width": "24px",
                "height": "24px"
              }
            },
            {
              "type": "Text",
              "text": "设置",
              "style": {
                "fontSize": "12px",
                "color": "#000000"
              }
            }
          ]
        }
      ]
    }
  ]
}
这个改进后的JSON结构提供了更详细的控件属性和样式信息，帮助开发人员更准确地实现界面设计。

可以看到这个json 就比上一次的数据更详细了，新增加了一些布局、颜色、大小元素。
接下来丢给deepseek 看看效果。

查看效果

丢给deepseek 生成前端代码（这个过程可能会出现服务器繁忙的提示，多试几次，如果不行就换其他的ai，比如qwen系列的文本ai,或者用百度的文心一言）

根据以下json结构用前端代码实现界面：
{
    "type": "Screen",
    "children": [
      {
        "type": "StatusBar",
        "style": {
          "backgroundColor": "#FFFFFF"
        },
        "children": [
          {
            "type": "Time",
            "text": "9:41",
            "style": {
              "fontSize": "16px",
              "color": "#000000"
            }
          },
          {
            "type": "NetworkIcon",
            "style": {
              "width": "20px",
              "height": "20px",
              "marginLeft": "auto",
              "marginRight": "10px"
            }
          },
          {
            "type": "BatteryIcon",
            "style": {
              "width": "20px",
              "height": "20px",
              "marginRight": "10px"
            }
          }
        ]
      },
      {
        "type": "Header",
        "style": {
          "padding": "10px",
          "backgroundColor": "#FFFFFF"
        },
        "children": [
          {
            "type": "Title",
            "text": "磁盘清理专家",
            "style": {
              "fontSize": "20px",
              "color": "#000000",
              "fontWeight": "bold"
            }
          },
          {
            "type": "SettingsIcon",
            "style": {
              "width": "24px",
              "height": "24px",
              "marginLeft": "auto",
              "marginRight": "0"
            }
          }
        ]
      },
      {
        "type": "DiskUsageWidget",
        "style": {
          "padding": "20px",
          "backgroundColor": "#F5F5F5",
          "borderRadius": "10px",
          "marginTop": "10px"
        },
        "children": [
          {
            "type": "ProgressCircle",
            "percentage": 75,
            "style": {
              "width": "100px",
              "height": "100px",
              "strokeWidth": "10px",
              "strokeColor": "#3498db",
              "fillColor": "#ffffff",
              "fontSize": "24px",
              "color": "#3498db"
            },
            "text": "已使用"
          },
          {
            "type": "Text",
            "text": "总容量：512GB\n已用：384GB\n可用：128GB",
            "style": {
              "fontSize": "16px",
              "color": "#000000",
              "marginLeft": "20px"
            }
          },
          {
            "type": "Button",
            "text": "快速扫描",
            "style": {
              "width": "150px",
              "height": "40px",
              "backgroundColor": "#3498db",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px",
              "marginTop": "10px"
            }
          }
        ]
      },
      {
        "type": "FileCategoryList",
        "style": {
          "marginTop": "20px"
        },
        "children": [
          {
            "type": "FileCategoryItem",
            "icon": "system_files",
            "title": "系统文件",
            "clearableSize": "12.8GB",
            "style": {
              "width": "calc(50% - 10px)",
              "height": "100px",
              "backgroundColor": "#ffffff",
              "borderRadius": "10px",
              "padding": "10px",
              "display": "flex",
              "flexDirection": "column",
              "justifyContent": "space-between"
            },
            "children": [
              {
                "type": "Icon",
                "src": "system_files.png",
                "style": {
                  "width": "40px",
                  "height": "40px"
                }
              },
              {
                "type": "Text",
                "text": "系统文件",
                "style": {
                  "fontSize": "16px",
                  "color": "#000000"
                }
              },
              {
                "type": "ProgressBar",
                "percentage": 50,
                "style": {
                  "height": "5px",
                  "backgroundColor": "#e0e0e0",
                  "borderRadius": "5px"
                },
                "progressStyle": {
                  "backgroundColor": "#3498db",
                  "borderRadius": "5px"
                }
              },
              {
                "type": "Text",
                "text": "可清理：12.8GB",
                "style": {
                  "fontSize": "14px",
                  "color": "#888888"
                }
              }
            ]
          },
          {
            "type": "FileCategoryItem",
            "icon": "download_files",
            "title": "下载文件",
            "clearableSize": "8.6GB",
            "style": {
              "width": "calc(50% - 10px)",
              "height": "100px",
              "backgroundColor": "#ffffff",
              "borderRadius": "10px",
              "padding": "10px",
              "display": "flex",
              "flexDirection": "column",
              "justifyContent": "space-between",
              "marginLeft": "20px"
            },
            "children": [
              {
                "type": "Icon",
                "src": "download_files.png",
                "style": {
                  "width": "40px",
                  "height": "40px"
                }
              },
              {
                "type": "Text",
                "text": "下载文件",
                "style": {
                  "fontSize": "16px",
                  "color": "#000000"
                }
              },
              {
                "type": "ProgressBar",
                "percentage": 40,
                "style": {
                  "height": "5px",
                  "backgroundColor": "#e0e0e0",
                  "borderRadius": "5px"
                },
                "progressStyle": {
                  "backgroundColor": "#3498db",
                  "borderRadius": "5px"
                }
              },
              {
                "type": "Text",
                "text": "可清理：8.6GB",
                "style": {
                  "fontSize": "14px",
                  "color": "#888888"
                }
              }
            ]
          },
          // 其他 FileCategoryItem 类似...
        ]
      },
      {
        "type": "ActionButtons",
        "style": {
          "marginTop": "20px",
          "display": "flex",
          "justifyContent": "space-around"
        },
        "children": [
          {
            "type": "Button",
            "text": "分析",
            "style": {
              "width": "100px",
              "height": "40px",
              "backgroundColor": "#3498db",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px"
            }
          },
          {
            "type": "Button",
            "text": "清理",
            "style": {
              "width": "100px",
              "height": "40px",
              "backgroundColor": "#2ecc71",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px"
            }
          },
          {
            "type": "Button",
            "text": "定时",
            "style": {
              "width": "100px",
              "height": "40px",
              "backgroundColor": "#95a5a6",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px"
            }
          }
        ]
      },
      {
        "type": "NavigationBar",
        "style": {
          "position": "fixed",
          "bottom": "0",
          "left": "0",
          "right": "0",
          "height": "60px",
          "backgroundColor": "#ffffff",
          "borderTop": "1px solid #e0e0e0",
          "display": "flex",
          "justifyContent": "space-around",
          "alignItems": "center"
        },
        "children": [
          {
            "type": "NavItem",
            "icon": "overview",
            "text": "概览",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "overview.png",
                "style": {
                  "width": "24px",
                  "height": "24px"
                }
              },
              {
                "type": "Text",
                "text": "概览",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000"
                }
              }
            ]
          },
          {
            "type": "NavItem",
            "icon": "tools",
            "text": "工具",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "tools.png",
                "style": {
                  "width": "24px",
                  "height": "24px"
                }
              },
              {
                "type": "Text",
                "text": "工具",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000"
                }
              }
            ]
          },
          {
            "type": "NavItem",
            "icon": "history",
            "text": "历史",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "history.png",
                "style": {
                  "width": "24px",
                  "height": "24px"
                }
              },
              {
                "type": "Text",
                "text": "历史",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000"
                }
              }
            ]
          },
          {
            "type": "NavItem",
            "icon": "settings",
            "text": "设置",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "settings.png",
                "style": {
                  "width": "24px",
                  "height": "24px"
                }
              },
              {
                "type": "Text",
                "text": "设置",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000"
                }
              }
            ]
          }
        ]
      }
    ]
  }

deepseek会将css和html和js 分别生成3 个文件（这里我手动放到了1个文件，也可以安装它的方式弄3个文件）
deepseek生成的效果如下：(这里只给出生成的代码）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>磁盘清理专家</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="screen">
        <!-- StatusBar -->
        <div class="status-bar">
            <div class="time">9:41</div>
            <div class="network-icon"></div>
            <div class="battery-icon"></div>
        </div>

        <!-- Header -->
        <div class="header">
            <div class="title">磁盘清理专家</div>
            <div class="settings-icon"></div>
        </div>

        <!-- DiskUsageWidget -->
        <div class="disk-usage-widget">
            <div class="progress-circle">
                <div class="circle" style="--percentage: 75;"></div>
                <div class="text">已使用</div>
            </div>
            <div class="disk-info">
                <div>总容量：512GB</div>
                <div>已用：384GB</div>
                <div>可用：128GB</div>
            </div>
            <button class="scan-button">快速扫描</button>
        </div>

        <!-- FileCategoryList -->
        <div class="file-category-list">
            <div class="file-category-item">
                <img src="system_files.png" alt="系统文件" class="icon">
                <div class="title">系统文件</div>
                <div class="progress-bar">
                    <div class="progress" style="--percentage: 50;"></div>
                </div>
                <div class="clearable-size">可清理：12.8GB</div>
            </div>
            <div class="file-category-item">
                <img src="download_files.png" alt="下载文件" class="icon">
                <div class="title">下载文件</div>
                <div class="progress-bar">
                    <div class="progress" style="--percentage: 40;"></div>
                </div>
                <div class="clearable-size">可清理：8.6GB</div>
            </div>
            <!-- 其他 FileCategoryItem 类似... -->
        </div>

        <!-- ActionButtons -->
        <div class="action-buttons">
            <button class="analyze-button">分析</button>
            <button class="clean-button">清理</button>
            <button class="schedule-button">定时</button>
        </div>

        <!-- NavigationBar -->
        <div class="navigation-bar">
            <div class="nav-item">
                <img src="overview.png" alt="概览" class="nav-icon">
                <div class="nav-text">概览</div>
            </div>
            <div class="nav-item">
                <img src="tools.png" alt="工具" class="nav-icon">
                <div class="nav-text">工具</div>
            </div>
            <div class="nav-item">
                <img src="history.png" alt="历史" class="nav-icon">
                <div class="nav-text">历史</div>
            </div>
            <div class="nav-item">
                <img src="settings.png" alt="设置" class="nav-icon">
                <div class="nav-text">设置</div>
            </div>
        </div>
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

.screen {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.status-bar {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 5px 10px;
}

.time {
    font-size: 16px;
    color: #000000;
}

.network-icon, .battery-icon {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    margin-left: auto;
    margin-right: 10px;
}

.header {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
}

.title {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
}

.settings-icon {
    width: 24px;
    height: 24px;
    background-color: #ccc;
    margin-left: auto;
}

.disk-usage-widget {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-circle {
    position: relative;
    width: 100px;
    height: 100px;
}

.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#3498db calc(var(--percentage) * 1%), #ffffff 0%);
}

.progress-circle .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #3498db;
}

.disk-info {
    font-size: 16px;
    color: #000000;
    margin-left: 20px;
}

.scan-button {
    width: 150px;
    height: 40px;
    background-color: #3498db;
    color: #ffffff;
    font-size: 16px;
    border-radius: 5px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

.file-category-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.file-category-item {
    width: calc(50% - 10px);
    height: 100px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.icon {
    width: 40px;
    height: 40px;
}

.progress-bar {
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
}

.progress {
    height: 100%;
    background-color: #3498db;
    border-radius: 5px;
    width: calc(var(--percentage) * 1%);
}

.clearable-size {
    font-size: 14px;
    color: #888888;
}

.action-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}

.analyze-button, .clean-button, .schedule-button {
    width: 100px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.analyze-button {
    background-color: #3498db;
    color: #ffffff;
}

.clean-button {
    background-color: #2ecc71;
    color: #ffffff;
}

.schedule-button {
    background-color: #95a5a6;
    color: #ffffff;
}

.navigation-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-icon {
    width: 24px;
    height: 24px;
}

.nav-text {
    font-size: 12px;
    color: #000000;
}

document.addEventListener('DOMContentLoaded', function() {
    // 动态更新进度条
    const progressBars = document.querySelectorAll('.progress');
    progressBars.forEach(bar => {
        const percentage = bar.style.getPropertyValue('--percentage');
        bar.style.width = `${percentage}%`;
    });
});

效果如下：
演示图片
可以看到，整体来说还可以，其中只是大部分的图标没有显示出来。还有就是"快速扫描"那块布局和原图片差异比较大。通过排查，其实是提供的json并没有准确的描述到布局信息，以及json 中图标的内容是.png文件路径。所以图标处看起来缺失。如果有图片应该还可以。

优化

为了弥补图标图片不存在的问题，我们让ai再想想办法。接下来再次让千问vl出马：
演示图片

图片详细描述
顶部状态栏
时间显示：位于左上角，显示时间为“9:41”，字体为白色，大小适中。
网络信号图标：位于右上角，表示当前的网络连接状态，风格简洁，颜色为白色。
电池电量图标：位于右上角，紧挨着网络信号图标，表示当前的电池电量，风格简洁，颜色为白色。
标题栏
应用标题：位于屏幕顶部中央偏左位置，显示为“磁盘清理专家”，字体较大，颜色为深蓝色，背景为白色。
设置图标：位于标题右侧，是一个齿轮形状的图标，表示进入设置页面的功能，风格简洁，颜色为深蓝色。
磁盘使用情况展示区域
圆形进度条：位于该区域左侧，显示磁盘使用百分比（75%），已使用的部分用深蓝色填充，未使用的部分为空白。文字“已使用”位于圆环内，字体为白色。
磁盘容量信息：位于该区域右侧，显示总容量、已用容量和可用容量的具体数值（总容量：512GB，已用：384GB，可用：128GB），字体为黑色，大小适中。
快速扫描按钮：位于该区域下方，是一个蓝色矩形按钮，上面有白色文字“快速扫描”，点击后可进行磁盘扫描操作。
文件分类清理区域
系统文件：
图标：一个蓝色的Windows窗口图标，表示系统文件，风格简洁，颜色为蓝色。
标题：显示为“系统文件”，字体为黑色，大小适中。
可清理空间：显示为“可清理：12.8GB”，字体为灰色，大小较小。
进度条：表示系统文件占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
下载文件：
图标：一个蓝色的向下箭头图标，表示下载文件，风格简洁，颜色为蓝色。
标题：显示为“下载文件”，字体为黑色，大小适中。
可清理空间：显示为“可清理：8.6GB”，字体为灰色，大小较小。
进度条：表示下载文件占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
临时文件：
图标：一个蓝色的时钟图标，表示临时文件，风格简洁，颜色为蓝色。
标题：显示为“临时文件”，字体为黑色，大小适中。
可清理空间：显示为“可清理：5.2GB”，字体为灰色，大小较小。
进度条：表示临时文件占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
回收站：
图标：一个蓝色的垃圾桶图标，表示回收站，风格简洁，颜色为蓝色。
标题：显示为“回收站”，字体为黑色，大小适中。
可清理空间：显示为“可清理：2.1GB”，字体为灰色，大小较小。
进度条：表示回收站占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
浏览器缓存：
图标：一个蓝色的旋转箭头图标，表示浏览器缓存，风格简洁，颜色为蓝色。
标题：显示为“浏览器缓存”，字体为黑色，大小适中。
可清理空间：显示为“可清理：3.7GB”，字体为灰色，大小较小。
进度条：表示浏览器缓存占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
Windows更新：
图标：一个蓝色的文件夹图标，表示Windows更新，风格简洁，颜色为蓝色。
标题：显示为“Windows更新”，字体为黑色，大小适中。
可清理空间：显示为“可清理：6.4GB”，字体为灰色，大小较小。
进度条：表示Windows更新占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
功能按钮区域
分析按钮：位于该区域左侧，是一个蓝色矩形按钮，上面有白色文字“分析”，点击后可进行磁盘分析操作。
清理按钮：位于该区域中间，是一个绿色矩形按钮，上面有白色文字“清理”，点击后可进行磁盘清理操作。
定时按钮：位于该区域右侧，是一个灰色矩形按钮，上面有白色文字“定时”，点击后可进行定时清理设置操作。
底部导航栏
概览标签：
图标：一个蓝色的房屋图标，表示概览页面，风格简洁，颜色为蓝色。
文字：显示为“概览”，字体为黑色，大小适中。
工具标签：
图标：一个蓝色的扳手图标，表示工具页面，风格简洁，颜色为蓝色。
文字：显示为“工具”，字体为黑色，大小适中。
历史标签：
图标：一个蓝色的时钟图标，表示历史页面，风格简洁，颜色为蓝色。
文字：显示为“历史”，字体为黑色，大小适中。
设置标签：
图标：一个蓝色的齿轮图标，表示设置页面，风格简洁，颜色为蓝色。
文字：显示为“设置”，字体为黑色，大小适中。
JSON UI 控件树
{
  "type": "Screen",
  "children": [
    {
      "type": "StatusBar",
      "style": {
        "backgroundColor": "#FFFFFF"
      },
      "children": [
        {
          "type": "Time",
          "text": "9:41",
          "style": {
            "fontSize": "16px",
            "color": "#000000",
            "marginLeft": "10px"
          }
        },
        {
          "type": "NetworkIcon",
          "style": {
            "width": "20px",
            "height": "20px",
            "marginLeft": "auto",
            "marginRight": "10px",
            "color": "#000000"
          }
        },
        {
          "type": "BatteryIcon",
          "style": {
            "width": "20px",
            "height": "20px",
            "marginRight": "10px",
            "color": "#000000"
          }
        }
      ]
    },
    {
      "type": "Header",
      "style": {
        "padding": "10px",
        "backgroundColor": "#FFFFFF"
      },
      "children": [
        {
          "type": "Title",
          "text": "磁盘清理专家",
          "style": {
            "fontSize": "20px",
            "color": "#000000",
            "fontWeight": "bold",
            "marginLeft": "10px"
          }
        },
        {
          "type": "SettingsIcon",
          "style": {
            "width": "24px",
            "height": "24px",
            "marginLeft": "auto",
            "marginRight": "10px",
            "color": "#000000"
          }
        }
      ]
    },
    {
      "type": "DiskUsageWidget",
      "style": {
        "padding": "20px",
        "backgroundColor": "#F5F5F5",
        "borderRadius": "10px",
        "marginTop": "10px"
      },
      "children": [
        {
          "type": "ProgressCircle",
          "percentage": 75,
          "style": {
            "width": "100px",
            "height": "100px",
            "strokeWidth": "10px",
            "strokeColor": "#3498db",
            "fillColor": "#ffffff",
            "fontSize": "24px",
            "color": "#3498db",
            "marginLeft": "10px"
          },
          "text": "已使用"
        },
        {
          "type": "Text",
          "text": "总容量：512GB\n已用：384GB\n可用：128GB",
          "style": {
            "fontSize": "16px",
            "color": "#000000",
            "marginLeft": "20px"
          }
        },
        {
          "type": "Button",
          "text": "快速扫描",
          "style": {
            "width": "150px",
            "height": "40px",
            "backgroundColor": "#3498db",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px",
            "marginTop": "10px",
            "marginLeft": "20px"
          }
        }
      ]
    },
    {
      "type": "FileCategoryList",
      "style": {
        "marginTop": "20px",
        "display": "flex",
        "flexWrap": "wrap",
        "justifyContent": "space-between"
      },
      "children": [
        {
          "type": "FileCategoryItem",
          "icon": "system_files",
          "title": "系统文件",
          "clearableSize": "12.8GB",
          "style": {
            "width": "calc(50% - 10px)",
            "height": "100px",
            "backgroundColor": "#ffffff",
            "borderRadius": "10px",
            "padding": "10px",
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "marginLeft": "10px",
            "marginRight": "10px"
          },
          "children": [
            {
              "type": "Icon",
              "src": "system_files.png",
              "style": {
                "width": "40px",
                "height": "40px",
                "color": "#3498db"
              }
            },
            {
              "type": "Text",
              "text": "系统文件",
              "style": {
                "fontSize": "16px",
                "color": "#000000",
                "textAlign": "center"
              }
            },
            {
              "type": "ProgressBar",
              "percentage": 50,
              "style": {
                "height": "5px",
                "backgroundColor": "#e0e0e0",
                "borderRadius": "5px",
                "width": "100%"
              },
              "progressStyle": {
                "backgroundColor": "#3498db",
                "borderRadius": "5px"
              }
            },
            {
              "type": "Text",
              "text": "可清理：12.8GB",
              "style": {
                "fontSize": "14px",
                "color": "#888888",
                "textAlign": "center"
              }
            }
          ]
        },
        {
          "type": "FileCategoryItem",
          "icon": "download_files",
          "title": "下载文件",
          "clearableSize": "8.6GB",
          "style": {
            "width": "calc(50% - 10px)",
            "height": "100px",
            "backgroundColor": "#ffffff",
            "borderRadius": "10px",
            "padding": "10px",
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "marginLeft": "10px",
            "marginRight": "10px"
          },
          "children": [
            {
              "type": "Icon",
              "src": "download_files.png",
              "style": {
                "width": "40px",
                "height": "40px",
                "color": "#3498db"
              }
            },
            {
              "type": "Text",
              "text": "下载文件",
              "style": {
                "fontSize": "16px",
                "color": "#000000",
                "textAlign": "center"
              }
            },
            {
              "type": "ProgressBar",
              "percentage": 40,
              "style": {
                "height": "5px",
                "backgroundColor": "#e0e0e0",
                "borderRadius": "5px",
                "width": "100%"
              },
              "progressStyle": {
                "backgroundColor": "#3498db",
                "borderRadius": "5px"
              }
            },
            {
              "type": "Text",
              "text": "可清理：8.6GB",
              "style": {
                "fontSize": "14px",
                "color": "#888888",
                "textAlign": "center"
              }
            }
          ]
        },
        // 其他 FileCategoryItem 类似...
      ]
    },
    {
      "type": "ActionButtons",
      "style": {
        "marginTop": "20px",
        "display": "flex",
        "justifyContent": "space-around",
        "paddingLeft": "10px",
        "paddingRight": "10px"
      },
      "children": [
        {
          "type": "Button",
          "text": "分析",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#3498db",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        },
        {
          "type": "Button",
          "text": "清理",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#2ecc71",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        },
        {
          "type": "Button",
          "text": "定时",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#95a5a6",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        }
      ]
    },
    {
      "type": "NavigationBar",
      "style": {
        "position": "fixed",
        "bottom": "0",
        "left": "0",
        "right": "0",
        "height": "60px",
        "backgroundColor": "#ffffff",
        "borderTop": "1px solid #e0e0e0",
        "display": "flex",
        "justifyContent": "space-around",
        "alignItems": "center"
      },
      "children": [
        {
          "type": "NavItem",
          "icon": "overview",
          "text": "概览",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "overview.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              }
            },
            {
              "type": "Text",
              "text": "概览",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "tools",
          "text": "工具",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "tools.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              }
            },
            {
              "type": "Text",
              "text": "工具",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "history",
          "text": "历史",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "history.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              }
            },
            {
              "type": "Text",
              "text": "历史",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "settings",
          "text": "设置",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "settings.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              }
            },
            {
              "type": "Text",
              "text": "设置",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        }
      ]
    }
  ]
}
这个详细的JSON结构提供了所有控件的样式和布局信息，确保前端开发人员能够准确地实现界面设计。

仔细瞧瞧以上数据，其实并没有追加对图标的描述。仔细想了想，应该是我们的描述不准确，接下来，直接表达让ai怎么做：
演示图片
千问vl的结果如下：

为了更好地辅助前端开发人员选择和使用图标，可以在 type 为 Icon 的对象中添加一个 description 字段，用于描述图标的风格、功能表示等信息。以下是更新后的JSON结构：
{
  "type": "Screen",
  "children": [
    {
      "type": "StatusBar",
      "style": {
        "backgroundColor": "#FFFFFF"
      },
      "children": [
        {
          "type": "Time",
          "text": "9:41",
          "style": {
            "fontSize": "16px",
            "color": "#000000",
            "marginLeft": "10px"
          }
        },
        {
          "type": "NetworkIcon",
          "style": {
            "width": "20px",
            "height": "20px",
            "marginLeft": "auto",
            "marginRight": "10px",
            "color": "#000000"
          },
          "description": "简洁的网络信号图标，表示当前的网络连接状态"
        },
        {
          "type": "BatteryIcon",
          "style": {
            "width": "20px",
            "height": "20px",
            "marginRight": "10px",
            "color": "#000000"
          },
          "description": "简洁的电池电量图标，表示当前的电池电量"
        }
      ]
    },
    {
      "type": "Header",
      "style": {
        "padding": "10px",
        "backgroundColor": "#FFFFFF"
      },
      "children": [
        {
          "type": "Title",
          "text": "磁盘清理专家",
          "style": {
            "fontSize": "20px",
            "color": "#000000",
            "fontWeight": "bold",
            "marginLeft": "10px"
          }
        },
        {
          "type": "SettingsIcon",
          "style": {
            "width": "24px",
            "height": "24px",
            "marginLeft": "auto",
            "marginRight": "10px",
            "color": "#000000"
          },
          "description": "齿轮形状的图标，表示进入设置页面的功能"
        }
      ]
    },
    {
      "type": "DiskUsageWidget",
      "style": {
        "padding": "20px",
        "backgroundColor": "#F5F5F5",
        "borderRadius": "10px",
        "marginTop": "10px"
      },
      "children": [
        {
          "type": "ProgressCircle",
          "percentage": 75,
          "style": {
            "width": "100px",
            "height": "100px",
            "strokeWidth": "10px",
            "strokeColor": "#3498db",
            "fillColor": "#ffffff",
            "fontSize": "24px",
            "color": "#3498db",
            "marginLeft": "10px"
          },
          "text": "已使用"
        },
        {
          "type": "Text",
          "text": "总容量：512GB\n已用：384GB\n可用：128GB",
          "style": {
            "fontSize": "16px",
            "color": "#000000",
            "marginLeft": "20px"
          }
        },
        {
          "type": "Button",
          "text": "快速扫描",
          "style": {
            "width": "150px",
            "height": "40px",
            "backgroundColor": "#3498db",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px",
            "marginTop": "10px",
            "marginLeft": "20px"
          }
        }
      ]
    },
    {
      "type": "FileCategoryList",
      "style": {
        "marginTop": "20px",
        "display": "flex",
        "flexWrap": "wrap",
        "justifyContent": "space-between"
      },
      "children": [
        {
          "type": "FileCategoryItem",
          "icon": "system_files",
          "title": "系统文件",
          "clearableSize": "12.8GB",
          "style": {
            "width": "calc(50% - 10px)",
            "height": "100px",
            "backgroundColor": "#ffffff",
            "borderRadius": "10px",
            "padding": "10px",
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "marginLeft": "10px",
            "marginRight": "10px"
          },
          "children": [
            {
              "type": "Icon",
              "src": "system_files.png",
              "style": {
                "width": "40px",
                "height": "40px",
                "color": "#3498db"
              },
              "description": "蓝色的Windows窗口图标，表示系统文件"
            },
            {
              "type": "Text",
              "text": "系统文件",
              "style": {
                "fontSize": "16px",
                "color": "#000000",
                "textAlign": "center"
              }
            },
            {
              "type": "ProgressBar",
              "percentage": 50,
              "style": {
                "height": "5px",
                "backgroundColor": "#e0e0e0",
                "borderRadius": "5px",
                "width": "100%"
              },
              "progressStyle": {
                "backgroundColor": "#3498db",
                "borderRadius": "5px"
              }
            },
            {
              "type": "Text",
              "text": "可清理：12.8GB",
              "style": {
                "fontSize": "14px",
                "color": "#888888",
                "textAlign": "center"
              }
            }
          ]
        },
        {
          "type": "FileCategoryItem",
          "icon": "download_files",
          "title": "下载文件",
          "clearableSize": "8.6GB",
          "style": {
            "width": "calc(50% - 10px)",
            "height": "100px",
            "backgroundColor": "#ffffff",
            "borderRadius": "10px",
            "padding": "10px",
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "marginLeft": "10px",
            "marginRight": "10px"
          },
          "children": [
            {
              "type": "Icon",
              "src": "download_files.png",
              "style": {
                "width": "40px",
                "height": "40px",
                "color": "#3498db"
              },
              "description": "蓝色的向下箭头图标，表示下载文件"
            },
            {
              "type": "Text",
              "text": "下载文件",
              "style": {
                "fontSize": "16px",
                "color": "#000000",
                "textAlign": "center"
              }
            },
            {
              "type": "ProgressBar",
              "percentage": 40,
              "style": {
                "height": "5px",
                "backgroundColor": "#e0e0e0",
                "borderRadius": "5px",
                "width": "100%"
              },
              "progressStyle": {
                "backgroundColor": "#3498db",
                "borderRadius": "5px"
              }
            },
            {
              "type": "Text",
              "text": "可清理：8.6GB",
              "style": {
                "fontSize": "14px",
                "color": "#888888",
                "textAlign": "center"
              }
            }
          ]
        },
        // 其他 FileCategoryItem 类似...
      ]
    },
    {
      "type": "ActionButtons",
      "style": {
        "marginTop": "20px",
        "display": "flex",
        "justifyContent": "space-around",
        "paddingLeft": "10px",
        "paddingRight": "10px"
      },
      "children": [
        {
          "type": "Button",
          "text": "分析",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#3498db",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        },
        {
          "type": "Button",
          "text": "清理",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#2ecc71",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        },
        {
          "type": "Button",
          "text": "定时",
          "style": {
            "width": "100px",
            "height": "40px",
            "backgroundColor": "#95a5a6",
            "color": "#ffffff",
            "fontSize": "16px",
            "borderRadius": "5px"
          }
        }
      ]
    },
    {
      "type": "NavigationBar",
      "style": {
        "position": "fixed",
        "bottom": "0",
        "left": "0",
        "right": "0",
        "height": "60px",
        "backgroundColor": "#ffffff",
        "borderTop": "1px solid #e0e0e0",
        "display": "flex",
        "justifyContent": "space-around",
        "alignItems": "center"
      },
      "children": [
        {
          "type": "NavItem",
          "icon": "overview",
          "text": "概览",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "overview.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              },
              "description": "蓝色的房屋图标，表示概览页面"
            },
            {
              "type": "Text",
              "text": "概览",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "tools",
          "text": "工具",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "tools.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              },
              "description": "蓝色的扳手图标，表示工具页面"
            },
            {
              "type": "Text",
              "text": "工具",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "history",
          "text": "历史",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "history.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              },
              "description": "蓝色的时钟图标，表示历史页面"
            },
            {
              "type": "Text",
              "text": "历史",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        },
        {
          "type": "NavItem",
          "icon": "settings",
          "text": "设置",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center"
          },
          "children": [
            {
              "type": "Icon",
              "src": "settings.png",
              "style": {
                "width": "24px",
                "height": "24px",
                "color": "#3498db"
              },
              "description": "蓝色的齿轮图标，表示设置页面"
            },
            {
              "type": "Text",
              "text": "设置",
              "style": {
                "fontSize": "12px",
                "color": "#000000",
                "marginTop": "5px"
              }
            }
          ]
        }
      ]
    }
  ]
}

接下来丢给deepseek 去构建代码：

根据以下json结构用前端代码实现界面,如果遇到type为Icon时，没有图片时，根据description的内容，自动选择符合描述的字体icon代替：
{
    "type": "Screen",
    "children": [
      {
        "type": "StatusBar",
        "style": {
          "backgroundColor": "#FFFFFF"
        },
        "children": [
          {
            "type": "Time",
            "text": "9:41",
            "style": {
              "fontSize": "16px",
              "color": "#000000",
              "marginLeft": "10px"
            }
          },
          {
            "type": "NetworkIcon",
            "style": {
              "width": "20px",
              "height": "20px",
              "marginLeft": "auto",
              "marginRight": "10px",
              "color": "#000000"
            },
            "description": "简洁的网络信号图标，表示当前的网络连接状态"
          },
          {
            "type": "BatteryIcon",
            "style": {
              "width": "20px",
              "height": "20px",
              "marginRight": "10px",
              "color": "#000000"
            },
            "description": "简洁的电池电量图标，表示当前的电池电量"
          }
        ]
      },
      {
        "type": "Header",
        "style": {
          "padding": "10px",
          "backgroundColor": "#FFFFFF"
        },
        "children": [
          {
            "type": "Title",
            "text": "磁盘清理专家",
            "style": {
              "fontSize": "20px",
              "color": "#000000",
              "fontWeight": "bold",
              "marginLeft": "10px"
            }
          },
          {
            "type": "SettingsIcon",
            "style": {
              "width": "24px",
              "height": "24px",
              "marginLeft": "auto",
              "marginRight": "10px",
              "color": "#000000"
            },
            "description": "齿轮形状的图标，表示进入设置页面的功能"
          }
        ]
      },
      {
        "type": "DiskUsageWidget",
        "style": {
          "padding": "20px",
          "backgroundColor": "#F5F5F5",
          "borderRadius": "10px",
          "marginTop": "10px"
        },
        "children": [
          {
            "type": "ProgressCircle",
            "percentage": 75,
            "style": {
              "width": "100px",
              "height": "100px",
              "strokeWidth": "10px",
              "strokeColor": "#3498db",
              "fillColor": "#ffffff",
              "fontSize": "24px",
              "color": "#3498db",
              "marginLeft": "10px"
            },
            "text": "已使用"
          },
          {
            "type": "Text",
            "text": "总容量：512GB\n已用：384GB\n可用：128GB",
            "style": {
              "fontSize": "16px",
              "color": "#000000",
              "marginLeft": "20px"
            }
          },
          {
            "type": "Button",
            "text": "快速扫描",
            "style": {
              "width": "150px",
              "height": "40px",
              "backgroundColor": "#3498db",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px",
              "marginTop": "10px",
              "marginLeft": "20px"
            }
          }
        ]
      },
      {
        "type": "FileCategoryList",
        "style": {
          "marginTop": "20px",
          "display": "flex",
          "flexWrap": "wrap",
          "justifyContent": "space-between"
        },
        "children": [
          {
            "type": "FileCategoryItem",
            "icon": "system_files",
            "title": "系统文件",
            "clearableSize": "12.8GB",
            "style": {
              "width": "calc(50% - 10px)",
              "height": "100px",
              "backgroundColor": "#ffffff",
              "borderRadius": "10px",
              "padding": "10px",
              "display": "flex",
              "flexDirection": "column",
              "justifyContent": "space-between",
              "marginLeft": "10px",
              "marginRight": "10px"
            },
            "children": [
              {
                "type": "Icon",
                "src": "system_files.png",
                "style": {
                  "width": "40px",
                  "height": "40px",
                  "color": "#3498db"
                },
                "description": "蓝色的Windows窗口图标，表示系统文件"
              },
              {
                "type": "Text",
                "text": "系统文件",
                "style": {
                  "fontSize": "16px",
                  "color": "#000000",
                  "textAlign": "center"
                }
              },
              {
                "type": "ProgressBar",
                "percentage": 50,
                "style": {
                  "height": "5px",
                  "backgroundColor": "#e0e0e0",
                  "borderRadius": "5px",
                  "width": "100%"
                },
                "progressStyle": {
                  "backgroundColor": "#3498db",
                  "borderRadius": "5px"
                }
              },
              {
                "type": "Text",
                "text": "可清理：12.8GB",
                "style": {
                  "fontSize": "14px",
                  "color": "#888888",
                  "textAlign": "center"
                }
              }
            ]
          },
          {
            "type": "FileCategoryItem",
            "icon": "download_files",
            "title": "下载文件",
            "clearableSize": "8.6GB",
            "style": {
              "width": "calc(50% - 10px)",
              "height": "100px",
              "backgroundColor": "#ffffff",
              "borderRadius": "10px",
              "padding": "10px",
              "display": "flex",
              "flexDirection": "column",
              "justifyContent": "space-between",
              "marginLeft": "10px",
              "marginRight": "10px"
            },
            "children": [
              {
                "type": "Icon",
                "src": "download_files.png",
                "style": {
                  "width": "40px",
                  "height": "40px",
                  "color": "#3498db"
                },
                "description": "蓝色的向下箭头图标，表示下载文件"
              },
              {
                "type": "Text",
                "text": "下载文件",
                "style": {
                  "fontSize": "16px",
                  "color": "#000000",
                  "textAlign": "center"
                }
              },
              {
                "type": "ProgressBar",
                "percentage": 40,
                "style": {
                  "height": "5px",
                  "backgroundColor": "#e0e0e0",
                  "borderRadius": "5px",
                  "width": "100%"
                },
                "progressStyle": {
                  "backgroundColor": "#3498db",
                  "borderRadius": "5px"
                }
              },
              {
                "type": "Text",
                "text": "可清理：8.6GB",
                "style": {
                  "fontSize": "14px",
                  "color": "#888888",
                  "textAlign": "center"
                }
              }
            ]
          },
          // 其他 FileCategoryItem 类似...
        ]
      },
      {
        "type": "ActionButtons",
        "style": {
          "marginTop": "20px",
          "display": "flex",
          "justifyContent": "space-around",
          "paddingLeft": "10px",
          "paddingRight": "10px"
        },
        "children": [
          {
            "type": "Button",
            "text": "分析",
            "style": {
              "width": "100px",
              "height": "40px",
              "backgroundColor": "#3498db",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px"
            }
          },
          {
            "type": "Button",
            "text": "清理",
            "style": {
              "width": "100px",
              "height": "40px",
              "backgroundColor": "#2ecc71",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px"
            }
          },
          {
            "type": "Button",
            "text": "定时",
            "style": {
              "width": "100px",
              "height": "40px",
              "backgroundColor": "#95a5a6",
              "color": "#ffffff",
              "fontSize": "16px",
              "borderRadius": "5px"
            }
          }
        ]
      },
      {
        "type": "NavigationBar",
        "style": {
          "position": "fixed",
          "bottom": "0",
          "left": "0",
          "right": "0",
          "height": "60px",
          "backgroundColor": "#ffffff",
          "borderTop": "1px solid #e0e0e0",
          "display": "flex",
          "justifyContent": "space-around",
          "alignItems": "center"
        },
        "children": [
          {
            "type": "NavItem",
            "icon": "overview",
            "text": "概览",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "overview.png",
                "style": {
                  "width": "24px",
                  "height": "24px",
                  "color": "#3498db"
                },
                "description": "蓝色的房屋图标，表示概览页面"
              },
              {
                "type": "Text",
                "text": "概览",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000",
                  "marginTop": "5px"
                }
              }
            ]
          },
          {
            "type": "NavItem",
            "icon": "tools",
            "text": "工具",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "tools.png",
                "style": {
                  "width": "24px",
                  "height": "24px",
                  "color": "#3498db"
                },
                "description": "蓝色的扳手图标，表示工具页面"
              },
              {
                "type": "Text",
                "text": "工具",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000",
                  "marginTop": "5px"
                }
              }
            ]
          },
          {
            "type": "NavItem",
            "icon": "history",
            "text": "历史",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "history.png",
                "style": {
                  "width": "24px",
                  "height": "24px",
                  "color": "#3498db"
                },
                "description": "蓝色的时钟图标，表示历史页面"
              },
              {
                "type": "Text",
                "text": "历史",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000",
                  "marginTop": "5px"
                }
              }
            ]
          },
          {
            "type": "NavItem",
            "icon": "settings",
            "text": "设置",
            "style": {
              "display": "flex",
              "flexDirection": "column",
              "alignItems": "center"
            },
            "children": [
              {
                "type": "Icon",
                "src": "settings.png",
                "style": {
                  "width": "24px",
                  "height": "24px",
                  "color": "#3498db"
                },
                "description": "蓝色的齿轮图标，表示设置页面"
              },
              {
                "type": "Text",
                "text": "设置",
                "style": {
                  "fontSize": "12px",
                  "color": "#000000",
                  "marginTop": "5px"
                }
              }
            ]
          }
        ]
      }
    ]
  }

重复之前的操作将代码拷贝下来，运行。效果如下：
演示图片

思考：
1 那些通过图片生成代码的agent大概率就是这样的过程？例如提供详细的提示词：

你是一名顶级的ui设计大师，请对提供的图片，以专业的角度，从布局、色彩搭配、图形设计、功能信息展示等方面详细的给你提供的图片。最终的结果以控件树json格式给出，不能有其他。
为了确保开发人员能够准确地实现界面设计，要求：
1 在JSON结构中提供更详细的信息。
2 包括控件的具体属性、样式和布局等
3 文本控件，需要指出具体的字体、字号(px)、样式（倾斜、加粗其他）信息。
4 图标控件，需要单独的字段，用以描述图标的风格、表示功能等辅助图标选择的信息

然后再创建一个编码agent,提示词可以为：

根据以下json结构用前端代码实现界面,如果遇到图标组件，没有图片时，根据description的内容，自动选择符合描述的字体icon代替：

2 ui设计垂直领域的ai模型（妙多的ai）是不是就是通过提供 对界面的详细描述以及匹配的代码（不一定是前端代码，也有可能是设计软件支持的控件树结构描述代码或其他）进行训练。例如:

这张图展示了一个磁盘清理应用的界面，整体设计简洁明了，功能分区清晰:
色彩搭配：使用了蓝色和绿色作为主色调，给人一种清新、科技感的感觉。蓝色用于表示进度和重要信息，绿色则用于强调操作按钮，视觉上非常直观。
布局合理：界面分为顶部的状态栏、中间的功能区域和底部的导航栏，层次分明，用户可以快速找到所需功能。
图标设计：每个功能模块都配有相应的图标，如系统文件、下载文件等，图标简洁且易于理解，提升了用户体验。
信息展示清晰：磁盘使用情况以圆形进度条的形式展示，百分比和具体数值一目了然，用户可以快速了解磁盘的使用状况。
图片详细描述
顶部状态栏
时间显示：位于左上角，显示时间为“9:41”，字体为白色，大小适中。
网络信号图标：位于右上角，表示当前的网络连接状态，风格简洁，颜色为白色。
电池电量图标：位于右上角，紧挨着网络信号图标，表示当前的电池电量，风格简洁，颜色为白色。
标题栏
应用标题：位于屏幕顶部中央偏左位置，显示为“磁盘清理专家”，字体较大，颜色为深蓝色，背景为白色。
设置图标：位于标题右侧，是一个齿轮形状的图标，表示进入设置页面的功能，风格简洁，颜色为深蓝色。
磁盘使用情况展示区域
圆形进度条：位于该区域左侧，显示磁盘使用百分比（75%），已使用的部分用深蓝色填充，未使用的部分为空白。文字“已使用”位于圆环内，字体为白色。
磁盘容量信息：位于该区域右侧，显示总容量、已用容量和可用容量的具体数值（总容量：512GB，已用：384GB，可用：128GB），字体为黑色，大小适中。
快速扫描按钮：位于该区域下方，是一个蓝色矩形按钮，上面有白色文字“快速扫描”，点击后可进行磁盘扫描操作。
文件分类清理区域
系统文件：
图标：一个蓝色的Windows窗口图标，表示系统文件，风格简洁，颜色为蓝色。
标题：显示为“系统文件”，字体为黑色，大小适中。
可清理空间：显示为“可清理：12.8GB”，字体为灰色，大小较小。
进度条：表示系统文件占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
下载文件：
图标：一个蓝色的向下箭头图标，表示下载文件，风格简洁，颜色为蓝色。
标题：显示为“下载文件”，字体为黑色，大小适中。
可清理空间：显示为“可清理：8.6GB”，字体为灰色，大小较小。
进度条：表示下载文件占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
临时文件：
图标：一个蓝色的时钟图标，表示临时文件，风格简洁，颜色为蓝色。
标题：显示为“临时文件”，字体为黑色，大小适中。
可清理空间：显示为“可清理：5.2GB”，字体为灰色，大小较小。
进度条：表示临时文件占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
回收站：
图标：一个蓝色的垃圾桶图标，表示回收站，风格简洁，颜色为蓝色。
标题：显示为“回收站”，字体为黑色，大小适中。
可清理空间：显示为“可清理：2.1GB”，字体为灰色，大小较小。
进度条：表示回收站占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
浏览器缓存：
图标：一个蓝色的旋转箭头图标，表示浏览器缓存，风格简洁，颜色为蓝色。
标题：显示为“浏览器缓存”，字体为黑色，大小适中。
可清理空间：显示为“可清理：3.7GB”，字体为灰色，大小较小。
进度条：表示浏览器缓存占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
Windows更新：
图标：一个蓝色的文件夹图标，表示Windows更新，风格简洁，颜色为蓝色。
标题：显示为“Windows更新”，字体为黑色，大小适中。
可清理空间：显示为“可清理：6.4GB”，字体为灰色，大小较小。
进度条：表示Windows更新占用的空间比例，蓝色填充部分表示已占用空间，灰色背景表示总空间。
功能按钮区域
分析按钮：位于该区域左侧，是一个蓝色矩形按钮，上面有白色文字“分析”，点击后可进行磁盘分析操作。
清理按钮：位于该区域中间，是一个绿色矩形按钮，上面有白色文字“清理”，点击后可进行磁盘清理操作。
定时按钮：位于该区域右侧，是一个灰色矩形按钮，上面有白色文字“定时”，点击后可进行定时清理设置操作。
底部导航栏
概览标签：
图标：一个蓝色的房屋图标，表示概览页面，风格简洁，颜色为蓝色。
文字：显示为“概览”，字体为黑色，大小适中。
工具标签：
图标：一个蓝色的扳手图标，表示工具页面，风格简洁，颜色为蓝色。
文字：显示为“工具”，字体为黑色，大小适中。
历史标签：
图标：一个蓝色的时钟图标，表示历史页面，风格简洁，颜色为蓝色。
文字：显示为“历史”，字体为黑色，大小适中。
设置标签：
图标：一个蓝色的齿轮图标，表示设置页面，风格简洁，颜色为蓝色。
文字：显示为“设置”，字体为黑色，大小适中。
...
（总之，有布局、位置、大小、颜色、字体、图标以及功能说明信息）

如果真的是这样的方式训练，那么海量的数据源可以通过人工描述、合成数据（目前在探索，使用什么样的方式合成高质量的数据）。

总结

以上是对利用ai从事从图片到前端代码的实现过程探索。根据探索的结果，可为实现图片到代码agent的实现、训练ui设计垂直领域提供些许参考作用。


http://www.kler.cn/a/552379.html

相关文章：

  • 无人机飞手培训机构招生宣传技术详解
  • langchain本地知识库问答机器人集成本地知识库
  • vue前端可视化大屏页面适配方案
  • torch使用心得
  • pyqt 调用颜色选择器
  • 蚁剑（AutSword）的下载安装与报错解决
  • 【git】通过 rebase 合并分支
  • Python高级语法之urllib
  • MAVSDK - Custom Mavlink处理
  • 【笔记】linux离线部署Ollama+Deepseek r1+open webui
  • 本地 Ollama 部署 Deepseek R1 并使用 Spring AI Alibaba 构建 Chat 应用示例
  • STM32 HAL库 UART串口发送数据实验
  • 华为交换机trunk简介配置
  • POI优化Excel录入
  • Node.js 中 morgan 依赖详解
  • 使用iOS个人声音与SoVITS训练个人AI语音（10分钟快速上手）
  • Linux上部署Java项目-通过sh脚本启动
  • Day01 【苍穹外卖】环境搭建与前后端联调
  • MySQL 面试系列：MySQL 事务的面试题总结
  • 芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案