【Axure】结合deepseek生成的代码、内联框架绘制弹窗 | Axure嵌入html代码
本文介绍了在Axure原型设计中嵌入HTML代码的完整流程:1)通过AI提取用户需求并设计网页功能;2)将生成的HTML代码保存为UTF-8格式文件;3)在Axure中设置内联框架并链接HTML文件;4)调整框架样式和交互;5)最终生成可展示的原型。重点说明了如何解决内联框架白边问题,以及将HTML弹窗转换为百分比宽度以适配框架。该方案可实现复杂交互效果的原型展示,同时保持开发效率。
一、使用AI提取需求
给deepseek举个例子,让他提取需求,发送如下内容:
用户使用场景如下,根据该例子梳理需求,用一段话提取出具体的需求,要求通俗易懂、具有普遍性,有逻辑:……
二、编写html代码
根据AI提取的需求进行修改,让其根据需求设计网页,发送如下内容:
根据提取的需求,绘制能够实现该需求的网页
这时候网页的设计就有了思路,根据他提供的设计,多次进行修改,可以增加/删除功能、修改细节,如果不知道要修改位置的专业名称,可以再开一个对话,询问该功能对应的名称/如何形容。
修改完成后,让其生成可以适用于Axure的独立html文件:
生成我可以直接使用的适配AURE内联框架的独立html文件
若内联框架出现白边,可将生成的html需要将弹窗宽度改为 百分比,使其自动填满内联框架:
重新修改代码,使得弹窗可以自动填满内联框架,预览时不出现白边
Axure嵌入html代码
-
保存html文件:复制AI生成的完整代码,粘贴到文本编辑器(记事本/VSCode),保存为 report-config.html(编码必须为 UTF-8,命名可以自定义),将 report-config.html 放在 .rp 文件同目录下
-
在Axure中拖入内联框架:
元件库 → 常用 → 内联框架
拖入画布,设置尺寸:宽 1000px,高 650px
右键内联框架 → 设置内联框架目标 → 链接到URL
输入:file:///E:/rptest/report-config.html -
设置样式:
如果是弹窗,可以将内联框架转换为动态面板,方便设置固定位置。
隐藏内联框架/动态面板,设置显示交互 -
生成原型:
点击 发布 → 生成HTML文件
打开生成的 index.html,点击按钮即可看到内嵌html的原型啦
更多推荐



所有评论(0)