AI夹克

创建你的第一个 AI 编程项目

打开 Cursor，创建项目

  1. 启动 Cursor
  2. 点击 “Open Folder”（打开文件夹）
  3. 在你的电脑上创建一个新文件夹，比如 my-first-project
  4. 选择这个文件夹

认识项目面板

左侧文件面板现在应该显示你的空文件夹。这就是你的项目根目录。

按 Cmd+L（Mac）或 Ctrl+L（Win）打开 AI 对话。

让 AI 创建第一个页面

在 AI 对话中输入：

帮我创建一个简单的个人主页。要求：

  1. 深色背景
  2. 中间有一个大标题”Hello, 我是小明”
  3. 标题下面有一行小字”一个 AI 编程学习者”
  4. 有一个紫色的”关于我”按钮
  5. 整体居中显示，好看一点

AI 生成了什么

AI 会生成一个 index.html 文件。你会看到类似这样的结构：

<!DOCTYPE html>
<html>
<head>
  <!-- 页面设置 -->
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

预览你的页面

在 Cursor 中，右键点击 index.html → 选择 “Open with Live Server”（或直接在浏览器中打开文件）。

如果还没安装 Live Server，可以问 AI：“帮我在 Cursor 中安装 Live Server 插件”。

理解文件结构

现在的项目只有一个文件：

my-first-project/
└── index.html    ← 你的主页

随着项目越来越复杂，你会看到更多文件：

my-first-project/
├── index.html       ← 首页
├── style.css        ← 样式文件
├── script.js        ← 交互脚本
└── images/          ← 图片文件夹

第一次迭代

看着页面，告诉 AI 你想改什么：

标题的颜色太暗了，改成亮一点的白色。按钮加一个 hover 效果，鼠标放上去会发光。

AI 会帮你修改代码。

保存你的作品

恭喜！你刚刚完成了第一次 AI 编程体验。把这个页面发给朋友看吧，这是一个真实的、可以运行的网页。

下一篇我们学习如何用一个命令启动本地开发服务器。