要让Claude生成的前端交互文档可直接开发，必须嵌入真实操作链、设备限制和用户卡点——如“iPhone 14 Safari中长按商品图→菜单无响应→报错Maximum update depth exceeded”；需抄录Loom视频原话、标注实测环境、记录键盘/手势动作链、绑定可验证失败现场并附DOM线索与验证指令。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让Claude生成的前端交互说明文档能被开发同事一眼看懂、直接上手改代码，而不是反复追问“这个动效触发条件是什么”“点击后状态怎么回退”，就必须把真实操作链、物理设备限制和用户当前卡点塞进提示词里——比如“用户在iPhone 14 Safari中长按商品图→弹出菜单无响应→控制台报错Maximum update depth exceeded”这种原始现场。
用原始交互断点替代功能描述
第一步：把用户刚录下的Loom视频里那句语音原话抄下来，例如：“我点了三次‘加入购物车’，页面没反应，但Network里看到请求发出去了”。【不能转述为“按钮点击无反馈”】，Claude会据此锁定是useEffect依赖数组漏写还是React.memo误判了props引用。
第二步：补上设备与环境指纹，写明“实测环境：iPhone 14 iOS 17.5 Safari 17.5，未开启调试模式，页面已部署至Vercel预发布链接”。
这一步操作起来很简单，直接复制浏览器地址栏里的URL和手机设置里的系统版本就行。
立即学习“前端免费学习笔记（深入）”；
嵌入用户真实操作路径
方法一：键盘鼠标动作链
用户在Figma设计稿中选中「立即支付」按钮→右键→选择“Copy as HTML”→粘贴到src/components/PaymentButton.tsx→保存后页面报错“Cannot find module ‘@heroicons/react’”。
方法二：手势+物理空间组合
用户用左手单手握iPhone 13，在地铁3号线晃动车厢里，拇指从屏幕底部向上滑动展开收货地址弹窗→点击“编辑”→输入框获得焦点后软键盘遮挡了“保存”按钮→用户无法完成提交。
【必须标注具体机型与手势方向，不能写“移动端用户操作”】，否则Claude默认生成PC端hover态说明。
绑定可验证的失败现场
① 找到用户截图里那个红色报错框，把文字完整复制进提示词开头，例如：TypeError: Cannot read properties of null (reading 'id')。
② 紧接着写明触发动作：“用户刚在订单确认页点击‘使用优惠券’按钮，弹窗出现后点击列表中第二项，此时控制台报错”。
③ 补充DOM结构线索：“该优惠券列表由<ul class="coupon-list">渲染，每项<li>含data-coupon-id属性，但点击时this.props.coupons为null”。
④ 最后加一句验证指令：“修复后，在DevTools Console执行document.querySelector('.coupon-list li:nth-child(2)').click()应不抛错且更新页面优惠金额”。
