Tips Tricks for AI Coder
1.0.0
欢迎使用AI编码器初学者的提示和技巧，这是一种综合资源，旨在帮助非编码器有效地使用AI工具来开发网站，应用程序和其他项目。本指南基于对绝对初学者量身定制的现实经验和实用建议。
本指南还证明了我作为初学者开发人员学习以利用AI力量的旅程。每一章都受到我在AI驱动发展世界的浏览时学到的教训的启发。我的目标是与您分享这些见解，以避免常见的陷阱并最大程度地发挥这些工具的潜力。
让我与您分享我早期学到的最大的教训之一。这是：您要求AI做的事情的方式就是一切。获得出色的东西和变得无用的东西之间的区别通常取决于您的要求。听起来很简单，但是仅此技巧就可以节省很多挫败感。
因此，让我们谈谈如何以一种真正获得结果的方式向您的AI“编码助手”寻求帮助，因为您与AI交谈的方式信任我，这一切都会有所不同。
这就是交易：AI工具很聪明，但他们并不是读者。他们擅长以下方向，但是他们需要这些方向清晰明确。如果您含糊不清或留出猜测的空间，那么事情可能会迅速进行。
这样想：想象您要雇用承包商来建造房屋。如果您说：“为我建造一些好东西”，那么当您真正想要的是一个带游泳池的三居室牧场时，您可能会遇到树屋。但是，如果您将蓝图递给他们，然后说：“我想要这个具有这些确切特征的确切房屋，”他们会确切知道该怎么做。
人工智能以相同的方式工作。如果您的说明是特定的，则输出会更好。不用说“修复此代码”，而是尝试类似的内容：“在用户单击它时，请使用提交按钮不起作用的问题。”而不是“使我的应用变得漂亮”，而是用光滑，专业的字体和高质量的图标将应用程序的UI现代化。”看到区别吗？ AI现在确切地知道您想要什么，并且有一条明确的遵循途径。
我学到的一个技巧是从正确的任务特定短语开始 - 将其视为将AI进入正确模式的秘密调味料。以下是可以在不同情况下使用的短语示例。可以随意复制，调整并根据需要使用它们。
当某事破裂时：
这告诉AI专注于解决一个特定问题。它没有尝试重做整个代码，而是可以解决这个问题。
专家提示：如果您知道什么破坏了事情（例如一定的代码行），请包含该细节。如果您不确定吗？不用担心 - 只是专注于尽可能清楚地描述问题的症状。
添加新功能时：
该短语值得黄金重量，因为它告诉AI两个关键的事情：（1）您要添加的内容以及（2）不触摸的内容。相信我，您不希望AI在添加闪亮的新功能时不小心打破某些东西。这就是为什么“不删除任何其他功能”部分如此重要的原因 - 它使其他所有内容保持完整。
当您需要修复浏览器错误时：
好的，这可能是有史以来最初学者的专业提示。如果您要构建网络应用程序并且事情不起作用，那么您的浏览器控制台就像一个已经为您弄清楚犯罪现场的侦探。要找到它，请右键单击您的网页，单击“检查”，然后转到“控制台”选项卡。您将在那里看到错误消息，只是复制这些消息并将其粘贴到您的AI工具中。
为什么这么好？因为这些错误消息通常包含AI所需的确切信息，以找出出了什么问题。这就像为修复应用程序的路线图提供了路线图。说真的，这个技巧是救生员。
当您想改善应用程序的外观时：
让我们成为现实 - 设计是主观的。一个人看起来很棒的人可能不是别人的茶。这就是为什么以“现代”，“专业”和“高质量”之类的词引导您的AI尤其重要的原因。这些形容词有助于AI了解您想要的整体氛围。
专家提示：如果您有喜欢外观的特定应用或网站，请提及！例如：“使其看起来更像Spotify的设计。” AI将尝试模仿该样式并将其应用于您的项目。
删除功能时：
删除功能可能很棘手，因为您不想意外地拿出一些重要的东西。该短语使AI知道可以清洁删除该功能，但请尽可能按照应有的方式工作。
当您不小心删除某些内容时：
重要的是要让AI知道您丢失的文件并给它一些上下文（例如，“此文件处理我的主页的所有样式”）。虽然AI可能无法完美地恢复文件，但通常会提供足够的能力以使情况重回正轨。
如果您有一件事是从本章中删除的，那就让它成为：特殊性就是一切。您在提示中给出的细节和清晰度越多，AI的执行效果就越好。这是我学到的：
起初，这个过程可能会感到笨拙，但是我保证，您练习的越多，就会越好。
与AI一起构建应用程序和网站并不总是会顺利进行。有时候，您会觉得自己正在滚动，只是撞到似乎没有任何作用的墙壁。您已经给出了AI清晰的说明（或者您认为），您已经改写了请求，但是……您的项目没有向前迈进。
本章是关于解决这些令人沮丧的情况并解开自己的全部问题。
有时，AI只是……忘记了自己。如果您发现自己一遍又一遍地重复命令，并且什么都没有改变，那么您的说明可能不会出现问题，这可能是聊天历史记录。
AI语言模型通过跟踪当前对话中以前的说明和响应来起作用。随着时间的流逝，这一历史可能会被冲突的背景变得混乱。例如：
修复程序：与AI开始新的对话。
如果“新鲜开始”无法解决问题，那么问题本身就有可能在代码本身中。当两个代码告诉您的应用程序做相反的事情时，就会发生矛盾的代码。这通常会发生：
例如：
修复程序：要求AI识别和解决矛盾。使用AI助手的聊天功能，您可以提示一下： “查看我的代码并确定可能彼此矛盾的任何部分。”然后将相关部分粘贴到聊天中。
另一个修复程序：手动调试。如果AI没有遇到问题（或者您只需要更多控制），请一次开始测试您的应用程序。禁用或评论代码的一部分，并查看应用程序未运行时该应用程序的行为。此过程可以帮助您找到引起冲突的特定线路。
这是一个改变游戏规则的人： AI并不总是需要为您编写代码。您还可以将其用作值得信赖的调试合作伙伴来回答您的问题并指导您解决问题而无需实际更改项目。这种方法为您提供了更多的控制权，并可以帮助您更好地了解所有内容的连接方式。
例如，您可以询问：
这个来回的不是将控制权交给AI，而是将其用作编码教练。通过将AI视为老师而不是任务执行者，您可以解锁洞察力，以帮助您更快，更好地解决问题。
如果一个AI模型没有给您可以使用的答案，请尝试将其混合在一起。不同的模型具有不同的优势：
这是这样做的方法：
即使您仅使用一种工具工作，切换到另一个工具也可以提供有价值的新观点（和解决方案）。
更换是救生员。他们让你：
许多工具和IDE都可以使您启用更改或版本历史记录。如果没有，您可以将GIT用于版本控制以达到相同的效果。
有时，问题不是您或AI，而是您选择的语言。如果您的应用程序运行良好或感觉过于复杂，请询问AI： “ [当前语言]是该项目的最佳选择吗？”
这一转变可以改变游戏规则。
本章重点介绍以创造性和有效的方式利用屏幕截图，以及具有AI轨道并记住变化的策略，以使您的工作流保持生产力和挫败感。
屏幕截图通常可以说的不只是单词，尤其是在UI中的某些东西看起来或表现不像预期的情况下。但是，如果没有适当的上下文，AI可能会误解屏幕截图，并假定它代表您想要的解决方案，而不是要突出的问题。为了解决这个问题，至关重要的是，将屏幕截图与指导AI重点的精确提示配对。
在屏幕截图旁边提供清晰的描述：
没有上下文的屏幕截图会导致误解。例如，如果您要突出显示视觉错误，请包括一个说明：
突出显示屏幕截图中的关键区域：
使用基本的图像编辑工具来绕线，下划线或注释与问题相关的屏幕截图部分。这有助于AI知道在哪里关注。
澄清屏幕截图代表了一个问题：
为了确保AI不会误解您所需的输出，请使用此提示：
为什么起作用：这个措辞明确地告诉AI将屏幕截图视为问题的证据，确保其分析问题而不是假设结果。
另一个常见的问题是，何时AI生成不显示应用程序或网站UI中的代码更改。这可能是有几个原因发生的，这可能是由于销售问题，未保存的更改，甚至是项目结构中的隐藏错误。屏幕截图在这里特别有用，因为它们可以在视觉上捕获“之前”和“之后”，从而帮助AI指出了问题所在。
进行两个屏幕截图：
在您的提示中包括两个屏幕截图，并提供以下解释：
使用有针对性的提示更深入：
为什么起作用：将屏幕截图与提示相结合，使AI既可以视觉和书面上下文，从而使其更容易识别潜在的问题。
屏幕截图不仅用于查明UI问题。您可以使用屏幕截图来改善与AI助手的交流：
显示错误消息或日志：
如果您的浏览器控制台或应用程序日志显示错误，请屏幕截图，并包括一个提示：
捕获现场环境中的意外行为：
在调试部署的项目时，请进行任何意外行为的屏幕截图，并描述应该发生的事情：
突出显示UI中缺少元素：
如果您的UI缺少某些内容（例如，图像，按钮或文本），请使用屏幕截图显示其缺失：
比较设计：
使用来自类似应用或项目的设计的屏幕截图作为灵感，并要求AI复制这些设计的元素：
AI辅助开发的另一个频繁挑战是，当AI忘记了先前的编辑或失去对其所做的更改的跟踪。为了解决这个问题，您可以要求AI在项目中创建自定义更改跟踪系统。该系统将记录其所做的更改，作为“记忆”，只要出现问题时就可以参考。
这可以包括：
集中日志文件：
AI可以创建一个文件（例如， changelog.txt ），在其中自动附加了其所做的每个更改的描述：
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
内联代码注释：
要求AI直接在代码中注释其更改：
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
版本号或标签：
在代码中具有AI嵌入式编号或标签，因此您可以在需要时恢复到特定点：
https://github.com/techcow2/cursor-agent-tracking
在项目上工作时，您一定会遇到问题 - 无论是崩溃，意外的行为还是持续的错误。这些时刻可能令人沮丧，但是有一种简单有效的方法来指导AI仔细处理这些挑战，同时避免已知的陷阱。本节将向您展示如何制作周到的提示，以帮助AI有效地解决问题而无需引入新问题。
有时，当尝试解决问题或添加新功能时，您可能会发现AI无意中重复同样的错误或引入新问题。这可能会发生，因为AI不知道过去的错误，也没有给出足够的上下文来避免这种情况。没有明确的指导，它可能会忽略关键细节或产生意外的副作用。
为了防止这些问题，您可以制作提示，以将您的任务描述与有关避免什么的明确说明相结合。这样可以确保AI谨慎处理任务，并专注于解决问题而不会引起进一步的并发症。
恢复到稳定状态（如果需要）：
识别并记录问题：
制作提示：
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
提供上下文（如果适用）：
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
审查和测试输出：
在构建或增强网站或基于Web的应用程序时，效率和性能是两个关键因素。实现这些目标的一种有效方法是使用内容交付网络（CDN）库。本章将指导您了解CDN库是什么，如何使您的项目受益，并介绍一些最受欢迎的库，例如Tailwind CSS，Bootstrap，Material UI等。它还将提供有关如何提示您的AI助手集成和使用这些库的有用示例，如果您是新手编码并依靠AI来简化开发任务时，特别是有用的。
内容交付网络（CDN）是一个在地理上分布的服务器网络，它可以根据其位置向用户提供网络内容（例如JavaScript库，CSS框架或字体）。 CDN库是指在这些网络上托管的流行框架或工具（例如Bootstrap或jQuery）的版本。您没有将文件下载到您自己的服务器或开发计算机上，而是直接从CDN引用它们。
加载时间更快
CDN从最接近用户的服务器提供文件，从而减少了您的网站加载时间。
减少服务器的带宽
将托管托管托管到CDN的卸载意味着您自己的服务器不必处理这些文件下载。
易于实施
您可以快速添加功能强大的库 - 通常只有一两个代码。
自动更新
CDN通常托管库的最新版本，因此您可以轻松及时保持最新状态。
缓存优势
如果用户已经从另一个站点上的CDN加载了相同的库或框架，则其浏览器可以使用缓存版本，从而进一步加快加载时间。
如果您是编码全新的，并依靠AI来设置项目，则可以在以下及时使用AI处理库集成：
集成CSS框架
示例提示：
“在我现有的HTML文件中使用Bootstrap CDN。确保Navbar在移动设备上崩溃。用简单的版权通知将页脚放在底部。”
从一个框架迁移到另一个框架
示例提示：
“在我的项目中，通过CDN用Bootstrap替换尾风CS。小心地将现有的尾风类转换为引导等效物，以保持相同的总体设计。”
添加JavaScript实用程序
示例提示：
“在我的index.html中包括cdn的lodash。然后，在我的main.js文件中，演示如何将lodash的debounce函数用于文本输入。”
这些提示使AI清晰使用哪个库，如何使用它（通过CDN）以及您想要实现的任何特定任务或功能。
在下面，您会发现流行的库可以通过CDN轻松添加到项目。每个条目都包括描述，用法注释，示例片段和您的AI示例示例。
描述：
实用第一的CSS框架，可帮助您通过使用HTML中的预定义类迅速构建自定义设计。
最适合：
希望在不编写大量自定义CSS的情况下对设计进行颗粒状控制的开发人员。
样本实现：
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
AI升节示例：
“通过CDN向我的项目中添加尾风CSS。使用标头，简单的英雄部分和页脚创建主页。使用尾风班来确保干净，现代的设计。”
描述：
使用最广泛的CSS框架之一，用于构建响应迅速的移动优先网站。它带有预设的组件，例如navbars，表单，模态等。
最适合：
想要快速，一致的设计的初学者。
样本实现：
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
AI升节示例：
“将最新的Bootstrap CDN链接添加到我的网站。创建一个响应式Navbar，并在右侧使用“服务”下拉和搜索栏。确保在移动设备上看起来不错。”
描述：
一个基于React的库，可实现Google的材料设计系统，提供按钮，卡片和对话框等现成组件。
最适合：
React项目需要时尚，现代和专业的设计美学。
样本实现：
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
（虽然材料UI主要建议NPM，但您仍然可以通过CDN引用其图标字体。）
AI升节示例：
“整合了CDN的材料图标，并将其在我的React应用中使用。构建一个简单的卡组件，用于显示具有材料风格的“添加到购物车”按钮的产品。”
描述：
一个全面的图标库，提供可扩展的矢量图标，可以轻松使用CSS设计。
最适合：
快速添加社交媒体图标，导航图标或任何其他图标，而无需创建自定义SVG。
样本实现：
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
AI升节示例：
“通过CDN向我的HTML添加字体很棒。用“ home”，“ profile”和“购物车”的字体图标替换我的Navbar中的所有占位符图标。确保它们在移动设备上正确扩展。”
描述：
一个经典的JavaScript库，以简化DOM操纵，事件处理和Ajax操作而闻名。
最适合：
想要进行复杂的UI互动而不编写大量香草JavaScript的传统项目或初学者。
样本实现：
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
AI升节示例：
“通过CDN添加jQuery到我的index.html。向我展示当用户单击按钮时如何隐藏DIV，并将成功消息记录到控制台。”
描述：
JavaScript实用程序库，提供了用于数据操作的广泛功能，包括深克隆，辩论等等。
最适合：
简化阵列，对象和字符串上的复杂操作。
样本实现：
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
AI升节示例：
“从CDN中添加Lodash。将我现有的for木制转换为lodash方法，并演示如何调试搜索字段。”
描述：
CSS库提供预制作的动画（淡出，弹跳，幻灯片等），您可以通过添加特定类别应用于元素。
最适合：
在不编写自定义CSS动画的情况下，快速将动画添加到元素中。
样本实现：
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
AI升节示例：
“通过CDN包括Animate.css，并在页面加载的“我的英雄”部分中应用淡入淡出的动画。还将弹跳效果应用于“立即注册”按钮。”
描述：
用于创建交互式图表和图形的多功能JavaScript库。
最适合：
想要一种直接的方法来可视化数据的初学者，而无需潜入更复杂的库。
样本实现：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
AI升节示例：
“通过CDN添加Chart.js，并创建一个条形图，显示每月销售数据。将Y轴标记为“销售”和X轴的年份。”
确定您的需求
确定您是否主要需要用于样式（CSS）或JavaScript功能的帮助。一些图书馆（例如Bootstrap或tailwind）专注于设计，而另一些图书馆（例如JQuery或Lodash）专注于帮助完成JavaScript任务。
检查兼容性
确保您选择的库与您已经拥有的工具或框架很好地配合使用。
寻找活跃的社区和文档
良好支持的库通常具有更好的教程，更大的社区用于故障排除以及频繁的更新。
问你的人工智能
如果您仍然不确定要使用哪个库，请提示您的AI以获取建议：
“哪个库最适合初学者友好，高度可定制的UI：尾风，引导或材料UI？”
AI可以在您的项目上下文中解释每个选择的利弊。
