作者：宋镇江，安阳幼儿师范高等专科学校数字媒体技术专业教师

通义灵码是一款基于通义大模型的智能编码辅助工具，支持自然语言生成代码、单元测试生成、代码注释生成等功能，兼容多种主流IDE和编程语言。对于零基础用户，只需通过自然语言描述需求，通义灵码即可自动生成代码，帮助快速开发个人笔记网站，极大简化开发流程，提升效率。

引言

引入通义灵码 AI程序员后，无论是学习还是教学，都极大地节省了时间。借助AI工具，我们可以减少学习基础知识所需的时间。学生不必花费大量时间从零开始手写重复性代码。实际上，大学教材也多为基础内容。通过AI，这些问题可以预先得到解答，避免了死记硬背，节省了大量时间。因此，我们可以将更多时间用于理解概念、掌握核心思想，并学会在实际中运用这些知识。

• 对于学生而言，可以重点关注理解框架的设计，掌握业务逻辑的实现，以及如何使用AI工具进行调试，以优化其使用效果，而不仅仅是编写代码的项目。这样，我们就能有更多的时间和精力去关注更高级别的思维和解决问题的方案。
• 对于教师而言，通过使用AI工具，我们能够释放时间，专注于设计更复杂的项目，并致力于解决实际的问题。AI工具可以帮学生专注于项目高级功能或优化，而无需掌握基础代码，我们知道学习基础代码需要花费大量的时间，但是使用AI工具可以在几分钟内完成相当于一两个小时的基础代码工作量。

接下来，我们将从零开始开发一个项目。首先进行需求分析，我们需要设计一个完整的个人笔记网站，该网站应支持添加、删除、修改和查询笔记等功能，这是项目的核心功能。关于制作流程，总体上是从简单到复杂的逐步推进。我们将逐步向大家介绍，并根据实时反馈进行界面调整。

预先准备

在正式开始之前，我们需要做一些准备工作。

首先，需要设置一个本地环境。为什么会提到这个本地环境呢？因为我们的项目最终需要在互联网上发布。拥有本地环境的好处在于，当我们完成准备工作后，只需将文件部署到虚拟主机或服务器中，项目即可正常运行。此外，由于我们生成的是多文件项目，使用本地环境访问时，路径和其他设置通常更加符合标准，相较于开发环境，其效果更佳。

接着，我们需要安装一个代码编辑器，即 Visual Studio Code。安装完成后，需从扩展中心下载并启用“通义灵码”等插件。这些准备工作是为了确保后续操作的顺利进行。首先，在本地环境创建一个本地站点，然后我们将删除该站点中的一些默认文件，确保通过自定义域名打开的都是 403 界面。

然后，我们将进入下一阶段的工作。将新建的本地站点的根目录拖拽到代码编辑器中。此步骤至关重要，因为只有将文件拖拽至此处，AI 程序员才能与之对话，并将代码生成到根目录中。这样，您才能通过IP地址或域名正常访问您的站点。

由此，打开代码编辑器，找到其中的通义灵码插件并点击打开。接着，在插件中选择AI程序员。在智能问答中输入指令通常不会得到反应，智能问答主要提供文字说明，不会编写程序。只有选择AI程序员时，才能进行程序编写。

最后，养成一个好习惯，在进行下一步之前，新建一个文本文件，使用除VS Code之外的编辑器打开，方便我们日后遇到问题时查阅当时的对话内容，或者完成笔记后分享给他人，展示我们是如何通过特定口令实现功能的。

实操

接下来，我们将开始进行实际操作。

配置情况确认

首先检查准备工作是否已经完成。这包括一个文本文档，用于记录口令，确保 VS Code 已将根目录下的文本文件拖拽至此。其次，我们需要确认通义灵码是否已正确配置，并处于登录状态。最后，我们需要验证临时指定的域名是否可以正常访问。

实操生成页面

现在，我们将深入探讨重点内容。我们开始操作，在输入框中输入想要的指令或任务。例如，我要求创建一个结合 HTML、CSS 和 JS 功能的个人学习笔记网站。这是通过前端开发技术实现的。如果不指定后端技术，生成的内容可能会使用 Python 或 Java 等语言生成，这并非我们期望的效果。因此，我们必须明确指示将采用何种技术来实现这一目标。

