更新于：
AI, 产品, 使用技巧

🌈 不会写代码也能做到：用 AI 带你 3 小时完成官网上线（含后台+品牌 IP+运营）

内容目录 隐藏
为什么现在做官网已经完全不一样了？
🌟 接下来，我们真正动手开始构建
二、构建官网项目（30～60min）
三、项目部署上线（30～60min）
四、官网增长与运营（10～30min）
🎉 最终成果：你将拥有

明道云｜产品经理｜卜佳菲

没写过代码？不会设计？没做过系统？——完全没关系。

本教程带你用 Cursor + HAP + Nano Banana Pro，

以 Vibe Coding（氛围编程） + Vibe Designing（氛围设计） 的方式，像施加魔法一样，把官网做出来。

Vibe = 不靠技术，靠“感觉 + prompt + AI 输出”。

本教程只做一件事：

👉 让你相信：今天搭建官网，比写 PPT 还容易。

SRXJWMREADAAM

为什么现在做官网已经完全不一样了？

以前做一个官网，就像在组织一个“小型 IT 项目”：

  • 要前端工程师做页面
  • 要后端工程师做接口
  • 要设计师做视觉图
  • 要运维帮你部署
  • 要排需求、写文档、对齐细节
  • 改一点点都要重新走流程

动辄几周起步，改一次要来回沟通好多轮。对于大多数业务人员来说，做官网一直是又贵、又慢、又麻烦的代表。

✨ 但现在，这件事彻底变了。

今天的官网不再是“技术活”，而是：

👉 你描述你想要什么，AI 和 HAP 自动帮你做出来。

我们把过去几个角色（前端、后端、设计、运维）拆分成了三个 AI 能力最强的领域：

① Vibe Coding（氛围编程）——让 AI 帮你写前端

你不需要写代码，只需要说：

“我想做一个产品列表页面，要现代一点，有搜索功能。”

AI 编程软件（Cursor/Claude等）就能自动生成：

  • 页面结构
  • 组件布局
  • 样式风格
  • 动态读取后台数据的代码

你只需要用语言“给 vibe（氛围）”，AI 负责把 vibe 变成真正的前端页面。

② Vibe Designing（氛围设计）——让 AI 帮你做视觉图

以前：

  • 找设计师
  • 反复对稿
  • 做 Banner、背景图、产品场景图

现在你只说一句：

“给我一张现代极简、带一点科技感的首页 Banner。”

Nano Banana Pro 会自动生成：

  • 高清大图
  • 完整场景
  • 多产品融合
  • 光影、构图、氛围感满分

你提供感觉，AI 提供设计。

③ Vibe Architecting（氛围架构）——通过 HAP MCP 让 AI 帮你搭后台、建数据、跑自动化流程，官网真正能“动起来”的业务闭环

HAP 是整个体系里最重要的部分，它不是“数据库”或“后台系统”那么简单，而是：

👉 一个能让 AI 直接为你构建后台、数据结构与业务流程的应用底座。

NCIQJWZDACABO

借助 HAP MCP，AI 不再只是“生成代码”，而是可以 真实操作、真实创建、真实落地业务系统：

  • 自动创建数据结构（产品、Banner、内容……）
  • 自动生成后台管理页面
  • 自动编排流程（线索 → 提醒 → 跟进 → 归档）
  • 自动拉取 API 文档、自动配置 API、自动连前端
  • 你一句话，AI 就能让一个后台应用“凭空长出来”

这一切都在 零代码、即时生效 的状态下完成。

⭐ 于是你的官网变成一个主动运转的系统：

  • 后台改内容 → 前端立即同步
  • 用户提交表单 → 数据实时写入 HAP
  • 自动化流程接力处理后续动作
  • 产品、活动、文章随时维护

而这些——都可以交给 AI + HAP MCP 自动协作完成。

这就是 Self-Contained Loop（业务闭环）：

前端展示 → 用户互动 → 数据回到 HAP → 自动化处理 → 再反馈回官网→ 周期循环、持续更新

整个循环不需要工程师，你就能自己掌控。

🌈 所以，这篇教程能帮你做到什么？

非常简单：

👉 3 小时内，从零开始做出一个可上线、可管理、可自动化的企业官网。

包括：

    • 可访问的前端页面
    • 可随时调整的后台系统
    • 自动读取后台数据的动态官网
    • 自动生成的视觉图、Logo、IP 形象
    • 线索收集与流程自动化
    • 一键部署上线

以前需要一个团队才能完成的事，现在：

💡 你 + AI + HAP 就够了。

🌟 接下来，我们真正动手开始构建

看到这里，你应该已经能感受到：

做官网这件事，已经不再是技术门槛，而是表达能力的门槛。

