Codex × 网站内容卡片设计 Skill

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

Codex 适合在网站仓库里把内容卡片设计落实到数据结构、组件和测试。它可以读取真实 JSON、模板与样式，先定位字段进入页面的路径，再在明确文件范围内修改卡片组件，运行项目已有构建与响应式检查，最后交付可审阅的代码差异。

卡片问题经常同时落在数据与模板：空图片来自数据，按钮冲突来自组件，布局跳动又可能来自样式。Codex 可以逐层读取 schema、数据样本、模板和 CSS，确定根因后再改真源。它能把长标题、缺图、整卡链接和悬停位移写成回归断言，后续内容更新时继续检查。

1. 01

   确认卡片类型、浏览任务与主要动作

   检查路由、组件调用和点击目标，明确产品、文章或工具卡片的主要链接与现有冲突。

2. 02

   用真实样本筛选字段并确定层级

   读取数据 schema 与极端样本，区分内容缺失、映射错误和纯视觉问题，不用模板默认值伪造业务字段。

3. 03

   设计卡片结构、图片和交互状态

   在获准文件内调整语义 HTML、字段顺序、图片容器、CTA 和焦点状态，保留最小范围差异。

4. 04

   在桌面与手机宽度检查代表样稿

   运行构建、组件测试和已有浏览器检查；环境不具备视觉工具时输出页面路径与手工检查清单。

启用后提供仓库路径、目标组件、真实数据样本、设计规范和允许修改的文件范围。

至少覆盖长标题、缺图、长价格、空元数据和手机宽度，确认 DOM、链接、焦点与布局都符合规格。

使用说明：原始文件按固定版本完整保留。中文方案沿用卡片组成、类型、层级、响应式、SEO 与可访问性方法；桌面列数和图片比例只作为参考，应结合真实内容与页面宽度确定。平台适配页中的文件扫描、组件修改、批量检查和定期复查属于延伸做法，需要相应工具、项目资料与操作授权。

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

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