Codex + Cargo.site 实战：用提示词搭建自己的产品与作品集网站
做了几个产品之后，往往会遇到一个问题：代码仓库、演示地址、截图和介绍散落在不同地方，别人很难快速理解你做过什么，也不知道应该先体验哪一个。
一个个人产品集网站，可以把这些内容组织成一条清楚的访问路径：先认识你，再浏览产品，最后进入案例、打开演示或者联系合作。
这篇教程用 Codex + Cargo.site 完成这条路径。Codex 帮我们整理材料、制定设计方案、编写局部样式和检查页面；Cargo 负责可视化编辑、页面组织和发布。我们会围绕同一个案例，逐步给出提示词、示例输出、Cargo 操作和验收方法。
一、先看案例：我们要做一个什么网站
假设你是一名独立开发者，准备把三个项目放进个人产品集：
| 项目 | 一句话介绍 | 当前状态 | 访问者可以做什么 |
|---|---|---|---|
| 页签笔记 | 将阅读摘录整理成主题笔记 | 交互原型 | 查看案例和原型截图 |
| 颜色尺 | 检查界面配色与文字可读性 | 本地可运行演示 | 查看案例和操作演示 |
| 截图框 | 为产品截图添加统一的展示边框 | 设计概念 | 查看设计过程 |
这些名称、状态和后文文案均为教学示例，不代表已经上线的真实产品。 实际制作时要替换成自己的材料，尚无公开演示的项目就不放“立即体验”按钮。
第一版网站只做以下页面：
首页 Home
├── 一句话介绍
├── 三个精选产品
└── 关于与联系入口
产品集合 Products
├── 页签笔记案例页
├── 颜色尺案例页
└── 截图框案例页
关于 About
联系 Contact
这里的 Products 是内容组织方式；在 Cargo 中可以用 Set 管理三张案例页。不要据此假定网址一定带 /products/ 前缀，最终链接应从实际页面取得。
首页的目标很具体：让第一次访问的人知道你是谁、做什么，以及下一步该点哪里。第一版先把这三件事做好，再考虑复杂动画。
Codex 与 Cargo 如何分工
| 工作 | 在哪里完成 | 得到什么 |
|---|---|---|
| 整理产品信息、撰写案例 | Codex | 可核对的内容文档 |
| 确定布局、字体与间距 | Codex 提方案，你作选择 | 设计说明和参数表 |
| 建页面、上传图片、配置链接 | Cargo 编辑器 | 可以实际访问的页面 |
| 编写局部 HTML/CSS | Codex 生成，放入 Cargo 对应入口 | 可撤销的样式增强 |
| 检查手机显示、链接和内容 | 浏览器、Cargo 预览与 Codex | 修正清单 |
| 公开网站、连接域名 | Cargo 与域名服务商 | 正式访问地址 |
本文采用手动将内容和代码放进 Cargo 的流程，不依赖某个专用连接器。Codex 生成一个 React 项目，也不会自动变成 Cargo 模板；应该围绕 Cargo 的原生组件和自定义代码入口工作。
Cargo 提供全站 CSS 编辑、全站自定义 HTML，以及页面 Code View；页面内容与站点底层 HTML 的访问范围不同，不能用一份完整网页去覆盖平台框架。Cargo：CSS and HTML
二、准备材料，让 Codex 有真实内容可用
先准备一个本地目录：
my-portfolio/
├── brief.md
├── products.md
├── assets/
│ ├── notes-cover.webp
│ ├── color-cover.webp
│ └── frame-cover.webp
└── drafts/
在 Codex 中选择这个目录作为项目，让后续文案、代码片段和修改记录有统一的位置。项目可以关联本地文件夹，也可以在对话里附上本次需要参考的文件和图片；具体入口以你使用的客户端为准。OpenAI：Projects and chats
在 brief.md 写下基本要求：
网站用途：展示个人产品与设计过程，帮助潜在合作方了解我的能力。
目标访客：独立开发者、产品经理、小团队负责人。
期望动作：阅读案例；有公开演示时打开演示；通过邮件联系。
风格：浅色、克制、清晰，允许少量编辑式排版。
页面：Home、三个产品案例、About、Contact。
语言：中文为主，保留常用英文产品术语。
限制：不编造用户数、收入、客户评价或项目上线状态。
实现方式：Cargo 原生页面与组件，必要时添加少量 HTML/CSS。
products.md 则为每个产品保留这些字段：
产品名称：页签笔记
当前状态：交互原型，尚未公开上线
服务对象：需要整理阅读资料的个人用户
问题：摘录分散在书签、文档和聊天记录中，回顾时难以找到上下文
核心方案：按主题组织摘录，为每条摘录保留来源
本人职责：需求梳理、交互设计、原型制作
已有材料：首页截图、笔记详情截图、一次操作流程录屏
公开演示地址：暂无
可以展示的结果：原型完成了摘录、分类、回看三步流程
未验证部分：长期留存、真实使用频率
信息不完整很正常。先让 Codex 找出缺口，再补材料，比让它凭空写一篇“成功案例”更有用。
提示词 1：把材料变成建站清单
把下面的提示词发给 Codex：
请读取 brief.md 和 products.md，帮我准备 Cargo 产品集网站的内容。
请完成：
1. 列出网站结构和各页面的访问目标。
2. 为每个产品整理标题、80 字以内简介、当前状态、已有素材、可用按钮。
3. 列出缺失信息，标记为“待补充”。
4. 将结果保存到 drafts/site-plan.md。
约束：
- 没有公开演示地址，就不要生成“立即体验”链接。
- 不编造用户数、营收、客户评价或测试结果。
- 不写代码，先把内容结构整理清楚。
合理的示例输出应当类似：
Home：介绍独立开发者身份，展示三个精选产品，引导进入案例。
页签笔记：
简介：围绕主题整理阅读摘录，并保留来源，方便回看资料上下文。
状态：交互原型。
主按钮：查看案例。
演示按钮：不显示，暂无公开地址。
待补充：选择一张能体现“主题组织”的封面图。
这一轮的操作结果是内容清单，不是页面。检查每项事实和按钮是否符合实际，再进入设计阶段。
三、用提示词确定设计方向，而不是只说“做得高级一点”
给 Codex 一张参考图时，最好说明想借鉴什么：字体层级、留白、产品卡片比例，还是配色。参考站的图片、标志和整套文案不应该直接变成你的素材。
本案例选择浅色背景、深灰文字、蓝色链接，首页以简短介绍加产品索引为主。
提示词 2：把风格要求变成可执行参数
请基于 drafts/site-plan.md，为 Cargo 产品集网站制定一版视觉方案。
设计方向：
- 浅色背景、深灰文字，蓝色只用于链接与交互提示。
- 产品截图是主角，不使用大面积装饰渐变。
- 首页依次为导航、个人介绍、精选产品、联系入口。
- 桌面产品列表建议两列，手机一列。
请输出：
1. 首页的文字线框图。
2. 背景、正文、辅助文字、强调色的色值。
3. 标题、正文、说明文字的字号建议。
4. 页面宽度、边距与组件间距建议。
5. 每一项对应的 Cargo 配置位置；无法确认的入口请标记待核对。
先给方案，不生成完整 HTML，也不要引入 React 或 Tailwind。
可以采用下面这组起始设计值，再根据实际模板调整：
| 项目 | 示例值 | 使用原则 |
|---|---|---|
| 页面背景 | #F6F5F1 | 让白色产品截图仍有边界 |
| 主要文字 | #202020 | 用于标题和正文 |
| 辅助文字 | #595959 | 用于状态与次要信息 |
| 链接色 | #1747C9 | 配合下划线或明确的链接样式 |
| 正文 | 16–18px | 在手机上实际阅读后再定 |
| 内容最大宽度 | 1120px | 长正文另行限制行宽 |
| 手机左右留白 | 20px | 避免内容贴边 |
| 区块间距 | 48–80px | 保持层级，不靠空白填满页面 |
这些是设计建议，不是 Cargo 必须填写的固定单位。某些模板使用相对单位和全站缩放，应该看实际显示效果，而不是机械抄数值。
此时首页线框可以很简单：
Kevin 产品 / 关于 / 联系
我设计并开发让日常工作更顺手的小产品。
这里记录三个项目的想法、实现过程和当前进展。
精选产品
[页签笔记封面] [颜色尺封面]
页签笔记 / 交互原型 颜色尺 / 本地演示
[截图框封面]
截图框 / 设计概念
有合适的项目，欢迎聊聊。 邮件联系
四、在 Cargo 中搭出第一版页面
1. 选模板时先看结构
登录 Cargo，从模板开始建立站点。对照上面的线框，优先找能直接展示图文列表、导航和案例详情的模板。
先用一张真实产品截图替换模板图片，检查比例与文字是否协调。模板里的大图看起来漂亮，不代表换成自己的长截图后仍然合适。
Cargo 当前支持私下试用；让网站公开访问需要相应订阅。费用和权益以实际订阅页面为准，不把试用预览当成已经公开的网站。Cargo：Rates & Services
2. 新建首页和案例页
在 Pages 菜单中创建 Home、About、Contact 和三个产品案例页，并用一个 Set 管理产品案例。右键 Home，选择 Set as Homepage，按需要同时用于桌面和手机。Cargo：Pages and Sets
建议先完成“页签笔记”这一张案例页，再复制它作为其他案例的起点。复制后要同步替换标题、状态、图片、正文和链接，避免只改封面。
提示词 3：为一张案例页生成可直接使用的文案
请根据 products.md 中“页签笔记”的真实材料，撰写 Cargo 案例页文案。
按以下顺序输出：
- 页面标题。
- 一句话说明。
- 状态、本人职责、项目类型。
- 为什么做：具体问题。
- 如何解决：不超过三个设计决策。
- 展示材料：每张已有截图应放在哪一段，并给出图注。
- 当前结果与尚未验证的问题。
- 下一步计划。
要求：
- 总正文控制在 600 字以内。
- 不把设计设想写成已实现功能。
- 没有数据就描述可观察的交付结果。
- 输出普通文案，方便逐段粘贴进 Cargo，不输出 Markdown 表格。
示例片段：
为什么做
阅读资料时，摘录常常分散在书签、文档和聊天记录里。
我希望把摘录按主题整理，并在回看时保留来源线索。
设计决策一：先按主题浏览，再打开单条摘录
首页突出主题列表，把查找入口放在记录列表之前。
当前结果
交互原型已串起摘录、分类和回看三个步骤。
目前还没有长期使用数据，不能判断它是否提高了真实工作效率。
把文案逐段放进页面，使用明确的标题层级，再插入对应截图。产品名称作为主要标题，问题、方案、结果使用下一级标题。检查模板是否已经展示了主标题，避免自己再加一遍。
3. 用 Thumbnail Index 自动组织产品入口
首页可以用 Cargo 的 Thumbnail Index 展示案例：在 Add... 中插入索引，在其设置中按产品 Set 过滤；再到每张案例页的 Settings 中设置 Thumbnail。索引可以显示页面标题及标签。Cargo：Thumbnail Index
本案例建议索引只收录三张产品页，不把 About、Contact 一起混进产品列表。
如果截图在列表里被裁切，先调整封面构图或索引布局。不要直接用全站 CSS 把所有图片拉到同样高度，否则案例页里的流程图和长截图也可能受影响。
4. 配置导航与按钮
首页、案例页和联系页之间，尽量使用 Cargo 的页面链接选择器建立内部链接；产品演示地址才使用外部链接。复制页面之后，重新点一次每个入口，确认没有指向原来的案例。
第一版可以把联系入口做成邮件链接；需要更稳定地收集联系请求时，再配置表单并实际提交验证。只有按钮外观，没有可工作的链接或收件流程，不算完成联系功能。
五、让 Codex 编写局部 HTML/CSS，并放到正确位置
当原生文字和布局已经能表达内容，再补充一小块定制介绍区域。这样既方便维护，也容易定位样式问题。
本节用一个自定义介绍块，演示从提示词到 Cargo 操作的完整过程。
提示词 4：生成范围明确的代码片段
请给 Cargo 首页写一个独立的介绍区块。
文案：
姓名：Kevin
标题：我设计并开发让日常工作更顺手的小产品。
说明：这里记录我的产品想法、实现过程与当前进展。
联系邮箱：hello@example.com，标注为需要替换的示例地址。
技术要求：
- 分别输出页面 HTML 片段和全站 CSS 片段。
- 所有自定义类名使用 pf- 前缀。
- 不输出 html、head、body 标签，不引入框架、外部字体或 JavaScript。
- 标题使用 h2，页面的主 H1 由我在 Cargo 中确认。
- CSS 不覆盖 Cargo 的全局 a、img、h1 或 body。
- 支持窄屏、长标题和键盘焦点。
- 说明每份代码粘贴到哪里，以及如何撤销。
可使用的 HTML 如下。先把示例姓名、文案和邮箱替换为自己的内容：
<section class="pf-intro" aria-labelledby="pf-intro-heading">
<p class="pf-eyebrow">Kevin / Independent Maker</p>
<h2 class="pf-heading" id="pf-intro-heading">
我设计并开发让日常工作更顺手的小产品。
</h2>
<p class="pf-description">
这里记录我的产品想法、实现过程与当前进展。
</p>
<a class="pf-contact" href="mailto:hello@example.com">
邮件联系
</a>
</section>
对应的 CSS：
.pf-intro {
--pf-text: #202020;
--pf-muted: #595959;
--pf-accent: #1747c9;
box-sizing: border-box;
width: 100%;
max-width: 70rem;
margin-inline: auto;
padding: clamp(2rem, 6vw, 5rem) 0;
color: var(--pf-text);
}
.pf-intro .pf-eyebrow {
margin: 0 0 1.25rem;
color: var(--pf-muted);
font-size: 0.875rem;
line-height: 1.5;
}
.pf-intro .pf-heading {
max-width: 18em;
margin: 0;
font-size: clamp(2rem, 4.5vw, 4rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
overflow-wrap: anywhere;
}
.pf-intro .pf-description {
max-width: 38em;
margin: 1.5rem 0;
color: var(--pf-muted);
font-size: 1rem;
line-height: 1.75;
}
.pf-intro .pf-contact {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--pf-accent);
font-size: 1rem;
line-height: 1.5;
text-decoration: underline;
text-underline-offset: 0.2em;
overflow-wrap: anywhere;
}
.pf-intro .pf-contact:hover {
text-decoration-thickness: 0.12em;
}
.pf-intro .pf-contact:focus-visible {
outline: 2px solid var(--pf-accent);
outline-offset: 4px;
}
@media (max-width: 40rem) {
.pf-intro {
padding-block: 2rem;
}
.pf-intro .pf-heading {
font-size: 2rem;
}
}
这里没有增加背景和外侧横向留白，避免与 Cargo 页面设置叠加。先在 Cargo 中设置页面背景与左右边距，再观察介绍块。CSS 中的 rem 也会受页面根字号影响，实际大小需要在模板里确认。
实际操作顺序
- 先复制保存当前页面内容和已有 CSS，给本次修改留一个可恢复版本。
- 打开首页的
Code View，在需要的位置加入 HTML 片段，保留原有内容，点击Update检查。 - 进入
Site Settings → CSS/HTML的 CSS 编辑入口，追加 CSS 片段。 - 检查桌面、手机，以及其他案例页是否受到影响。
- 如果不采用这版效果，删除新增的
.pf-intro区块及对应 CSS 即可。
页面 Code View 用来编辑该页内容，全站 HTML 入口用于站点级自定义代码；不要把介绍区块放进全站 HTML，让它出现在错误的位置。Cargo 对 Code View 的变更需要应用后再看效果。Cargo：CSS、HTML 与 Code View
这份片段按标准 HTML/CSS 编写，仍需在你选用的 Cargo 模板里验证。若编辑器处理了标签或模板样式覆盖了字号，先检查实际生成的页面结构，不要连续追加 !important 试错。
六、第二轮提示词：根据截图修改，而不是重新生成整个网站
第一版出来后，最有价值的上下文通常是：页面截图、实际宽度、相关代码，以及明确的问题。
例如你发现手机标题占了七行，产品列表太挤，导航与正文重叠。不要只说“手机不太好看”。
提示词 5：让 Codex 做一次有边界的视觉修正
把实际截图附在对话中，再发送：
这是 Cargo 首页的两张截图：桌面宽度 1440px，手机宽度 390px。
同时附上当前介绍区 HTML 和 CSS。
我发现：
1. 手机标题占了七行，想控制在三到四行左右。
2. 产品卡片在手机仍然显示两列，文字过窄。
3. 导航遮住了第一页开头。
请先分别判断这三个问题更可能属于：
- Cargo 原生布局配置；
- 自定义 pf- 样式；
- 需要更多页面结构信息才能确定。
然后逐项给出最小修改方案：
- 需要点击的设置；
- 需要替换的 CSS（如有）；
- 修改后要检查什么。
不要重写整页，不要根据截图猜测 Cargo 内部类名。
标题行数是目标，不要用固定高度裁掉文字。
这一轮合理的处理顺序是：先检查手机页面宽度和留白，再看标题字号；产品索引列数优先在 Cargo 手机预览里调整；导航遮挡则检查模板是否使用了固定定位或 Pinned 页面，确认后再处理占位。
Cargo 的 Mobile Preview 可以单独调整文字、Columns、Galleries 和 Thumbnail Index。索引在桌面设为两列后，仍要进入手机预览检查对应设置，不能只依赖浏览器缩窄后的外观。Cargo：Mobile
修改后按手机竖屏、横屏和真实设备各看一遍。浏览器中的窄窗口检查与手机端访问可以互相补充。
一个不理想的提示词，怎样改写
| 原提示词 | 更有效的写法 |
|---|---|
| 帮我做一个高级作品集 | 给出访客、内容、风格、页面顺序和第一版范围 |
| 把网站做得像这个参考站 | 指明借鉴留白与字号比例，使用自己的图片与文案 |
| 手机显示有问题，修一下 | 提供截图、宽度、目标效果和相关代码 |
| 给我一个能导入 Cargo 的网站 | 要求原生组件配置方案，以及分别放入页面和 CSS 编辑器的片段 |
| 产品简介写得厉害一点 | 根据已实现功能改写，缺失数据标注待补充 |
七、发布之前，再用一轮提示词检查内容和路径
提示词 6：生成针对这个站点的验收清单
请根据 drafts/site-plan.md、最终页面文案和我提供的页面截图，
检查这份产品集是否达到第一版发布要求。
请按“已确认 / 有问题 / 待实际操作验证”输出。
重点检查：
- 首页是否能说明我是谁、做什么、如何继续浏览。
- 三张产品卡片的名称、状态、封面是否一致。
- 是否存在编造的业绩、尚未上线却标成可体验的内容。
- 案例是否写清本人职责、过程、结果与限制。
- 手机标题、图片和导航是否便于阅读。
- 按钮文字是否明确。
链接可达性、表单收件、页面源代码和公开访问权限，
只有实际检查过才能标成已确认；仅凭截图请列为待验证。
请将结果保存到 drafts/release-checklist.md。
你还需要实际完成这些操作：
- 从首页进入每张案例页，再返回首页，确认导航形成完整路径。
- 点开所有外部地址；没有演示的产品只保留案例入口。
- 替换示例邮箱，测试邮件链接；使用表单时完成一次真实收件验证。
- 用键盘 Tab 访问导航和联系链接，观察焦点是否可见。
- 检查图片信息是否完整、截图文字是否可读，并为有信息价值的图片填写替代文本。
- 在不同页面确认标题层级，避免模板标题和自定义标题形成重复主标题。
配置网站标题、描述和分享图
在 Cargo 的 Publish Settings 中配置 Site Title、Site Description 和 Site Preview Image。Cargo：Social Sharing & SEO
例如：
Site Title：Kevin 的产品与设计作品集
Site Description：记录 Kevin 的独立产品、交互原型与设计过程，查看项目背景、实现思路和当前进展。
Site Preview Image：包含姓名与代表产品画面的分享图。
页面缩略图也会参与链接分享预览。发布后应实际分享首页和案例页链接，核对标题、摘要与图片；不同平台可能缓存旧预览，更新不会总是立即显示。
保持案例正文清晰、链接可访问，也要检查发布 HTML 中的标题、描述与 canonical。平台自动生成的部分如有问题，应按其支持方式处理，不要为了补标签在页面正文里随意塞入第二套元信息。元信息完善也不代表搜索引擎已经收录。
八、发布站点与连接自己的域名
Cargo 会保存草稿，只有在 Publish Settings 中执行 Publish Changes 才会把变更应用到线上。公开访问还取决于订阅及站点的访问权限；先检查这些设置，再用退出登录的窗口打开网站。Cargo：Editing & Publishing
建议先用 Cargo 提供的站点地址验证，再连接自定义域名。
如果域名购买于其他服务商，Cargo 文档给出的入口是 Publish Settings → Add a Domain → Use an existing Domain，随后按官方流程配置 DNS。根域名与子域名的接法不同，使用当前文档和账号界面的实际记录，不要照抄一篇旧教程中的 IP 地址。Cargo：Domains purchased elsewhere
域名原来已经承载邮箱或其他服务时，改动前保存 DNS 记录，确认 MX、TXT、CNAME 等记录的去向，避免作品集上线却影响原有服务。
完成后检查三个访问结果：Cargo 站点地址、自定义域名、一个案例页的直接链接。确认 HTTPS、图片与页面跳转正常，再把正式地址放进简历和个人介绍。
九、以后新增一个产品，怎样继续与 Codex 协作
第一版做好之后，后续维护不需要从头设计。保留内容来源、设计参数和自定义代码，只新增有真实材料的案例。
可以用下面的提示词继续：
我要在现有 Cargo 产品集中新增一个项目，材料在 products.md。
请沿用 drafts/site-plan.md 的结构和现有文案风格。
请输出：
1. 首页卡片标题、简介与项目状态。
2. 案例页正文与截图顺序。
3. 缺失信息清单。
4. 需要在 Cargo 中更新的页面、缩略图和链接。
不要更改全站配色或重写其他案例。
没有公开地址时，不生成演示按钮。
把任务拆成内容、布局、局部代码、截图反馈和发布核对，每轮都有具体输入与可检查的输出，Codex 才更容易持续改进同一个站点。产品集也会随着真实项目积累，逐渐形成自己的表达方式。