在cursor中写前端页面需锚定用户身份、用“用户动作+预期结果”替代技术指令、插入真实用户语境片段、用失效场景反向校验；例如为中老年用户设计时需12px以上字体、88×88px触摸热区，点击后必须显示加载动画并禁用按钮，超时弹提示，支持语音错别字匹配，适配地铁弱网、长辈机返回、戴手套操作等场景。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中写前端页面时，如果提示词只描述功能逻辑而缺少用户视角，生成的代码往往缺乏交互细节、视觉反馈和真实场景适配。你需要让AI理解“谁在用”“为什么点”“点完期待什么”，而不是只执行“渲染一个按钮”。
第一步：在角色设定里锚定用户身份
打开Cursor的Prompt输入框，在开头明确声明角色。例如：【你是一名有3年电商App经验的前端工程师，正在为45岁以上中老年用户设计商品详情页】。这比“你是一个前端开发者”更有效——年龄、使用场景、设备习惯（如误触多、视力弱）会直接影响组件尺寸、点击区域、文案长度和动效节奏。
不要写“兼顾所有用户”，中老年用户需要12px以上字体、88×88px最小触摸热区、禁用滑动切换图册；Z世代用户可能接受微交互动画和深色模式开关。角色越具体，生成的HTML/CSS越贴近真实需求。
第二步：用“用户动作+预期结果”替代技术指令
把“添加一个提交按钮”改成：“用户点击‘立即下单’后，页面应显示加载动画，并禁用按钮防止重复提交，3秒内未响应则弹出‘网络较慢，请稍候重试’提示”。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
这句里包含了三个用户视角要素：动作触发点（点击文字）、即时反馈（加载动画+禁用）、失败兜底（超时提示）。Cursor会据此生成带disabled状态管理、useEffect防抖、Toast组件调用的React代码，而不是只写一个
注意：避免出现“请确保”“应该”这类模糊要求，直接写“用户点击后必须……”，AI更倾向生成可验证的行为逻辑。
第三步：插入真实用户语境片段
方法一：嵌入对话气泡
在提示词中加入一段模拟用户操作时的真实心理活动，例如：「我妈总说‘这个字太小我看不清’，她会把手机亮度调到最高，但还是经常点错‘加入购物车’和‘收藏’」。Cursor会自动加大按钮间距、增加图标辅助识别、为两个操作设置不同颜色区块。
方法二：提供截图描述关键词
不传图，但用文字描述界面问题：“当前页面在iPhone SE上，‘立即支付’按钮被底部安全区遮挡，用户需上滑才能点到”。AI会主动加padding-bottom或viewport-fit=cover meta标签。
方法三：限定输入行为特征
写明：“用户90%通过语音输入搜索词，常出现错别字（如‘口红’说成‘扣红’），搜索框需支持拼音模糊匹配”。这会触发AI引入fuse.js或自定义match算法，而非简单写个input+onChange。
第四步：用“失效场景”反向校验用户视角完整性
① 想象用户在地铁里信号断续时刷新页面 → 要求AI生成离线缓存策略和loading骨架屏。
② 用户用长辈机（无手势返回）→ 必须保留顶部返回箭头，且点击区域≥44×44px。
③ 用户戴手套操作平板 → 所有可点击元素最小尺寸设为60×60px，禁用hover效果。
每写一条失效场景，就补一条对应的技术约束。例如：“用户戴手套操作” → 【所有click事件绑定在父容器上，子元素不设pointer-events:none】。这样生成的代码才不会在真实环境中失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
