Claude Code × 网站网格布局设计 Skill

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

Claude Code 适合在长期维护的网站项目里统一 Grid 组件、设计令牌、数据类型和项目规则。它可以读取 CLAUDE.md 与组件引用关系，找出哪些页面共享列宽、间距和图片容器，哪些页面需要保留特例，再用项目已有 Hooks 或测试核对变更。

产品、模板和文章目录常共享一套 Grid，却使用不同字段与图片比例。Claude Code 可以先画出组件引用关系，把稳定的列宽、gap、图片空间和分页检查写进共享层；页面特例继续留在各自配置中。长期维护时，新页面沿用同一套项目规则。

1. 01

   判断 Grid 是否适合当前内容

   读取项目说明、页面清单和组件引用，按内容层级与浏览方式记录 Grid/List 选择及页面例外。

2. 02

   用真实样本确定网格项尺寸与间距

   比较各目录的数据类型、最长标题、图片比例与缺图状态，提取共享约束和页面特有字段。

3. 03

   设计响应式列数和组件规则

   把稳定规则落到共享组件、设计令牌或类型约束；断点和页面例外保留在真实项目配置中。

4. 04

   检查图片空间、分页和真实页面表现

   运行项目已有 Hooks、测试或构建，核对图片尺寸、分页链接和受影响页面；视觉结果仍需在可用预览中确认。

把 Skill 放入项目技能目录，同时提供 CLAUDE.md、Grid 组件、设计令牌、数据类型、页面清单和测试命令。

抽查产品、模板和文章目录，确认共享列宽与间距可用，同时页面特有图片比例和字段仍正确表达。

列数、断点、间距、最小列宽和图片比例需要结合真实内容、设备宽度与现有设计系统确定。文件扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

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

mkdir -p ~/.claude/skills && cp -R ./skill-grid-layout ~/.claude/skills/