随后，我们将向它提供任务需求，指导它生成所需文件。例如，为了实现特定功能，可能需要生成多个文件。第一个文件用于记录网站的主要结构，第二个用于样式设计，第三个则关注交互效果的实现。

在该过程中，我们可以看到每个文件实现的具体功能。整个功能包括标题、笔记输入区域、添加笔记按钮以及显示笔记区域。在对样式进行美化和交互效果处理后，实现了添加和显示笔记的功能，生成了相应的代码。点击“接受”后，可在根目录中看到生成的代码文件。这时，我们便可以在浏览器中直接访问并查看最终效果，此时，整个效果就会展现出来。

这里存在一个问题，即生成的界面如果是适应小屏设备的，而用户不喜欢这种风格怎么办？如果用户不满意，我们可以重新开始。如果我新建了一个任务，并且删除了相关的代码，那么我们可以从头开始，让系统生成一个新的界面。

值得注意的是，因为大模型的原因，每次生成的效果都是独一无二的，即使看似相同，细节上也存在微妙差异。若在首次或前五次生成结果不满意，我们直接删掉它重来即可。

功能拓展

现在我们尝试一项功能，该功能比之前的更为完善。它包括添加和删除的功能，我们可以根据需求进一步扩展，我们在笔记中记录这一功能。

在笔记中，我们添加一些内容。注意，这里有一个“删除”按钮。我们暂时不点击删除，而是先刷新一下页面。刷新界面后，我们注意到界面中一个数据丢失了。这是否是由于新增功能的问题？我们的核心功能包括增删改查，现在增加功能出现了问题。具体来说，用户添加笔记后刷新页面，发现笔记消失了，说明笔记没有被正确存储。我反馈了这个问题后，通义灵码解释说为了实现相应的功能，将笔记存储在了浏览器的缓存环境中。随后通义灵码根据我的需求修改了代码，我点击接受即可。

然后我们再去刷新页面，像这个时候有一个小细节，这个小细节是在哪呢？就是功能添加后，它说的是帮我们去改好了。我们添加了笔记后刷新页面，发现笔记消失，这是因为浏览器的机制。修改了JS后，浏览器中的.js文件尚未更新。这时，我们需要利用强制刷新功能来刷新页面，然后测试添加功能，这个时候我们就能看到效果的呈现。

接着我们继续操作，有一个删除按钮，我们试一下这个删除按钮管不管用。为了测试删除按钮，我们再添加两条记录。这样做是为了方便查看记录。我们去把最后一条删了，然后刷新。这个时候我们发现删除功能是管用的。

如果界面中缺少删除按钮，我们可以考虑添加一个删除功能。这样，用户既可以有增加功能也可以有删除功能。接下来，我们应考虑增加修改功能。为了实现这个功能，需要对基础代码进行调整。具体而言，是在每篇笔记后添加一个编辑按钮。点击编辑时，笔记内容将被填充到输入框，并删除当前笔记。提交表单时，编辑后的笔记将返回到列表并被保存。

我认为这个功能不符合我们的需求。具体来说，当前的实现是这样的：当用户点击“修改”按钮时，系统不仅不进行修改操作，反而删除了该条记录，并将笔记内容移至别处。之后在用户保存记录时，系统又将其添加回原位置。这显然不是我们期望的行为，我们希望的是能够直接在该条记录上进行编辑，而不是删除或重新添加。此外，删除记录会影响数据排序，这不是我们想要的结果。对于这种需求，我们认为是不可行的，可以直接拒绝。

为了更好地使其理解我的需求，我决定为笔记添加时间戳。我不希望打乱笔记列表的顺序，因为那样会使笔记失去条理。因此，我选择为每个笔记添加时间戳，以保持其原有的顺序。接着，我们先看一下需求，它所实现的功能是否符合我们的预期。如果不一致，我们选择拒绝；如果一致，则选择接受。例如，它在添加笔记时会记录当前时间，并在以后显示时一并显示出来，我认为这个功能是可以的，于是选择了接受。

