Claude Code × 网站内容卡片设计 Skill

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

Claude Code 适合在已有项目规范下维护共享卡片组件。它可以先读取 CLAUDE.md、设计令牌、数据类型和现有测试，再按项目约定调整字段顺序、语义结构与样式；团队还能把稳定的卡片规则写回项目说明，让后续页面沿用同一标准。

多人维护的网站最容易出现同名组件各自生长。Claude Code 可以从项目说明和组件引用关系入手，辨认共享卡片、页面特例与数据类型，然后在现有规则内改动。项目已有 hooks 或测试命令时，它可以在修改后调用；外部文档和预览能力仍取决于当前配置。

1. 01

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

   读取项目规则、组件 API 和页面引用，记录共享卡片与页面特例的点击目标。

2. 02

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

   检查类型定义与 fixture，列出必填、选填和缺省显示，避免把页面特例写进所有卡片。

3. 03

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

   依据设计令牌和代码约定修改获准组件，保持语义、命名与样式组织符合现有项目。

4. 04

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

   运行项目配置的检查命令；需要真实浏览器或外部视觉工具时，按现有 MCP、hook 或人工流程完成。

把 Skill 安装到项目可识别目录，提供组件路径、类型文件、设计令牌、样本数据和现有测试命令。

选择正常、字段缺失和长标题 fixture，确认共享规则生效，同时页面特例仍能覆盖。

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

请帮我把「网站内容卡片设计 Skill」安装到 Claude Code。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-card-layout/1.0.0/skill-card-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 Claude Code 的方式安装：mkdir -p ~/.claude/skills && cp -R ./skill-card-layout ~/.claude/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在项目里提一个只读任务并点名 Skill，确认它按 SKILL.md 的步骤复述计划。
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 ~/.claude/skills && cp -R ./skill-card-layout ~/.claude/skills/