AI 编程cursor实战，开发一个周计划管理的页面，带截图功能

最近在学习《高效能人士的七个习惯》，其中有一个习惯就是"要事第一"，就是我们明确自己有哪些重要的事，列出来，让自己清晰知道需要做哪些事情。有一个周计划表，我觉得很好，用飞书做出来比较复杂，不如借助 AI，快速开发一个。

整体开发+调试用时 2 小时。部署 1 小时。

1、项目初始化

初始化一个vite + react + scss + ts 项目

2、写页面

我们要实现下面的页面，同时要能自己填写内容，还有在填写之后，自动保存数据。

指令 1：写出这个页面，要保持 UI 完全一样

指令 2：优化，实现内容可填写

指令 3：做一个数据临时保存功能，在我有修改之后，把数据临时保存到localstorage缓存起来

实现效果：

3、有 BUG，数据没保存上

看下代码，下面两个useEffect 的用法，会导致刚从缓存获取数据后，又会出发保存的逻辑，导致数据清空。

我们先不指出，看看 AI 是否可以发现问题。

从下面的分析结果看，AI 并没有找到真正的问题。

4、主动指出错误，让 AI 修复

指令: 使用useEffect监听状态变化并保存数据的逻辑不对，在初始化的时候，会重置掉缓存的数据。

明确指出问题之后，AI 的修改是正确的。

5、增加 html 转图片保存功能

增加功能，当我点击生成图片按钮的时候，将内容区域生成一张图片保存到本地

效果图，还是不错的，有一些样式的错误。

6、UI 优化

指令1：将操作按钮固定到页面的右下角

指令 2：生成的图片不要包含操作按钮

指令 3：给整个页面增加20像素的边距

最终效果如下:

7、发布页面到 github pages

⚠️注意，github 需要科学上网才能访问。

7.1 创建 GitHub Actions 配置

指令: 设置 GitHub Actions 进行自动部署

会创建.github/workflows/deploy.yml文件，这是 github Actions的配置文件。

7.2、修改deploy.yml，复制下面的配置进去

bash 复制代码

# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['main', 'master']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

7.3、确认 vite.config.ts：base名称是否正确

这里需要填写的是你github创建的项目名称

7.4、Github 后台修改设置

改成 github Actions

7.5、提交代码到 git仓库

csharp 复制代码

# 关联远程仓库
git remote add origin https://github.com/chenyk2016/week-plan.git

# 推送代码
git push --set-upstream origin master

7.6、等待部署完成

成功之后，点进去，就可以看到域名了

7.7、大功告成✌️

其他注意事项

每完成一个功能点，就用 git 保存一下，避免有些不想要的结果，无法回退代码。
AI 独立的小项目，都单独新开一个仓库写，不要把很多项目放一起。会相互影响。
对于这种简单的功能，直接问答就可以做，没必要想太多。

一些思考

AI 时代，开发门槛降低了，最后更考研的是发现和解决问题的能力。就像上面一个小 BUG，如果你不懂代码，可能需要尝试很久。但是如果你有了这种经验，就很容易发现问题。

AI的本质其实是放大人与人的差距，让高效的人更加高效。想要做的更好，还是要学习好开发基础知识。并不是用了 AI，就可以偷懒，不去学习，不去思考，这样终会被取代。而不能被取代的是，自己的思考，自己的成长。而这最终会给你带来巨大的价值。