首页 SEO技术经验分享正文

我要投稿

如何用AI 编程工具1 天搭建SaaS官网？傻瓜式操作全流程

流星经验分享

2025-06-16 0 907 百度已收录

傻瓜式ai编程

今天我花了不到1天的时间，就用ai编程工具，做好了一个全新的SaaS软件产品官网，简单到不能再简单，并且最终ai做出来的官网也是符合、并满足了常规的官网特点和要求。

先看效果，首页完整截图，同时适配移动端，符合SEO优化和收录要求。

价格页，多个套餐的对比、介绍和说明。厉害的是，AI基本还帮我写了95%以上的文案！

功能介绍页，我需要做的只是提供替换图片素材。

关于我们页面，我特意让ai帮我做出又简洁、又富有层次的效果。

移动端体验效果也不错，

下面介绍，如何傻瓜式ai开发你自己的产品官网。

准备工具

小白教程，先在电脑装好：vs code 编辑器。认准这个图标，微软出的。

在你的vs code 打开后，搜索并安装这个插件：腾讯云代码助手 CodeBuddy。

最后，在你的本地电脑新建一个目录，用vs code 打开这个新目录（选择 Open Folder… ），等来用来放置新官网的项目源代码。

ai编程对话

下面开始具体的ai编程对话。我问，ai写。

参考我的提示语：

请帮我开发一个全新的 YesDev项目管理软件私有部署版本的推广网站。

技术要求：

1、使用合适的主流前端开发框架；

2、支持 pc 手机同时访问；

3、能够进行前端的渲染，方便seo搜索和收录；

4、是否可以采用node 18, next.js ?

官网需求：

1、按商业化风格，主要的目标客户群体是企业、老板、采购部门和负责人；

2、需要有产品介绍、套餐介绍、案例介绍、联系钩子等；

3、只需要中文，不需要英文，符合中国人访问的习惯；

UI风格：

1、尽量层次感足、大气简洁、有图标；

2、一些图片位置可以预留，后续补充。

参考资料：

1、YesDev SaaS版官网：https://www.yesdev.cn/

2、YesDev 私有部署旧官网：http://pro.yesdev.cn/ （现在的）

请开始直接编写项目和代码，需要找我确认的可以问我。

AI回答（都为 CodeBuddy，下面省略说明）：

我需要开发一个全新的YesDev项目管理软件私有部署版本的推广网站。让我分析一下这个任务的复杂度和需求：

技术需求分析

1. 使用主流前端开发框架

2. 支持PC和移动端响应式设计

3. 支持前端渲染，有利于SEO

4. 用户建议使用Node.js 18和Next.js

内容需求分析

1. 商业化风格，面向企业客户、决策者和采购部门

2. 需要包含产品介绍、套餐介绍、案例介绍、联系方式等

3. 只需中文版本，符合中国用户习惯

UI风格需求

1. 层次感强、大气简洁、有图标

2. 预留图片位置

参考资料

1. YesDev SaaS版官网

2. YesDev私有部署旧官网

这个任务涉及创建一个完整的网站，但主要是前端开发，不需要复杂的后端功能。使用Next.js是一个很好的选择，因为它支持服务端渲染(SSR)和静态站点生成(SSG)，有利于SEO，同时也支持响应式设计。

任务复杂度评估：

文件修改数量：预计需要创建10-15个文件（包括页面组件、布局组件、样式文件等）

工具调用次数：预计需要10-15次工具调用

系统架构：相对简单，主要是前端展示网站

这个任务复杂度适中，可以继续进行。我将首先检查当前目录结构，了解现有项目情况，然后开始搭建新的Next.js项目。

我将帮您开发YesDev项目管理软件私有部署版本的推广网站。首先，让我了解一下当前项目目录的情况。

既然目录为空，我们可以开始创建一个全新的Next.js项目。我们将使用最新的Next.js 14，它提供了更好的性能和开发体验。

我们需要：

1. 使用create-next-app创建新项目

2. 配置TypeScript以提供更好的类型安全性

3. 使用Tailwind CSS进行样式设计，它能够帮助我们快速构建响应式设计

4. 配置项目以支持SEO优化

让我们首先创建项目。

执行命令：

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

我（提示AI先切换到node 18）：

你先切换到 nvm use 18，再继续执行上面命令

AI：

好的，我们需要先切换到 Node.js 18 版本，然后再创建 Next.js 项目。让我们分两步执行：

1. 首先切换 Node.js 版本

2. 然后创建 Next.js 项目

执行命令：

nvm use 18

AI：

很好，我们已经成功切换到 Node.js 18。现在让我们继续创建 Next.js 项目。我们将使用 create-next-app 来创建一个包含以下特性的项目：

TypeScript 支持

Tailwind CSS 支持

