用 Codex 做一张真正能比较的新品规格页：触屏 MacBook Pro 实操案例

新 MacBook Pro 的公告里有亮度、带宽、芯片核数和四档价格，读者真正想做的却是「在预算内选哪台」。本文用这一份 Apple 官方数据，示范如何让 Codex 帮忙写出一张能筛选、能在手机上看、并可回到原文核对的比较页。本站确实制作并用浏览器检查了下方演示；它是原创教学样例，不是苹果购物页面，也没有真机性能实测。

步骤零：先准备有出处的图和字段

输入素材至少有：官方产品图、发布时间、地区与币种、规格原文、四档起步配置。这里统一采用 Apple 10 月 28 日公布的中国大陆普通零售起价；不要从美元价格换算，也不要把可选的高配带宽误写成基础款。官方图用于新闻介绍和教学说明，保留 Apple 来源，不移除水印或修改产品外观。

步骤一：把事实做成「只读数据表」

把型号、CPU/GPU、起步内存、内存带宽、国行起价分成独立列。注意 14 英寸 M5 Pro 基础版是 15/16 核，而 16 英寸 M5 Pro 是 18/20 核，不能只写「尺寸不同」。把数据贴给 Codex 时要求「未知字段留空或写官方未公布」，再人工逐格对照 Apple 技术规格与新闻稿。本站演示页面源文件可按文末提示词复现；它没有读取购买页的实时库存或折扣。

步骤二：让 Codex 生成真正能用的界面

下面是本站独立编写、可直接复制的提示词。它明确数据边界、视觉目标、可访问性和验收动作；把产品名与数据替换后，也可用于相机、显示器和软件套餐比较。使用 Codex 的目的是生成与修改代码，不是让它凭空「看懂」价格。

你是前端搭档。请在空目录生成一个单文件、无需构建的中文响应式机型对照页。只使用我给的官方数据，不要补造续航、性能或促销价；每个价格旁写明中国大陆人民币起价和日期。首屏用有授权/可合理引用的官方产品图；主体是可扫描的表格，不做四张重复的参数卡片。提供「全部、M5 Pro、M5 Max」筛选，选中行要高亮；筛选按钮要有 aria-pressed，表格行可用键盘选择。手机端允许表格区域横向滚动，但整页不得溢出。给出一个显眼的 Apple 技术规格原文链接，并在结尾写「非真机测评」。请创建 HTML、CSS、JS，运行浏览器检查桌面 1440px 和手机 390px 的截图，确认筛选和图片加载；报告失败项，不要宣称做过未执行的测试。

核对后的数据（Apple 中国新闻稿/技术规格，2026-10-28）：
14 英寸 M5 Pro：15 核 CPU、16 核 GPU、24GB 起步内存、307GB/s、人民币 22,999 元起。
16 英寸 M5 Pro：18 核 CPU、20 核 GPU、24GB 起步内存、307GB/s、人民币 27,999 元起。
14 英寸 M5 Max：18 核 CPU、32 核 GPU、36GB 起步内存、460GB/s、人民币 36,999 元起。
16 英寸 M5 Max：18 核 CPU、32 核 GPU、36GB 起步内存、460GB/s、人民币 38,999 元起。

步骤三：一个交互就要有可见反馈

先做最小交互：切换 M5 Pro / M5 Max 时，只隐藏不相关的行，按钮状态同步 aria-pressed。行被点选或用 Enter/空格选择后高亮，方便在两档价格之间回看。浏览器检查需要验证「Max=两行」「Pro=两行」「全部=四行」，不能只看默认截图。

步骤四：手机端检验「能读」，不是把桌面缩小

把表格放进独立横向滚动容器，不要让整页出现横向滚动。首屏先放产品和一句购买问题，接着出现筛选按钮；金额与规格留在同行，读者才能比较。本站以 1440px 桌面和 390px 手机视口截图，确认手机页宽=视口宽、产品图正常加载；这不等于覆盖所有设备。

步骤五：检查真实用途和遗漏的边界

面向摄影、平面设计，先问屏幕、内存和预算；面对复杂视频或三维工程，再评估 GPU 与带宽。带宽不是「所有任务都更快」的证明。演示只列起步配置，不包含选配价格、库存、交付时间或实际跑分；正式购买前回到 Apple 当地购买页核对。下面的第二段提示词用来请 Codex 做问题清单，但所有事实仍由编辑签字。

请只检查现有对照页，不添加新产品规格。按证据优先级审核：1. Apple 官方原文与字段映射；2. 价格地区和币种；3. 筛选后显示行数与键盘操作；4. 桌面/手机布局与图片真实加载；5. 失效链接、空 alt、横向溢出。每个问题给出文件位置、复现步骤和最小修改。若官方资料没有该字段，界面显示「官方未公布」，不要猜测。

常见失败、成本与本站判断

失败一：模型混写不同地区价格，修正时给每个数据项附地区和来源。失败二：做出漂亮四卡片却难比较，改成同列对齐的表。失败三：手机页面整体溢出，改为仅表格容器滚动并截图复测。失败四：把官方产品图改成「看似真机」的生成图，容易误导，应保留原图并明确来源。Codex 所需订阅或额度以使用时官方页面为准；单文件演示本身不需要额外付费库。我们的判断是：把代理用在界面实现和回归检查上，把价格、版权和购买建议牢牢留在人手里。

本文由「设计创意1984」整理编辑，转载请注明出处。

关注设计创意1984，持续获取设计趋势、AI创作方法与创意灵感。

via：via Apple 中国：触屏 MacBook Pro 新闻稿、价格及产品图片、via Apple：PROLED XDR MacBook Pro 官方技术规格、via OpenAI Docs：Codex 与代码生成说明、via OpenAI Docs：前端界面任务与浏览器验收建议