把三款产品资料交给 Codex，做一页看得明白的对比表

三款产品的资料分散在几段文字里，光记价格就容易忘了容量和重量。可以把资料交给 Codex，做成一页并排对比表。关键不是替你选“最好”，而是让已知参数和缺失信息都看得明白。

先把材料写清楚，少一点也没关系

准备电脑上的 Codex 和浏览器，新建“产品对比”文件夹。下面是完整的虚构练习资料，不对应真实商品：

轻行A：89元，500毫升，280克，保温6小时。
轻行B：129元，450毫升，重量未提供，保温时长未提供。
轻行C：99元，500毫升，310克，保温8小时。

换成真实产品时，带上参数来源及对应版本；不同容量或不同套装的价格，不要混在同一列里装作可直接比较。

复制这段话，生成本地页面

只按这三款产品资料做compare.html，双击可在浏览器打开。列是三款产品，行是价格、容量、重量、保温时长，每行标明单位。未知参数写未提供，不补0、不猜，也不擅自评最好。顶部标明这是虚构练习参数。页面样式都放一个文件里，不联网抓其他资料，窄屏能看清。

生成后找到文件并双击打开。先对照第一款：89元、500毫升、280克、6小时，看看有没有抄错单位。再看轻行B，两处未知必须还在，不能变成“轻便”或“保温更好”这类没有依据的话。

加一个需求，再看它怎么改

比如你更在意随身重量，可以继续说：“把重量行加粗，其他参数原样保留；轻行B仍写未提供。”这只是突出你关心的信息，不等于已经证明哪款更适合所有人。

表格太挤时，先缩窄窗口检查；可以让 Codex调整列宽或换成手机上的纵向卡片，但别为了排版删掉缺失项。出现新参数时，让它指出来自哪段材料；找不到来源就撤回。

本例已在 Windows/Chrome 实际打开，核对了三款产品的已知参数和两处“未提供”。资料已列在上文，下方是同款完整代码。它用于看清材料，不是购买建议，也没有替你核验真实商品宣传。

完整对比页代码

复制下面全部代码，用记事本保存为 55-compare.html，保存类型选“所有文件”，编码选 UTF-8，确认不是 .html.txt，再用浏览器打开。也可以让 Codex 将代码原样保存到工作文件夹。

55-compare.html

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>三款随行杯对比</title>
<style>
* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #f4f6f8;
    color: #203344;
    font: 17px/1.7 "Microsoft YaHei", sans-serif
}

main {
    max-width: 940px;
    margin: 40px auto;
    padding: 40px;
    background: white;
    border: 1px solid #e1e7ec;
    border-radius: 20px
}

h1 {
    font-size: 34px;
    line-height: 1.4;
    margin: 0 0 18px
}

h2 {
    font-size: 22px;
    margin: 26px 0 12px
}

p {
    margin: 12px 0
}

.muted {
    color: #5b7080
}

.hero {
    font-size: 21px
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.card {
    padding: 22px;
    background: #eef5f4;
    border-radius: 12px
}

label {
    display: block;
    margin: 18px 0 6px;
    font-weight: 600
}

input,
select,
textarea {
    font: inherit;
    padding: 12px;
    border: 1px solid #9aacbb;
    border-radius: 8px;
    max-width: 100%
}

textarea {
    width: 100%;
    min-height: 64px
}

button,
.button {
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    padding: 12px 22px;
    background: #176b5b;
    color: white;
    display: inline-block;
    text-decoration: none
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid #f2b35d;
    outline-offset: 3px
}

.result {
    padding: 22px;
    margin-top: 24px;
    background: #eef5f4;
    border-radius: 12px;
    font-size: 21px
}

.error {
    color: #a02f2f
}

.numbers {
    display: flex;
    gap: 15px;
    flex-wrap: wrap
}

.number {
    padding: 20px;
    min-width: 125px;
    text-align: center;
    background: #eef5f4;
    border-radius: 12px
}

.number strong {
    display: block;
    font-size: 36px
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px
}

th,
td {
    padding: 11px;
    border: 1px solid #d2dce4;
    text-align: left
}

th {
    background: #eaf0f5
}

code {
    background: #edf2f6;
    padding: 2px 5px;
    border-radius: 4px
}

.money {
    font-size: 29px;
    font-weight: 700;
    color: #176b5b
}

ul {
    padding-left: 22px
}

@media(max-width:650px) {
    main {
        margin: 0;
        border-radius: 0;
        padding: 26px 20px
    }

    h1 {
        font-size: 27px
    }

    .grid {
        grid-template-columns: 1fr
    }

    .number {
        min-width: 90px;
        padding: 12px
    }

    table {
        font-size: 13px
    }

    th,
    td {
        padding: 7px
    }
}
</style>
<main>
<p class="muted">以下为虚构练习参数</p>
<h1>三款随行杯，放在一起看</h1>
<p class="hero">先看你在意的容量、重量和价格，缺资料的地方先留空。</p>
<table>
<tr>
<th>项目</th>
<th>轻行 A</th>
<th>轻行 B</th>
<th>轻行 C</th>
</tr>
<tr>
<th>价格 元</th>
<td>89</td>
<td>129</td>
<td>99</td>
</tr>
<tr>
<th>容量 毫升</th>
<td>500</td>
<td>450</td>
<td>500</td>
</tr>
<tr>
<th>重量 克</th>
<td>280</td>
<td>未提供</td>
<td>310</td>
</tr>
<tr>
<th>保温时长</th>
<td>6 小时</td>
<td>未提供</td>
<td>8 小时</td>
</tr>
</table>
<h2>还要问清的两项</h2>
<p>轻行 B 的重量、保温时长未提供，暂时不能比较这两项。表中没有自动评出“最好的一款”。</p>
</main>
</html>