新手应使用填空式提示词模板：①触发条件、②目标元素、③行为规则、④约束限制四要素缺一不可；需具体到事件、dom节点、分步逻辑和兼容要求，避免模糊表述、定位不唯一及定时器未清除等常见错误。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
新手拿到一个前端交互需求（比如“点击按钮弹出带关闭功能的提示框”），常因看不懂原始提示词而卡在第一步。你需要的不是抽象理论，而是能直接套用、改几个词就能生成有效提示词的模板。
先拆解原始需求里的核心要素
打开需求文档或产品描述，逐句圈出四个必有成分：①触发动作（谁在什么时候做什么）、②目标组件（要操作/生成哪个界面元素）、③行为逻辑（它要怎么响应、状态如何变化）、④约束条件（兼容性、数据来源、禁止行为等）。漏掉任意一项，Claude生成的代码大概率无法运行。
例如需求：“用户登录失败时，密码输入框下方显示红色‘密码错误’提示，3秒后自动消失，不刷新页面”。其中触发动作是【用户提交表单且后端返回401】，不是“用户点登录按钮”；目标组件是【密码输入框下方的span标签】；行为逻辑包含显隐控制+文字内容+计时器；约束条件是【不刷新页面】【红色文字】【仅显示3秒】。
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
填空式提示词模板（直接复制使用）
把下面这段文字完整复制进Claude对话框，把方括号里的说明替换成你的实际内容，删掉括号和说明文字，保留结构和标点：
请用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文件代码，开头是，结尾是
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
