Claude Code × 网站列表布局设计 Skill

网站列表布局设计 Skill可以作为独立任务在 Claude Code 中使用。具体适配方式、资料交接和需要人工确认的环节见下方说明。

Claude Code 适合在长期维护的网站项目里统一 List 组件、设计令牌、数据类型和项目规则。它可以读取 CLAUDE.md 与组件引用关系，找出哪些页面共享标题、摘要和元数据层级，哪些页面需要保留字段特例，再用项目已有 Hooks 或测试核对变更。

博客、文档和搜索结果常共享一套 List 基础，却使用不同字段和链接范围。Claude Code 可以先画出组件引用关系，把稳定的标题层级、间距、可点击范围和分页检查写进共享层；页面特例继续留在各自配置中。长期维护时，新页面沿用同一套项目规则。

1. 01

   判断 List 是否适合当前内容

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

2. 02

   用真实条目确定字段与信息层级

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

3. 03

   设计列表密度、链接区域和响应式规则

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

4. 04

   检查分页、构建内容和真实页面表现

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

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

抽查博客、文档和搜索结果，确认共享标题层级与间距可用，同时页面特有字段和链接范围仍正确表达。

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

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

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