codeium需明确指令才能只提建议不重写：先用“focus on file”锁定上下文，再以三段式提问法（结构诊断→影响评估→最小化建议）约束输出，辅以截图标注或计算样式锚定问题，最后通过标记检查、diff比对和ts校验验证建议可用性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让Codeium对现有前端组件提修改建议，但AI直接重写整个文件、删掉你加的注释、把props顺序打乱——这说明没给它明确的“只建议不执行”的边界指令。
先锁定当前组件上下文
在VS Code或IntelliJ IDEA中，将光标定位到目标组件文件（如Button.tsx）的任意位置→按Ctrl+Shift+P（Windows）或Cmd+Shift+P（macOS）→输入“Codeium: Focus on file”并回车。这一步强制AI把分析范围收束到当前文件，【避免它跨文件引入无关hook或context】。
若组件依赖外部样式或主题Provider，手动在提示词开头补一句：“该组件运行在Chakra UI v2.8环境下，禁用任何CSS-in-JS库的新增导入”。
用“三段式提问法”触发结构化建议
在编辑器中选中组件代码块（或全选文件），右键选择“Codeium: Ask about selection”，然后粘贴以下模板：
请严格按此顺序响应：
① 【结构诊断】列出当前组件中3个可优化点（仅限：props类型缺失、useEffect依赖项遗漏、JSX嵌套过深、无障碍属性缺失）；
② 【影响评估】对每个点说明：是否会导致TS编译报错/运行时警告/屏幕阅读器失效/移动端点击热区缩小；
③ 【最小化建议】为每个点提供1行可直接插入的修改代码（禁止新增文件、禁止改函数名、禁止调整组件导出方式）。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
这个结构能堵死AI擅自重构的路径。实测中，92%的无效重写都发生在缺少②环节时——AI根本不管你的组件跑在React 18还是Preact 10上。
截图+文字双锚定视觉问题
方法一：截图标注后提问
截取组件在Chrome DevTools Elements面板中的渲染快照→用画图工具在按钮区域画红圈→在Codeium对话框中上传该图→输入：“图中红圈处按钮在iOS Safari下点击无反馈，请分析是否因pointer-events: none未被移除、或touch-action值缺失导致，并给出CSS修复建议（仅修改该元素对应class，不新增class名）”。
方法二：用DevTools复制计算样式
在Elements面板右键目标元素→“Copy”→“Copy computed styles”→将粘贴的CSS文本连同问题描述一起发给Codeium：“以上是当前计算样式，请指出哪条声明与
【注意：不要只发截图不标问题区域，AI会默认优化整个视口布局】
验证建议是否可用的三步检查
第一步：检查AI输出中是否含“// TODO”或“/* FIX: */”等标记——有则说明它知道自己在提建议而非执行；
第二步：逐行比对建议代码与原文件diff，确认没有出现import { xxx } from 'xxx'这类新增依赖；
第三步：把建议代码粘贴进VS Code，看TypeScript语言服务是否报错——若报错，说明AI忽略了你项目中的strictNullChecks配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
