Codex × 网站瀑布流布局设计 Skill

网站瀑布流布局设计 Skill不在 Codex 的前十推荐里——Codex更擅长本地文件、数据、代码和正式交付物，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

Codex 适合在网站仓库里把瀑布流判断落实到内容数据、组件、CSS 与检查报告。它可以读取真实素材和项目规则，先生成代表样本与文件级计划；在获得修改授权后调整组件，运行构建和测试，并把代码差异、分页与页面检查结果整理成可审阅产物。

瀑布流问题往往同时落在素材比例、数据顺序、DOM、样式和构建产物上。Codex 可以先读取项目文件与真实数据，找出异常宽高比、缺失字段、链接和分页需求，再把修改限制在获准文件中。成品既包括代码差异，也包括代表状态、失败项和仍需人工确认的页面。

1. 01

   判断 Masonry 是否适合当前内容

   读取需求、素材数据和现有页面，说明图片比例、浏览方式与 Masonry/Grid 选择依据。

2. 02

   用真实素材确定比例、顺序和列数

   从项目数据选取横图、竖图、长图、缺图和长标题，结合现有组件确定内容顺序、列宽、间距与标题位置。

3. 03

   选择实现方式并设计响应式规则

   先给出文件级计划；获准后按现有框架修改组件与样式，保留实现选择、自然宽高比、手机列数和空间预留的真实配置。

4. 04

   检查 DOM 顺序、懒加载、分页和真实页面表现

   运行项目已有构建与测试，核对 DOM、渲染 HTML、分页、断链和文件差异；可预览时检查桌面与手机，否则列出人工复核步骤。

把技能目录复制到 Codex Skills 目录，提供项目路径、目标路由、素材数据、允许修改的组件和现有检查命令。

随机抽查代表素材，确认图片、顺序、标题、链接、懒加载和分页在每一层一致；未实际运行的检查继续标为待完成。

列数、列宽、间距、实现方式、断点与加载策略需要结合真实素材、现有框架和设备宽度确定。素材扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

请帮我把「网站瀑布流布局设计 Skill」安装到 Codex。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/skill-masonry-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 Codex 的方式安装：mkdir -p ~/.codex/skills && cp -R ./skill-masonry-layout ~/.codex/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：让 Codex 列出可用 Skill 并复述本次要执行的步骤，再跑一个只读小任务。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-masonry-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-masonry-layout.md

mkdir -p ~/.codex/skills && cp -R ./skill-masonry-layout ~/.codex/skills/