Claude图文轮播提示词优化：模拟真实搜索场景
先说个最核心的发现：用户在小红书搜的不是“轮播组件”，而是“为什么我点的没反应”。当你在搜索框里敲下“轮播图点不动怎么办”那一刻，就已经比任何AI提示词都更接近问题的本质了。
要让Claude生成的提示词能被真实用户在小红书或微信搜一搜里直接搜到，关键不在于堆砌那些“请设计一个美观、响应式、自动播放的轮播组件”之类的AI腔术语，而在于——你得把提示词从“我要什么”转向“我卡在哪”。
用真实搜索框输入习惯反向构造提示词
第一步：打开你最近3条用户反馈截图，挑出1条带搜索痕迹的原始消息。比方说，“轮播图点不动怎么办”“swiper初始化失败白屏”“图片加载完不自动滚动”。【务必保留错字和口语停顿，比如‘咋’‘啥’‘那个…’，千万别改成‘如何’‘为何’】
第二步：把这条原话完整复制进提示词最开头，前面加一句“用户正在小红书搜索框输入以下内容：”。这么一来，Claude会立刻放弃“优雅交互”“动效流畅”这类抽象表述，转而死死盯着“点不动”背后的touch事件绑定缺失或pointer-events: none残留。
第三步：在原话后紧跟一句“他刚试过：在Vue 3.4.27项目中用了v-for渲染img，但没写key，也没调用swiper.init()”。这句不是画蛇添足，是强制锁定技术上下文——没有它，Claude默认走React+hooks这条路径，生成的代码根本跑不起来。
植入平台特有搜索行为逻辑
方法一：模拟小红书“搜完就划走”的短决策链
在提示词中写明：“用户搜索后只看前3条笔记标题，标题必须含‘已解决’‘亲测有效’‘不用改源码’这三类词之一，且不超过12字”。Claude会乖乖压缩修饰语，输出类似“swiper.autoplay.start()加这行就动了✅”这种带验证结果的动作型标题。
方法二：绑定微信搜一搜“问句即答案”的特性
要求：“所有提示词生成的轮播方案，第一句必须是用户原问题的直接回答，比如‘点不动是因为没触发resize事件’，禁止用‘可能’‘建议’‘可以尝试’这类词开头”。微信用户没耐心读长篇解释，他们要的是“搜完看到第一句就能复制粘贴跑起来”的确定性。
方法三：插入真实失败动作链
写进提示词：“用户已执行：npm install swiper → 在setup()里new Swiper() → 图片仍静止。他没做的是：① 忘记import 'swiper/css'；② 没给容器设height: 300px；③ 在v-if切换后没调用swiper.slideNext()”。结果就是，Claude会把文档结构整个倒过来写——先列这三项漏操作，再讲原理，完美匹配用户边查边试的真实节奏。
删掉所有“设计师视角”描述，只留“用户手指悬停处”细节
① 找到用户当前页面截图里的轮播容器DOM结构（比如
② 描述用户正用哪只手操作：“用户右手握手机，拇指悬停在右下角‘下一张’按钮上，但点击无反应”。Claude会立刻排除hover伪类的写法，转而专注排查click事件绑定位置和z-index遮挡这类实实在在的问题。
③ 标注他刚刷新页面时看到的控制台报错：[Error] Cannot read property 'slideNext' of undefined，【务必粘贴完整报错文本，包括方括号和单引号，一个标点都不能改】。这是唯一能让Claude锁定Swiper实例未正确挂载的关键证据。