用Codex AI从零制作一个专业网站｜AI建站完整教程
Codex AI建站教程：零基础用GPT-5.6 Sol制作一个专业又漂亮的网站
以前我们用 ChatGPT、Claude 等 AI 做网站，虽然速度很快，但经常会遇到一个问题：做出来的网站看起来都差不多，一眼就能看出很明显的“AI味”。配色、卡片、按钮、渐变背景甚至页面结构，都像是从同一套模板里生成出来的。
这篇教程，我会分享一种新的 AI建站方法：使用 ChatGPT 中的 Codex + GPT-5.6 Sol，再配合设计规范、Skills、Design.md、网站组件等工具，让 AI 不只是“帮你生成一个能用的网站”，而是尽量做出一个真正有设计感、有品牌感的网站。
整个过程不要求你会编程。即使以前从来没有接触过 Codex，也可以按照本文一步一步操作。Codex 本身就是一个 AI 编程智能体，可以处理本地文件、代码、终端和项目，所以特别适合拿来制作网站。
后面如果你准备把 AI 做好的网站正式发布到互联网上，还需要服务器和域名。我目前使用的是 Hostinger，对新手比较友好，服务器、域名和网站管理基本都可以在一个后台完成。
Hostinger：
https://bit.ly/3BysRqP
说明：本文部分链接属于推广/联盟链接，如果你通过这些链接购买产品，我可能会获得一定佣金，但不会增加你的购买成本。
提示词1：
你好，我想制作一个落地页。
我准备使用 Next.js。
Windy 是一个由 AI 驱动的内容创作和社交媒体管理平台。内容创作者、自由职业者和小型企业可以连接自己的社交媒体账号，并在一个平台内完成整个内容运营流程。
Windy 可以帮助用户发现热门内容灵感、通过 AI 生成社交媒体帖子和视频脚本、规划内容发布日历、同时将内容发布到多个平台，并在发布之后查看内容表现。
除了基础的内容创作功能之外，Windy 还支持跨平台管理。用户可以在一个后台中统一管理 YouTube、Instagram、TikTok、X、LinkedIn 和 Facebook。
用户可以对比不同内容的表现，查看粉丝增长趋势、互动数据和热门内容主题，并获得 AI 自动生成的数据分析建议。AI 会帮助用户判断哪些内容表现最好、为什么这些内容有效，以及下一步更适合制作什么类型的内容。
Windy 还提供 AI 内容二次创作功能。用户可以上传一条长视频或一篇文章，AI 自动将其转换成短视频内容、社交媒体帖子、视频标题、文案、开场 Hook、邮件内容以及适合不同社交平台发布的内容创意。
整个产品界面需要具有丰富、现代并且高度可视化的感觉。
例如：首页数据分析 Dashboard，可以展示播放量、互动率、粉丝增长和内容表现图表；内容发布日历；社交媒体内容列表；AI 内容生成器；热门话题推荐卡片；不同内容之间的数据对比图表；受众分析页面；以及单条内容详情页面。
在内容详情页中，可以展示播放量、互动率、观看留存、粉丝增长，以及 AI 自动生成的优化建议。
网站整体视觉风格要像一个高端、现代的 SaaS 产品。
设计应该简洁、干净，并带有轻微的未来科技感。使用大标题、现代字体、柔和渐变、圆角卡片、细腻的动画效果和清晰的信息层级。同时在页面中展示精致的 Windy 产品后台界面预览，让访客第一眼就能理解这个产品是做什么的。
我们现在要制作的是 Windy 的早期体验等待名单 Landing Page。
这个页面最主要的目标是，让访客在几秒钟之内理解 Windy 的核心功能，并吸引他们留下邮箱，加入 Early Access Waitlist。
请先等待，我接下来还会提供更多背景信息和页面设计要求。
提示词2：
“只要是你自己可以完成的操作，就直接执行，不需要让我手动操作。这也包括启动应用程序和完成验证。
提示词3：
在这里创建一个 DESIGN.md 文件，并把这些内容放进去。
根据这个设计重新优化网站。
网站的结构、布局和动画效果都不要改变。
提示词4：
我希望你从现在开始在这个项目中使用 Phosphor Icons 图标库。
请把这条要求添加到 AGENTS.md 文件中。
提示词5：
创建一个 /assets 文件夹，并且也把它关联/记录到 AGENTS.md 里面。这个文件夹将用来存放我们在落地页中需要展示的所有图片和其他内容。
我希望你把落地页里所有的图库素材图片（Hero 首屏区域除外），全部替换成与当前设计风格以及对应内容相匹配的插画。
这些图片需要通过你的图片生成模型来生成。
这次任务我会开启 Plan 模式。
一、Codex是什么？为什么适合用来做网站？
很多人平时使用 ChatGPT，主要还是聊天、写文章或者生成图片，但 Codex 更偏向编程和实际项目执行。
简单理解，你可以把 Codex 当成一个会自己写代码、修改文件、运行项目、检查错误的 AI 程序员。
正常情况下，如果你自己开发一个网站，需要创建文件夹、安装开发环境、编写 HTML、CSS、JavaScript，甚至还要处理 Node.js、组件、图片和各种依赖。
但使用 Codex 之后，我们可以直接告诉它：
“我要制作一个什么样的网站。”
然后让它按照我们的要求创建项目文件、编写代码、调整页面甚至检查问题。
现在新版 ChatGPT 桌面应用中已经可以直接进入 Codex，在桌面端可以操作本地文件夹、项目和终端。OpenAI 官方也提供了 Codex 的项目初始化功能，例如使用 /init 创建项目说明文件。
所以对于不懂代码的人来说，这种方式最大的优势并不是“完全不用接触代码”，而是很多原来必须自己操作的技术步骤，可以交给 AI 完成。
二、开始之前需要准备什么？
正式开始之前，先准备好下面几个东西：
- ChatGPT 桌面版
- 可以使用 Codex 的 ChatGPT 账号
- 一个本地项目文件夹
- 后面用到的网页设计参考和组件
- 如果准备正式上线网站，还需要域名和服务器
ChatGPT 官方桌面版下载地址：
https://chatgpt.com/zh-Hans-CN/download/
安装完成以后登录自己的 ChatGPT 账号，然后从左上角切换到 Codex。
如果你的 ChatGPT 会员不好开通，或者没有方便的海外付款方式，也可以自行了解第三方 AI 会员服务平台：
ChatGPT / Claude AI会员代充、账号购买——银河录像局
建议涉及账号的第三方服务都先了解清楚服务规则、账号安全和售后政策，再决定是否使用。
三、新建第一个Codex网站项目
打开 ChatGPT 桌面版并进入 Codex 以后，第一步不要急着让 AI 写网站，而是先建立一个独立项目。
你可以在电脑上新建一个文件夹，例如：
AI-Website
然后在 Codex 中打开这个本地文件夹。
后面 AI 生成的网页文件、图片、配置文件和其他资源，都可以统一保存在这里。这样做最大的好处是项目结构比较清楚，以后需要继续修改网站，也不用重新开始。
视频中的操作也是先建立本地项目，并确保后续生成的网站文件全部放在同一个项目目录中。
四、不要一上来就说“帮我做一个网站”
这是整个教程非常关键的一点。
很多人用 AI 建站时，第一句话就是：
“帮我制作一个科技公司网站。”
或者：
“帮我制作一个漂亮的 AI 网站。”
这种提示词虽然也能生成网页，但是问题在于：你提供的信息太少，剩下的设计决策全部只能让 AI 自己猜。
比如 AI 并不知道：
- 网站是给谁看的？
- 网站提供什么产品或服务？
- 最重要的目标是什么？
- 用户进入网站以后，希望他完成什么动作？
- 网站应该是什么品牌风格？
- 页面需要哪些模块？
- 哪些内容最重要？
因此，在开始写代码之前，我们应该先告诉 Codex 一份比较完整的网站背景。
例如可以这样描述：
我要制作一个 AI 驱动的内容创作 SaaS 落地页，目标用户是内容创作者、自由职业者和社交媒体运营人员。这个产品可以帮助用户寻找创作灵感、生成内容和管理社交媒体。网站整体需要呈现高端、现代、专业的 SaaS 产品风格。
然后最后再告诉 AI：
先不要开始制作网站，等待我继续提供项目背景和设计要求。
这样做的目的，是让 Codex 先理解项目，而不是立刻开始生成代码。
五、用 AGENTS.md 固定整个项目的规则
接下来会用到一个非常重要的专业术语：
AGENTS.md
语音识别时很容易把它识别成“Agent MD”“A点MD”等，但正确名称是 AGENTS.md。
它可以理解成这个项目给 AI 使用的一份“长期项目说明书”。
因为如果一个网站做得比较复杂，我们后面可能会不断新建任务、修改不同页面。如果每次都靠聊天重新说明网站背景，很容易出现前后不一致。
AGENTS.md 就是用来解决这个问题的。
在 Codex 中输入：
/init
Codex 可以为当前项目生成 AGENTS.md 的基础结构。OpenAI 官方目前也明确把 /init 作为生成项目 AGENTS.md 脚手架的方式。
这个文件里面可以记录：
- 项目是做什么的
- 网站的目标用户
- 技术框架
- 文件结构
- 编码规范
- 测试方式
- AI执行任务时必须遵守的规则
你还可以在 AGENTS.md 里面加入一条非常实用的规则：
凡是 Codex 自己能够完成的操作，尽量由 Codex 直接完成，包括创建文件、修改代码、运行程序和完成验证，不要把可以自动完成的步骤再次交给用户手动操作。
这样可以让后面的整个 AI 建站流程更加自动化。
接下来，我们还需要解决一个更重要的问题：
如何让 Codex 做出来的网站摆脱千篇一律的“AI模板感”？
下一部分会开始讲 Skills、设计规则、GetDesign 的 Design.md，以及怎样让 GPT-5.6 Sol 真正按照专业网站的视觉逻辑来设计页面。
六、安装 Taste Skill，减少AI网站的“模板感”
前面我们已经通过 AGENTS.md 把项目背景、开发规范和基本要求固定下来。接下来要解决第二个问题：怎样让 Codex 做出来的网站不要一眼看上去就是AI生成的？
现在的 AI 模型已经很强，即使只给一句简单的提示词，也能快速生成一个看起来不错的网站。但当你生成的网站越来越多，就会发现很多设计语言一直在重复：相似的渐变背景、圆角卡片、按钮、Hero 区域和排版结构。
这也是很多人所说的“AI味”。
解决这个问题，我们可以给 Codex 安装一套专门用于前端设计的 Skill。
这里视频语音识别成了类似“testbingo”“GPTaste”等名称，实际使用的工具叫：
Taste Skill
官方网站：
Taste Skill 是一套给 AI Coding Agent 使用的前端设计规则，可以用于 Codex、Claude Code、Cursor、Gemini CLI 等工具，主要目的就是减少 AI 自动生成页面时经常出现的通用模板风格。
在 Taste Skill 网站上可以找到安装命令，目前官方提供的安装方式类似：
npx skills add Leonxlnx/taste-skill
把对应的安装命令复制下来，然后回到 Codex，让 Codex 帮你执行安装即可。
安装完成以后，后面让 Codex 设计网站时，就可以明确告诉它优先按照我们安装的设计 Skill 来处理页面，而不是完全依赖模型默认的网页设计习惯。视频中的核心思路也是先把可复用的网页设计规则保存成 Skill，让 Codex 在之后的设计任务中重复调用。
这样做并不能保证每次生成的网站都完全独一无二，但可以明显增加我们对页面设计方向的控制能力。
七、使用 DESIGN.md 给网站确定统一的品牌视觉
安装 Taste Skill 以后，我们解决的是：
“一个好网站通常应该怎么设计？”
但还有另外一个问题：
“我现在这个网站具体应该长什么样？”
这时就可以使用 DESIGN.md。
推荐的网站是：
GetDesign 提供了大量已经整理好的 DESIGN.md。它本质上可以理解成一份给 AI Coding Agent 阅读的“网站视觉设计说明书”，里面会记录颜色、字体、间距、组件以及整体视觉语言等信息。
比如你喜欢某个品牌网站的视觉感觉，就可以在 GetDesign 中寻找类似的设计参考。
假设你希望自己的网站使用：
黑色 + 绿色 + 科技感
那么你就可以找到相应的 DESIGN.md，下载以后交给 Codex，然后告诉它：
在当前项目中创建一个 DESIGN.md 文件，并按照我提供的设计规范重新优化网站。保留现有的网站内容结构、功能和动画效果，主要调整配色、字体、间距、组件样式以及整体视觉语言。
这样做比单纯告诉 AI：
“帮我做得高级一点。”
要有效得多。
因为“高级”“漂亮”“科技感”这些词非常主观，而 DESIGN.md 会把这种视觉风格进一步拆解成 AI 更容易执行的具体规则。
GetDesign 官方对 DESIGN.md 的定位也是：把它作为一套可以重复使用的设计参考，让 AI 在不同页面之间保持统一的视觉语言。
所以你可以把两者简单理解成：
Taste Skill = 告诉 Codex 怎样做出更合理、更不像模板的网页。
DESIGN.md = 告诉 Codex 这个具体网站应该采用什么视觉风格。
视频中也是先使用设计 Skill，再通过 DESIGN.md 对网站的颜色和品牌视觉进行第二轮优化。
八、让ChatGPT为网站生成匹配的原创图片
做到这一步以后，网站的整体框架、配色和视觉风格已经基本确定。
但是很多 AI 网站还有一个非常明显的问题：
图片和网站风格不统一。
AI 编程工具在生成网站时，经常会先使用占位图、图库图片或者比较普通的素材。单独看这些图片可能没有问题，但组合到页面里面以后，就容易产生一种“拼出来的网站”的感觉。
解决方法就是让 ChatGPT 根据网站现有的视觉风格，重新生成一套专门匹配这个项目的原创图片。
可以告诉 Codex：
创建一个专门用于存放网站图片素材的 Assets 文件夹，并把该目录记录到项目的 AGENTS.md 中。分析当前落地页的视觉风格和每一个图片区域的实际用途，为这些位置生成与网站设计、品牌定位和页面内容匹配的原创图片，并替换现有占位素材。
对于这种涉及多个页面区域、需要生成多张图片的任务，我更建议先让 Codex 做计划，再开始执行。
这样 AI 可以先告诉你：
- 一共需要生成多少张图片
- 每张图片放在哪里
- 每张图片表达什么内容
- 使用什么视觉风格
- 图片尺寸和比例怎么安排
确认以后再让它开始生成，可以减少后面反复修改产生的 Token 消耗。
如果你准备长期使用 ChatGPT、Claude 等 AI 工具，但会员支付不方便，也可以了解：
ChatGPT / Claude AI会员代充、账号购买——银河录像局
使用第三方服务前建议自行确认账号安全、售后和平台规则。
九、用21st.dev替换普通组件，让网站细节更高级
网站整体做好以后，我们没有必要为了一个按钮、轮播图或者 Hero 动画，让 Codex 把整个页面重新设计一遍。
更高效的方法是：
只替换你不满意的组件。
这里推荐一个很好用的网站：
21st.dev 上有大量现成的 React UI 组件，包括 Hero、按钮、卡片、导航菜单、轮播、Pricing、Testimonials、背景动画以及各种交互效果。
比如你觉得自己网站顶部的 Hero Section 太普通，就可以打开 21st.dev，找到一个喜欢的 Hero 效果。
然后把对应的组件信息或提示词复制给 Codex，并告诉它：
把这个组件的视觉效果应用到当前网站的 Hero 区域。不要改变当前网站的文字内容、品牌配色和整体页面结构，只参考并实现这个组件的交互和视觉效果。
这样就可以在不推翻整个网站的情况下，对局部细节进行升级。
视频中的做法也是从 21st.dev 找到喜欢的组件，再让 Codex 把效果应用到现有 Hero 区域，从而继续提升网站完成度。
如果你在实际使用 Codex、AI建站或者网站部署过程中遇到问题，也可以加入我的知识星球交流：
下一步就是整个教程非常重要的最后阶段：如何把 Codex 做好的网站从本地电脑发布到互联网，并绑定自己的域名。
十、把Codex做好的网站发布到互联网
前面我们已经完成了网站的主体设计、视觉风格、图片素材和组件优化。现在这个网站虽然已经可以在电脑上正常预览，但它目前还只是运行在本地环境中。
如果你希望别人能够通过网址打开你的网站，就需要准备：
- 网站服务器
- 域名
- 网站最终可部署文件
我自己比较推荐新手使用 Hostinger，因为服务器、域名、文件管理和网站后台基本都集中在一个平台里，操作相对简单。
👉 Hostinger：购买网站服务器和域名
优惠码：WINDY
如果你购买一年或更长周期的套餐，可以进入 Hostinger 页面查看当前是否包含首年免费域名等权益，具体套餐内容和价格以购买页面实时显示为准。
视频中的部署流程也是使用 Hostinger，把 Codex 生成的网站文件上传到服务器，再通过域名正式访问网站。
十一、Hostinger服务器应该怎么选？
进入 Hostinger 后，可以看到不同类型的主机，例如：
- Web Hosting
- VPS
- Cloud Hosting
- WordPress Hosting
- WooCommerce Hosting
如果只是刚开始学习 AI 建站，通常没有必要一上来就买复杂的 VPS。
对于个人网站、作品集、博客、企业展示站或者普通落地页，可以先根据自己的流量、网站数量、存储空间和预算选择合适的 Web Hosting 套餐。
Hostinger 不同套餐在存储空间、备份频率、性能以及是否提供独立 IP 等方面会有所区别。
这里特别提醒一点：
网站主机的价格和活动经常会变化，所以不要完全按照教程里的价格判断，直接进入官方网站查看实时价格最准确。
👉 Hostinger入口：
购买时如果页面提供优惠码输入框，可以尝试输入：
WINDY
查看当前是否还能获得额外优惠。
视频中的实际操作还包括选择套餐周期、填写账单信息以及选择付款方式，完成以后就可以直接进入 Hostinger 后台。
十二、让Codex生成可以直接上传的ZIP网站文件
这一步对新手非常重要。
不要只是告诉 Codex：
把网站源代码给我。
因为 Codex 有可能给你一个需要重新安装依赖、执行 npm 命令才能运行的源码项目。
如果你不懂代码，这种方式会比较麻烦。
你可以直接告诉 Codex：
我准备把这个网站上传到 Hostinger，请帮我生成最终可以直接部署的网站文件，并打包成 ZIP。我要的是部署完成后的静态成品，不是需要重新运行开发命令的源码包。解压以后应该可以直接上传到服务器运行。
这就是视频里后来重新要求 Codex 生成的版本。
第一次生成的是源码运行包，还需要执行命令；后来重新告诉 Codex，需要的是静态成品包，这样上传服务器以后会方便很多。
等 Codex 打包完成后，把生成的 .zip 文件下载到电脑上。
十三、把网站文件上传到Hostinger
进入 Hostinger 后台以后，找到：
网站 → 添加网站
如果我们做的是普通 HTML 静态网站，可以根据当前后台提供的选项选择自定义网站或上传代码。
接下来选择域名。
如果暂时还没有确定正式域名，也可以根据 Hostinger 当前提供的功能先使用临时域名，后面再绑定自己的正式域名。
网站创建完成以后，进入：
文件管理器
这里有一个特别容易出错的专业术语：
public_html
语音识别有时候会把它识别成“pop html”之类的文字，正确名称通常是：
public_html
它就是网站公开访问文件所在的根目录。
把 Codex 最终生成的网站文件上传到 public_html 中。
需要特别注意：
不要把整个外层文件夹直接套进去。
例如你的 ZIP 解压后是：
my-website/index.html
那么真正需要放到 public_html 根目录里的，应该是：
index.html
以及它对应的 CSS、JavaScript、Assets 等文件。
最终结构类似：
public_html
├── index.html
├── assets
├── css
└── js
视频里的实际操作同样是进入文件管理器，把网站最终文件移动到网站根目录，再通过域名访问。
十四、通过域名检查网站是否上线成功
所有文件上传完成以后，打开浏览器，输入你的正式域名。
如果看到的效果和之前电脑上的 Localhost 本地预览基本一致，就说明部署已经成功。
视频中上传完成后，通过域名访问到的网站与本地预览效果保持一致，也就意味着整个 Codex AI 建站流程正式完成。
如果上线以后发现：
- 图片没有加载
- 某个按钮失效
- 手机端显示异常
- 页面出现空白
- 路径出错
- CSS没有加载
- 某些动画失效
也不用急着自己研究代码。
你可以把错误页面截图发给 Codex，然后直接告诉它：
这是网站上传到 Hostinger 后出现的问题，请分析原因并直接修改项目文件，修改完成以后重新帮我生成可以部署的 ZIP 文件。
这也是 AI Coding 最大的优势之一：
不只是让AI帮你第一次做网站，后面的检查、修改和维护同样可以继续交给AI完成。
十五、AI做好的网站还可以拿来赚钱吗？
如果你已经能够熟练使用 Codex 制作网站，其实不只是可以给自己做博客、作品集或者公司网站，还可以把它变成一项服务。
比如：
- 企业官网制作
- Landing Page落地页
- 个人作品集网站
- SaaS产品页面
- 活动页面
- 独立站页面优化
- 网站UI改版
如果你想尝试海外接单，可以研究 Fiverr。
👉 Fiverr英文自由职业接单平台：
你可以搜索：
Website Design、Landing Page、AI Website、Web Development
看看海外卖家都在提供哪些服务、如何定价以及客户更关注哪些需求。
十六、做网站还可以搭配这些工具
如果你准备长期做网站，可以根据不同需求搭配下面这些工具。
Elementor Pro
如果你主要做 WordPress 网站，Elementor Pro 是比较常用的可视化页面构建工具。
👉 Elementor Pro：
Shopify
如果主要目标是搭建跨境电商独立站，可以使用 Shopify。
👉 Shopify：
Semrush
网站上线以后，如果准备进一步做 Google SEO、关键词研究、竞争对手分析和网站数据分析，可以使用 Semrush。
👉 Semrush：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...