然而，在刷新页面后，我们发现数据丢失了。这并不让人担心，实际上，这是一次关于一维速度和二维速度之间转换的项目过程。在一维世界中无法友好地展示二维信息，同样，在二维世界中也无法友好地展示一维信息。

所谓的一维速度指的是每一条数据只记录一个字段，而二维速度则是记录两个字段，当遇到这种情况时，我们应当如何处理呢？我们选择删除原有的笔记，并重新添加新的笔记。此时，笔记和时间的显示均正常。我们可以在已有内容后添加新的修改功能。首先，我们需要记录下笔记信息，然后在每条笔记后添加一个编辑按钮。

我们需要在每条笔记后添加一个编辑按钮，点击该按钮可修改笔记。它具体是如何修改的呢？通义灵码实现了一种方式，我们将参照此方式对编辑功能进行初步的实现。当我点击编辑时，我希望当前条的笔记能直接变成一个编辑框，而不是跳转到某个特定位置。然后用户可以进行编辑并保存，在保存时，当前笔记会进行变更。

在设计功能时，我们应允许以任意形式实现该功能。我的想法是只要功能实现即可，具体实现方式无需深究。如果对实现方式不满意，我们应当明确完整的需求，告诉它必须按照怎样的方式来完成，而不是采取其他方法。

接着，我们查看其修改说明。为了实现新功能，添加了一个编辑按钮。此外，还有一种状态使得笔记内容可以被编辑，一旦更新，功能便得以实现。我们试了一下，点击“接受”后，再试用该功能，点击编辑时数据加载出来，点击保存时功能正常工作。如果数据未能成功加载或保存，这可能是刷新后出现的问题。我们刷新页面，时间显示是一样的，但原有的笔记并未被删除。我们向大家说明了点击保存后，原始数据会再次出现。检查代码后发现，问题可能出在我们这边。据此，我做了一个变更并点击接受，我们再来看一下它的效果。

我们删除了两条，现在只剩下三条。我们把这条改一下，刷新页面还是不行。如果我们是初次进行这种前导员工作，遇到问题是在所难免的。例如，如果功能出现问题，或者我们无法进行调整，由于我们是零基础，可能会导致不得不重新开始。我们不会纠结于如何调整，而是直接开始。

实际上，使用 AI 有时类似于开启盲盒，我们无法预知结果，因此需要清理缓存并重新开启。笔记生成之后，如果遇到问题，我们会进行相应的调整。例如，我们不需要查看解释，可以直接输入内容。生成后，点击“先接受”以查看效果，点击“刷新页面”以继续。此时，页面将成功加载。

我们将尝试使用这个插件，如果发现它不可用，刷新页面后，新的信息就会显示出来。若缺少发布时间，我们会说明并请求更新。插件会协助完成这些修改。修改后，我们再次提出问题，但以不同的说法来表述。因为之前表述的方式并未被理解，这次我们将采用不同的措辞。点击“接受”并刷新，可以看到“删除”按钮，证明该功能可以正常工作。

此外，我们还计划为每条笔记添加一个“修改笔记”的功能。这个功能的成功与否往往依赖于运气。例如，某次尝试后，系统弹出一个对话框，其中可以呈现一个新的笔记。我们可以将这句口令复制下来，以便在下次需要相同效果时直接发送给它，从而精准实现我们想要的新效果。或者说，当我们开盲盒时，我们发现它提供了一个修改项，点击后，之前的笔记内容会被替换为一个编辑框，编辑完成后点击保存，即可保存当前的笔记，我们也可以把这样的口令记下，方便下次直接应用。这也是为什么我们一直建议大家使用类似记事本的应用记录笔记，这样方便我们以后遇到同样的问题时，能快速找到之前做过的笔记，复制并使用相应的口令。

此外，关于排序的问题，我认为当前的布局显得有些拥挤，两个按钮的存在感过于突出，甚至显得有些过大。我建议调整它们的大小以使之更小，以便更好地并排展示，避免了不必要的换行。我们再次向它说明，希望可以一行显示笔记内容。

功能完善

我们继续讨论下一个主题——增删改查功能的完善，特别指出当前系统缺乏“查询”功能，没有提供查询页面和查询笔记的功能。

