AI 建站课程

卡 4 看网站与选风格

(和 AI 打交道的通用规则见卡 0,本卡不再重复。)

1在右侧看网站

位置:WorkBuddy
网站生成后不用打开浏览器,界面右侧会直接显示网站的本机预览;之后每次修改完,这里也会更新(见卡 9)。

WorkBuddy 界面右侧的网站本机预览
WorkBuddy 界面右侧的网站本机预览

截图左边是你和 AI 的对话,右边就是网站的本机预览。预览显示的是当前保存的草稿样子,你在右侧点点看看,不需要额外操作。

2看看有哪些风格可以选

位置:WorkBuddy
对默认的样子不满意,就问:

在对话框里输入

有哪些风格可以选?

AI 会用你的内容生成一个对比页,把 6 套风格并排展示,并给出建议。这一步约 0.9 积分。

6 套风格并排的对比页
6 套风格并排的对比页

截图就是风格对比页:6 套风格用的是同一份真实企业资料,你操作时看到的就是套用你自己资料的效果。编号 1 到 6 依次是商务经典、现代大气、简约留白、工业稳重、杂志编辑、明亮科技,看好哪一套,记住它的编号。

3换风格、换颜色

位置:WorkBuddy
选好编号后,把编号和想要的主色一起说清楚,例如:

在对话框里输入

换成第 2 套,主色用 Logo 的蓝色。

AI 只改网站配置,从 Logo 图片里取出蓝色作为主色,然后重新生成网站。这一步约 1.2 积分。

4AI 说"不支持"的时候

超出模板范围的要求,例如:

在对话框里输入

首页的按钮改成圆角的。

AI 会说明不支持,列出 6 套风格里按钮的差异,建议你换一套风格,而不会自己乱改文件(这条回复本身约 0.3 积分)。这是正常的,不是故障。

5看看生成出来的网站长什么样

下面是用一份真实企业资料(本课程试点客户)生成的网站实拍,可以对照检查你自己网站生成后的效果。

生成的网站首页(桌面)
生成的网站首页(桌面)

这是首页在电脑上的样子(第 1 套商务经典风格):内容都来自资料整理后的确认结果。

生成的网站首页(手机)
生成的网站首页(手机)

同一个首页在手机上的样子,不需要你另外做任何设置。

服务详情页
服务详情页

这是其中一个服务详情页,风格和你选的那一套一致。

6✓ 做对了的标志

通过这张卡,你已经会在界面右侧看网站,并用一句话选定风格和主色。下一张卡:注册 Gitee 账号。

本页 5 张截图,拍摄于 2026-10-23、2026-10-30;界面若有变化,以卡内「位置:」标注和你电脑上的实际界面为准。