生成简历编辑网站

Gemini Canvas 生成简历网站

Gemini Canvas 是什么

Gemini Canvas 是 Google Gemini 提供的一个强大的交互式工作区。当你需要开发小型应用原型时，Gemini Canvas 会在聊天界面右侧打开一个专属的宽屏面板，让你可以在不切换页面的情况下生成、预览、修改和导出内容。利用 Gemini Canvas 可以让我们所见即所得，随改随生成，快速得到符合我们需求的原型网站及可交互的可视化界面。

Gemini Canvas 如何使用

在 Gemini 网页版底部的输入框下的工具菜单中，找到并点击 “Canvas” 图标，即可使用。在文本框中描述你的需求。你可以点击“添加文件”图标，上传文档、图片作为 Gemini Canvas 生成内容的参考基础。等待一会儿，生成的内容会占据屏幕右侧的大画板。

利用 Gemini Canvas 制作简历网站

我们可以从网上找到一份简历模板，在 Gemini Canvas 中点击“添加文件”将简历模板上传，然后输入提示词：根据简历模板生成简历编辑网站，保证简历的格式不变，具有导出PDF的功能。等待一会儿，我们就能看到生成的网站，根据生成效果再继续输入提示词改进网站的功能。

将生成的网站在本地运行

仔细观察 Gemini Canvas 生成的代码，我发现其可能生成 HTML 代码 或 React（框架采用lucide-react组件库）代码，如果是 HTML 代码，那我们复制就可以直接运行，但是如果是 React 代码，我们需要配置相关的环境运行。

第一步：创建 Vite + React 项目
打开你的终端（Terminal）或命令行工具，运行以下命令：

npm create vite@8.2.0 cv_create -- --template react
cd cv_create
npm install

第二步：安装依赖
React 代码使用了 lucide-react 图标库，并且依赖 Tailwind CSS 来实现漂亮的 UI：

# 安装图标库
npm install lucide-react

# 安装 Tailwind CSS 及其相关依赖
npm install tailwindcss @tailwindcss/vite

第三步：配置 Tailwind CSS
打开项目根目录下的 vite.config.js 文件，将其修改为：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite"; // 👈 引入插件

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(), // 👈 添加到插件列表
  ],
});

接着，打开 src/index.css，清空里面的内容，并加入 Tailwind 的基础指令：

@import "tailwindcss";

第四步：替换代码
打开 src/App.jsx 文件，把你提供的所有代码直接粘贴进去，替换掉原本的内容。

第五步：运行项目
在终端中运行启动命令：

npm run dev

终端会输出一个本地地址（通常是 http://localhost:5173）。在浏览器中打开这个地址，就能体验完整的交互式扩散模型演示了！