最近连续肝了好几天,写了一个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里面把我们的域名配置好,再配置好域名解析即可

现在全世界的朋友都可以用这个域名来访问我们的网站啦
https://www.chatgptdaily.com.cn/

写在最后
萝卜哥作为有一些编程经验的人,以前专注于后端,对于前端是一窍不通,而且提起CSS这类的就头疼,现在有了AI编程,再也不用为搭建前端页面而烦恼了,甚至上线一个纯前端页面网站也无比顺畅。
虽然目前AI编程还有很多问题,但是对于想要入门的人来说,足够了,完全足够了!
暂无评论内容