你需要掌握的事情只有三件：

  1. 描述你想要什么页面（Vibe Coding）
  2. 描述你想要什么风格（Vibe Designing）
  3. 在 HAP 里像填表一样管理数据（业务闭环）

接下来我们正式进入实操，从第一步开始：

用 AI 自动生成一个能跑的官网项目。

二、构建官网项目（30～60min）

包括前端页面+后台管理+动态读取数据

2.1 前置准备

步骤 说明
(1) 进入 HAP 官网：https://www.mingdao.com/

HAP 是一款 AI 强化的企业级超级应用平台。它帮助企业以零代码方式构建核心业务系统，并将 AI 融入数据、流程与应用，让自动化真正进入智能时代。
(2) 创建空应用 BI6BAMJEADAH2
(3) 查看 API 开发文档 Z56BCMJEACAH4
(4) 获取应用密钥和 MCP 配置 SVZSAMJEAAAAK
(5) prompt 业务中描述中，填入你的需求和应用密钥 K5NFIMZEAAAF6
(6) 在Cursor 中配置 MCP（重要！必须完成配置） KNFXCMJEABQG4
  • 进入 Cursor Setting-Tools&MCP填入下方 JSON
    • 【HAP-MCP】：用于直接调用工具搭建HAP应用（注意：需要替换为第 3 步复制的 url）
    • 【HAP-应用 API 文档】：获取 HAP 应用 API 文档，用于代码中编排 API请求（可直接使用示例内容）
  1. {
  2. “mcpServers”: {
  3. “HAP3.0-API”: {
  4. “url”: “需替换为第 3 步复制的 url”
  5. },
  6. “HAP-应用API文档”: {
  7. “command”: “npx -y apifox-mcp-server@latest –site-id=5442569”,
  8. “args”: [],
  9. “env”: {}
  10. }
  11. }
  12. }
  • 配置成功 → 两条绿色状态灯。

356X6MJEACAGC

2.2 一键生成项目 Prompt（真正的 Vibe Coding）

这是给业务人员设计的“一键生成 Prompt”，丢给 Cursor或者其他 AI 编程工具 就能跑出来：

你只需要复制→粘贴→回车，业务需求部分替换成你自己的内容

  • ⚠️注意：为保证项目正常运行，你必须先完成2.1 前置准备 ，你需要根据你的实际需求，更改下方「 🧭 业务需求」部分内容（29 行开始）

 

2.3 使用 Cursor+HAP-MCP自动构建项目

Cursor 打开空文件夹 → 输入 prompt → 自动开始生成。

开始自动化构建

Cursor打开一个空文件夹，右侧填入prompt后 回车，就开始自动编排执行了

3E73UMJEABAAS

首次运行后效果

你会同时得到：

  • ✔ 官网前端页面（页面结构、样式、动态数据、多端适配全部帮你生成）
  • ✔ 后台管理-HAP应用（零代码即可持续改动、无限扩展）

不需要懂技术，也不需要等排期。完全可以像操作 Excel 一样自己增删字段、扩展表结构、调整业务逻辑。点几下就能完成，立即生效。这就是 HAP 的优势：零代码，业务想法随时都能落地。

  • ✔ 动态读取 HAP 数据的真实可运行系统（后台一改 → 官网实时更新，完全打通）
  • 官网

  • 后台管理

2.4 打造品牌IP & 企业文化设计（15～30min）

使用Nano Banana Pro 生成装修设计图（多产品场景融合）

公司有 5 个不同产品（茶几、椅子、沙发、书柜），想看看它们摆在一个温馨的房间里，放在官网展示企业文化

  • 极简提示词
  1. 将这些产品融洽地放到一个适合的室内空间中。
  • 左边上传单图 → 右边自动生成融合场景。不需要 PS，不需要建模。
BPMO4MJEACAA2

更多玩法（参考自 AGI 社区的优秀实践）：

  • 参考提示词
  1. 创建图片 我是做全屋家具定制的业务，我需要品牌 IP，我需要一只仓鼠3D Q版形象/平面 logo
  2. 设计要求：衣服或者帽子上融合 DS字母，形象更可爱卡通一些，融合设计，定制元素，如尺子，铅笔。
FFV76MJEAAQDY KSA76MJEABABE

DKOA2MREACQBW

更多玩法（参考自 AGI 社区的优秀实践）：

2.5 页面调优（Vibe Coding + Vibe Designing 联动）

更换首页背景图

  • 将生成的图片添加至项目中

  • 自然语言对话：“请替我更换首页背景图”

