为了让 DeepSeek 生成符合预期的 HTML 互动代码，您的需求需要遵循以下结构化框架：
1. 明确互动类型
用一句话定义核心交互目标：
"我需要一个通过______触发______的互动效果，具体表现是______"
▸ 示例：
"我需要一个通过点击按钮触发动画的互动效果，具体表现是图片旋转后显示隐藏文本"
2. 关键技术栈说明
避免歧义的必备信息：
- [ ] 必须使用原生 JavaScript / 允许使用 jQuery/Vue/React 等框架 - [ ] 是否需要后端交互（如提交数据到服务器） - [ ] 是否依赖第三方动画库（如 GSAP/Anime.js）
3. 交互细节规格书
用表格明确交互逻辑（关键！）：
| 触发条件 | 目标元素 | 预期行为 | 终止条件 |
|---|---|---|---|
| 鼠标悬停 | #menu-item | 下拉菜单滑动展开 | 鼠标移出 |
| 输入字符数 >5 | .submit-btn | 按钮变为绿色可点击状态 | 字符数 ≤5 时恢复 |
| 滚动位置 ≥200px | .back-to-top | 显示浮动按钮 | 滚动位置 <200px |
4. 样式硬性要求
必须标注的样式参数：
- 主容器尺寸：________ - 关键颜色值：正常状态 #______ / 悬停状态 #______ - 过渡动画参数：duration ______s / easing-function ______ - 响应式断点要求：在 ______px 宽度时改为______
5. 错误处理规范
明确异常状态处理逻辑：
当______时，应该______（示例：当用户未填写必填字段时，用红色闪烁边框提示并禁用提交按钮）
高质量需求示例
我需要一个实时密码强度检测交互：- 用户输入密码时即时检测- 显示强度等级条（弱/中/强） - 原生 JavaScript 实现 - 强度规则：弱（<8字符）、中（8-12字符含数字）、强（>12字符含数字+特殊符号） - 视觉要求：强度条宽度渐变过渡，弱-红色，中-黄色，强-绿色 - 错误状态：输入框在提交时若为弱密码需抖动提示
应避免的模糊表述
- "做个动态效果" + "需要点击图片后触发从左向右滑入的说明文字，滑动持续时间0.5秒，使用ease-out曲线" - "要好看的样式" + "主色使用#3AAFA9，辅助色#FEFFFF，按钮需有1px #17252A边框，圆角8px"
通过这种结构化需求描述，可使代码生成准确率提升80%以上。关键是要明确界定：触发机制 → 目标对象 → 行为变化 → 终止条件的完整逻辑链，并提供可量化的样式参数。
