Claude拆解前端交互需求提示词新手模板

拿到前端交互需求（比如“点击按钮弹出带关闭功能的提示框”），新手往往第一步就卡住：看不懂原始提示词。这里不需要抽象理论，直接给能照搬、改几个词就能生成有效提示词的模板。

先拆解原始需求里的核心要素

打开需求文档或产品描述，逐句圈出四个必须明确的成分：①触发动作（谁在什么条件下做什么）、②目标组件（要操作或生成哪个界面元素）、③行为逻辑（它如何响应、状态怎样变化）、④约束条件（兼容性、数据来源、禁止行为等）。漏掉任意一项，Claude生成的代码大概率无法直接运行。

举个例子：需求是“用户登录失败时，密码输入框下方显示红色‘密码错误’提示，3秒后自动消失，不刷新页面”。其中触发动作是【用户提交表单且后端返回401】，不是“用户点登录按钮”；目标组件是【密码输入框下方的span标签】；行为逻辑包含显隐控制、文字内容、计时器；约束条件是【不刷新页面】【红色文字】【仅显示3秒】。

填空式提示词模板（直接复制使用）

将下面这段文字完整复制进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或