第一讲中《手把手教你用AI 设计题库小程序界面》，我们通过AI 生成了一个小程序的设计稿，设计稿只是第一步，这些代码是不能直接运行的。这一讲中的内容是怎么通过之前生成的设计稿的 html 生成小程序。
先来看下生成的视频演示效果。
小程序的项目如何创建不是重点，就先省略了，这时我们要先有一个空的小程序项目，这一步工具我们用 cursor。
先简单的介绍下
Cursor，它 是一款 AI 编写程序代码编辑器，它集成了强大的 AI 功能，旨在帮助开发者更实地编写、高效除错和理解程序代码。它是
Vibe Coding 代表工具之一。
Vibe Coding 是由OpenAI 共同创办人Andrej Karpathy 在2025 年提出的全新开发模式，透过大型语言模型（LLM）协助，让开发者能以自然语言prompt （提示词）描述任务，由AI 自动生成程式码，减少对传统程式技能的依赖。
这种AI coding 的方式鼓励开发者专注在「问题描述」与「逻辑设计」，而非语法与细节，Karpathy 形容这是一种「顺着感觉走（embracing the vibes）」的写程序的体验，让更多非工程背景的人也能参与软体创作。
Vibe Coding 强调以自然语言与AI 写代码，开发者只需描述目标与需求，AI 即可自动生成程式逻辑与架构，从而取代繁琐的逐行编码。
在这种开发模式下，
开发者不再关心程序代码的细节，而是根据应用程序界面或功能需求，直接请AI修改。例如，开发者可以直接说：「把侧边栏的padding减少一半」，不用手动的去查CSS或代码来修改。甚至遇到错误讯息时，只需复制贴上给AI，通常 AI就能解决问题。
使用 AI 对话框可以实现半自动化的编码，你需要自己组织工程文件，把 AI 生成的代码复制粘贴到你的项目中。让 AI 解决代码出错的问题也是，你根据 AI 提示再手动去修改。
Cursor与 AI 界面不同的是，它可以完全自动化的为你创建项目，生成文件，自动修改文件。据说
claude code 效果比 Cursor 更好，有人说 cursor 是辅助驾驶模式，
claude code有点能到自动驾驶的模式了，
我还没体验过就先不说了。先说下 cursor操作。
从设计到项目完全可以通过 cursor 做，我们今天说的是结合着已经生成的设计稿界面来做。
第一步复制 AI 上的 HTML 代码，然后输入提示词，如下：
根据以下样式和设计稿生成微信小程序代码：（复制的设计界面代码省略，自己替换）。
确定后，cursor 就开始根据你提供的设计稿件来创建文件了。如下图所示。
接下来看它生成的第一版，下图是运行后的界面，样式有点问题，你可以直接描述问题，让 AI 来修改。你可以截图+描述发给 AI，这样更准确。
优化后的：
还有一个问题是，你应该注意到了 icon 的问题，目前 cursor 还不能直接生成png 的图标，生成的还是有问题的，这个时候有两种解决方案，第一是让AI 生成 svg，然后手动转成 png，另外一种方案就是从另外一些 icon 网站上下载添加到项目中。我用的第一种，这样适配性相对更好。也省着自己配色了。
把文件添加好后你就能有一个能运行的小程序了，不过数据是 AI 生成的 demo。下一步就是通过 API 和后端来交互了。这个以后再讲吧，今天就先到这。这个项目是一个小程序，这两天应该就能上线了，到时候可以看成品了。
相关阅读：