用 Codex 做一页会呼吸的线上画册：3 张公有领域版画到桌面与手机实页

admin 设计创意 22小时前

35 0

如果让 Codex 只看一句“帮我做个高级感的展览网页”，它很容易交出一页通用卡片。我们换一种顺序：先挑真正有故事的图，再写版式限制，最后在桌面和手机上看作品有没有被好好展示。下面这套教学示例使用大都会艺术博物馆标为 Open Access / 公有领域的三张葛饰北斋版画；本站实际做了静态 HTML 页面并在 1440px 与 390px 浏览器渲染截图。Codex 在这里负责写与改代码，不负责“生成”原作图像。

纸上万象在线小展桌面首屏，左侧中文大标题，右侧为葛饰北斋神鸟版画 — 本站实际渲染的桌面首屏：先让一幅有细节的作品抓住视线，再用标题建立观看入口。

一、先备好三张有权使用的图，不急着写提示词

进入 The Met 的作品页或 API 记录，逐件确认 isPublicDomain=true，下载对应原图并保留标题、作者与对象 ID。本文选《冬日海滨村落》（37193）、《竹帘与花篮》（54303）和《迦陵频伽》（54433）；第一张横向留白，第二张细长，第三张人物与神鸟交织。素材的长宽比例不同，正好能检验网页会不会粗暴裁图。请把它们分别保存为 hokusai-seaside.jpg、hokusai-flowers.jpg、hokusai-bird.jpg。别把“公有领域”误写成“博物馆认可本站策展”。

葛饰北斋冬日海滨村落原始馆藏图，横向村落与海面 — 原作 1：葛饰北斋《冬日海滨村落》，The Met Open Access，object ID 37193。

葛饰北斋竹帘与花篮馆藏横幅原图 — 原作 2：葛饰北斋《竹帘与花篮》，The Met Open Access，object ID 54303。

葛饰北斋迦陵频伽馆藏版画原图 — 原作 3：葛饰北斋《迦陵频伽》，The Met Open Access，object ID 54433。

二、把审美选择写进 Codex 提示词

在本地建一个只含三张图的文件夹，用 Codex 打开这个项目。以下是本站独立编写的可复制提示词，不是博物馆或艺术家的原始提示词：

请在当前文件夹生成一个单页 index.html，用现有的三张本地 JPEG 制作“纸上万象”在线小展。
只使用 HTML 与 CSS，不调用图像生成器、不添加外部图片/CDN/JavaScript，不改变原作图像。
首屏：左侧中文展名与 80 字以内策展说明，右侧展示 hokusai-bird.jpg。
下方：三件作品的网格，保留各自原始长宽比例；使用 object-fit: contain，禁止强行裁成相同方图。
页面底色取暖纸色，文字用深墨绿，点缀少量赭红；不要黑底英文大标题或三栏文字卡片。
用 header、main、section、figure、figcaption、footer；每张图写描述画面内容的中文 alt。
在 1440px 桌面视口做双栏首屏、三列作品区；在 390px 手机上改为单列，作品不横向溢出，导航仍能点。
页尾标注 Katsushika Hokusai / The Metropolitan Museum of Art Open Access（CC0），并说明此页非博物馆官方策展。
完成后列出你改了什么、如何本地预览，并指出没有亲自验证的部分。

为什么写得这么细？“高级感”不是可验收条件，“不裁画、可读、可点、署名完整”才是。Codex 是代码协作者，作品选择、叙事和最终视觉判断仍由设计师负责。

三、对着三张不同尺寸的图检查，而不是只看首屏

纸上万象网页桌面作品区三张不同长宽比例的葛饰北斋版画 — 本站实际渲染的桌面作品区：横幅、细长幅和人物幅放在同一套容器中，原图完整显示。

本例作品区没有用 object-fit: cover 把画面切成统一正方形，而是让容器高度一致、图片完整呈现。你可以让 Codex 在生成后专门复查以下 CSS 逻辑：

.grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; }
.frame { height: 330px; display: flex; align-items: center; justify-content: center; }
.frame img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
}

四、手机端验收：不是把桌面截图缩小

390像素手机视口中纸上万象小展首屏标题与神鸟版画完整显示 — 本站在 390px、触控手机视口的实际渲染；标题、说明和原作纵向排列，没有横向溢出。

本地预览可在文件夹里运行 python3 -m http.server 8000，再用浏览器打开 http://localhost:8000。桌面看 1440px，手机至少看 390px；逐张确认图片有自然尺寸、没有加载失败，导航可触达，figcaption 不挡住画面主体。本站示例检查了这两个视口，但不同浏览器与字体仍应在交付前复查。