@Saccc_c: https://x.com/Saccc_c/status/2071881016013205890

X AI KOLs Following 工具
codex personal-website web-development ai-tools tutorial frontend design

摘要

一篇详细教程，介绍如何使用Codex以及taste skill和Frontend App Builder在2小时内制作出个人风格的个人网站。

https://t.co/qjWJeE5kR4
查看原文
查看缓存全文

缓存时间: 2026/06/30 09:42

个人网站，是你上手 Codex 的最好项目

AI时代，个人网站就是最好的简历。

昨天我发布了个人网站demo，全网收获了近10万的浏览，许多朋友私信我制作方法。

Sac@Saccc_c·Jun 29AI时代个人网站是最好的简历

下面是我用Codex制作的个人网站，各位大佬能否提提意见1425568166K

承蒙大家的喜欢，我将详细介绍如何用Codex在2小时内做出属于你自己风格的个人网站。

总体步骤： 整理网站内容文档 — 使用 taste skill 生成网页参考图 — 单独生成素材图片 — 用Frontend App Builder skill 复刻网页

（详细步骤如下）

第一步：用 Codex 整理详细的网站内容文档

和 Codex 详细表达自己的个人信息和网站需要传递的内容，让其整理一份详细的结构化文档。

我的文档大致包括了以下内容：

  • Sac 个人信息和IP定位

  • 页面数目、结构和风格

  • 整体的设计方向和布局

小 tips: 可以利用 Chrome 插件让 Codex 查看你社媒，帮你补充信息

第二步：利用 taste skill 生成高质量网页参考图

使用 taste skill 里的 imagegen-frontend-web skill，结合网站内容文档，生成每一个页面的详细参考图。

GitHub地址：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

这是我的提示词：

得到的参考图效果如下：

注：taste skill 里的 imagegen-frontend-web skill能让 Codex 在生成图片时更有审美，画面会更具设计感

第三步：分析拆解参考图结构，关键素材单独生成图片

在得到完整的参考图后，各个网页的关键素材需要单独生成。我们可以直接在对话框输入：

plaintext这是我目前生成好的网页参考图。请你逐页分析它们的结构，帮我判断：

  1. 哪些部分可以用代码实现
  2. 哪些关键视觉元素需要单独生成素材 先不要开始写代码，先给我一份素材拆解建议。

然后利用 ImageGen 生成关键素材图片，保证和参考图里的细节一致。

例如我个人网站中的头像素材：

第四步：利用Codex内置的Frontend App Builder skill将网页参考图复刻成真实网页

把前面确定好的参考图和素材图片提交给 Codex 进行网页复刻。

这里用到的是 Build Web Apps 插件里的 Frontend App Builder skill，它会把参考图当成设计稿，并按照一套结构化流程进行高保真还原。

复刻网页的参考提示词：

复刻的效果如下：

相似文章

@gengdaJ: 我愿称Sac老师为个人网站的神！从未见过这么牛逼的用Codex搭建个人网站的方法！ 高级感个人网站搭建，小白上手的保姆级教程： 1. 用 Codex 分析社媒数据，整理详细的网站内容文档。 这一步可以参考所有社媒网站，X可以在“设置和隐私…

X AI KOLs Following

介绍使用Codex和taste skill搭建个人网站的保姆级教程，包括分析社媒数据、生成参考图、拆解结构等步骤，适合小白上手。