如何用Claude AI制作网站？2026零基础AI建站实战教程
现在使用AI制作网站，已经比以前简单很多。你不需要学习复杂的编程，也不需要具备专业的网页设计经验，只要准备好企业信息、网站图片和一段详细的提示词，就可以让Claude AI帮你生成一个设计现代、页面切换流畅的专业网站。
本教程将带你从零开始，使用Claude AI完成网站规划、页面生成、图片添加、联系表单制作以及网站上线。即使你之前完全没有接触过HTML，也可以跟着本文一步一步操作。
建站前需要准备网站主机和域名：
推荐使用：Hostinger网站主机和域名
链接：https://bit.ly/3BysRqP
Hostinger支持中文后台，并且可以直接上传HTML网站文件，比较适合没有技术基础的新手。
**联盟链接说明：**本文部分链接属于推广链接。你通过这些链接注册或购买服务，可能会让我获得一定佣金，但不会增加你的购买费用。
提示词1：
请使用 HTML 为我的业务设计一个完整的 5 页面网站。网站整体要现代、简洁、专业，并采用独特的设计，确保在视觉和体验上优于竞争对手。
- 企业名称：【你的企业名称】
- 我的业务：【你提供的服务】
- 目标客户：【你的客户群体】
- 网站主要目标：【获取潜在客户 / 预约咨询 / 展示作品】
- SEO 关键词：【关键词 1、关键词 2、关键词 3】
请创建以下 5 个页面：
- 首页 Home
包含：主视觉区域、标题、行动号召按钮（CTA）、信任背书区、3 个核心优势、服务预览、客户评价、关于我们预览、底部行动号召。- 关于我们 About
包含：品牌故事、企业使命、我们的独特之处、行动号召按钮。- 服务 Services
包含：服务项目卡片及介绍、服务流程、常见问题解答（FAQ）、行动号召按钮。- 展示页面 Listings（作品集 / 产品 / 房源）
使用卡片网格布局，加入与行业相关的 Unsplash 图片、筛选栏和行动号召按钮。- 联系我们 Contact
包含联系表单：姓名、电子邮箱、电话号码、留言内容，以及联系方式、地图和社交媒体链接。网站页眉 Header
使用吸顶式页眉，包含：
- Logo
- 导航菜单：首页、关于我们、服务、展示、联系我们
- 联系按钮
- 移动端菜单
网站页脚 Footer
包含：
- Logo
- 快速链接
- 联系方式
- 社交媒体链接
- 版权信息
具体要求
- 采用现代、简洁的设计风格。请根据我的业务，自行选择最合适的颜色、字体和整体视觉风格。
- 完全适配手机、平板和电脑。
- 所有链接和按钮都必须可以正常使用。
- 使用符合我所在行业的 Unsplash 图片。
- 做好 SEO 优化，包括网页标题、H1 标题、图片 Alt 文本以及语义化 HTML。
- 将整个网站制作成一个可预览、可导出的 Artifact 项目。
我添加了自己的图片，请将这些图片应用到网站中。
请将名为 “17144709-watch-7200156_1920” 的图片设置为网站的落地页（首页）。
一、Claude AI建站需要准备什么？
在正式开始之前，建议准备以下内容：
- Claude AI账号
- Claude桌面版应用程序
- 企业名称和业务介绍
- 目标客户信息
- 网站主要目标
- 网站SEO关键词
- 产品图片或服务图片
- 网站主机和域名
- 联系表单或预约表单
Claude免费版本也可以完成基础网站制作。如果需要更高的使用额度，或者暂时不方便直接购买Claude会员，也可以通过下面的平台了解Claude AI会员代充和账号服务。
ChatGPT、Claude AI会员代充及账号购买平台——银河录像局
购买第三方账号或代充服务前，建议先阅读平台规则，并根据自己的实际需求选择。
二、为什么要使用详细的Claude建站提示词？
很多人在使用Claude AI建站时，只会输入一句：
“请帮我做一个手表网站。”
这种提示词包含的信息太少，Claude只能根据自己的理解随机生成页面。最终制作出来的网站可能结构单一、内容空洞，或者看起来像普通模板，无法准确体现你的品牌定位。
一段专业的网站提示词，至少应该包含以下信息：
- 企业名称
- 你提供的产品或服务
- 目标客户群体
- 网站的主要目标
- 网站需要包含的页面
- 品牌视觉风格
- 网站配色
- SEO关键词
- 联系方式
- 行动号召按钮
- 产品图片使用要求
不知道怎样编写专业建站提示词，可以参考：
链接：https://www.designprompts.dev/
这个网站整理了多种网页设计风格和对应提示词。看到喜欢的设计后，可以复制相关提示词，再发送给Claude，让Claude按照指定的布局、颜色和视觉风格修改网站。
三、先让AI完善网站基本信息
在生成网站之前，可以先把下面的内容发送给Claude或ChatGPT，让AI帮助你补充。
企业名称：【填写你的企业名称】
我的业务：【填写你提供的产品或服务】
目标客户：【填写你的主要客户群体】
网站主要目标：【获取潜在客户、展示产品、预约咨询或在线销售】
SEO关键词：【填写与你的业务相关的关键词】例如，你经营的是一个手表品牌，可以填写：
企业名称：Windy
我的业务：销售时尚手表、商务手表和高端腕表
目标客户：关注时尚穿搭、商务形象和腕表收藏的消费者
网站主要目标：展示手表产品、获取潜在客户并引导访客咨询
SEO关键词：时尚手表、商务手表、高端腕表、男士手表、女士手表让AI完善这些信息以后，再将整理好的内容添加到建站提示词中。这样生成出来的网站文案会更加准确，也更有利于后期进行Google SEO优化。
四、准备网站需要使用的图片
Claude虽然可以编写网站代码，但它不一定能够稳定地从网络上搜索图片，并将图片正确添加到网站项目中。
更稳定的方法是提前下载好图片，再把图片和网站文件放在同一个项目文件夹中，让Claude直接调用本地图片。
没有自己的产品图片，可以前往Pixabay寻找免费图片素材：
进入Pixabay以后，输入与你业务相关的英文关键词。例如：
- Watch：手表
- Jewelry：珠宝
- Cleaning Robot：扫地机器人
- Tent：帐篷
- Website Design：网站设计
- Business Meeting：商务会议
下载图片时，尽量选择清晰度较高、视觉风格统一的图片。不要在同一个网站中混合太多不同色调和拍摄风格的素材，否则容易让页面显得杂乱。
同时需要注意图片版权和使用许可。即使图片可以免费下载，也建议查看素材页面的授权说明，确认是否可以用于商业网站。
五、下载并安装Claude桌面版
建议使用Claude桌面版完成网站制作，而不是只使用浏览器网页版。
使用桌面版的好处是可以让Claude访问指定的项目文件夹，并将生成的HTML、CSS、JavaScript和图片资源统一保存在本地。网站生成完成后，也更方便直接找到源代码并上传到服务器。
打开Claude官方网站，下载适合Windows或macOS的桌面版本，安装完成后登录Claude账号。
接下来，在电脑中新建一个网站项目文件夹，例如：
windy-watch-website将前面准备好的产品图片全部放入这个文件夹中。图片文件名尽量使用简单的英文，例如：
hero-watch.jpg
product-watch-01.jpg
product-watch-02.jpg
brand-logo.png不要使用过长的中文文件名、空格或特殊符号，这样可以减少图片无法加载的问题。
创建项目时，在Claude桌面版中选择刚刚新建的文件夹，并允许Claude访问该文件夹。之后Claude生成的网站源代码、页面文件和相关资源都会保存在这里。
需要我针对你的业务修改建站提示词、网站结构或联盟营销内容，也可以加入我的知识星球进行咨询：
链接：https://t.zsxq.com/16QP9JP8b
六、把专业建站提示词发送给Claude AI
完成企业信息、图片素材和项目文件夹的准备后，就可以正式让Claude AI生成网站。
你可以将下面这段提示词复制到Claude中，再根据自己的业务进行修改：
请使用HTML、CSS和JavaScript，为我创建一个完整、专业、响应式的企业网站。
企业名称：【填写企业名称】
我的业务：【填写产品或服务】
目标客户：【填写目标客户群体】
网站主要目标：【获取潜在客户、展示产品、预约咨询或在线销售】
SEO关键词：【填写核心关键词】
网站需要包含以下页面：
1. 首页
2. 关于我们
3. 产品或服务页面
4. 案例展示页面
5. 联系我们页面
网站设计要求：
1. 整体风格现代、简约、专业，具有高端品牌感。
2. 网站需要适配电脑、平板和手机。
3. 顶部包含品牌Logo、导航菜单和醒目的行动号召按钮。
4. 首页需要包含主视觉区域、品牌介绍、核心优势、产品展示、客户评价和联系入口。
5. 页面之间的切换自然流畅。
6. 所有按钮需要有悬停效果。
7. 使用清晰的标题层级和符合SEO规则的HTML结构。
8. 网站加载速度要快，不要使用不必要的大型框架。
9. 为图片添加合理的alt属性。
10. 联系我们页面需要预留联系表单和预约表单的位置。
我已经上传了网站需要使用的图片，请优先使用这些本地图片，不要从外部网站随机调用图片。
请将名为【hero-watch.jpg】的图片作为首页顶部主视觉背景图。
请创建完整的网站文件，并将所有文件保存到当前项目文件夹中。
发送之前，记得把提示词中的企业名称、业务、客户群体、SEO关键词和图片文件名改成自己的内容。
如果提示词过于简单，AI生成的网站通常会比较随机；提供的品牌信息和设计要求越详细，Claude生成的页面越接近你的实际需求。
Claude开始生成网站后，通常会在右侧显示文件创建和修改过程。生成完成后，可以直接预览首页、关于我们、产品服务和联系我们等页面。
七、使用Design Prompts更换网站设计风格
第一次生成的网站不一定完全符合你的审美。如果你觉得配色、字体或页面布局不够理想，可以使用Design Prompts寻找更专业的网站设计方案。
打开：
链接：https://www.designprompts.dev/
网站中提供了多种不同风格的网页设计模板。你可以先预览效果，找到喜欢的设计，再复制对应的提示词发送给Claude。
例如，可以告诉Claude：
请将这套设计系统应用到当前网站。
保留现有的网站内容、产品信息、图片和页面结构，只修改网站的视觉风格、颜色、字体、按钮、间距和页面布局。
请确保首页、关于我们、产品服务、案例展示和联系我们页面全部使用统一的设计风格。
如果你希望Claude按照这个风格生成一个全新的网站，需要新建一个项目文件夹，再告诉Claude：
请按照以上设计风格，为我的企业创建一个全新的网站。
请创建首页、关于我们、产品服务、案例展示和联系我们页面，并在联系我们页面预留联系表单和预约表单区域。
需要注意的是，有些设计提示词默认只生成一个首页。因此，一定要明确要求Claude创建所有页面，否则最终网站可能只有单页效果。
八、如何给Claude AI网站添加联系表单？
一个企业网站不能只追求好看，还需要让访客能够真正联系你。
如果网站没有联系表单，访客看完产品后只能离开；加入联系表单、询价表单或预约表单后，网站才具备获取潜在客户的能力。
本教程推荐使用Jotform制作网站表单。
Jotform可以用来制作：
- 联系表单
- 预约表单
- 报价申请表
- 客户需求调查表
- 产品询价表
- 活动报名表
- 文件上传表单
- 邮件订阅表单
注册Jotform账号后，进入后台创建一个新表单。可以选择空白表单，也可以直接使用现成模板。
对于普通企业网站，联系表单建议包含以下字段：
姓名
电子邮箱
电话号码
公司名称
咨询主题
需求说明
提交按钮
如果你提供预约服务，可以增加：
预约日期
预约时间
服务项目
预算范围
其他备注
Jotform免费版本适合前期测试和个人网站使用。如果以后需要在多个网站中创建更多表单，可以再根据业务需要升级套餐。
九、让Claude自动嵌入Jotform表单
创建好Jotform表单后，可以复制表单的嵌入代码，再发送给Claude，让它把表单加入联系我们页面。
提示词示例：
请将下面这段Jotform嵌入代码添加到网站的“联系我们”页面。
要求：
1. 表单在电脑和手机上都可以正常显示。
2. 表单宽度自动适配页面。
3. 在表单上方增加标题“联系我们”。
4. 增加一段简短说明，引导访客提交需求。
5. 保持表单区域与当前网站设计风格一致。
Jotform嵌入代码：
【在这里粘贴表单代码】
Claude修改完成后，可能无法在内置预览窗口中正常显示第三方嵌入表单。这并不一定代表表单出现了错误，很多时候只是Claude预览环境无法加载外部内容。
可以使用在线HTML预览工具进行测试：
链接：https://html.onlineviewer.net/
找到Claude生成的HTML文件，使用记事本或代码编辑器打开，复制全部代码，再粘贴到Online HTML Viewer中进行预览。
打开联系我们页面后，检查表单是否能够正常显示、填写和提交。访客提交的信息可以在Jotform后台查看。
十、准备网站主机和域名
网站在电脑本地生成以后，只有你自己能够看到。想让其他人通过互联网访问，就需要购买网站主机和域名。
对于刚开始学习AI建站的新手，我更推荐使用Hostinger。它支持HTML网站、WordPress和PHP网站，后台操作相对直观，也提供中文界面。
Hostinger比较适合以下用户：
- 第一次搭建网站的新手
- 使用Claude生成HTML网站的用户
- 准备搭建企业官网的人
- 需要创建多个网站的内容创作者
- 准备使用WordPress或Elementor建站的人
- 想搭建联盟营销网站或博客的人
购买主机时，不要只看最低价格，还要关注存储空间、备份、CDN、可创建网站数量以及续费价格。
如果准备长期运营网站，可以优先选择包含免费域名、每日备份和CDN的网站主机套餐。CDN可以根据访客所在地区加载距离更近的服务器资源，从而改善网站访问速度。
十一、如何把Claude AI网站上传到Hostinger？
网站生成完成后，Claude通常会在项目文件夹中创建HTML、CSS、JavaScript和图片等文件。接下来只需要把这些文件上传到网站主机，就可以让其他人通过域名访问你的网站。
还没有主机和域名，可以先通过下面的链接注册Hostinger：
购买主机时，可以根据网站数量、存储空间、备份、CDN和预算选择套餐。不同时间的套餐内容及价格可能会调整，具体以Hostinger购买页面显示的信息为准。
完成购买后，登录Hostinger后台，按照下面的步骤添加网站：
- 进入Hostinger控制面板。
- 点击“网站”或“添加网站”。
- 选择创建自定义网站。
- 绑定已经购买的域名。
- 如果暂时没有域名，可以先使用临时域名。
- 等待网站环境创建完成。
如果域名刚刚注册或刚刚绑定，可能需要一段时间才能在全球网络中生效。这个过程通常叫作DNS解析或DNS传播。
十二、通过文件管理器上传HTML网站
网站创建完成后，进入Hostinger控制面板，找到“文件管理器”。
打开文件管理器后，进入：
public_html
public_html是网站公开文件所在的目录。放在这个目录中的首页、图片和代码文件，才能通过域名正常访问。
上传之前，可以先删除Hostinger自动生成的默认首页文件，避免它覆盖你自己的网站。
接着点击“上传文件”，将Claude生成的网站文件全部上传到public_html目录中，包括：
HTML文件
CSS文件
JavaScript文件
图片文件
字体文件
其他网站资源
不要只上传一个HTML文件。如果网站中的样式、动画和图片保存在其他文件夹中，也需要保持原来的目录结构一起上传，否则可能出现页面没有样式、图片无法显示或者按钮失效的问题。
网站首页文件需要命名为：
index.html
index.html是服务器默认识别的首页文件。Claude生成的文件如果是其他名称，例如：
windy-watch-website.html
homepage.html
website-final.html
需要将它重命名为：
index.html
注意只修改文件名称，不要删除.html后缀。文件上传并重命名完成后，打开自己的域名，就应该可以看到网站。上传HTML文件、删除默认页面并将首页重命名为index.html，是这类静态网站上线的关键步骤。
十三、网站上传后无法打开怎么办？
如果上传完成后网站无法正常访问，可以检查以下问题。
1. 域名还没有完成解析
新注册或刚刚绑定的域名不一定立即生效，可以稍后重新访问，也可以先使用Hostinger提供的临时域名测试。
2. 首页文件名不正确
确认首页文件是否叫作：
index.html
不要写成：
Index.html
index.htm.txt
index.html.html
3. 文件上传到了错误目录
网站文件应该放在public_html目录中，而不是放在它外面。
4. 图片路径错误
如果本地可以看到图片，上传后却无法显示，通常是图片路径或文件名出现问题。
建议检查：
- 图片是否已经上传；
- 图片文件夹名称是否一致；
- 文件名大小写是否一致；
- HTML中的图片路径是否正确；
- 文件名中是否包含空格或特殊符号。
5. CSS或JavaScript文件缺失
网站没有样式或者交互功能失效，通常是CSS或JavaScript文件没有上传，或者HTML中的引用路径不正确。
可以把错误页面截图发给Claude，并告诉它：
这个网站在本地预览正常，但是上传到网站主机以后，出现图片无法显示和CSS样式丢失的问题。
请检查所有HTML、CSS、JavaScript和图片的相对路径，并修改为适合部署到public_html目录的路径。
十四、为什么Claude生成的HTML网站速度很快？
Claude生成的这类网站通常属于静态HTML网站。
静态网站不需要服务器在每次访问时查询数据库，也不需要动态生成页面，因此结构比较简单，加载速度通常也比较快。与需要服务器动态处理的复杂网站相比，纯HTML页面在内容不多的情况下更容易获得不错的速度表现。
不过，网站速度不仅取决于HTML，还会受到以下因素影响：
- 图片文件大小；
- 主机服务器性能；
- 访客所在地区；
- 是否启用CDN；
- 是否加载过多外部脚本；
- 字体和动画数量；
- 第三方表单和统计工具。
为了提高网站速度，可以把图片转换为WebP格式，压缩大尺寸图片，并删除不需要的代码和动画。
十五、Claude AI网站的Google SEO优化方法
网站上线以后，还需要进行基础SEO优化，帮助Google理解网站内容。
1. 每个页面设置独立标题
例如，手表网站首页可以使用：
<title>Windy Watches｜专业时尚手表与商务腕表品牌</title>
产品页面可以使用：
<title>男士商务手表｜Windy Watches</title>
2. 添加Meta Description
<meta name="description" content="探索Windy Watches时尚手表、商务腕表和高端手表系列，了解产品设计、品牌理念并在线提交咨询。">
描述中需要自然出现核心关键词，但不要重复堆砌关键词。
3. 正确使用标题层级
每个页面通常只保留一个主要的H1标题，下面再使用H2和H3划分内容。
例如：
H1：专业时尚手表品牌
H2：热门手表系列
H2：为什么选择我们
H2：客户评价
H2：联系我们
4. 给图片添加Alt文字
<img src="product-watch-01.jpg" alt="Windy男士黑色商务手表">
Alt文字应该准确描述图片内容，不要把大量无关关键词全部塞进去。
5. 增加真正有价值的文字内容
不要只做一个图片很多、文字很少的网站。Google需要通过文字判断页面主题。
可以增加：
- 产品介绍；
- 服务流程；
- 常见问题；
- 客户案例；
- 行业教程；
- 产品选购指南；
- 品牌故事。
需要分析竞争对手关键词、网站流量和SEO数据，可以使用：
Semrush可以用于关键词研究、竞争对手分析、网站SEO检查和外链分析。对于准备长期通过Google搜索流量做联盟营销的网站，关键词研究和内容规划非常重要。
十六、没有时间修改网站怎么办？
Claude可以帮助你完成大部分代码修改，但如果遇到复杂功能、英文文案、Logo设计或者专业开发问题，也可以把工作外包给自由职业者。
推荐使用：
在Fiverr中可以搜索：
HTML website developer
Website designer
Landing page design
SEO content writer
Website speed optimization
Jotform expert
发布需求时，建议提供网站链接、参考网站、需要修改的内容、预算和交付时间，减少沟通误差。
相关文章