加一个吉祥物悬浮窗（用于线索收集）

  • 示例prompt
  1. 在页面右下方，用展示悬浮窗，加上呼吸交互。悬浮窗中展示 形象。点击展示表单标题展示“联系我们”，需要填入手机号，姓名，需求描述。
  2. 你需要通过 通过 【HAP-MCP】，创建一个线索表。用于收集用户填写信息.
  3. 提交线索后，你需要利用前端 CORS能力调用【新增行记录】接口，往 HAP 写入一条数据。接口文档可以通过【应用 API 文档-MCP】获取。

SR6C4MREACAF2

根据你实际需求优化调整

完全可以靠自然语言调优迭代

  • 新增表
  • 新增模块
  • 加产品筛选
  • 加搜索功能

2.6调优后效果

 

三、项目部署上线（30～60min）

在项目部署上线的过程中，难免会遇到一些同学不太熟悉的技术问题，不用害怕，我们完全可以借助 AI 一步一步地帮你完成部署和上线，下面给大家介绍下大致的流程

建议：全程配合 AI 使用

部署过程中，如果你遇到任何报错、卡住的步骤，都可以把：

– 终端里出现的命令和报错截图 / 文本

– 你的 Nginx 配置内容

– 当前执行到的步骤

– 发给 AI，让 AI 帮你逐行检查、解释、修改命令。

你也可以随时问 AI：「我现在做到第 X 步，下一步该干嘛？」，让 AI 手把手带着你往下做。

我们一步一步来，把「本地前端项目 → 部署到腾讯云服务器」整个流程串起来。下面默认你已经用 Cursor 把前端代码写好了，并且有一个腾讯云账号。

我用的是比较通用、易懂的方式：购买云服务器（CVM）+ Nginx 静态托管。

  • 直接问就好可以了，后面步骤仅供参考

OJFKQMREAAAGQ

3.1 准备工作

  1. 确认你的前端项目能打包
  • 常见框架：
    • React（Vite / CRA）
    • Vue (Vite / Vue CLI)
    • Next.js（静态导出也可以）
  • 在本地项目根目录执行（根据你的项目调整）：
  1. # Vite / Vue / React 常见
  2. npm install
  3. npm run build
  • 一般会在项目根目录生成一个类似：
    • dist/
    • 或 build/
  • 这个目录就是要部署到服务器上的静态文件（HTML / JS / CSS / 图片等）。
  1. 准备一个腾讯云服务器

3.2 连接到腾讯云服务器

  • 使用终端 SSH 登录（推荐）
  • 在你本地电脑（Cursor 终端或系统终端）：
  1. ssh root@你的服务器IP
  2. # 第一次会问是否继续连接，输入 yes，然后输入密码
  • 如果你不是 root 用户，可能是：
  1. ssh ubuntu@你的服务器IP
  • 登录成功后，就进入到远程服务器的命令行了。

3.3 在服务器上安装运行环境

更新软件源

  • Ubuntu：
  1. sudo apt update
  2. sudo apt upgrade -y
  • CentOS：
  1. sudo yum update -y

(2) 安装 Nginx（用来部署静态前端）

  • Ubuntu：
  1. sudo apt install nginx -y
  • CentOS：
  1. sudo yum install epel-release -y
  2. sudo yum install nginx -y
  • 安装完后启动：
  1. sudo systemctl start nginx
  2. sudo systemctl enable nginx # 设置为开机自启
  • 在浏览器访问：
  1. http://你的服务器IP
  • 如果看到 nginx 欢迎页面，说明服务器和网络都没问题。

3.4 把前端打包文件用 scp 直接上传（到服务器

  • 在本地（不是服务器里）执行：
  1. # 假设你的前端项目已经 build 到 dist 目录
  2. scp -r ./dist/ root@你的服务器IP:/var/www/your_frontend
  • 说明：
    • -r 表示递归拷贝整个文件夹
    • /var/www/your_frontend 是部署目录，你可以随便取，比如 /usr/share/nginx/html/your_app
  • 如果目录不存在，可以先在服务器上创建：
  1. sudo mkdir -p /var/www/your_frontend
  2. sudo chown -R $USER:$USER /var/www/your_frontend
  • 然后再 scp 上传。

3.5 配置 Nginx 指向你的前端项目

下面以 Ubuntu 为例。

创建一个 Nginx 站点配置

  1. sudo nano /etc/nginx/sites-available/your_frontend
  • 写入（根据你的路径改一下）：
  1. server {
  2. listen 80;
  3. server_name your-domain.com; # 如果没有域名，可以先写你的服务器IP，或者留空注释
  4. root /var/www/your_frontend/dist; # 改成你的 dist 路径
  5. index index.html;
  6. location / {
  7. try_files $uri $uri/ /index.html;
  8. }
  9. }

如果是前端单页应用（SPA：React Router / Vue Router），try_files … /index.html 非常重要，不然刷新会 404。

