ChatGPT Sol＋Claude Design AI 建站完整教程：从网页设计、动画制作到网站上线
随着 AI 建站工具不断升级，现在即使不会写代码，也可以完成网站设计、图片生成、页面动画和正式上线。本教程将演示一套完整的 AI 建站全流程：先使用 ChatGPT GPT-5.6 Sol 生成创意网站效果图和高清图片素材，再通过 Claude Design 将设计图还原成网页，随后使用 OpenArt 把静态人物图片制作成动态视频，最后将网站上传到 Hostinger，并绑定自己的域名。
注册 Hostinger 网站服务器和域名
链接：https://bit.ly/3BysRqP
整个流程不需要复杂的编程基础，比较适合个人创作者、自由职业者、跨境电商卖家、小型企业和准备搭建作品集网站的新手。
**联盟链接说明：**本文中的部分工具链接属于联盟推广链接。通过这些链接注册或购买，通常不会增加你的费用，但我可能会获得一定佣金，用于支持网站持续更新免费教程。
提示词1：
我想生成一个极具创意的设计公司网站，网站中需要包含竖排文字和横向文字、高分辨率图片，以及富有创意且独特的页面板块，让网站在视觉和设计上超越竞争对手。我还希望设计里面包含一些创意人物图。
你能帮我生成一段适合制作这个网站的提示词吗？然后，我还希望你根据这段提示词制作一张网站效果截图。
提示词2：
现在，请生成这个网站中使用的所有图片。我需要高清版本，并且希望这些图片和网站上展示的效果完全一致。最后，请将所有图片整理并打包成一个 ZIP 压缩文件发给我。
提示词3：
根据截图复刻网站
分析我上传的网站设计截图，并将其整理成一段标准化的网站生成提示词，用于复刻这个网站。
具体要求：
- 分析网站的布局结构
- 分析视觉层级
- 分析字体与排版
- 分析配色方案
- 分析 UI 界面组件
- 分析页面间距系统
- 分析各个板块的组织结构
- 分析整体设计风格
然后，创建一段专业的网站生成提示词，可直接用于 AI 网站生成工具。
只输出最终优化后的提示词，不需要提供其他解释。
我已经把高清图片放在一个 ZIP 压缩包中。请根据我提供的网站截图，将这些图片放置在页面中对应的位置。
提示词4：
我希望你创建顶部菜单栏的几个页面，并沿用首页相同的设计风格，确保整个网站的视觉和布局保持统一。
提示词5：
我想给这个网站制作一些简单的动画移动的效果
本期 AI 建站工具和相关资源
1. 获取本期全部提示词
本文涉及的网站设计提示词、图片生成提示词、Claude Design 网页还原提示词和动画提示词，已经整理在下面的页面中。
查看本期视频全部提示词
链接：https://aiyoufeng.com/chatgpt-sol
2. Claude Design AI 建站工具
Claude Design 可以根据网站截图、图片素材和文字要求生成网页。本教程主要使用它完成网站页面还原、动画制作和多页面扩展。
打开 Claude Design
链接：https://claude.ai/referral/Brg3TYwWPw?s=claude_design
3. OpenArt AI 图片和视频生成平台
OpenArt 集成了多种主流 AI 图片与视频模型，可以将网站中的静态人物图片制作成眨眼、转头、呼吸和轻微运动的视频。
注册 OpenArt AI
链接：http://bit.ly/3UunTl6
4. Hostinger 网站服务器和域名
网站制作完成后，需要服务器和域名才能正式上线。Hostinger 支持虚拟主机、域名注册、文件管理和支付宝付款，对新手比较友好。
注册 Hostinger 网站服务器和域名
链接：https://bit.ly/3BysRqP
5. ChatGPT、Claude AI 会员代充平台
部分用户可能无法直接使用中国大陆银行卡订阅 ChatGPT Plus 或其他海外 AI 服务，可以通过银河录像局购买账号或使用会员代充服务。
进入银河录像局
链接：https://nf.video/C1dxn
6. 加入有风知识星球
在 AI 建站、YouTube 创作、联盟营销或工具使用过程中遇到问题，可以加入我的知识星球进行交流。
向有风咨询并加入知识星球
链接：https://t.zsxq.com/16QP9JP8b
7. Fiverr 英文工作外包平台
不会写英文网站内容、品牌文案或者需要找设计师进行二次修改，可以在 Fiverr 上寻找自由职业者。
打开 Fiverr 英文工作外包平台
链接：https://bit.ly/4c9cttG
8. 沉浸式翻译
使用英文 AI 工具或浏览英文网站时，可以安装沉浸式翻译，将网页内容快速翻译成中文。
安装沉浸式翻译
链接：https://bit.ly/4ij7QAO
9. Elementor Pro 页面构建器
准备使用 WordPress 搭建网站，也可以使用 Elementor Pro 对页面进行可视化编辑。
获取 Elementor Pro
链接：https://bit.ly/4cuQ8IF
10. Shopify 跨境电商独立站
需要搭建产品销售网站或跨境电商独立站，可以使用 Shopify。
注册 Shopify
链接：https://shopify.pxf.io/BnBxny
11. Semrush 网站 SEO 分析工具
网站上线以后，可以使用 Semrush 分析关键词、竞争对手网站、自然搜索流量和外链数据。
使用 Semrush 分析网站数据
链接：https://bit.ly/3TfIaNK
一、为什么使用 ChatGPT Sol 和 Claude Design 制作网站？
传统的网站制作流程通常需要先确定页面结构，再寻找设计参考、准备图片素材、编写网页代码，最后购买服务器并上传文件。即使使用普通的 AI 编程工具，图片素材仍然是一个很大的问题。
很多 AI 工具虽然可以快速生成网页，但经常只会在页面中放置占位图片，或者使用与网站风格不统一的随机素材。最终生成的网页结构可能没有问题，但视觉效果很难达到专业设计公司的水平。
本次教程采用了一种不同的制作思路：
首先让 ChatGPT GPT-5.6 Sol 生成一张完整的网站效果图，提前确定网站的配色、字体、人物形象、页面布局和整体设计风格。
接着，让 ChatGPT 根据网站效果图识别页面中使用的所有图片，并分别生成高清素材。
然后，把完整网站截图和图片素材压缩包一起上传到 Claude Design，让它根据截图重新制作网页。
完成首页后，再让 Claude Design 延续相同的视觉风格，继续生成关于我们、服务、作品集和联系我们等页面。
最后使用 OpenArt 将网站中的静态人物图片转换成视频，再把视频替换到网页首屏，让人物可以自然眨眼和轻微移动。
这种方式最大的优势，是先完成视觉设计，再让 AI 根据最终效果制作网页，可以减少反复修改页面风格的时间。
二、使用 ChatGPT Sol 生成网站效果图
打开 ChatGPT 后，在模型选择区域找到本教程使用的 GPT-5.6 Sol。然后将网站类型、设计风格、页面结构和人物图片要求完整描述给 AI。
可以直接使用下面这段提示词：
我想生成一个极具创意的设计公司网站，网站中需要包含竖排文字和横向文字、高分辨率图片，以及富有创意且独特的页面板块，让网站在视觉和设计上超越竞争对手。我希望设计里面包含一些创意人物图。
请帮我生成一段适合制作这个网站的完整提示词，并根据提示词制作一张完整的网站首页效果图。网站需要采用现代、简洁、高级、具有获奖作品气质的设计风格，同时清楚展示导航栏、首屏区域、项目展示、服务介绍、品牌宣言、数据统计、图片画廊、客户评价、奖项和页脚。
发送提示词后，ChatGPT 会先生成网站的整体视觉效果。此时重点检查以下内容：
网站的主色调是否统一，人物图片是否符合品牌定位，竖排文字和横向标题是否清晰，项目展示区域是否有足够的视觉变化，以及页面各个板块之间是否存在明显的层次感。
如果第一次生成的效果不满意，可以继续要求 AI 修改，例如增加人物图片、调整配色、改变主标题排版，或者让整体设计更偏向极简、科技、时尚或艺术风格。
确定最终效果后，将完整的网站设计图下载到电脑。后面 Claude Design 会根据这张截图还原网页，因此建议保存清晰度最高的版本。
三、让 ChatGPT 提取网站中的全部高清图片
网站效果图确定以后，不要马上进入 Claude Design。先让 ChatGPT 把效果图中的人物、项目图、产品图和装饰图片分别整理出来。
继续在同一个对话中输入：
现在，请生成这个网站中使用的所有图片。我需要高清版本，并且希望这些图片和网站上展示的效果完全一致。最后，请将所有图片整理并打包成一个 ZIP 压缩文件发给我。
尽量在原来的 ChatGPT 对话中继续操作，这样 AI 可以保留前面的网站设计、人物形象、配色和图片风格。
生成完成后，下载 ZIP 压缩包并解压。建议检查首屏人物图、项目展示图、品牌宣言人物图、产品图片和画廊图片是否完整。
如果发现某张图片分辨率不够，可以单独上传该图片，让 ChatGPT 再生成高清版本；如果还需要更多素材，也可以要求它按照原网站风格继续生成新的图片。
到这里，网站整体截图和高清图片素材已经准备完成。下一步，就是把这些文件一起上传到 Claude Design，正式将设计图还原成可以打开和操作的网页。
四、把网站截图和图片素材导入 Claude Design
准备好完整的网站效果图和高清图片压缩包后，打开 Claude Design。
打开 Claude Design
链接：https://claude.ai/referral/Brg3TYwWPw?s=claude_design
进入设计界面后，如果页面提供“设计系统”和“模板”选项，建议先选择“无”。因为我们已经准备好了完整的网站参考图，如果额外启用其他模板，可能会影响 Claude 对原设计的还原效果。
接下来依次上传两个文件：
第一份文件是 ChatGPT 生成的完整网站效果图；第二份文件是包含全部高清图片素材的 ZIP 压缩包。
网站截图负责告诉 Claude 页面应该如何排版，ZIP 压缩包则负责提供页面中真正要使用的人物图、项目图、产品图和装饰素材。两份文件需要同时上传，否则 Claude 可能只能生成页面结构，却无法准确匹配原图。
然后输入下面这段提示词：
请仔细分析我上传的网站截图，包括页面结构、布局比例、视觉层级、字体风格、文字大小、颜色、间距、边框、图片位置和响应式关系。
我已经将网站中需要使用的高清图片放在 ZIP 压缩包中，请解压并识别其中的素材，再根据网站截图，将对应图片放到页面正确的位置。
请尽可能准确地还原截图中的网站，不要使用随机图片或占位符。网站需要包含真实可编辑的文字、按钮、导航栏和页面板块，而不是将整张截图直接作为背景图片。
请生成完整、可运行的网站，并确保页面在桌面端、平板端和手机端都能正常显示。
发送以后，Claude Design 会开始分析截图并生成网站。这个过程可能需要几分钟，具体时间取决于页面复杂程度、上传素材数量以及所选模型。
在模型选择方面，不一定要使用消耗额度最高的模型。第一次生成网站时，可以先选择速度和质量相对平衡的模型；如果局部还原效果不理想，再针对具体区域继续修改。
生成过程中，可以观察页面是否逐渐出现首屏人物、竖排文字、项目展示、服务介绍、品牌宣言和图片画廊等内容。需要特别确认，网页中的标题和按钮是否可以单独选中。如果所有内容都只是合并在一张图片中，说明网站并没有真正被制作成可编辑页面。
五、如何让 Claude 更准确地还原网页？
通过截图生成网站时，最容易出现的问题是图片位置不对、字体风格不一致、页面比例发生变化，或者部分区域被 Claude 自由发挥。
这时不要直接要求它“重新做一个网站”，而应该针对具体问题逐项修改。例如：
请保持网站其他区域不变，只调整首屏区域。让左侧标题的字号、行高和宽度更接近参考截图，同时增大右侧人物图片，并保持人物头部和橙色圆形装饰的位置关系。
或者：
请检查项目展示区域，将三张项目图片按照参考截图横向排列，保持相同高度，并统一卡片之间的间距。不要更换我上传的图片。
还可以要求 Claude 检查图片路径：
请检查 ZIP 压缩包中的所有图片是否已经正确引用。不要使用网络随机图片，也不要使用空白占位符。如果图片路径错误，请重新匹配并修复。
这种局部修改方式，通常比一次性重新生成整个网站更稳定。
如果你暂时无法直接订阅 ChatGPT Plus、Claude Pro 或其他海外 AI 会员，可以查看银河录像局提供的账号购买和会员代充服务。
查看 ChatGPT、Claude AI 会员代充服务
链接：https://nf.video/C1dxn
六、继续创建关于我们、服务和联系页面
Claude 根据截图生成的通常只是网站首页。虽然顶部已经显示了 Work、Services、About、Studio、Journal 和 Contact 等导航菜单，但这些按钮不一定已经连接到真正的页面。
如果准备正式上线网站，还需要继续创建其他页面。可以输入：
请根据当前首页的设计语言，继续创建 About、Services、Work、Studio、Journal 和 Contact 页面。
所有新页面必须沿用首页的字体、配色、网格系统、按钮样式、图片风格、边框、间距和动画节奏，确保整个网站在视觉上保持统一。
请为顶部导航栏添加正确的页面链接，保证每一个菜单都可以正常打开。不要重新设计首页，也不要更换现有品牌风格。
对于普通企业网站，至少建议准备以下页面：
About 关于我们
可以包含品牌故事、团队介绍、企业使命、设计理念、发展历程和合作方式。
Services 服务页面
详细介绍品牌设计、网站设计、视觉设计、用户体验设计、开发服务或咨询服务，并增加明确的联系按钮。
Work 作品集页面
展示项目图片、项目名称、服务类型、客户行业、设计过程和最终成果。
Journal 博客页面
发布行业观点、案例分析和教程文章。持续更新高质量内容，也有助于网站后续进行 Google SEO。
Contact 联系页面
添加邮箱、社交媒体、联系表单和项目咨询入口。
每生成一个新页面，都要检查顶部导航是否可以正常切换，以及手机端菜单是否能够打开。
如果新页面还需要更多图片，可以回到原来的 ChatGPT 对话，让它继续生成风格统一的素材：
请根据我们最开始设计的网站风格，再生成一组适合 About、Services、Work 和 Contact 页面的高清图片。请保持人物造型、摄影风格、色彩、光影和整体艺术方向一致。
继续在原对话中生成素材，可以让 AI 更容易保持视觉统一。
七、为网站增加高级滚动动画
网站页面全部创建完成后，可以继续让 Claude Design 添加动画效果。这里需要注意一个专业术语：正确写法是 CSS z-index，不是“CS index”。
z-index 用来控制不同元素之间的前后层级。如果设置不正确，可能会出现人物图片挡住标题、装饰图形挡住按钮、移动端菜单被页面内容覆盖等问题。
可以输入：
请在不改变网站现有布局、文字、字体、图片和配色的前提下，为整个网站增加高级、克制、流畅的动画效果。
请添加页面加载动画、首屏文字逐行进入、人物图片轻微缩放、滚动触发动画、项目卡片悬停动画、数字递增动画、图片视差效果和自定义鼠标跟随效果。
请正确建立 CSS z-index 层级系统，保证背景、装饰图形、人物图片、正文内容、导航栏、移动端菜单、弹窗和自定义鼠标之间不会互相遮挡。
优先使用 transform 和 opacity 制作动画，避免影响页面加载速度。请同时兼容 prefers-reduced-motion，并在手机端减少复杂视差和鼠标动画。
完成以后，点击 Claude Design 右上角的预览按钮，在新窗口中测试网站。正常情况下，打开页面时会出现首屏入场动画；向下滚动时，项目卡片、文字和数字也会依次出现。
下一步，我们将使用 OpenArt 把网站中的静态人物图片制作成可以眨眼和轻微移动的视频。
八、使用 OpenArt 将静态人物图片制作成视频
网站加入滚动动画以后，还可以进一步把首屏中的静态人物图片制作成动态视频，让人物自然眨眼、轻微转头或产生呼吸感。这样做可以显著增强首页的视觉冲击力，也能让网站看起来更像专业设计工作室制作的互动作品。
本教程使用的是 OpenArt。它是一站式 AI 图片和视频生成平台，内部集成了多种主流模型，不需要分别注册多个 AI 视频工具。
注册 OpenArt AI 图片和视频生成平台
链接：http://bit.ly/3UunTl6
首先，将网站首屏中的人物图片保存到电脑。如果使用的是 ChatGPT 生成的高清素材，可以直接从之前下载的 ZIP 压缩包中找到对应图片。
然后把图片重新上传到 ChatGPT，让它根据人物姿势和网站风格生成图生视频提示词，例如：
保持原图人物的五官、短发造型、白色高领服装、橙色妆容、背景图形和整体构图不变。
镜头缓慢向人物面部推进，人物自然眨眼，保持轻微呼吸，头部非常轻微地转动，眼神冷静、自信。发丝和衣领受到微弱气流影响，产生细腻自然的摆动。
背景圆形、线条和色块产生轻微视差移动，营造现代设计感和空间层次。整体呈现高端时尚广告、创意设计工作室和极简杂志大片风格。动画克制、流畅、真实，电影级光影，时长5秒，不新增人物，不改变服装，不产生镜头抖动。
为了避免人物出现明显变形，还可以添加负面提示词：
面部变形，五官变化，夸张表情，嘴部说话，大幅度转头，身体扭曲，服装变化，发型变化，背景重绘，新增物体，快速运动，镜头抖动，闪屏，模糊，低清晰度。
进入 OpenArt 后，找到视频生成区域，选择“图生视频”功能，然后上传人物图片。
在模型区域选择适合人物动画的视频模型。不同模型所需积分、生成速度和画面效果会有所不同，可以先使用较短时长和标准画质进行测试，满意后再生成更高质量的版本。
将刚才准备好的提示词粘贴到输入框中，然后设置：
- 视频时长：建议先选择5秒；
- 声音：网站背景视频通常不需要声音；
- 生成模式：首次测试可以选择较快模式；
- 视频分辨率：根据积分情况选择480p、720p或更高；
- 画面比例：尽量与原人物图片和网站首屏比例保持一致。
确认后点击生成。人物视频通常比普通图片更消耗积分，因此建议先做短视频测试，不要一开始就选择很长的时长。
生成完成后，重点检查人物眼睛、嘴巴、头发、衣领和背景线条有没有变形。如果效果不满意，可以降低动作幅度，删除“转头”等容易造成变形的描述，只保留眨眼、呼吸和轻微镜头推进。
视频效果满意以后，点击下载并保存到电脑。原教程生成的视频中，人物可以自然眨眼，随后将该视频重新导入 Claude Design，替换首页原来的静态人物图片。
九、将人物视频替换到网站首屏
返回 Claude Design，点击添加文件，将刚才从 OpenArt 下载的视频上传到当前网站项目中。
然后输入：
请将我刚刚上传的视频设置为网站首页首屏右侧的人物视觉素材，替换原来的静态人物图片。
请保持人物原有的位置、比例、裁切范围和圆形装饰背景不变。视频需要自动播放、静音、循环播放，并适配桌面端和手机端。
请添加 playsinline、autoplay、muted 和 loop 属性，避免手机端自动全屏播放。视频加载前显示原静态人物图片作为封面，加载失败时自动回退到静态图片。
不要让视频遮挡左侧标题、按钮、导航栏和背景装饰元素，请检查 CSS z-index 层级以及移动端显示效果。
推荐的视频代码结构如下：
<video
class="hero-video"
autoplay
muted
loop
playsinline
preload="metadata"
poster="images/hero-model.webp"
>
<source src="videos/hero-model.mp4" type="video/mp4">
</video>
同时要求 Claude 对视频进行性能优化：
请不要把过大的原始视频直接放到网站中。保持清晰度的同时压缩文件体积，优先使用 MP4 格式，并为视频设置明确的宽高比例，避免页面加载时发生布局偏移。
修改完成后，重新打开预览页面。人物应该保持在原来的首屏位置，并在网页打开后自动播放。继续向下滚动，检查文字动画、项目卡片、数字递增和鼠标跟随效果是否仍然正常。
十、修改网站品牌名称和文字内容
网站的视觉设计和动画完成后，还需要把示例文字替换成自己的真实品牌信息，否则网站虽然好看，却无法真正用于业务推广。
需要提前准备以下内容：
- 网站名称和品牌名称；
- 企业或个人主要业务；
- 目标客户；
- 核心服务；
- 品牌简介；
- 联系方式；
- 社交媒体链接；
- SEO核心关键词；
- 希望访客执行的操作。
然后告诉 Claude：
我的网站品牌名称是【填写品牌名称】，主要业务是【填写业务内容】，目标客户是【填写目标客户】。
请在保持当前网站布局、字体、配色、图片和动画不变的前提下，替换网站中的示例品牌名称和文字内容。
首页主标题需要突出【核心服务或卖点】，并自然加入关键词【关键词1】、【关键词2】和【关键词3】。
请修改 About、Services、Work、Journal 和 Contact 页面中的文字，让所有内容与我的真实业务一致。不要编造不存在的客户、奖项、项目数量和合作案例。
这里需要特别注意，原始设计中可能包含“获得50多个奖项”“完成250个项目”等示例数据。如果这些数据不属于你的真实业务，应当删除或替换，避免对访客造成误导。
如果不会写英文网站文案，可以使用 Fiverr 寻找英文文案、网页设计或开发人员进行二次优化。
前往 Fiverr 寻找英文工作外包服务
链接：https://bit.ly/4c9cttG
浏览英文工具和网站时，也可以使用沉浸式翻译。
安装沉浸式翻译
链接：https://bit.ly/4ij7QAO
十一、从 Claude Design 导出完整网站
网站内容检查完成后，点击 Claude Design 右上角的分享或导出按钮，选择下载项目。
如果准备直接上传到虚拟主机，可以选择标准 HTML 格式。导出后通常会得到 HTML、CSS、JavaScript、图片和视频等文件。
下载完成后，先在电脑中解压并检查文件结构。网站首页文件通常需要命名为：
index.html
同时确认图片、视频、CSS和JavaScript文件夹都已经完整下载，不要只保留一个 HTML 文件，否则上传后可能出现图片丢失、样式失效或动画无法运行的问题。
下一步需要购买网站服务器和域名，再把导出的文件上传到服务器。
注册 Hostinger 网站服务器和域名
链接：https://bit.ly/3BysRqP
十二、购买 Hostinger 网站服务器和域名
要让网站可以通过互联网正常访问，需要准备两个基础条件：网站服务器和域名。
服务器用于存放网站的 HTML、CSS、JavaScript、图片和视频文件；域名则是访客打开网站时输入的网址。
本教程使用 Hostinger。它提供虚拟主机、云主机、域名注册、文件管理、SSL证书、网站备份等功能，后台支持中文，对第一次搭建网站的新手比较友好。
注册 Hostinger 网站服务器和域名
链接：https://bit.ly/3BysRqP
进入 Hostinger 官网后，可以先把页面语言切换成中文，然后找到“虚拟主机”或“网站托管”套餐。
如果只是搭建个人作品集、企业展示网站或普通博客，前期通常不需要购买配置特别高的服务器。选择套餐时，可以重点关注以下内容：
- 可以创建的网站数量；
- NVMe 存储空间；
- 每月流量限制；
- SSL证书；
- 网站备份频率；
- 是否赠送首年域名；
- 续费价格；
- 客服支持。
购买周期越长，平均每月价格通常越低，但需要一次性支付更长时间的费用。建议根据自己的网站规划和预算选择，不要只看首页显示的最低月均价格，还要同时查看总付款金额和后续续费价格。
部分长期套餐会提供首年免费域名。如果暂时还没有想好域名，也可以先使用 Hostinger 提供的临时域名完成网站搭建，之后再绑定正式域名。
填写账单信息时，根据页面要求选择所在国家或地区，然后选择自己方便的付款方式。中国大陆用户如果页面支持，也可以直接使用支付宝完成付款。
购买完成后，登录 Hostinger 后台，就可以开始创建网站。视频中的完整操作包括选择主机套餐、申领域名、进入网站管理后台和上传网页文件。
十三、在 Hostinger 中创建 HTML 网站
登录 Hostinger 后台后，点击左侧的“网站”，然后选择“添加网站”。
网站类型选择：
自定义 PHP/HTML 网站
因为我们从 Claude Design 导出的是标准 HTML 项目，所以不需要安装 WordPress。
接下来选择网站域名。如果已经申领了正式域名，可以直接选择该域名；如果还没有准备好，可以先使用临时域名。
完成初始化以后，进入网站管理页面，找到“文件管理器”。
打开文件管理器后，进入：
public_html
public_html 是网站的根目录。放在这个目录中的文件，才可以通过域名公开访问。
如果目录中存在 Hostinger 自动生成的默认首页文件，可以先将其删除或备份，然后上传从 Claude Design 下载的网站项目。
这里需要注意：不要只上传单独的 HTML 文件。如果导出的项目中包含 CSS、JavaScript、images、assets、videos 等文件夹，也要保持原来的文件结构一起上传。
正确的目录结构可能类似下面这样：
public_html/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
├── images/
│ ├── hero.webp
│ └── project-01.webp
├── videos/
│ └── hero-video.mp4
└── assets/
网站首页文件必须命名为：
index.html
如果 Claude 导出的首页文件名称比较长，需要在文件管理器中右键重命名，将它修改为 index.html。
完成后，在浏览器中打开你的域名，正常情况下就可以看到网站首页。原教程也是通过进入 public_html、删除默认文件、上传项目并把首页重命名为 index.html，最终完成网站上线。
立即注册 Hostinger并上线你的AI网站
链接：https://bit.ly/3BysRqP
十四、网站上传后图片或动画不显示怎么办？
如果网站可以打开，但图片、样式或动画没有正常加载，可以按照下面的方法检查。
1. 检查文件路径
HTML中的图片路径必须与服务器中的真实文件位置一致。
例如：
<img src="images/hero.webp" alt="AI design studio website">
那么 hero.webp 必须放在：
public_html/images/hero.webp
服务器文件名通常区分大小写。Hero.webp 和 hero.webp 可能会被识别成两个不同文件。
2. 检查 CSS 和 JavaScript 文件
如果页面只有文字，没有排版和动画，通常是 CSS 或 JavaScript 文件没有上传，或者引用路径错误。
例如：
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer></script>
需要确保对应文件真实存在。
3. 检查视频格式
网页背景视频建议优先使用 MP4 格式，并设置自动播放、静音、循环和移动端内嵌播放：
<video autoplay muted loop playsinline poster="images/hero.webp">
<source src="videos/hero-video.mp4" type="video/mp4">
</video>
大多数浏览器会限制带声音的视频自动播放，因此 muted 属性不能省略。
4. 清理浏览器缓存
上传新版本后，如果页面仍然显示旧内容，可以清理浏览器缓存，或者使用无痕窗口重新打开网站。
5. 检查手机端
网站上线后，不要只在电脑上查看。还需要使用手机测试导航菜单、人物视频、按钮、表单和页面滚动效果。
十五、AI网站上线后的基础 SEO 优化
网站可以打开，并不代表已经完成。为了让 Google 更容易理解和收录网站，还需要进行基础 SEO 设置。
首先，为每个页面编写不同的标题和描述：
<title>AI Website Design Studio | 品牌名称</title>
<meta
name="description"
content="使用AI网站设计、品牌视觉和互动动画，帮助企业创建现代化、高转化率的网站。"
>
其次，每个页面只保留一个主要的 H1 标题，并按照内容层级合理使用 H2 和 H3。
图片需要添加准确的 alt 描述，例如：
<img
src="images/ai-website-design.webp"
alt="AI网站设计工作室首页效果"
>
不要为了堆积关键词，在每一张图片中重复完全相同的描述。
此外，还需要检查：
- 网站是否启用 HTTPS；
- 页面在手机端是否正常显示；
- 图片和视频文件是否经过压缩；
- 页面加载速度是否足够快；
- 导航链接是否可以正常访问；
- 是否存在失效页面；
- 每个页面是否提供清晰的联系方式和行动号召；
- 是否添加隐私政策、Cookie说明和服务条款。
网站上线以后，可以使用 Semrush 分析关键词、竞争对手流量、外链和网站问题。
使用 Semrush 分析网站SEO数据
链接：https://bit.ly/3TfIaNK
如果准备使用 WordPress 长期维护网站，也可以使用 Elementor Pro 继续编辑页面。
获取 Elementor Pro 页面构建器
链接：https://bit.ly/4cuQ8IF
通过 ChatGPT Sol、Claude Design、OpenArt 和 Hostinger 的组合，即使不会写代码，也可以完成从网站视觉设计、高清图片生成、网页还原、动画制作到域名上线的完整流程。
查看本期所有AI建站提示词
链接：https://aiyoufeng.com/chatgpt-sol
注册 Claude Design
链接：https://claude.ai/referral/Brg3TYwWPw?s=claude_design
注册 OpenArt AI
链接：http://bit.ly/3UunTl6
相关文章
