必须更新codex至26.527+并安装product design插件，重启后导入含index.html的项目文件夹，设为默认权限，用自然语言描述交互需求，codex将自动生成并注入交互逻辑，预览时通过本地服务器实时响应。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让一个已经生成的静态HTML页面立刻具备按钮点击、表单提交、滑块拖动等真实交互能力，而不是靠手动写JavaScript逐行调试。
确认Codex版本与插件状态
打开Codex Desktop，点击左下角头像 → 设置 → 检查当前版本号是否 ≥ 26.527；低于此版本将无法加载Product Design插件，【必须更新到26.527或更高】。
进入Settings → Plugins → 找到Product Design → 点击Install。安装过程约8～12秒，期间界面无反馈属正常现象。
安装完成后，关闭设置页，重启Codex Desktop——这一步不可跳过，否则插件虽显示已启用，但实际调用会报“no design context”错误。
把静态页面导入Codex工作区
在左侧导航栏点击「项目」→ 选择本地存放该HTML文件的文件夹（例如：/Users/you/project/static-page）。
确保该文件夹内至少包含index.html和配套的CSS/JS资源；如果引用了外部CDN链接，Codex可能无法离线解析其行为逻辑。
回到主对话框，底部权限模式切换为「默认权限」——只有这样，Codex才能读取并修改你工作区内的文件。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
用自然语言描述交互需求
方法一：直接输入一句完整指令，例如：“给index.html里的‘立即预约’按钮添加点击弹窗，显示‘已提交，客服将在30分钟内联系您’；同时禁用按钮并变灰，3秒后恢复。”
方法二：如果你已有Figma原稿，先复制该frame链接，再输入：“对照这个Figma frame和当前页面代码，找出还原不一致的地方，重点补全顶部导航栏下拉菜单、服务卡片悬停高亮、时间滑块实时反馈。”
注意：不要拆成多条消息发送，也不要加“请”“麻烦”等礼貌词；Codex会识别为交互增强任务，并自动加载当前工作区上下文。
执行交互注入并预览效果
第一步：Codex收到指令后，会先分析DOM结构，定位目标元素，生成patch代码片段。
第二步：它会在工作区内新建一个js/interactions.js文件，把事件绑定逻辑写进去，并自动修改index.html的<script>标签引入路径。</script>
第三步：右侧多功能区出现“Preview in Browser”按钮，点击即可在系统默认浏览器中打开本地托管的HTML页面——该页面所有按钮、表单、滑块均真实响应，无需额外配置服务器。
页面URL形如 http://localhost:5001/xxx-xxxx，每次生成唯一端口；关闭Codex后该地址立即失效，但页面源码已自动保存至项目文件夹下的design/prototype/子目录。
