本文转载自公众号：萝卜 AI 笔记，原文：用 AI 编程一小时上线一个 DeepSeek 提示词网站，太强了！

大家好，我是你们的萝卜哥~

最近连续肝了好几天，写了一个 2 万多字的 DeepSeek 提示词大全，本来做成 PDF 之后就结束了，但是很多朋友说，如果能放到网站页面上就更好了。

本着用户就是上帝的原则，而且也一直想体验一下 Cursor 的魅力，所以直接开干，尝试着用 Cursor 来做一个提示词网站。

添加 Cursor Rules

因为 Cursor 这个工具的使用，完全是我自己琢磨的，没有任何经验，开始直接上手让它写需求，结果写出来的东西都不是特别满意。

就在我一筹莫展的时候，偶然在网上看到一个 Cursor 插件，我才明白过来，原来这个工具也是需要设置 system 提示词的，于是赶紧下载了提示词插件。

因为我是准备做一个网站嘛，所以选择了 web app 相关的提示词

果然啊，增加了系统提示词之后，整个 AI 写代码的过程就顺畅多了，所以新手朋友们，如果你们的 Cursor 不听使唤，那么看看是不是没有设置 Cursor Rules 啊。

编写初始版本

对于我的初始提示词，我选择用大聪明老师和卡兹克老师的超级提示词，他们的提示词甚至可以直接一键把 PDF 转换成网页，真的好强。

直接使用 Agent 模式来编写，最开始的提示词如下

当前目录下有个 txt 文件，叫做“pdf_content.txt”，请分析其内容，将其转化为美观漂亮的中文可视化网页：

## 内容要求

- 保持原文件的核心信息，但以更易读、可视化的方式呈现

- 在页面底部添加作者信息区域，包含：

* 作者姓名: [作者姓名]

* 社交媒体链接: 至少包含 GitHub、Twitter/X、LinkedIn 等主流平台

* 版权信息和年份

## 设计风格

- 整体风格参考 Linear App 的简约现代设计

- 使用清晰的视觉层次结构，突出重要内容

- 配色方案应专业、和谐，适合长时间阅读

## 技术规范

- 使用 HTML5、TailwindCSS 3.0+（通过 CDN 引入）和必要的 JavaScript

- 实现完整的深色/浅色模式切换功能，默认跟随系统设置

- 代码结构清晰，包含适当注释，便于理解和维护

## 响应式设计

- 页面必须在所有设备上（手机、平板、桌面）完美展示

- 针对不同屏幕尺寸优化布局和字体大小

- 确保移动端有良好的触控体验

## 媒体资源

- 使用文档中的 Markdown 图片链接（如果有的话）

- 使用文档中的视频嵌入代码（如果有的话）

## 图标与视觉元素

- 使用专业图标库如 Font Awesome 或 Material Icons（通过 CDN 引入）

- 根据内容主题选择合适的插图或图表展示数据

- 避免使用 emoji 作为主要图标

## 交互体验

- 添加适当的微交互效果提升用户体验：

* 按钮悬停时有轻微放大和颜色变化

* 卡片元素悬停时有精致的阴影和边框效果

* 页面滚动时有平滑过渡效果

* 内容区块加载时有优雅的淡入动画

## 性能优化

- 确保页面加载速度快，避免不必要的大型资源

- 实现懒加载技术用于长页面内容

## 输出要求

- 提供完整可运行的单一 HTML 文件，包含所有必要的 CSS 和 JavaScript

- 确保代码符合 W3C 标准，无错误警告

- 页面在不同浏览器中保持一致的外观和功能

我在当前目录下方了一个 pdf 文件，里面是我整理的 DeepSeek 提示词，想要做一个提示词网站。

第一版页面看起来不够美观高级

让 AI 继续优化一次

这次优化后效果要好很多

但是因为我给的原始文件内容很多，AI 没有把所有的内容都展示出来，而且为了以后可以随时增加新的提示词，需要再提供一个增加提示词的功能入口

不得不说真强，Cursor 直接给出了解决方案，甚至还有使用说明文档。

然后各种上传功能就有了

而且这个功能真的好全面，几乎能直接当做后台管理系统了。

上传提示词

现在对于页面，我基本满意了，接下来就是把多达 2 万字的提示词都放到页面上，可以让 AI 继续帮我们增加。

我们可以选中文件中药增加的内容，然后 Cursor 直接可以帮助我们根据这段内容进行添加，很方便。

把我给你的提示词文字，帮我转换成 json 格式，放到 prompts.js 文件当中。如果文字里有双引号，请修改为单引号，保证 json 数据格式的正确性。

然后 Cursor 就会在 prompts.js 文件中增加对应的内容了

现在我们的网页内容更加丰富了