ESLint 配置

新的 App Router 架构

src 目录结构

“@/*” 导入别名

执行命令：

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

AI：

很好，Next.js项目已经成功创建。让我们检查一下生成的项目结构，然后开始进行必要的配置和开发。

我们需要：

1. 首先查看生成的项目结构

2. 然后规划网站的主要组件和页面结构

3. 开始实现具体功能

现在我们已经看到了项目的基本结构。让我们开始规划和实现网站的主要功能：

1. 首先需要规划网站的目录结构：

主页 (/)

产品介绍 (/product)

套餐介绍 (/pricing)

案例介绍 (/cases)

联系我们 (/contact)

2. 需要创建的主要组件：

Header（导航栏）

Footer（页脚）

Hero（首页大图）

Features（产品特性）

Pricing（套餐价格）

Cases（案例展示）

ContactForm（联系表单）

3. 需要添加的工具和配置：

图标库（使用 heroicons）

SEO 配置

响应式设计配置

让我们先创建基础的布局组件和样式配置。首先修改全局样式文件和布局文件。

…… 省略部分过程 ……

最后，AI给出了它的工作总结。如下：

现在我们已经完成了网站的基本结构和样式配置。让我们总结一下已经完成的内容：

1. 创建了所有主页组件：

Hero 部分
Features 部分Testimonials 部分CTA 部分

2. 设置了布局组件：

Navbar
Footer

3. 配置了全局样式和Tailwind

4. 设置了页面路由和元数据

让我们使用attempt_completion来总结工作并提供下一步建议。

# YesDev 网站首页开发完成

已完成的主要功能：

1. 响应式导航栏，包含：

Logo
导航链接
移动端菜单
登录按钮

2. 主页各个部分：

Hero部分：展示产品主要价值主张
Features部分：展示核心功能特性
Testimonials部分：用户评价展示
CTA部分：引导用户注册或了解更多

3. 响应式页脚，包含：

产品信息
导航链接分组
社交媒体链接
版权信息

4. 样式配置：

设置了全局CSS样式
配置了Tailwind主题
添加了自定义组件类

下一步建议

1. 添加页面交互效果

2. 实现登录/注册功能

3. 完善其他页面（功能介绍、价格、关于我们等）

4. 添加实际的图片和内容

5. 进行性能优化和SEO优化

要查看网站效果，可以运行开发服务器：

npm run dev

然后在浏览器中访问 http://localhost:3000

查看本地项目代码文件

在本地目录，可以看到有：

或在vs code中查看，

本地运行

新建命令行窗口，运行：

~/projects/vscode/pro-yesdev-cn on  main ⌚ 21:30:21
$ node -v
v18.20.4

~/projects/vscode/pro-yesdev-cn on  main ⌚ 21:42:10
$ pnpm dev

> pro-yesdev-cn@0.1.0 dev /Users/dogstar/projects/vscode/pro-yesdev-cn
> next dev

   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000

 ✓ Ready in 1471ms

这时，在本地浏览器访问：http://localhost:3000，即可看到你的新官网。类似：

本地打包

全部调试好后，运行打包命令：

~/projects/vscode/pro-yesdev-cn on  main! ⌚ 17:29:10
$ pnpm build

> pro-yesdev-cn@0.1.0 build /Users/dogstar/projects/vscode/pro-yesdev-cn
> next build

   ▲ Next.js 14.0.3

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (11/11) 
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    7.06 kB         103 kB
├ ○ /_not-found                          873 B          84.9 kB
├ ○ /about                               142 B          84.2 kB
├ ○ /contact                             142 B          84.2 kB
├ ○ /features                            176 B          89.3 kB
├ ○ /icon.png                            0 B                0 B
├ ○ /pricing                             188 B            96 kB
└ ○ /product                             188 B            96 kB
+ First Load JS shared by all            84.1 kB
  ├ chunks/4841dddb-81866bba82d6738b.js  53.3 kB
  ├ chunks/614-69b4c3853abccf4a.js       28.9 kB
  ├ chunks/main-app-6c528e34df3c878b.js  218 B
  └ chunks/webpack-b9e9822eaaad1133.js   1.68 kB


○  (Static)  prerendered as static content

打包成功后，会在 out 目录，看到打包后的网站，例如：

最后，把整个out目录，打包，上传到服务器解压，就能正常访问新官网了。例如：

正式环境nginx参考配置（或者直接用宝塔更简单），

# vim /etc/nginx/conf.d/pro.yesdev.cn.conf 
server
{
    listen 80;
    server_name pro.yesdev.cn;

        index index.html index.php;
        root /home/apps/projects/pro.yesdev.cn/out;

        access_log  /var/log/nginx/pro.yesdev.cn.access.log;
}

最终访问效果，