Claude Code × 网站顶部公告栏设计 Skill

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

Claude Code 适合让顶部公告栏长期沿用项目规则。团队可以把品牌语气、优惠字段和组件约定写进项目说明，用 Skill 处理每次活动的消息与展示条件，再通过 Hooks 或现有检查脚本核对日期、链接和构建输出。

频繁活动容易让不同成员各写一套公告格式。Claude Code 可以把稳定的品牌语气、字段和修改范围保存在项目规则中，把本次优惠、日期和人群交给 Skill；内容、实现与复核任务可以分开推进，最后回到同一仓库。

1. 01

   确认公告目标与主要信息

   读取项目规则、活动资料、现有组件和页面目录，区分长期沿用的品牌要求与本次活动信息。

2. 02

   收紧消息、CTA 与优惠条件

   根据项目语气生成候选文案，逐项引用已确认的金额、门槛、日期、目标 URL 和 CTA。

3. 03

   确定位置、人群与关闭规则

   检查组件、配置和已接入的数据源，写清位置、固定状态、人群字段、关闭记录与过期逻辑。

4. 04

   设计手机端并检查真实页面

   在授权后更新文件，用 Hooks 或项目脚本检查日期与链接，构建后再核对代表页面的手机和桌面状态。

把 Skill 放入个人或项目 Skills 目录，提供 CLAUDE.md、活动资料、公告组件、品牌样式和构建命令。

把日期、空链接和构建检查接入现有 Hooks 或命令；真实分组状态与视觉仍需在可用页面中抽查。

顶部公告栏适合承载一条短消息和一个主要行动，优惠、日期、适用人群与目标链接需要来自已经确认的资料。分组展示取决于网站现有数据和组件能力；上线后再根据真实页面与流量数据观察点击、关闭、注册或销售表现，并按活动结束时间及时下线旧消息。

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

mkdir -p ~/.claude/skills && cp -R ./skill-top-banner ~/.claude/skills/