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

AI大模型应用之按照设计稿还原代码

java 2025/5/5 1:11:05

按照设计稿还原代码

目前的AI大模型还原设计稿的能力有限，但是一些模块完全可以使用AI来还原。

AI大模型应用学习：

AI教程

还原一个注册页面的设计稿

第一步: 准备设计稿

第二步: 输入Prompt还原设计稿

用html css代码还原上面设计稿，要求完全按照设计稿的设计进行还原，还原后的效果和设计稿一样

已经很厉害了，你也可以继续使用Prompt提示词修改上面内容

把上面代码中的label去掉，然后重新输出，这样会更符合设计稿

还原一个List的设计稿

输入Prompt:

用html css代码还原上图的列表，要求列表中的文字和图片中的文字一样

<!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>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
}
/* 列表样式 */
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 5px 0;
border-bottom: 1px solid #ccc;
}
/* 图片样式（此处仅为示例，您需要根据实际图片调整） */
.list-image {
display: inline-block;
width: 50px; /* 假设图片宽度为50px */
height: 50px; /* 假设图片高度为50px */
margin-right: 10px; /* 图片与文本之间的间距 */
background-size: cover; /* 使得图片能够完全覆盖容器 */
/* 您需要为每个列表项提供实际的图片路径 */
/* 例如: background-image: url('path_to_your_image.png'); */
}
</style>
</head>
<body>
<ul>
<!-- 注意：以下列表项中未包含图片，您可以在li中添加img标签或使用背景图片 -->
<li>
<span class="list-image" style="background-image:
url('path_to_your_image1.png');"></span>
北京市一级社会体育指导员培训完成294人参加...
</li>
<li>
<span class="list-image" style="background-image:
url('path_to_your_image2.png');"></span>
北京重点站区开展风险隐患“大排查大起底大管控”
</li>
<li>
<span class="list-image" style="background-image:
url('path_to_your_image3.png');"></span>
石景山区广宁街道开展防汁迁移演练
</li>
<li>
<span class="list-image" style="background-image:
url('path_to_your_image4.png');"></span>
西城区金融街文化艺术体验中心挂牌
</li>
<li>
<span class="list-image" style="background-image:
url('path_to_your_image5.png');"></span>
即将完工通州这座遗址将展露真容
</li>
<li>
<span class="list-image" style="background-image:
url('path_to_your_image6.png');"></span>
全长21.3公里，共设5站！北京R4线一期北段...
</li>
<li>
<span class="list-image" style="background-image:
url('path_to_your_image7.png');"></span>
香港学子“组团”来北京海淀实习，聚焦这两个领域
</li>
</ul>
</body>
</html>