（广告）AI生成互动网页，找马叔：微信：MASL76

为了让 DeepSeek 生成符合预期的 HTML 互动代码，您的需求需要遵循以下结构化框架：

1. 明确互动类型

用一句话定义核心交互目标：

"我需要一个通过______触发______的互动效果，具体表现是______"

▸ 示例：
"我需要一个通过点击按钮触发动画的互动效果，具体表现是图片旋转后显示隐藏文本"

2. 关键技术栈说明

避免歧义的必备信息：

- [ ] 必须使用原生 JavaScript / 允许使用 jQuery/Vue/React 等框架
- [ ] 是否需要后端交互（如提交数据到服务器）
- [ ] 是否依赖第三方动画库（如 GSAP/Anime.js）

3. 交互细节规格书

用表格明确交互逻辑（关键！）：

4. 样式硬性要求

必须标注的样式参数：

- 主容器尺寸：________
- 关键颜色值：正常状态 #______ / 悬停状态 #______
- 过渡动画参数：duration ______s / easing-function ______
- 响应式断点要求：在 ______px 宽度时改为______

5. 错误处理规范

明确异常状态处理逻辑：

当______时，应该______（示例：当用户未填写必填字段时，用红色闪烁边框提示并禁用提交按钮）

高质量需求示例

我需要一个实时密码强度检测交互：- 用户输入密码时即时检测- 显示强度等级条（弱/中/强）
- 原生 JavaScript 实现
- 强度规则：弱（<8字符）、中（8-12字符含数字）、强（>12字符含数字+特殊符号）
- 视觉要求：强度条宽度渐变过渡，弱-红色，中-黄色，强-绿色
- 错误状态：输入框在提交时若为弱密码需抖动提示

应避免的模糊表述

- "做个动态效果"  
+ "需要点击图片后触发从左向右滑入的说明文字，滑动持续时间0.5秒，使用ease-out曲线"
- "要好看的样式"  
+ "主色使用#3AAFA9，辅助色#FEFFFF，按钮需有1px #17252A边框，圆角8px"

通过这种结构化需求描述，可使代码生成准确率提升80%以上。关键是要明确界定：触发机制 → 目标对象 → 行为变化 → 终止条件的完整逻辑链，并提供可量化的样式参数。