随后它向我们展示了页面的更新，在页面上添加了一个查询输入框和一个查询按钮。点击查询按钮后，即可检索所需数据。点击刷新先清空输入框，我输入要查询的内容，把其他笔记先删掉，然后我们再添加几条笔记供大家查询。

我在输入框内输入查询，点击查询后，功能即刻生效。之后，我们可以直接整体说，这个样式有点乱，让其帮我们整理，把废笔记删了。再告诉它，对整个界面进行美化。

或者说，我们也可以让界面风格发生变换，比如用户可以选择更可爱或更商务的风格。通过这样的设置，它会根据用户需求调整相应的色彩主题。此时，我们已经具备核心功能，如增删改查，接下来可以对细节进行美化。例如，当屏幕变小时，顶部会被隐藏，这可能需要用到一个专业名词。通过分析，我们可以发现它类似于一个居中的整体效果。我们把这个口令发给它以后，它就会对我们这个整体效果做一个调整。

实际上，这个小屏的显示风格与其他屏幕不同。我们接受后，观察其效果。我跟它说过以后，看一下它的一个修改说明，它没有解释原因，我们正常滚动屏幕。另外关于查询按钮，我想将查询按钮放在后方，就是它的一个前后位置。可以输入“我想要让笔记查询块和查询按钮显示在一行”。这涉及到对细节的调整，而细节上的调整往往非常耗时，并且存在不确定性。

然后，我指出查询笔记块的整体高度与查询按钮原有的整体高度不同，我想让它们一样高，因为看起来不太协调。我们看看它有没有实现我们想的功能，看它是否修改了某个值以使其高度一致，我们试一下。但是，实际情况是，它与我们理解的高度不同，存在一些专业术语或者我们在没有接触前端开发时会遇到的问题。

因此，当我们学习前端开发并掌握相关课程中的知识点后，我们便能够审查代码，理解其运行逻辑，并进行深入的调整。例如，我们之前提到的高度问题，通过控制特定属性，可以确保区域的高度保持一致。在没有修改前的状态，它的高度是一致的，然而，对于人眼而言，两者并不相同。随着我们学习的深入，理解了原理之后，修改这样的问题变得相对容易。相对容易的，如果我们现在去跟AI讲，它可能无法理解我们所指的问题。

类似这种情形，包括下面的这个块也是一样。在进行美化的过程中，比如我的输入块宽度超出了，在我们与它沟通之后，它会根据我们的建议对界面进行初步调整。

对于外部因素，存在一些专业术语。但是，考虑到我们是零基础用户，系统并未提供这些专业词汇。如果系统没有提供相应的专业词汇，这意味着它未能对我们的问题进行准确修改。例如，刷新后，问题依然未被正确修改。因此，这正是我们在学习和掌握的东西。遇到问题时，我们应花更多时间理解问题背后的原理，而不是仅仅关注如何编写代码。在前端开发中，这属于某个知识点，我们应使用专业术语来描述它，并让工具帮我们生成代码。通过大量输入，每次需求解释都会有所不同。若某个解释实现了所需效果，我们可以将其复制到笔记中。下次遇到类似问题时，直接复制这些笔记，就能快速实现相应效果。

然后，我们再对页面进行细节调整，我们对功能进行变更。例如，如果我们添加了笔记，但没有发布，系统会直接将该笔记添加到下方，我认为这不太好。我希望我最后发布的笔记能够显示在前面。那么，我们该如何操作呢？我们可以对笔记的排序方式进行调整，比如按照发布时间排序，新发布的笔记会显示在前面，这样就实现了二次调整。

细节优化在某种程度上可以被理解为，如果我们的基础不够扎实，或者未曾接触过前端开发，那么优化的过程就像是开盲盒——我们不清楚具体的专业术语如何去实现，导致最终效果显得不太合理。因此，我们可以通过上网查阅他人笔记，或者参考他们对某一效果的实现方法来获取灵感。在这个过程中，我们的排序会发生一些微妙的变化。

