Muse Wonder Full可将UI设计稿一键生成可交互网页。需Pro订阅，上传设计图后手动标注三类区域，再用自然语言描述交互逻辑，支持导出HTML或React组件，并提供可视化编辑与迭代功能。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想用Muse Wonder Full把一张UI设计稿（比如Figma截图、Sketch导出图或手绘线稿）直接变成可交互的网页，不用写代码、不手动切图、不反复调试样式。
确认接入权限与入口
打开 Muse Code 应用或网页端，登录你已订阅 【Muse Code Pro】 的账号——只有该订阅等级才解锁 Muse Wonder Full 的完整能力，免费版和基础订阅仅能调用 Muse Wonder 模型，无法处理带逻辑跳转、表单验证、响应式断点等复杂页面需求。
在左侧导航栏点击「Artifact Builder」→ 选择「Web Page from Design」模板。
上传并标注设计稿
拖入一张清晰的设计图（PNG/JPEG/PDF，建议分辨率 ≥1200px 宽，文字区域无模糊）。
上传后系统自动进入标注界面。这时必须手动圈出三类关键区域：【可点击按钮】、【需输入内容的文本框】、【会动态更新的数据卡片】——漏标任意一类，生成的页面将缺失交互逻辑，只保留静态渲染。
标注完成后点击右上角「Confirm & Describe」，在弹出框中用自然语言补充一句核心指令，例如：“顶部导航栏要固定定位，点击‘我的订单’跳转到 /orders 页面，搜索框回车后调用 mock API 返回 JSON 列表”。
配置页面行为与输出格式
方法一：生成可运行的本地 HTML 文件
在「Output Format」下拉菜单中选「Standalone HTML + JS」→ 勾选「Include mock API endpoints」→ 点击「Generate」。约12–18秒后下载 ZIP 包，解压后双击 index.html 即可本地预览，所有按钮跳转、表单提交、列表渲染均真实可用。
方法二：输出 React 组件代码
选择「React Component (TSX)」→ 开启「Type-safe props inference」→ 系统会基于设计稿中的字体大小、间距、色值自动生成 CSS-in-JS 样式，并为每个可交互元素生成带 TypeScript 接口的 props 定义。这一步生成的代码可直接粘贴进现有 Vite/Next.js 项目 src/components/ 目录下使用。
注意：若设计稿含图标字体（如 IconFont）或自定义 SVG 图标，Muse Wonder Full 会自动识别并内联为 <svg> 元素，但不会嵌入第三方 icon font CDN 链接——你需要手动补全 <link> 标签或替换为本地 SVG 文件路径。
修正与迭代生成
第一步：在生成结果页点击「Edit in Canvas」，进入可视化编辑器。
第二步：用鼠标悬停任意组件，出现「?」图标 → 点击后弹出上下文指令框，输入类似“把购物车图标换成红色描边”“让轮播图自动播放间隔3秒”等短句，模型实时重绘对应模块 DOM 结构与 JS 行为。
第三步：全部调整完成后，点击右上角「Export Final Code」→ 选择目标框架（React/Vue/Svelte）→ 勾选「Preserve design-layer mapping」→ 下载。
