ZCode × 网站内容卡片设计 Skill

网站内容卡片设计 Skill不在 ZCode 的前十推荐里——ZCode更擅长长上下文、长任务、项目文件和远程跟进，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

ZCode 适合在较长任务里维护多类卡片和多个页面。它可以把页面清单、组件引用、字段样本与每轮检查记录放进同一项目，先处理一个代表页面，再按共享组件和页面特例分批推进，继续任务时从上次状态接着核对。

内容中心、产品目录和资源库可能共用基础卡片，又各自有作者、价格或格式字段。ZCode 可以先建立页面—组件—字段对应表，明确哪些规则共用，哪些只属于一个页面。每批完成后记录实际文件、代表数据和待确认问题，长任务继续时先读记录，减少重复修改和遗漏。

1. 01

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

   引用页面、组件和数据文件，按页面列出卡片类型、点击目标与共享关系。

2. 02

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

   每类卡片选正常与极端样本，建立共用字段和页面特有字段清单。

3. 03

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

   先完成一个代表页面，确认后再更新共享组件或同模板页面，并保留页面例外。

4. 04

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

   每批回看页面、文件差异和检查记录；预览工具缺失时列出待外部浏览器确认的 URL 与宽度。

在用户 Skills 目录安装后刷新启用，把页面清单、组件路径、数据文件和品牌规范加入项目，先选一个代表页面。

页面清单记录样本数据、文件差异、桌面与手机结果；没有打开或渲染过的页面保留待检查状态。

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

请帮我把「网站内容卡片设计 Skill」安装到 ZCode。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-card-layout/1.0.0/skill-card-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 ZCode 的方式安装：mkdir -p ~/.zcode/skills && cp -R ./skill-card-layout ~/.zcode/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在设置页确认技能已启用，对话中输入 $ 选择技能，再跑一个只读小任务。
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 ~/.zcode/skills && cp -R ./skill-card-layout ~/.zcode/skills/