aionclaw可将png/jpg/pdf设计稿一键转为可运行html页面。需确保文件格式合规、分辨率≥72dpi、文字清晰，figma/sketch源文件须导出为带图层信息的pdf；上传后经ocr与布局分析识别，支持手动校正中文乱码；可选响应式或pc端输出，配置按钮点击、表单提交等交互；最终生成含html、css及图片的完整本地文件夹。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用AionClaw把设计稿一键转成可运行页面，省去切图、写HTML/CSS、调样式等重复劳动，适合运营、产品经理、小团队快速验证原型或上线轻量活动页。
准备设计稿文件
确保设计稿是PNG、JPG或PDF格式，分辨率不低于72dpi，文字区域清晰无模糊；如果是Figma/Sketch源文件，需先导出为带图层信息的PDF（勾选“保留文本为可编辑对象”），否则AI无法识别按钮、标题等语义结构。
将文件保存在本地桌面或文档文件夹中，【不要放在iCloud、OneDrive、百度网盘同步目录下】，避免AionClaw读取时因文件锁或路径重定向失败。
启动AionClaw并进入「自动化」模块
打开客户端后，点击左侧导航栏第四个图标「自动化」→ 点击顶部「新建流程」→ 在模板分类中选择「网页生成」→ 点击「从设计稿生成HTML」卡片。
这一步会自动加载Hermes Agent专用视觉理解模型，首次使用需等待约8秒完成轻量级模型热启，期间界面右下角显示蓝色进度条，不可关闭窗口。
上传并解析设计稿
方法一：拖拽上传
直接将准备好的设计稿文件拖入虚线框内，松手即触发OCR+布局分析双通道识别。
方法二：点击上传按钮
弹出系统原生文件选择器，支持多选（最多3张同尺寸设计稿，用于生成首页+列表页+详情页联动结构）。
【关键提示】若设计稿含中文按钮但识别为乱码，请立即暂停流程，在弹出的「文本校正面板」中手动双击错位字段并输入正确文案——此步跳过会导致生成的HTML中button标签value值为空，后续无法点击交互。
配置页面行为与输出选项
第一步：选择响应式策略
勾选「适配移动端」则自动生成media query断点；不勾选则输出固定宽度PC端页面（默认1200px容器）。
第二步：设置交互能力
开启「按钮可点击」后，AI会为所有识别出的按钮区域绑定空click事件并预留JS钩子；开启「表单可提交」则自动添加form标签与基础校验逻辑（邮箱/手机号格式）。
第三步：指定输出位置
点击「浏览」选择本地文件夹，AionClaw将生成完整文件夹：含index.html、style.css、images/子目录；【该路径一旦选定无法在当前流程中修改，需删除已建流程重来】。
执行生成并获取结果
点击右下角绿色「开始执行」按钮→ 等待状态栏显示「✅ 页面生成完成」→ 点击右侧「打开文件夹」即可看到生成的index.html文件。
双击index.html用系统默认浏览器打开，验证布局还原度与基础交互；如需进一步开发，可将整个文件夹拖入VS Code等编辑器继续调整。
