Claude Design AI建站教程：导入WordPress Elementor制作网站教学
传统的WordPress建站，需要自己选择配色、设置字体、搭建页面结构，再使用Elementor逐个添加图片、按钮和文字。对于新手来说，不但操作繁琐，而且很容易做出缺乏设计感的网站。
现在通过Claude Design，我们可以先让AI生成一个完整的网站设计，再把项目导入WordPress，转换成Elementor可以继续编辑的页面。导入以后，网站不再是一整页难以修改的HTML代码，文字、图片、按钮、页面区块都可以在Elementor中拖拽调整。
这篇教程会从创建Claude设计系统开始，带你完成AI网站生成、WordPress安装、插件配置以及网站导入。
想跟着教程直接操作，可以先准备以下工具：
- 注册Hostinger网站主机和域名：https://bit.ly/3BysRqP
- 获取Elementor Pro页面构建器：https://bit.ly/49KRNsA
- 复制本期全部Claude Design建站提示词：https://aiyoufeng.com/claude-design-wordpress
- ChatGPT、Claude AI会员代充及账号购买：https://nf.video/C1dxn
说明：本文部分链接属于联盟推广链接。通过这些链接注册或购买，不会增加你的费用，但我可能会获得一定佣金，用于支持网站和教程持续更新。
提示词1（截图参考版）：
我会上传一张截图作为网站设计参考。请根据这张截图的设计风格、页面布局和整体氛围，使用 HTML 和 CSS 为我制作一个完整的 6 页面网站，但不要只是简单模仿，要在原有基础上做得更好。
我希望网站拥有独特、现代的设计风格，能够与竞争对手的网站明显区分开来。
不要使用 JavaScript，也不要加入过于花哨的动画效果。只需要制作干净、现代、专业，并且具有良好视觉设计的页面。
我有自己的网站设计系统，所以请在 CSS 样式表最上方设置 CSS 变量，包括：
- 颜色
- 字体
- 间距
- 圆角大小
后续我会直接替换成自己的参数。
我的业务信息
请根据下面的信息生成网站中的全部内容，包括标题、文案、服务介绍、博客标题、SEO 描述等，同时根据这些信息确定网站的整体设计方向。
企业名称：
[填写企业名称]业务内容／提供的服务：
[列出提供的服务]目标客户：
[详细描述理想客户，越具体越好]服务地区（如果是本地业务）：
[填写城市或地区，不需要可以留空]需要重点优化的 SEO 关键词：
[填写 5～10 个关键词]品牌语气和风格：
[专业／亲切／大胆／高端／活泼／极简]主要行动号召 CTA：
[例如：预约免费咨询、获取报价、订阅邮件等]联系方式：
[电子邮箱、电话号码、社交媒体链接；也可以留空并使用合理的临时内容]网站中的所有文案都要直接面向目标客户来写。
请将 SEO 关键词自然地融入文案中，不要刻意堆砌关键词，并确保所有内容符合品牌语气。
页面标题和主标题要突出用户能够获得的实际好处，不要使用空泛、普通或没有吸引力的标题。
需要制作的页面
所有页面都必须出现在顶部导航栏和网站页脚中，并且可以正常互相跳转。
- 首页 Home
- 关于我们 About
- 服务项目 Services
- 作品案例 Portfolio
- 博客 Blog
- 联系我们 Contact
网站文件要求
每个页面分别使用独立的 HTML 文件：
index.htmlabout.htmlservices.htmlportfolio.htmlblog.htmlcontact.html所有页面共用一个 CSS 样式文件：
styles.css所有页面链接都必须使用相对路径，确保我在电脑中直接双击打开
index.html时，整个网站仍然可以正常浏览和跳转。响应式设计要求
采用移动端优先的响应式设计。
网站必须能够完美适配：
- 手机
- 平板电脑
- 桌面电脑
不同尺寸的设备上都要保持清晰、美观和易于使用。
SEO 优化要求
每一个页面都需要设置独立且不重复的 SEO 信息，包括：
- 页面标题 Title
- 页面描述 Meta Description
- Open Graph 标签
- Twitter Card 标签
这些 SEO 信息需要根据企业信息和目标关键词自动生成。
网站还需要使用：
- 语义化 HTML5 标签
- 合理的标题层级
schema.orgJSON-LD 结构化数据请根据业务类型，在网页的
<head>中加入适合的：
- LocalBusiness 本地企业结构化数据
或者：
- Organization 企业组织结构化数据
图片要求
所有照片统一使用以下 Unsplash 图片地址格式：
https://source.unsplash.com/[宽度]x[高度]/?[关键词]请根据企业类型和页面内容，为每张图片选择合适的英文关键词。
例如：
workspaceteaminteriorbusinesscreativeoffice图片关键词必须符合对应页面和板块的内容，不能随意使用无关图片。
每一张图片都必须添加：
- 清晰、具体的
alt替代文字loading="lazy"懒加载属性技术限制
不要使用：
- 外部 JavaScript 库
- CSS 框架
- 前端框架
- 图标库
- 外部 UI 组件
所有图标统一使用内联 SVG 制作。
每一个页面的
<head>中都要加入网站图标 Favicon。请使用 SVG Data URI 制作一个 Emoji 表情图标作为 Favicon，这样我不需要额外准备或上传图标文件。
设计方向
整体设计需要现代、专业并具有视觉辨识度。
请使用：
- 网格化布局
- 清晰的视觉层级
- 合理且舒适的留白
- 适合时使用非对称布局
- 细腻但不过度的悬停效果
每一个页面都要有自己独特的版式和内容结构。
不要把同一个页面模板简单复制 6 次，再替换文字。
网站至少要加入两种竞争对手网站中不常见的特色内容板块，可以从下面的类型中选择：
- 服务流程时间线
- 功能或方案对比表
- FAQ 常见问题折叠面板
- 价格方案
- 数据与成果展示
- 客户评价网格
- 使用前后对比板块
FAQ 折叠面板必须使用纯 CSS 和 HTML 的
<details>、<summary>标签实现，不要使用 JavaScript。页脚要求
网站页脚需要包含：
- 当前版权年份
- 快速导航链接
- 社交媒体图标
- 联系方式
社交媒体图标必须使用内联 SVG，不要使用外部图标库。
表单要求
联系我们页面需要制作一个完整的联系表单。
表单只能使用 HTML，不使用 JavaScript。
表单字段需要使用正确的 HTML5 输入类型，例如：
telurltexttextarea必要字段必须添加
required属性，使用浏览器自带的 HTML5 表单验证功能。无障碍访问要求
网站需要达到 WCAG AA 无障碍访问标准。
必须确保：
- 可以使用键盘正常浏览网站
- 所有按钮和链接都有清晰的焦点状态
- CSS 中需要专门设计
focus和focus-visible样式- 文字与背景拥有足够的颜色对比度
- 表单输入框拥有对应的标签
- 图片拥有准确的替代文字
- 页面结构和标题层级清晰合理
请完整制作所有 6 个 HTML 页面以及共享的
styles.css样式表。所有页面和代码都必须完整输出。
不要使用占位文案，不要出现“请在这里添加内容”之类的提示，不要省略代码，也不要中途截断。
请根据我提供的业务信息直接生成完整、真实、可直接使用的网站内容。
最终结果必须达到可以正式上线使用的标准。
提示词2（无截图参考版）
请使用 HTML 和 CSS 为我制作一个完整的 6 页面网站。
网站需要拥有独特、现代的设计风格，能够与竞争对手的网站明显区分开来。
我不会提供设计截图，希望你根据下面的业务信息，原创设计一套适合我的网站。
不要使用 JavaScript，也不要加入过于花哨的动画效果。只需要制作简洁、现代、设计精良的网页。
我有自己的设计系统，因此请在 CSS 样式表的最上方设置 CSS 变量，包括：
- 颜色
- 字体
- 间距
- 圆角大小
后续我会将这些变量替换成自己的参数。
我的业务信息
请根据下面的信息生成网站中的全部内容，并以这些信息作为网站设计方向的依据。
企业名称：
[填写企业名称]业务内容／提供的服务：
[列出提供的服务]目标客户：
[详细描述理想客户，越具体越好]服务地区（如果是本地业务）：
[填写城市或地区，不需要可以留空]需要重点优化的 SEO 关键词：
[填写 5～10 个关键词]品牌语气和风格：
[专业／亲切／大胆／高端／活泼／极简]主要行动号召 CTA：
[例如：预约免费咨询、获取报价、订阅等]联系方式：
[电子邮箱、电话号码、社交媒体链接；也可以留空并使用临时内容]设计方向
请从下面的设计风格中，选择一种最符合品牌语气和所在行业的风格。
编辑排版风格 Editorial
以杂志排版为灵感，使用大字体、大面积留白和非对称网格布局。
适合：
- 顾问
- 作家
- 高端品牌
Bento Grid 便当盒网格风格
使用模块化卡片式板块，整体结构清晰，同时带有一定的趣味性。
适合：
- SaaS 软件
- 科技公司
- 内容创作者
大胆粗野主义风格 Bold & Brutalist
使用粗重字体、锐利边缘、高对比度和原始直接的视觉风格。
适合：
- 创意机构
- 个性鲜明的内容创作者
- 时尚品牌
柔和自然风格 Soft & Organic
使用圆角、柔和阴影和温暖舒适的视觉效果。
适合：
- 健康与疗愈行业
- 生活方式品牌
- 家庭服务
现代企业风格 Corporate Modern
整体干净、结构清晰、专业并且值得信赖。
适合：
- 金融行业
- 法律行业
- B2B 企业服务
深色高端风格 Dark & Premium
使用深色背景、强调色点缀和高端奢华的视觉效果。
适合：
- 高端服务
- 科技公司
- 教练及咨询服务
我的选择：
[选择一种风格]文案要求
网站中的所有文案都要直接面向目标客户来写。
请将 SEO 关键词自然地融入文案中，不要刻意堆砌关键词，并确保所有内容符合品牌语气。
页面标题和主标题需要突出客户能够获得的实际好处，不要使用空泛、普通或没有吸引力的标题。
需要制作的页面
所有页面都必须出现在顶部导航栏和网站页脚中，并且能够正常互相跳转。
- 首页 Home
- 关于我们 About
- 服务项目 Services
- 作品案例 Portfolio
- 博客 Blog
- 联系我们 Contact
博客页面需要生成 3 个示例博客文章卡片，文章标题需要根据前面提供的 SEO 关键词生成。
网站制作要求
每个页面分别使用独立的 HTML 文件：
index.htmlabout.htmlservices.htmlportfolio.htmlblog.htmlcontact.html所有页面共用一个 CSS 样式文件：
styles.css所有页面链接都必须使用相对路径，确保网站在本地打开时也能够正常运行和跳转。
网站需要采用移动端优先的响应式设计。
SEO 优化要求
每一个页面都需要设置独立且不重复的 SEO 标签。
网站需要使用：
- 每页独立的 Meta 标签
- 语义化 HTML5 标签
schema.orgJSON-LD 结构化数据请将 JSON-LD 结构化数据放在每个页面的
<head>中。图片要求
网站中的所有照片统一使用以下 Unsplash 图片地址格式：
https://source.unsplash.com/[宽度]x[高度]/?[关键词]请根据企业类型和不同页面板块的内容，为每张图片选择相关的英文关键词。
每张图片都必须添加：
- 清晰、具体的
alt替代文字loading="lazy"懒加载属性技术限制
不要使用任何外部库或前端框架。
所有图标统一使用内联 SVG 制作。
网站图标 Favicon 请使用 SVG Data URI 格式的 Emoji 表情图标，这样不需要额外准备图标文件。
网站设计必须包含
- 现代化的网格布局
- 清晰、强烈的视觉层级
- 合理且舒适的页面留白
- 每个页面都要有独特的设计和内容结构
- 不要重复套用同一个页面模板
网站至少要加入两种竞争对手网站中不常见的特色内容板块，可以从以下类型中选择：
- 服务流程时间线
- 功能或方案对比表
- FAQ 常见问题折叠面板
- 价格方案
- 数据与成果展示
- 客户评价网格
- 使用前后对比板块
FAQ 折叠面板必须使用纯 CSS 和 HTML 的
<details>、<summary>标签实现。页脚要求
网站页脚需要包含：
- 当前版权年份
- 快速导航链接
- 社交媒体图标
- 联系方式
社交媒体图标必须使用内联 SVG。
表单和无障碍访问要求
联系我们页面需要制作一个纯 HTML 联系表单。
表单字段必须添加必要的
required属性，并使用正确的 HTML5 输入类型。网站需要达到 WCAG AA 无障碍访问标准，包括：
- 支持键盘浏览和操作
- 所有交互元素都可以通过键盘访问
- CSS 中设置清晰的焦点状态
- 文字和背景拥有足够的颜色对比度
- 表单字段拥有对应的标签
- 图片拥有准确的替代文字
在正式开始制作网站之前，请先用 3 句话总结你准备采用的设计方向，让我先进行确认。
确认后，再完整制作全部 6 个页面以及共享的
styles.css样式表。不要使用占位文案，不要使用省略或快捷方式，不要省略内容，也不要中途截断代码。
提示词3：将 Claude Design 网站导入 WordPress
我会提供一份由 Claude Design 制作的新网站 HTML 文件。
我希望你把这个网站设计转换成适用于 WordPress Elementor 页面编辑器的版本。
请确保使用 Elementor 原生组件，不要使用 HTML 小工具。
布局请使用 Container 容器，不要使用 Inner Section 内部区段。
另外，我已经关闭了 Atomic Editor 原子编辑器，因此不要使用 Atomic Elements 原子组件。
我们已经安装了 Novamira 插件，它可以帮助你更好地理解和使用 Elementor 组件。
如果已经安装 Elementor Pro
如果网站已经安装了 Elementor Pro，请不要使用下面关于 XPRO 插件的提示词，请使用这一部分要求：
请使用 Elementor Pro 创建自定义网站页眉和页脚，并通过 Theme Builder 主题生成器进行设置。
请确保：
- 将页眉模板保存到 Elementor 模板库中，方便我后续自行修改。
- 将页脚模板保存到 Elementor 模板库中，方便我后续自行修改。
- 创建一个大型下拉菜单 Mega Menu。
- Mega Menu 中需要加入图文介绍模块和视频内容。
- Mega Menu 必须使用 Elementor 原生组件制作。
- Mega Menu 的设计需要有特色，在视觉上足够醒目。
- 为想要注册的用户创建一个弹窗。
- 暂时只需要把弹窗保存到 Elementor 模板库中，不要立即发布或设置触发条件，后续我会自己启用。
页面和菜单设置
请为本次网站设计所创建的所有页面，新建一个独立的网站导航菜单。
请将这些页面添加到菜单中，并设置正确的菜单层级和跳转链接。
同时，请把新网站的首页设置为 WordPress 的静态首页。
如果没有安装 Elementor Pro
如果网站没有安装 Elementor Pro，请使用 XPRO 插件创建网站的自定义页眉和页脚。
XPRO 插件支持通过 Elementor 制作自定义 Header 和 Footer。
请不要使用 Elementor Pro 组件，而是使用 XPRO 提供的 Elementor 组件。
请确保：
- 使用 XPRO 创建自定义页眉。
- 使用 XPRO 创建自定义页脚。
- 将页眉模板保存到 XPRO 模板库中，方便我后续修改。
- 将页脚模板保存到 XPRO 模板库中，方便我后续修改。
联系表单
请在“联系我们”页面使用 WPForms 创建联系表单。
不要使用普通 HTML 表单，也不要使用其他表单插件。
请确保表单样式与网站整体设计保持一致，并且在电脑、平板和手机上都能够正常显示。
现在，请将这个 HTML 网站完整转换成 Elementor 网站，并将它发布到我已经连接的网站域名：
[填写你的网站域名]
Claude Design AI建站完整教程：生成网站并导入WordPress Elementor自由编辑
一、Claude Design AI建站有什么优势？
很多AI建站工具确实可以快速生成网页，但生成结果通常以HTML、CSS或React代码为主。对于不懂代码的新手来说，后期修改文字、替换图片或者调整页面布局，依然比较麻烦。
Claude Design的优势，是可以先帮助我们完成网站的大部分设计工作，包括：
- 网站整体颜色和字体
- 首页及内页结构
- 按钮、卡片和表单样式
- 品牌视觉规范
- 手机端响应式布局
- 网站基础SEO结构
- 页面文案和行动号召
- 页眉、页脚及导航菜单
网站生成完成以后，我们再通过Novamira把Claude和WordPress连接起来，将AI网站转换成Elementor原生组件。
这样既能利用AI快速生成设计，又能保留WordPress和Elementor方便修改、扩展性强的优势。
二、开始之前需要准备什么？
完成本教程需要准备以下内容：
- Claude Pro或Max会员
- 一个WordPress网站
- 网站域名和主机
- Elementor页面构建器
- Novamira连接插件
- Claude桌面版
- Node.js运行环境
Claude Design需要在Claude网页版中操作，而把网站导入WordPress时，则需要使用Claude桌面版。
还没有Claude会员的用户，可以查看：
ChatGPT、Claude AI会员代充及账号购买平台：https://nf.video/C1dxn
还没有WordPress网站的用户，可以先通过Hostinger购买主机和域名：
Hostinger网站主机和域名注册入口：https://bit.ly/3BysRqP
Hostinger后台提供中文界面，购买一年以上的部分主机套餐通常还会包含首年免费域名，对第一次搭建WordPress网站的新手比较友好。
三、打开Claude Design
首先打开Claude网页版。
进入Claude以后，在左侧菜单中找到“Design”。如果没有看到Design选项，需要先确认当前账号是否已经订阅Claude Pro或Max会员。
这里需要特别注意：
创建网站设计时使用的是Claude网页版；后面连接WordPress和导入网站时，才会使用Claude桌面版。
进入Design以后，第一步不是马上生成网站，而是先创建一套Design System，也就是设计系统。
设计系统可以提前规定网站的：
- 主色和辅助色
- 背景颜色
- 标题和正文字体
- 按钮大小及圆角
- 卡片样式
- 表单样式
- 阴影效果
- 页面间距
- 品牌视觉风格
Claude生成网站时，会尽量按照这套设计规范完成所有页面，从而保证首页、服务页面、关于我们和联系页面的视觉效果保持统一。
四、使用DesignMD快速创建设计系统
很多新手看到创建设计系统的页面后，可能不知道颜色、字体、组件和设计规范应该怎么填写。
实际上，我们不需要从零开始设计，可以直接使用现成的设计系统资源。
第一个推荐的网站是DesignMD：
打开DesignMD以后，可以看到很多已经整理好的网站配色和设计方案。进入任意一套方案后，页面会显示：
- 网站使用的字体
- 主色与辅助色
- 中性色和背景色
- 标题及正文排版
- 按钮样式
- 卡片和输入框
- 标签及阴影效果
- 不同组件之间的间距
找到喜欢的设计后，点击复制按钮，把完整的DESIGN.md内容复制下来。
然后回到Claude Design，创建新的Design System，为它填写一个方便识别的名字，再把刚才复制的内容粘贴到备注或设计说明区域。
最后点击继续生成，Claude就会自动分析这些设计规范，并创建对应的UI Kit。
五、使用GetDesignMD参考知名品牌风格
第二个推荐的设计系统网站是GetDesignMD：
GetDesignMD：https://getdesign.md/
GetDesignMD收录了很多不同类型的网站设计系统，其中包括科技、汽车、金融、电商和互联网品牌。
例如，你准备制作AI手机网站，可以选择更加简洁、现代、具有科技感的设计系统。Claude会参考其中的颜色、字体、按钮、卡片和页面结构，生成风格统一的网站。
选择好设计以后，打开对应项目，点击DESIGN.md，再点击复制。
回到Claude Design，新建设计系统，把复制的内容粘贴进去并生成。
建议提前创建两到三套不同风格的设计系统，例如：
- 极简科技风
- 高端黑色风
- 蓝紫色AI风
- 现代企业风
- 活泼电商风
以后制作不同网站时，可以直接选择对应的设计系统，不需要每次重新设置颜色和字体。
六、生成网站前先准备完整提示词
设计系统完成后，就可以开始生成AI网站。
Claude Design制作网站主要有三种方法：
方法一：使用简单提示词
直接告诉Claude网站类型和需要的页面，例如：
“使用当前设计系统，为我创建一个包含首页、产品、关于我们、博客和联系我们页面的AI手机品牌网站。”
这种方法操作最快，但生成的网站内容可能比较通用。
方法二：使用完整提示词
完整提示词会告诉Claude企业名称、业务内容、目标客户、SEO关键词、品牌语气、页面数量、联系方式以及网站设计要求。
这种方式生成的内容更加准确，也更适合正式商业网站。
本期教程使用的全部提示词已经整理好，可以直接复制：
Claude Design生成网站及导入WordPress完整提示词：https://aiyoufeng.com/claude-design-wordpress
使用前需要把提示词中的企业资料替换成自己的真实信息，特别是：
- 企业名称
- 产品或服务
- 目标客户
- 服务地区
- SEO关键词
- 品牌风格
- 行动号召
- 邮箱和联系电话
不要直接使用提示词中的示例资料，否则Claude生成的网站文案可能与自己的业务不匹配。
方法三：上传参考网站截图
如果你已经找到喜欢的网站，也可以把参考页面完整截图后上传给Claude。
Claude不会一模一样复制对方的网站，而是提取其中的配色、排版、区块结构和视觉风格，再结合你的品牌资料重新生成一个新网站。
寻找优秀WordPress模板时，可以使用ThemeForest：
ThemeForest主题森林：https://bit.ly/4fHKfuS
ThemeForest上有大量WordPress主题、企业网站模板、电商模板和落地页设计。你可以先找到与自己行业接近的网站，再打开在线演示页面进行参考。
如果需要截取整个网页，可以使用GoFullPage浏览器扩展：
安装以后，点击浏览器右上角的GoFullPage图标，它就会自动向下滚动并截取整个网页。
截图完成后，把图片上传到Claude Design，再配合“参考截图版提示词”生成网站。
完整提示词可以在这里复制：
Claude Design建站提示词：https://aiyoufeng.com/claude-design-wordpress
七、填写企业资料和SEO关键词
无论使用哪一种方法，都建议先填写完整的企业资料。
很多人使用AI建站时，只告诉AI“帮我制作一个手机网站”或者“帮我制作一个企业网站”，但没有提供品牌、产品、客户和关键词等信息。
这样生成的网站虽然看起来不错，文案却很容易变得空泛。
建议至少填写以下资料：
企业名称
填写自己的品牌名或公司名。
业务内容
告诉Claude你销售什么产品，或者提供什么服务。
例如，AI手机品牌可以填写：
“销售搭载AI助手、智能摄影、实时翻译和高性能芯片的智能手机，并提供售前咨询、产品购买、售后支持和系统更新服务。”
目标客户
目标客户越具体，Claude生成的文案越准确。
例如：
“年龄在20至45岁之间，关注AI功能、手机摄影、办公效率、游戏性能和智能生活的消费者。”
SEO关键词
SEO关键词会影响Claude生成的网站标题、页面内容、产品介绍和博客主题。
AI手机网站可以使用：
- AI手机
- 智能手机
- AI智能手机
- 手机购买
- 最新智能手机
- AI手机推荐
- 智能手机品牌
- AI拍照手机
- 高性能手机
- 手机官方网站
关键词不要机械堆砌，而应该自然出现在页面标题、正文、图片说明和产品介绍中。
后续还可以使用Semrush分析关键词搜索量、竞争程度和竞争对手网站：
Semrush网站SEO与流量分析：https://bit.ly/3TfIaNK
品牌语气
根据产品定位选择专业、高端、极简、大胆、亲切或活泼的表达风格。
例如，AI手机品牌比较适合“高端、科技、简洁、可信”的品牌语气。
行动号召
每个页面都需要明确告诉访客下一步应该做什么，例如：
- 查看产品
- 立即购买
- 了解AI功能
- 预约体验
- 联系销售
- 获取报价
- 订阅新品通知
八、选择合适的设计方向
提示词中可以指定网站的设计风格，例如：
- 现代企业风格
- 极简科技风格
- 高端奢华风格
- 创意机构风格
- SaaS软件风格
- 电商产品风格
如果已经在Claude Design中选择了设计系统，提示词中的设计方向不要与设计系统冲突。
如果Claude没有按照选定的设计系统生成，可以直接补充一句：
“请严格使用当前已经选择的Design System，不要覆盖其中的颜色、字体和组件规范。”
制作AI手机网站时，可以选择极简科技风格，并使用深色背景、蓝紫色渐变、金属材质和大尺寸产品图片，突出AI芯片、相机、电池和系统功能。
九、设置网站页面结构
一个完整的企业网站通常可以包含以下六个页面：
- 首页
- 关于我们
- 产品或服务页面
- 产品详情或作品案例
- 博客页面
- 联系我们
如果是手机品牌网站，还可以增加：
- AI功能页面
- 手机型号对比页面
- 技术规格页面
- 售后支持页面
- 常见问题页面
- 新闻发布页面
- 在线购买页面
首页应该重点展示产品图片、核心卖点和购买按钮。
产品页面需要介绍处理器、相机、屏幕、电池、AI功能、存储空间和不同型号。
博客页面可以围绕SEO关键词持续发布内容，例如：
- AI手机和普通手机有什么区别
- 购买AI手机需要注意什么
- AI手机适合哪些人
- AI手机拍照功能怎么样
- 如何选择适合自己的智能手机
这些文章可以帮助网站获得Google自然搜索流量，同时把访客引导到产品页面或联盟推广链接。
十、生成Claude AI网站
资料填写完成后，把完整提示词粘贴到Claude Design。
如果提示词内容太长，Claude可能会把它识别成一个文本附件，这是正常情况。
建议提前在Word、记事本或Evernote中修改好全部信息，再一次性粘贴进去。
接下来选择设计系统和模型，然后发送提示词。
Claude通常会先总结网站定位、页面结构和设计方向。如果内容没有问题，回复“确认，请开始生成完整网站”即可。
网站生成以后，需要检查以下内容：
- 页面是否完整
- 手机端是否正常
- 导航菜单是否可用
- 图片是否成功显示
- 文案是否符合业务
- 按钮是否链接到正确页面
- 品牌颜色是否统一
- SEO关键词是否自然出现
Claude处理图片时不一定每次都能成功。如果网站中缺少产品照片，建议上传自己的手机产品图、品牌Logo、芯片图片、相机特写和使用场景照片。
你也可以把图片上传后告诉Claude：
“请把这些产品图片放到首页首屏、产品列表、AI功能和技术规格区块中，并保持现有设计系统不变。”
自己的产品图片通常比AI临时寻找的素材更适合商业网站，也更有利于建立品牌可信度。
如果你没有设计能力，或者需要找人处理Logo、产品图片和网站细节，也可以在Fiverr寻找设计师或WordPress开发人员：
Fiverr英文工作外包平台：https://bit.ly/4c9cttG
看不懂英文网站时，可以使用沉浸式翻译：
十一、购买WordPress主机和域名
AI网站生成完成后，下一步是把网站部署到真实域名。
这里使用Hostinger安装WordPress：
Hostinger网站主机和域名：https://bit.ly/3BysRqP
Hostinger后台支持中文，并且可以直接安装WordPress。部分长期套餐包含首年免费域名、SSL证书、网站备份和CDN功能。
进入Hostinger以后，选择网站托管套餐。
新手可以根据网站数量和预算选择套餐：
- 只搭建少量网站，可以选择入门套餐
- 需要搭建多个网站，可以选择Business套餐
- 对性能和独立IP要求较高，可以考虑Cloud套餐
购买周期越长，平均每月价格通常越低。不过第一次使用时，也可以先选择较短周期，降低前期投入。
完成购买以后，在Hostinger后台点击“网站”，选择“添加网站”，然后选择WordPress。
安装时需要设置WordPress管理员邮箱和密码。这组信息以后会用于登录网站后台，一定要妥善保存。
十二、安装WordPress主题和必要插件
WordPress安装完成以后，先进入网站后台。
如果使用Hostinger，可以在主机后台点击“WP Admin”，直接进入WordPress管理页面。
接下来先安装一款轻量级主题。这里推荐使用Astra。
在WordPress后台依次进入：
“外观”→“主题”→“安装主题”
搜索“Astra”，点击安装并启用。
Astra本身比较轻量，与Elementor兼容性较好，适合新手搭建企业网站、博客、产品展示站和落地页。
接下来进入：
“插件”→“安装插件”
需要安装以下几个插件：
1. Elementor
Elementor是这套建站流程中最重要的页面构建器。
安装完成以后，我们可以直接拖拽文字、图片、按钮、图标、视频和页面区块，不需要自己编写HTML或CSS代码。
在插件搜索框中输入“Elementor Website Builder”，点击安装并启用。
如果你准备长期使用WordPress建站，或者需要制作更加专业的页眉、页脚、弹窗、表单和动态内容，可以考虑使用Elementor Pro：
Elementor Pro官方专业版：https://bit.ly/49KRNsA
Elementor Pro可以解锁更多专业组件和Theme Builder功能，更适合企业网站、电商网站和联盟营销网站。
我之前也制作过一套Elementor新手教程：
Elementor新手详细教程：https://www.youtube.com/watch?v=2Nv9onVvn6k
2. WPForms
WPForms是一个联系表单插件。
安装以后，可以在网站中添加咨询表单、报价申请表单、联系表单和邮件订阅表单。
对于企业网站和联盟营销网站来说，表单非常重要，因为访客可以直接提交姓名、邮箱、电话号码和咨询内容。
在插件搜索框中输入“WPForms”，然后安装并启用。
3. Xpro Theme Builder
如果没有购买Elementor Pro，可以使用Xpro Theme Builder创建网站页眉和页脚。
在插件库中搜索：
“Xpro Theme Builder for Elementor”
安装并启用以后，系统可能还会提示安装Xpro Elementor Addons，按照提示一起安装即可。
Xpro的主要作用，是让Elementor免费版也能制作全局页眉和页脚。
如果你已经购买Elementor Pro，则可以直接使用Elementor Theme Builder，不一定需要Xpro。
获取Elementor Pro：https://bit.ly/4cuQ8IF
4. Novamira
Novamira是连接Claude和WordPress的重要插件。
它相当于在Claude和WordPress之间建立一座桥梁，让Claude可以读取网站结构，并把生成的网站内容写入WordPress。
Novamira还可以帮助AI理解Elementor页面结构，从而提高HTML网站转换成Elementor页面的成功率。
下载入口：
Novamira连接WordPress插件：https://bit.ly/4tY4TL5
下载ZIP压缩包以后，回到WordPress后台，依次进入：
“插件”→“安装插件”→“上传插件”
选择刚才下载的ZIP文件，点击“立即安装”，然后启用插件。
十三、调整Elementor设置
插件安装完成以后，还需要修改Elementor的部分设置。
在WordPress后台进入：
“Elementor”→“设置”
首先关闭Atomic Editor。
Atomic Editor是Elementor推出的新编辑方式，但对于本教程使用的Claude导入流程来说，关闭以后通常更加稳定。
找到Atomic Editor后，选择停用。
然后进入Elementor的“功能”或“Features”页面，找到Container，也就是容器功能。
把Container设置为启用。
Container是Elementor目前主要使用的Flexbox布局结构。启用以后，Claude在创建页面时会优先使用容器，而不是旧版的Section和Inner Section。
完成设置以后，点击保存。
十四、安装Node.js
为了减少Claude导出网站时出现错误，建议在电脑上安装Node.js。
Claude生成的网站不一定全部是纯HTML，有时可能包含React或JavaScript相关内容。
安装Node.js以后，电脑可以运行相关的JavaScript工具，处理项目文件时会更加顺利。
可以直接打开Node.js官方网站，根据自己的操作系统下载并安装。
安装过程通常只需要按照提示不断点击“下一步”，保持默认设置即可。
十五、连接Novamira和WordPress
接下来需要让Novamira获得操作WordPress网站的权限。
在WordPress后台找到Novamira，进入Configuration，也就是配置页面。
先开启AI Abilities，然后保存设置。
接下来生成Application Password，也就是应用程序密码。
这个密码不是你的WordPress登录密码，而是专门用于Claude连接网站的授权密码。
继续向下找到“Connect Your Client”，选择Claude Desktop。
页面会生成一段JSON配置代码，点击复制。
这段代码通常会包含：
- WordPress网站地址
- WordPress用户名
- Application Password
- Novamira连接信息
注意不要把这段代码公开分享给其他人，因为其中包含网站访问权限。
十六、配置Claude桌面版
接下来需要安装Claude Desktop，也就是Claude桌面版。
网站设计阶段使用Claude网页版，而连接WordPress和导入网站时，需要使用Claude桌面版。
安装并打开Claude桌面版以后，依次进入：
“Settings”→“Developer”→“Edit Config”
打开Claude配置文件后，把原来的内容删除，再把Novamira提供的JSON代码粘贴进去。
然后点击“File”→“Save”。
这里一定要选择“保存”，不要选择“另存为”，否则可能生成一个新的配置文件，导致Claude无法读取。
保存以后，完全退出Claude桌面版。
不要只关闭窗口，还需要在电脑右下角任务栏中找到Claude图标，右键选择退出。
然后重新打开Claude桌面版。
再次进入“Settings”→“Developer”，如果Novamira显示正在运行，说明连接已经成功。
可以在Claude聊天窗口中输入：
“请检查你现在是否已经连接到我的WordPress网站，并告诉我当前网站的基本信息。”
如果Claude能够读取网站地址、页面或插件信息，就说明连接正常。
遇到连接失败时，可以重点检查：
- 网站地址是否填写正确
- Application Password是否完整
- JSON格式是否被修改
- Claude是否完全退出并重新启动
- Novamira是否已经启用
- WordPress是否可以正常访问
如果自己无法解决，也可以加入我的知识星球，向有风咨询AI建站、WordPress和联盟营销相关问题：
加入有风知识星球：https://t.zsxq.com/16QP9JP8b
十七、从Claude Design下载网站项目
连接成功以后，回到Claude Design网页版，打开刚才生成的网站项目。
点击右上角“Share”，然后选择下载项目。
Claude会把整个网站打包成ZIP压缩文件。
下载完成以后，回到Claude桌面版，点击聊天框旁边的附件按钮，把这个ZIP文件上传进去。
接下来还需要向Claude提交一段“导入WordPress提示词”。
这段提示词会要求Claude：
- 分析ZIP项目中的页面结构
- 提取网站颜色、字体和组件规范
- 在WordPress中创建对应页面
- 使用Elementor原生组件重新搭建
- 创建页眉和页脚
- 设置导航菜单
- 上传和使用网站图片
- 把首页设置为WordPress静态首页
- 保留手机端响应式布局
- 检查按钮、链接和页面跳转
完整提示词可以在这里复制：
Claude Design导入WordPress完整提示词：https://aiyoufeng.com/claude-design-wordpress
复制提示词以后，记得把其中的示例网址替换成自己的WordPress网站地址。
十八、让Claude把网站导入WordPress
准备好ZIP项目和提示词以后，把两者一起发送给Claude桌面版。
Claude会先读取网站文件，分析其中的页面、图片、颜色、字体和布局结构，然后通过Novamira把内容写入WordPress。
整个过程中，Claude可能会弹出权限确认，例如：
- 读取WordPress页面
- 创建新页面
- 上传媒体文件
- 修改页面内容
- 创建页眉和页脚
- 调整网站设置
出现权限提示时，需要根据页面提示点击允许。如果你希望减少重复确认，也可以选择“始终允许”，但只建议在确认连接的是自己网站时使用。
导入过程通常不是一瞬间完成的。页面越多、图片越多、结构越复杂，消耗的Claude使用额度也会越高。
如果中途提示使用额度不足，可以先不要删除已经完成的内容。等额度恢复以后，在同一个对话中继续输入：
“请从刚才中断的位置继续完成WordPress网站，不要重复创建已经完成的页面。”
Claude会继续检查当前网站，并完成剩余工作。
十九、检查WordPress页面是否已经创建
在Claude执行任务期间，可以随时进入WordPress后台查看进度。
依次进入：
“页面”→“所有页面”
正常情况下，可以看到Claude已经创建的页面，例如：
- 首页
- 关于我们
- 产品页面
- 服务页面
- 博客
- 联系我们
部分页面可能暂时处于草稿状态，这是正常情况。可以点击“预览”查看当前完成效果。
如果页面结构已经出现，但颜色、字体、图片或间距还没有完全还原，说明Claude可能仍在继续处理。
不要因为中途预览效果不完整，就马上删除页面重新生成。先让Claude把整个任务执行完，再统一检查和修改。
原始流程中，Claude会先提取HTML网站的设计规范，再创建多个WordPress页面，并根据网站是否安装Elementor Pro决定使用Elementor Theme Builder或Xpro处理页眉和页脚。
二十、使用Elementor修改AI生成的网站
网站导入完成以后，打开任意页面，点击顶部的“使用Elementor编辑”。
进入Elementor以后，就可以像编辑普通WordPress网站一样修改页面。
你可以直接：
- 点击文字修改标题和介绍
- 替换手机产品图片
- 调整按钮文字和链接
- 修改背景颜色
- 增加或删除页面区块
- 调整内边距和外边距
- 修改手机端显示效果
- 复制整个容器
- 添加视频、图标和表单
- 调整字体大小和行距
这也是把AI网站导入Elementor最大的优势。
如果网站一直停留在Claude里，每次修改都需要重新向AI发送指令，再等待AI生成。而进入Elementor以后，很多小问题只需要点击几下就能解决。
例如，按钮位置不对、文字颜色错误或者页面间距太大，直接在Elementor中修改会更快。
需要系统学习Elementor操作，可以查看：
Elementor新手详细教程：https://www.youtube.com/watch?v=2Nv9onVvn6k
如果你准备长期使用WordPress做网站、接单或者搭建联盟营销网站，Elementor Pro会更加方便：
Elementor Pro页面构建器：https://bit.ly/49KRNsA
二十一、修改网站的全局颜色和字体
如果导入以后发现多个页面的颜色或字体都不正确，不要逐个元素修改。
在Elementor左上角打开“网站设置”，找到：
- 全局颜色
- 全局字体
- 排版
- 按钮
- 表单
- 页面布局
先检查Primary、Secondary、Text和Accent等全局颜色是否设置正确。
例如，可以把品牌主色用于标题和重要文字，把辅助色用于按钮和链接。
如果网站中出现了不属于设计系统的字体，可以进入“全局字体”，重新指定标题字体和正文字体。
通过全局设置修改以后，所有使用该全局样式的页面都会同步更新，可以节省大量时间。
二十二、处理显示异常和额外CSS
AI生成Elementor页面时，偶尔会为部分元素添加额外的CSS类名。
如果发现两个按钮无法并排、某个容器宽度不正常，或者元素在手机端出现错位，可以进入对应元素的“高级”设置，检查CSS Classes。
如果里面存在不必要的类名，可以先复制保存，再尝试删除。
另外还要检查：
- 容器宽度
- Flexbox方向
- 自动换行
- 对齐方式
- 内边距
- 外边距
- 元素最小高度
- 手机端和电脑端的独立设置
建议每修改一个设置就观察一次效果，不要一次删除大量内容，以免无法判断问题来自哪里。
二十三、设置全局页眉和页脚
如果使用Xpro创建页眉和页脚，需要进入Xpro Theme Builder检查显示条件。
分别打开Header和Footer模板，把显示条件设置为：
“Display on Entire Site”，也就是在整个网站显示。
确认模板已经发布后，点击更新。
如果页眉或页脚没有显示，重点检查：
- 模板是否已发布
- 显示条件是否覆盖整个网站
- 页面是否使用Elementor Canvas模板
- Astra主题是否存在重复页眉
- 缓存是否尚未清除
需要修改菜单、Logo或按钮时，可以点击对应模板旁边的编辑图标，再使用Elementor编辑。
例如，可以把页眉按钮改成：
- 立即购买
- 查看AI手机
- 预约体验
- 联系我们
- 获取最新报价
并把按钮链接到相应的产品或联系页面。
如果使用Elementor Pro，可以直接通过Theme Builder统一管理页眉、页脚、博客模板和产品页面：
Elementor Pro：https://bit.ly/4cuQ8IF
二十四、设置WordPress导航菜单
Claude可能已经创建了页面，但导航菜单不一定完全正确。
进入WordPress后台：
“外观”→“菜单”
新建一个主菜单，把首页、产品、AI功能、关于我们、博客和联系我们加入菜单。
完成以后，把菜单分配到网站主导航位置。
如果页眉使用Elementor或Xpro制作，还需要打开页眉模板，确认导航组件调用的是刚才创建的菜单。
菜单名称应该尽量简短，不要使用过长的文字。
例如手机品牌网站可以使用：
首页、产品、AI功能、技术规格、关于我们、博客、联系我们
二十五、检查手机端显示效果
网站制作完成以后，一定要单独检查手机端。
在Elementor底部点击响应式模式，分别查看：
- 电脑端
- 平板端
- 手机端
手机端需要重点检查：
- 标题是否太大
- 按钮是否超出屏幕
- 图片是否被裁切
- 两栏内容是否正确变成单栏
- 菜单是否可以正常展开
- 页面左右是否出现空白
- 文字是否太小
- 区块间距是否过大
- 表单是否方便填写
现在大量网站流量来自手机端，因此不能只保证电脑端好看。
特别是产品网站和联盟营销网站，购买按钮、咨询按钮和推广链接必须在手机上容易点击。
二十六、自然加入联盟推广链接
联盟营销网站不能只追求链接数量，更重要的是让链接出现在访客真正需要的位置。
比较自然的做法是：
在文章开头提供完成教程所需的核心工具；在操作步骤中介绍对应工具；在结尾再次整理资源。
例如，当文章讲到购买主机时，再自然推荐：
使用Hostinger注册网站主机和域名：https://bit.ly/3BysRqP
讲到页面编辑时，再推荐：
获取Elementor Pro：https://bit.ly/49KRNsA
讲到网站设计灵感时，再推荐：
ThemeForest WordPress模板：https://bit.ly/4fHKfuS
不要在每一段都重复相同链接，也不要使用与上下文无关的按钮。链接文字应该明确告诉访客点击后会看到什么，而不是全部写成“点击这里”。
二十七、发布前进行SEO检查
网站完成以后，建议检查以下SEO项目：
- 每个页面是否只有一个H1标题
- 页面标题是否包含核心关键词
- URL是否简短清晰
- 图片是否填写Alt说明
- 页面是否有Meta Description
- 网站是否安装SSL证书
- 手机端是否正常
- 页面加载速度是否合格
- 内部链接是否完整
- 是否存在空白页面或失效链接
- 是否加入隐私政策和联盟披露
可以使用Semrush分析网站关键词、竞争对手和自然流量：
Semrush网站数据分析：https://bit.ly/3TfIaNK
如果网站面向海外用户，但自己英文不熟练，可以使用沉浸式翻译辅助阅读：
如果需要英文文案、Logo、网站开发或页面美化，也可以在Fiverr寻找相关服务：
Fiverr英文工作外包：https://bit.ly/4c9cttG
二十八、常见问题解答
1. Claude Design免费版可以使用吗？
Claude Design通常需要Claude Pro或Max会员才能使用。如果账号中没有看到Design入口，建议先检查当前套餐以及是否使用Claude网页版。
还没有Claude会员的用户，可以通过下面的平台查看相关服务：
ChatGPT、Claude AI会员代充及账号购买：https://nf.video/C1dxn
2. Claude生成的网站可以直接上线吗？
Claude生成的网站可以作为设计和页面基础，但正式上线前仍然建议检查：
- 页面文字是否准确
- 产品图片是否真实
- 按钮链接是否正确
- 手机端是否适配
- 表单是否能收到邮件
- 隐私政策是否完整
- 页面加载速度是否正常
- SEO标题和描述是否设置
AI适合快速完成网站框架，但最后的检查和优化仍然非常重要。
3. 导入WordPress以后还能继续修改吗？
可以。
只要网站成功转换成Elementor原生组件，就可以直接在WordPress后台使用Elementor修改文字、图片、按钮、颜色和页面结构。
这也是本文教程最重要的价值：不是把一整页HTML代码简单放进WordPress，而是尽量转换成后期可以继续编辑的页面。
4. 一定要购买Elementor Pro吗？
不一定。
Elementor免费版已经可以完成大部分基础页面编辑。如果只需要制作普通页面，并且配合Xpro处理页眉和页脚，可以先使用免费方案。
如果需要以下功能，则更建议使用Elementor Pro：
- Theme Builder
- 全局页眉和页脚
- Popup弹窗
- 高级表单
- 动态内容
- WooCommerce组件
- 更多专业页面元素
Elementor Pro页面构建器：https://bit.ly/49KRNsA
5. Claude导入网站失败怎么办？
可以依次检查以下问题：
- Claude桌面版是否已重新启动
- Novamira是否正常启用
- Application Password是否正确
- WordPress网站是否可以正常访问
- ZIP项目文件是否完整
- Node.js是否安装
- Claude使用额度是否已经耗尽
- Elementor Container是否已经启用
- Atomic Editor是否已经关闭
如果Claude已经完成部分页面，不要立即全部删除。可以让它检查当前进度，并从中断的位置继续执行。
6. 可以把别人的网站完整复制下来吗？
不建议直接复制别人的网站内容、图片、Logo和品牌设计。
更合理的方法，是把参考网站作为设计灵感，让Claude参考它的排版、配色、区块结构和整体氛围，再结合自己的品牌资料重新设计。
寻找WordPress设计灵感，可以使用：
ThemeForest主题森林：https://bit.ly/4fHKfuS
截取整页参考图，可以使用：
7. Claude可以帮我修改已经上线的网站吗？
如果Claude已经通过Novamira成功连接WordPress，可以让它读取网站页面，并根据指令修改部分内容。
例如：
“请把首页首屏标题改成更适合AI手机品牌的文案。”
“请把产品页面的购买按钮链接到指定网址。”
“请检查所有页面是否适配手机端。”
“请在首页增加一个AI功能介绍区块。”
涉及删除页面、修改网站设置或批量更新内容时，建议先备份网站。
二十九、适合联盟营销网站的内容布局
如果你准备通过联盟营销赚钱，可以把网站内容分为三种类型。
教程型文章
围绕用户实际问题写完整操作教程，例如：
- Claude Design怎么使用
- WordPress网站怎么搭建
- Elementor怎么制作页面
- AI网站怎么导入WordPress
- Hostinger怎么安装WordPress
教程中可以自然加入对应工具链接。
对比型文章
帮助用户比较不同产品，例如：
- Elementor免费版和Pro版区别
- Hostinger不同套餐怎么选
- Claude和ChatGPT哪个更适合建站
- WordPress和Shopify哪个更适合新手
- AI建站工具哪个好用
对比文章的购买意图通常更强，更适合放置联盟链接。
评测型文章
通过实际体验介绍工具的优点、缺点、价格、适用人群和操作方法。
评测文章不要只写优点，也要说明限制和可能遇到的问题，这样更容易获得读者信任。
如果准备搭建跨境电商独立站，也可以使用Shopify：
Shopify跨境电商独立站：https://shopify.pxf.io/BnBxny
三十、提高联盟链接点击率的方法
联盟链接应该自然地出现在用户准备采取行动的位置。
例如，读者刚了解完Hostinger的主机功能时，可以加入：
立即查看Hostinger主机和域名套餐：https://bit.ly/3BysRqP
读者看到Elementor功能介绍后，可以加入：
查看Elementor Pro专业版功能：https://bit.ly/49KRNsA
链接文字尽量具体，不要全部使用“点击这里”。
同时建议做到：
- 一段内容只突出一个主要行动
- 重要链接放在正文相关位置
- 开头、中间和结尾自然出现
- 不要连续堆放大量无关链接
- 明确说明部分链接属于联盟链接
- 不要夸大产品效果
- 不要隐藏费用和使用限制
三十一、总结
Claude Design让AI建站从“生成一段代码”，进一步变成了“先完成设计，再导入WordPress继续编辑”。
整个流程可以概括为：
- 使用DesignMD或GetDesignMD创建设计系统
- 填写品牌、业务和SEO关键词
- 使用Claude Design生成完整网站
- 购买主机和域名并安装WordPress
- 安装Elementor、WPForms、Xpro和Novamira
- 连接Claude桌面版与WordPress
- 下载Claude Design项目
- 使用提示词把网站导入WordPress
- 使用Elementor修改细节
- 检查手机端、SEO和页面链接
这种方法特别适合不会编程、想快速制作企业网站、产品网站、联盟营销网站和跨境电商网站的新手。
准备开始操作，可以先打开下面几个核心资源：
Hostinger网站主机和域名：https://bit.ly/3BysRqP
Elementor Pro页面构建器：https://bit.ly/49KRNsA
Claude Design完整建站提示词：https://aiyoufeng.com/claude-design-wordpress
Novamira连接WordPress插件：https://bit.ly/4tY4TL5
加入有风知识星球咨询：https://t.zsxq.com/16QP9JP8b
通过本文中的部分推广链接注册或购买，我可能会获得一定佣金，但不会增加你的购买费用。感谢你的支持，也希望这篇教程能够帮助你更快完成自己的AI网站。
相关文章