网站上线

现在这个网站还是只能在本地浏览 HTML，要想让更多人看到我们的大作，那就要放到互联网上，这里我选择 vercel，因为这个网站提供了限量的免费服务，对于我们这种个人开发者来说，再好不过了。

这一趴同样让 AI 来指导我们（当然这里就需要自己有一个 github 账号，如果你想要个人特色的域名，还需要自己去买一个）

把项目上传到 GitHub 上

登录之后，进入到仓库页面，点击 New 按钮

输入仓库名称，然后点击创建即可

跳转到如下页面说明创建成功

当然本来需要以 git 工具来下载项目，但是这个就不多说了，我们直接把已经完成的代码上传到该仓库下

我们直接点击 uploading an existing file 按钮，然后选择本地文件

当文件都上传之后，我们点击提交即可

接下来我们使用 vercel 来部署网站

https://vercel.com/

我们点击 Start Deploying，会跳转到新的页面

我们直接使用 GitHub 账号登录就行

登录之后，就可以看到我们曾经导入的 GitHub 仓库了

我们点击 Adjust GitHub App Permissions 按钮，配置需要导入的仓库

这里我们点击 Import 按钮，再点击 Deploy 即可

如果我们有自己的域名，可以在这里配置域名

具体配置，可以直接咨询大模型

在 Vercel 中配置自定义域名，主要分为以下几个步骤，结合多篇搜索结果整理如下：

---

### **一、在 Vercel 中添加自定义域名**
1. **进入项目设置** 
 在 Vercel Dashboard 中选择目标项目，进入 **Settings → Domains**，点击 **Add** 输入你的域名（如 `example.com` 或 `www.example.com`）。
 
2. **域名验证** 
 Vercel 会自动检查域名是否已正确解析。若未解析，会提示需要配置的 DNS 记录值（如 CNAME 或 A 记录）。

---

### **二、配置域名 DNS 解析**
根据 Vercel 的提示，前往你的域名服务商（如阿里云、Cloudflare、Namesilo 等）添加 DNS 记录。以下是两种常用方式：

#### **1. CNAME 解析（推荐）**
- **记录类型**：`CNAME` 
- **主机名**：填写子域名（如 `@` 或 `www`） 
- **目标地址**：指向 `cname.vercel-dns.com` 或 `cname-china.vercel-dns.com`（国内优化）。

#### **2. A 记录解析**
- **记录类型**：`A` 
- **主机名**：填写子域名（如 `@` 或 `www`） 
- **目标 IP**：Vercel 提供的 IP，如 `76.76.21.21` 或 `76.223.126.88`（国内用户可选）。

---

### **三、验证 DNS 解析并生效**
1. **等待 DNS 生效** 
 DNS 记录更新通常需要几分钟至几小时。可通过 `dig` 命令或在线工具（如 [DNS Checker](https://dnschecker.org/)）验证解析是否生效。

2. **检查 Vercel 状态** 
 返回 Vercel 的 Domains 页面，若域名旁显示绿色勾选标记，表示解析成功。Vercel 会自动为域名生成并配置 SSL 证书（显示为 "Valid" 状态）。

---

### **四、高级配置与注意事项**
1. **处理 DNS 污染问题** 
 若 `*.vercel.app` 域名在国内访问受限，建议使用自定义域名并通过以下方式优化：
 - **使用 Cloudflare**：将域名解析到 Cloudflare，并开启 CDN 加速，同时关闭代理（仅保留 DNS 解析）。
 - **配置 SSL 严格模式**：在 Cloudflare 的 SSL/TLS 设置中选择 **Full (strict)**，确保 HTTPS 访问稳定。

2. **多域名与重定向** 
 支持为同一项目绑定多个域名（如 `example.com` 和 `www.example.com`），并在 Vercel 中设置主域名重定向。

3. **自动部署与更新** 
 每次代码推送至 Git 仓库后，Vercel 会自动触发重新部署，无需手动操作。

---

### **常见问题**
- **SSL 证书未生效**：检查 DNS 解析是否正确，或尝试在 Vercel 中手动重新部署项目。
- **访问速度慢**：优先选择 CNAME 解析至 `cname-china.vercel-dns.com`，或通过 Cloudflare 加速。
- **域名解析冲突**：确保域名服务商未设置其他冲突记录（如同时存在 A 和 CNAME 记录）。

---

通过以上步骤，你可以快速将自定义域名绑定到 Vercel 项目，并享受自动 SSL 证书、全球 CDN 加速等特性。更多细节可参考 [Vercel 官方文档](https://vercel.com/docs) 或相关博客教程。

说的很清楚了，我们在 vercel 里面把我们的域名配置好，再配置好域名解析即可