用 CloudBase AI ToolKit 5分钟在本地创造一个程序员专属名片网站（同时静态托管云端）

用 CloudBase AI ToolKit 5分钟在本地创造一个程序员专属名片网站（同时静态托管云端）

声明：非广告，为用户体验，若为广告，本人承担一切责任

声明：非广告，为用户体验，若为广告，本人承担一切责任

声明：非广告，为用户体验，若为广告，本人承担一切责任

---

🌟嗨，我是LucianaiB！

🌍 总有人间一两风，填我十万八千梦。

🚀 路漫漫其修远兮，吾将上下而求索。

---

目录

• 用 CloudBase AI ToolKit 5分钟在本地创造一个程序员专属名片网站
• 引言
• CloudBase AI ToolKit介绍
• 效果展示
  • 名片展示效果
  • 在线体验地址
• AI ToolKit 实操
  • 前置准备
  • 免费白嫖一个月ToolKit环境
  • 配置cloudbase MCP
  • 开始实操
  • 静态托管
• 总结
  • AI + 云开发工作流
  • CloudBase的优势
  • 全文总结

引言

随着互联网技术的快速发展，程序员社区对个性化、专业化的在线展示需求日益增长。传统的网页开发方式不仅耗时费力，而且缺乏灵活性和可扩展性。在这样的背景下，CloudBase AI Toolkit 应运而生，它为开发者提供了一站式解决方案，帮助快速构建具备商业价值的应用。

程序员社区的核心需求在于打造一个既能展现个人特色，又能体现专业能力的在线平台。无论是用于个人职业发展、项目展示，还是作为社区交流的载体，一个美观、易用、功能丰富的网站都显得尤为重要。然而，传统的网页开发过程通常需要大量的编码工作，涉及前端、后端、数据库等多个环节，不仅时间成本高，而且维护和迭代也较为复杂。尤其是在快速变化的互联网环境中，开发者需要不断调整和优化应用，以满足用户日益增长的需求。

CloudBase AI ToolKit介绍

在这种情况下，CloudBase AI Toolkit 的出现为开发者提供了全新的解决方案。作为腾讯云开发（CloudBase）推出的新一代AI开发工具，它无缝适配主流AI编程工具，如 Cursor、CodeBuddy、Trae、WinSurf 等，能够自动生成可直接部署的前后端应用与小程序，并一键发布到腾讯云开发平台。这种“AI+开发”的模式，极大地简化了开发流程，让开发者无需深入掌握复杂的开发技术，即可快速搭建出符合需求的应用。

CloudBase AI Toolkit 不仅支持多种代码风格（如 HTML、CSS、JavaScript、Python 等），还允许用户通过简单的Prompt进行定制化配置，从而实现个性化的界面设计和功能布局。这一特性使得开发者能够根据自身需求快速构建出符合品牌形象的应用，同时也能灵活调整样式和交互逻辑，确保应用在不同场景下都能呈现出最佳效果。

此外，CloudBase AI Toolkit 的一键发布功能进一步提升了开发效率。开发者只需在开发环境中输入相应的指令，即可将应用快速部署到云端，实现从开发到上线的无缝衔接。这种高效的开发流程，不仅节省了大量时间，也降低了开发门槛，使得更多开发者能够参与到应用的建设中来。

效果展示

名片展示效果

在线体验地址（求职，求内推）：https://lucianaib-1g0wisrrc59fcd4b-1330758946.tcloudbaseapp.com/
输入相关信息，即可立刻得到专属于你的名片

AI ToolKit 实操

前置准备

（如无合适模板，从0开发，可跳过这一步）先在github下载适合自己的模板，一键初始化。

💫 CloudBase AI ToolKit

由于我的目标新建一个网站，暂无我想要的模板，我是从0开发，如果有你适合的可以直接下载模板。

选择模板后，下载解压到本地，用 codebutty IDE 打开；新文件同理，直接用 codebutty IDE 打开。

免费白嫖一个月ToolKit环境

1.前往云开发CloudBase官网：

• 访问：腾讯云开发CloudBase
• 点击“立即体验”。

2.选择开通并创建环境：

• 选择“开通并创建环境”。

3.输入环境名称：

• 新用户可开通一个免费环境，直接免费购买一个。

配置cloudbase MCP

选择配置 MCP。

