新手应使用填空式提示词模板：①触发条件、②目标元素、③行为规则、④约束限制四要素缺一不可；需具体到事件、DOM节点、分步逻辑和兼容要求，避免模糊表述、定位不唯一及定时器未清除等常见错误。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
新手拿到一个前端交互需求（比如“点击按钮弹出带关闭功能的提示框”），常因看不懂原始提示词而卡在第一步。你需要的不是抽象理论，而是能直接套用、改几个词就能生成有效提示词的模板。
先拆解原始需求里的核心要素
打开需求文档或产品描述，逐句圈出四个必有成分：①触发动作（谁在什么时候做什么）、②目标组件（要操作/生成哪个界面元素）、③行为逻辑（它要怎么响应、状态如何变化）、④约束条件（兼容性、数据来源、禁止行为等）。漏掉任意一项，Claude生成的代码大概率无法运行。
例如需求：“用户登录失败时，密码输入框下方显示红色‘密码错误’提示，3秒后自动消失，不刷新页面”。其中触发动作是【用户提交表单且后端返回401】，不是“用户点登录按钮”；目标组件是【密码输入框下方的span标签】；行为逻辑包含显隐控制+文字内容+计时器；约束条件是【不刷新页面】【红色文字】【仅显示3秒】。
填空式提示词模板（直接复制使用）
把下面这段文字完整复制进Claude对话框，把方括号里的说明替换成你的实际内容，删掉括号和说明文字，保留结构和标点：
立即学习“前端免费学习笔记（深入）”；
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
请用HTML+CSS+JavaScript写一个前端交互功能。要求：
① 触发条件：[明确写出谁、在什么时机、执行什么动作。例：用户点击id为'login-btn'的按钮后，且AJAX请求返回status=401]；
② 目标元素：[精确到DOM节点，例：页面中class为'password-input'的input元素下方紧邻的div元素]；
③ 行为规则：[分条写清每一步反应，例：a. 该div显示文字'密码错误'；b. 文字颜色为#e74c3c；c. 3秒后div自动设置display:none；d. 若用户再次点击登录按钮，需先清除上一次的定时器]；
④ 约束限制：[必须写清，例：不修改原有HTML结构、不使用jQuery、兼容Chrome 90+、所有样式用内联style或
输出格式：只返回可直接运行的完整HTML文件代码，开头是<!DOCTYPE html>，结尾是</html>，中间包含所有必需的HTML结构、CSS样式、JavaScript逻辑。不要解释，不要注释，不要额外文本。
新手最容易错的三个坑（改完立刻验证）
方法一：触发条件写得太模糊
错误示范：“用户操作错误时显示提示”——Claude不知道什么是“操作错误”，也不知道“提示”长什么样。
正确做法：把“操作错误”替换成具体HTTP状态码、表单校验规则或DOM事件类型，如“fetch响应体包含{error:'invalid_password'}”。
方法二：目标元素定位不唯一
错误示范：“在输入框下面显示提示”——页面可能有10个输入框。
正确做法：必须带上ID、class、data属性或父子层级关系，例如“#login-form .password-field + .error-tip”。
方法三：行为规则没写清除逻辑
连续触发多次时，旧定时器未清除会导致提示框叠加快速闪退。
【务必在“行为规则”里写明“若已有同类型提示正在显示，则先清除原定时器”】