我们再次尝试。即便我们尝试将笔记移动到前面，它仍然显示在最后。刷新后，笔记的位置并未改变，这同样不够方便。我希望在点击“添加笔记”按钮时，新数据直接显示在笔记列表的最上方。

点击接受，然后我们去刷新，接着我们将为大家的笔记添加一些内容。此时，我们可以对它再进行调整。例如，笔记多了以后没有翻页功能，这相当不方便。因此，我们将添加翻页功能。我们可以输入“这个笔记没有翻页功能，每页显示5篇笔记”。

接着，由于它所记录的内容时间较长，我们发现，随着AI智能笔记功能的升级，它以字节为单位进行输入和输出。当文件内容越来越多时，生成的数据量增大，导致返回结果的时间延迟。随后，为了使网站看起来更加美观和完整，我们考虑为其添加底部或顶部的设定。

接下来给页面添加一个头部和底部。当出现错误时，我们需要了解生成的错误内容是什么，然后提出问题，请求对方修改。它帮我们修改好之后，我们点击接受，刷新页面。此时，头部和尾部的修改已经显示。

总结

最后，我们将通过案例分享经验，给大家说一下它的一些使用方面用到的一些东西。接着，我们观察这些界面。我先展示几个界面。可以发现，每个界面根据个人设置生成的效果图都是不同的。即使整体样式看似相同，但细节部分仍然能够显示出差异。

每个用户生成的界面是独一无二的，基于AI技术生成的。除了基本的口令相同，颜色等细节可能会因AI生成而略有不同。因此，页面的美观程度很大程度上取决于运气。然而，随着后期技术的学习和通过AI问答的次数增多，经验更加丰富，生成的页面效果也会更加好看。

在这些效果中，以“增删改查”为例，我这边添加了笔记后，若需进行修改，点击相应的编辑按钮，系统会提示输入信息，点击保存后执行相应操作。然而，AI生成的内容可能存在错误。

就以我们现在看到的为例，虽然都有修改功能，但每个人实现修改功能的方式各不相同。因此，在记笔记时，AI会根据我们输入的口令进行分析，确定需要通过何种书写方式来实现所需功能。AI生成的第一段话，就是它想要为我们生成的一个功能，这个功能是十分重要的。

之所以鼓励大家做笔记，是因为初期的笔记可能较为混乱。随着我们对通义灵码了解的加深，以及制作效果的提升，我们将对笔记进行优化。优化后，我们能够更准确地实现所需功能，而不是凭运气修改。

或者像有些同学的教学内容中，添加了一个效果后出现问题。一旦出现问题，再进行修正时，AI系统就无法停止。在查看这些小插件时，我们发现它们通常不具备返回功能。若没有返回功能，我们将先向大家说明。例如，如果先告知AI在界面中添加一个具有返回列表功能的文件或添加一个能返回首页的导航栏，这样页面就会更加连贯。

如果一个删除按钮过于宽大，我们可以通过AI进行调整。比如，我有一个笔记列表中的删除按钮过宽，希望将其宽度调整为600像素或固定像素值，AI就能将其调整至更合适的状态。此外，如果A标签有下划线，且我们认为下划线效果不佳，我们只需指示AI删除下划线。同样，如果A标签的默认颜色过于丑陋，我们只需要求AI去除该颜色。通过这样的方式，AI能够理解并做出相应的调整。

我们在添加笔记的时候，如果出现错误，应要求修正错误或重新进行。如果这部分没有修复，直接进行增删改查操作，那么我们后续的工作就会显得有些浪费。因此，在使用AI进行问答时，若遇到问题，必须及时进行断舍离。问题解决后继续进行，或者需要修复的部分进行修复。

在演示中，我们可以看到每个用户生成的代码或遇到的问题都是独一无二的。我们现在演示的都是面向零基础的用户，他们之前没有接触过代码。从界面来看，它相较于其他编辑器可能更加美观。通过多次询问，整理出解决方案，并记录下来。如果有人提出一个问题，我们先记录下这个问题。当有人提出解决方案时，我们将其复制并保存。这样，如果将来再次遇到相同的问题，我们就可以直接将保存的解决方案应用，从而避免重复劳动。

点击此处，立即下载通义灵码前往体验！