你现在应该已经知道，人工智能在正确使用的情况下，可以极大加快你的开发进度。
但关键在于：你需要学会如何与 AI 正确沟通。
【早说】有效的职场沟通模式：DESC模式
下面是我整理的一些在实际开发中非常好用的提示词。
1、找出问题的根源
开发者最常见的错误之一就是只处理 “症状”，而没有解决 “根本原因”。这个提示词能帮你打破这个死循环：
分析这个错误/bug：
[粘贴错误信息]
不要只解决表面问题，请从以下几个方面找出背后的根本原因：
1. 检查可能存在的架构性问题
2. 思考可能触发该问题的边界情况
3. 提出一个全面的解决方案，防止类似问题再次发生
重点是解决核心问题，而不仅是表面现象。在给出解决方案之前，先进行详细分析，说明为什么以及如何从根本上修复问题。使用时机： 每当你遇到反复出现、修了又坏的恼人 bug，用这个方法能节省大量调试时间。
示例：
问题描述：点击按钮应触发 loading 状态，但 UI 没有更新。
functionMyButton(){
const[loading, setLoading]=useState(false);
consthandleClick=()=>{
setLoading(true);
fetch('/api/data').then(()=>setLoading(false));
}
return(
<button onClick={handleClick}>
{loading ?'Loading...':'Click Me'}
</button>
);
}
请帮我分析：
1. 是不是状态更新没有触发重新渲染？
2. fetch 异步逻辑是否正确？
3. 是否缺少错误处理？
4.UI 不更新是否与 React batch update 有关？
请从根因角度分析，并建议修复方案。2、理解 AI 生成的代码
千万不要盲目使用你看不懂的代码。这个提示词可以确保你真正明白你要加入项目的内容：
你能详细解释一下你生成的代码吗：
1. 这部分代码的作用是什么？
2. 它是如何一步步实现功能的？
3. 你考虑过哪些其他方案？为什么最终选择这个？使用时机： 每一次使用 AI 生成的代码都应该这样做，绝不例外。你的未来自己会感激现在的你。
【早阅】在 AI 时代避免技能退化
示例：
你刚刚给了这段布局代码：
.container{
display: grid;
grid-template-columns:repeat(auto-fill,minmax(200px, 1fr));
gap: 20px;
}
请回答：
1. 这个 Grid 布局适合什么场景？
2. 它如何实现响应式？
3. 如果我希望移动端每行只显示一个元素，应该怎么改？
4. 与 flexbox 有什么区别，哪个更适合卡片类组件？3、调试问题
当你真的卡住了，有时候需要跳出原有的思维框架。这个提示词能让你从多个角度系统性地排查问题：
帮我调试这个问题：
[代码和日志]
从不同的角度，思考 5～7 个可能的原因。
再从中筛选出 1～2 个最可能的来源。
提出假设，并加入日志进行验证。
最后给出详细分析，说明你为什么认为找到了问题的本质，它是如何发生的，以及最简单的修复方式。使用时机： 面对难以解决的复杂问题时使用。它能迫使 AI 全局思考，而不是一开始就跳到某个具体解释上。
示例：
问题描述：页面加载时 shouldShowModal 没有正确判断。
<template>
<Modal v-if="shouldShowModal"/>
</template>
<script>
exportdefault{
data(){
return{
shouldShowModal:false,
};
},
mounted(){
this.shouldShowModal =this.$route.query.show ==='true';
}
}
</script>
请从以下角度分析：
1. Vue 的响应性是否被打破？
2. $route.query 什么时候初始化？
3. 逻辑判断是否写在生命周期函数的正确位置？
请提出调试日志策略，分析根因，并建议优化写法。4、代码审查
AI 可以发现一些人类审查者容易忽视的问题：
【早阅】Better：一款AI代码审查工具
审查以下文件中的代码：
[附上文件]
重点检查：
1. 逻辑漏洞和边界情况
2. 性能瓶颈
3. 安全漏洞
4. 可维护性问题
提出具体改进建议，并简要说明原因。先给出详细修改方案，然后以最小改动实现该方案，尽量减少对其他代码的影响。使用时机： 提交 PR 之前，或者在完成某个功能但还没 “真正完成” 时。
示例：
请审查以下代码并指出潜在问题：
- 是否存在未处理的空值/边界情况？
- 是否使用了副作用但未清理？
- 有没有可能导致性能问题（如不必要的重新渲染）？
文件：
src/components/UserCard.jsx
src/hooks/useDebounce.js
先列出每个文件中的问题，再提出最小修改建议。5、代码重构
把混乱的代码变成易于维护的结构：
请重构以下函数，使其更：
[粘贴代码]
目标是：
* 可读性更高（变量名清晰、结构合理）
* 易维护（函数更小、职责单一）
* 易测试（便于写单元测试）
确保不要大幅修改，保持原功能可用，避免影响依赖该部分的其他代码。
先说明你做了哪些更改，以及这些更改是如何优化代码的。使用时机： 当代码逐渐变得难以维护时。只在局部使用，避免一次性改动太多导致新问题。
【第2893期】ChatGPT 提示模式：提高代码质量、重构、需求获取和软件设计
示例：
请重构以下函数：
functionhandleFormSubmit(e){
e.preventDefault();
const name = e.target[0].value;
const email = e.target[1].value;
if(name && email.includes('@')){
alert('Valid!');
}else{
alert('Invalid!');
}
}
要求：
- 使用语义化变量名
- 把校验逻辑提取为单独函数
- 添加注释
- 保持功能一致，避免破坏表单行为6、安全审计
我最近写了一整篇关于安全的指南，讲的是如何审查代码中常见的漏洞。
示例：
审查下面前端代码的安全问题：
- 是否存在 XSS 风险？
- 用户输入是否被正确处理？
- localStorage 使用是否安全？
- 是否有任何敏感操作未加限制？
代码片段：
<div dangerouslySetInnerHTML={{__html: userInput }}/>
请分析风险来源、潜在后果，并提供更安全的实现方式。“愤怒提示词”（Rage Prompting）
有时候，带着点情绪反而更能让 AI 给出直接结果。这个 “愤怒提示词” 效果出奇地好。你可以根据自己的耐心程度调整语气：
这段代码快把我逼疯了！它本应该是 [期望的行为]，结果却是 [实际的行为]。
拜托帮我看看到底哪里出问题了：
[粘贴代码]使用时机： 当你需要迅速得到结果，而不想听太多解释时。
示例
这段 React 代码真的快把我逼疯了！！！
点击按钮后应该调用 API，并在返回后隐藏 loading 状态。但现在点击后没有任何反应，控制台也没报错！
代码如下：
[粘贴代码]
我已经 log、try-catch 都试了，找不到问题！现在立刻告诉我错在哪，别讲废话，直接指出核心问题。总结
好的提示词不仅能节省时间，还能彻底改变你开发稳定产品的速度。
只要你坚持使用这些提示词，就能避免 AI 编程中的常见问题，同时充分发挥它的优势。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