打开配置页面以后，选择手动配置，在 MCP 配置中添加：

{
  "mcpServers": {
    "cloudbase": {
      "command": "npx",
      "args": ["-y", "@cloudbase/cloudbase-mcp@latest"]
    }
  }
}

如果配置成功的话在cloudbase的后面会有一个绿色的点。

cloudbase MCP预览，他可以控制我们的资源，包括云环境：

开始实操

由于是一个新文件夹，所以我们的第一步是启用 AI 规则。对 AI 说（模板项目跳过，因为，已包含.rules/目录）：

在当前项目中下载云开发 AI 规则

开始的第一步是登录云开发，我们直接对 AI 说：

登录云开发

在登录过程中他会调用cloudbase MCP的use_mcp_tool工具进行登录，在这个过程中会跳转到网页，在选择云开发环境时选择我们之前白嫖的环境。

出现下方结果，表明登录成功。

于此同时，由于云开发 AI 规则，他也自动的加载了一些相关的22个文件。

开始构建程序员专属名片网站，直接对AI说：

我想要创建一个在线制作程序员专属名片的网站。用户只需输入个人博客地址、姓名、个人简介(展示时放在最后)，擅长方向等信息，系统就会以一种代码风格（如 HTML、CSS、JavaScript 、Python等）将这些信息展示出来，形成一个独特的程序员风格名片。该网站应具备简洁、美观、易用的界面，适合程序员社区使用。展示时要有特色。 背景颜色为白色，不要GitHub，博客/网站可以为空，代码风格应该为下拉框可以选择 名片预览时的背景改为黑色，并且左上角加入程序员的3个点表示代码风格，名片预览时的字体改为白色

成功AI构造代码，并且python -m http.server 8000直接运行。

我们点开发现这个UI有点丑。但是！不用怕，我们直接对AI优化。

实时预览时有点丑，并且下载的图片内容只在右上角，可以适当自适应

我们再次运行看看效果：

现在的这个效果基本是满意的，这多亏了codebutty的内置figma MCP的功能，在生成UI的同时对界面进行优化。

静态托管

在本地生成代码完成后，我们可以他部署到云端进行静态托管，这样其他人就可以直接使用我们的这个想法。具体步骤如下，直接对AI说：

将程序员专属名片网站部署到腾讯云CloudBase

可以看到成功部署，并且返回了可直接访问的URL。

https://lucianaib-1g0wisrrc59fcd4b-1330758946.tcloudbaseapp.com/

本次一个部署了25个文件，包括了主要的html，css和js文件等。

我们来看看这个网站（欢迎大家来体验这个网站，下载一个自己的名片）。

结束开发后，我们可以退出云开发，避免一些不必要的错误操作。

直接对AI说：

退出云开发

到此我们就快速开发了一个程序员专属名片网站（同时静态托管云端）

总结

AI + 云开发工作流

通过 CloudBase AI Toolkit，我们可以在很短的时间内从零开始创建一个完整的程序员专属名片网站，并将其部署到云端进行静态托管。这一过程不仅极大地简化了传统网页开发的复杂性和时间成本，还提供了丰富的定制化和个性化选项，使得开发者能够根据自己的需求快速构建出高质量的应用。

CloudBase的优势

• ⚡ 极速部署：国内节点,访问速度比海外更快
• 🔧 开发友好：专为AI时代设计的全栈平台，支持自动环境配置

全文总结

在这次完整的项目实践中，我深刻体会到了AI辅助开发工具带来的革命性变化。CloudBase AI ToolKit不仅大幅降低了开发门槛，还提供了传统开发难以企及的高效率。特别值得关注的是：

• 自然语言到代码的转换让非专业开发者也能参与创建
• 云原生一体化消除了复杂的部署流程
• 智能优化建议提升了代码质量和性能
• 可视化配置减少了繁琐的底层配置工作

“技术不在于你使用什么工具，而在于你解决什么问题。CloudBase AI Toolkit这类工具的价值，在于它们让我们可以更专注于问题本身，而不是工具的使用。” —— 这正是我在这次项目中最深刻的体会。

（文中详细记录了每个步骤和截图，跟着实践你也能轻松复现这个令人惊艳的效果）

嗨，我是LucianaiB。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉LucianaiB ，获取最新动态，⚡️ 让信息传递更加迅速。