Lovart可零代码生成响应式HTML原型：注册后配置Brand Kit，输入自然语言需求生成网页，支持截图复刻风格、分层编辑与实时AI图替换，导出即用HTML包。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Lovart生成可交互的网页设计稿，无需写代码、不依赖Figma或Sketch，直接输入需求就能出带结构化布局和响应式逻辑的HTML原型。
准备账号与基础设置
打开国内版官网 xingliu.art，微信扫码注册；注册后立即进入工作台，右上角点击头像→「设置」→确认语言为中文，界面自动切换为中文操作流。
首次使用前，务必在左侧导航栏点击「Brand Kit」→上传品牌主色值（如#2563EB）、标准字体（如“阿里巴巴普惠体 Bold”）和LOGO文件；【未配置Brand Kit会导致后续网页元素配色和字体频繁错乱】。
一句话生成基础网页
在画布中央输入框中，直接键入类似“企业官网首页，含顶部导航栏、轮播图、三栏服务介绍、客户评价区、底部联系方式，蓝白主色调，适配手机端”这样的自然语句。
点击「生成」后，Lovart不会立刻出图，而是先弹出文字版《设计说明书》，列出页面区块划分逻辑、断点尺寸建议、字体层级关系——这一步跳过等于放弃可控性，必须看完再点「确认生成」。
生成完成后，右侧结果区会出现三张输出：① 静态预览图 ② 可编辑分层画布 ③ 【HTML源码按钮（关键！）】，点击即可复制完整可运行HTML代码。
用参考图复刻网页风格
方法一：拖拽一张你欣赏的网页截图（如Apple官网某页）到画布，松手后系统自动识别栅格结构、留白比例与色彩分布。
方法二：在输入框追加指令：“按此图风格，把文案替换成‘AI设计工具星流官网：支持一键导出HTML、Mockup样机、图文分离编辑’”。
注意：若原图含复杂动效（如悬停菜单），Lovart默认只还原静态结构；如需交互动效，必须额外在提示词中注明“添加CSS hover效果，鼠标悬停导航项时背景色变深”。
修改网页细节的两种路径
第一步：在分层画布中双击任意文字块，直接编辑内容，字号/颜色/行高会继承Brand Kit设定，无需手动调。
第二步：若要调整模块位置，用鼠标框选整个「服务介绍区」→右键→「转换为Flex容器」→拖动子项卡片重新排序；【切勿用自由移动方式拉扯，否则响应式断点会失效】。
第三步：对图片区域做替换，按住Ctrl（Win）或Cmd（Mac）键点击图中产品图位置→弹出蓝点→输入“换成笔记本电脑高清渲染图，带金属质感和阴影”，画面即实时更新，其他元素完全不动。
导出与交付
点击右上角「导出」→选择「HTML+CSS包」→下载ZIP压缩包；解压后打开index.html即可在浏览器查看真实响应式效果。
如需嵌入现有网站，直接复制ZIP内dist文件夹下的所有文件到你的服务器对应路径，引用index.html中的和<script>标签即可生效。</script>