启用这个配置

  1. # 建立软链接到 sites-enabled
  2. sudo ln -s /etc/nginx/sites-available/your_frontend /etc/nginx/sites-enabled/your_frontend

(3)检查 Nginx 配置有没有问题

  1. sudo nginx -t
  • 如果显示 syntax is ok 和 test is successful，就可以重载：
  1. sudo systemctl reload nginx

(4)访问测试

  • 在浏览器进入：
  1. http://你的服务器IP
  • 如果你在配置里用了 server_name 是域名，就用：
  1. http://你的域名

看到你的前端页面就说明部署成功 🎉

3.6 腾讯云安全组 & 服务器防火墙

如果访问不了，很可能是端口没开。

腾讯云安全组

在腾讯云控制台：

  1. 打开「云服务器」→ 找到你的实例
  2. 看关联的「安全组」
  3. 编辑安全组规则，确保入站规则开放了：
    • 协议：TCP
    • 端口：80（HTTP），需要 HTTPS 再加 443
    • 来源：0.0.0.0/0（对全网开放，简单测试没问题，正式环境可以再收紧）

(2).服务器自身防火墙（如果有）

  • Ubuntu + ufw：
  1. sudo ufw allow 80/tcp
  2. sudo ufw allow 443/tcp
  3. sudo ufw status
  • CentOS + firewalld：
  1. sudo firewall-cmd –zone=public –add-service=http –permanent
  2. sudo firewall-cmd –zone=public –add-service=https –permanent
  3. sudo firewall-cmd –reload

3.7 绑定域名（可选）

如果你有域名：

  1. 在域名服务商那里添加一条 A 记录：
    • 主机记录：@ 或 www
    • 记录类型：A
    • 记录值：你的腾讯云服务器 IP
  2. 然后在 Nginx 里 server_name 改成你的域名
  3. 推荐再用 Let’s Encrypt（如 certbot）签发免费 HTTPS 证书

四、官网增长与运营（10～30min）

  1. 让官网真正成长与被看见（SEO + 收录 + 品牌传播）

SEO 优化

SEO = 免费流量入口

SEO keywords 就是用户在搜索引擎里会输入的关键词，把这些词布局到网站上，可以让客户更容易搜到我们。

  • 关键词选得好，来的是精准客户；本质上，它是让搜索引擎知道“我们是做什么的”，也是免费获取客户的重要手段。
  • 将下方标签插入到你的head中，填入合适的关键词
  1. <meta name=”keywords” content=”明道云HAP,零代码,APaaS,hpaPaaS,低代码,无代码,0代码”>

网站收录

百度

4NF4ILBEACABW

PKSMKLBEABQEK

Google

Z2PMMLBEADQAO

G3A4OLBEABAE2

Bing

https://www.bing.com/webmasters

IUDQMLJEABAEM

🎉 最终成果：你将拥有

能力 成果
Vibe Coding 一个能上线的动态官网
数据管理能力 灵活的管理后台（HAP）
Vibe Designing 品牌图、Logo、场景图
部署能力 个人即可上线全站
增长能力 SEO + 搜索收录

你会发现：

搭建官网不是难，难的是以前的方式太复杂。

今天，它成为业务人员也能掌握的超级能力。

 

关于HAP

HAP(Hyper Application Platform)超级应用平台可以帮助用户零代码构建企业应用，用户不需要代码开发就能够搭建出用户体验上佳的销售、运营、人事、采购等核心业务应用，打通企业内部数据。HAP还具备超自动化引擎，可以全面自动化复杂和重复的业务流程。运用HAP的集成中心与完整的API对接能力，用户可以轻松地将HAP与外部系统集成。除此之外，HAP还具备很高的可组合性，国际化支持，并支持云原生架构，实现了多云部署能力。通过插件架构，HAP正在逐步建立起繁荣的实施与开发生态。

HAP可以帮助企业大大节省软件费用、降低定制开发的成本和时间，拥有一个极度灵活和易用的数字化平台，是企业数字化建设的重要工具。目前已有上百万用户使用，付费企业超过4000家，包括可口可乐、复星集团、广汽本田、赛力斯汽车、中国移动、中石化、中铁集团、银鹭食品、民生银行、迪卡侬、艾默生电气、泰科电子、四川航空、东方证券、洲际酒店、科大讯飞、柳工集团、沃尔玛、中国烟草、三菱银行等知名客户。

2021年5月，明道云获得海纳亚洲近亿元投资。公司目前有超过130名员工，产品研发团队过半，总部位于上海漕河泾开发区，在北京、广州、深圳、成都、郑州、武汉、西安和宁波设有分支机构。公司为高新技术企业，上海市专新特精认定企业。

成为HAP大使
相似文章推荐