VibeMKT Hub

Claude Code × 内容与创意 · 可处理 6/7 个环节

Claude Code × 网站 Favicon 制作 Skill

网站 Favicon 制作 Skill有 7 个执行步骤，Claude Code 可以处理 6 步，其中 2 步需要相应工具与配置。它能在敏感写入前请求确认，正好对应这个 Skill 里最吃工具的一段。需要提前知道的是：产物区审阅这 1 项它不做，涉及的 1 个步骤要按下面的手工方式衔接。

  • 7个核心环节
  • 6/7当前可处理的环节
  • 未进前十在本 Agent 的推荐清单

WHY CLAUDE CODE

适配结论

Claude Code 适合把网站图标维护规则长期留在项目里：项目上下文记录品牌源图与命名

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

Claude Code 适合把网站图标维护规则长期留在项目里：项目上下文记录品牌源图与命名，子任务分别检查图像尺寸、框架接入、PWA manifest 和抓取，Git 与 Hooks 阻止旧路径或缺失文件再次进入。MCP 只连接获批工具，最终视觉和外部发布由人工批准。

操作前确认

在敏感写入前请求确认。这是 Claude Code 在 7 个 Agent 里相对少见的能力。

CAPABILITY × STEP

核心差异

项目上下文与多任务维护图标规则

网站 Favicon 制作 Skill 共 7 个环节。Claude Code 可以处理 6 个环节，其中 2 个需要相应工具与配置；另外 1 个需要团队补充。实际结果取决于输入资料、已接入工具与运行环境。

7个核心环节
6当前可处理的环节
2个需要工具与配置
1个需要团队补充
Claude Code 跑 网站 Favicon 制作 Skill 的逐步对照 · 每步要做什么见 网站 Favicon 制作 Skill原生页面
步骤所需能力等级在 Claude Code 下具体怎么做
01 确认网站环境 写本地文件页面预览操作前确认 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
02 盘点品牌图形 读本地资料 直接执行 直接交给 Claude Code：它能直接读取本机目录里的资料。
03 规划尺寸与格式 版本管理 直接执行 直接交给 Claude Code：它能把过程文件纳入版本管理便于回溯。
04 生成网站图标 操作前确认 直接执行 直接交给 Claude Code：它能在敏感写入前请求确认。
05 接入页面与框架 页面预览 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
06 补齐 PWA manifest 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
07 完成搜索与多端验收 联网检索打开网页取正文产物区审阅操作前确认 不支持 改成手工：在对话流里分段核对结果。（没有独立产物区，成果以项目文件形式落地）

共同规则写入项目说明和 sizes 配置，图像、前端、PWA 与 SEO 子任务各自产出差异，主任务在 PR 中合并。优势是后续品牌更新可以沿用同一命名和验收。验收标准是源图版本明确，所有声明指向现有文件，检查任务能发现旧引用。

  1. 01

    确认技术栈、PWA 与现有图标

    从项目文件读取框架、图标目录、HTML、manifest 与 robots，多任务分别列出旧文件和引用。

  2. 02

    简化品牌图形并规划尺寸格式

    主任务固定品牌确认的源图与尺寸配置，子任务检查像素、背景和格式覆盖。

  3. 03

    生成图标文件与接入配置

    项目已配置图像工具时，由图像子任务按尺寸配置导出文件；未配置时，列出待设计团队导出的文件清单。前端子任务负责接入，主任务汇总差异与检查结果。

  4. 04

    检查搜索抓取和跨设备显示

    SEO 与测试任务检查主页声明、抓取、manifest 和构建产物，视觉场景保留人工验收。

IMPORT · RUN

资料导入与任务下发

把 Skill、源图规则和尺寸配置纳入项目

Claude Code可以直接读取目录里的资料，把这些文件放在同一个位置即可。

需要准备的资料

  • 网站技术栈、主页地址、部署目录和 PWA 使用情况
  • Logo、品牌图形或已有图标源文件，优先提供 SVG 或高分辨率方形图片
  • 品牌颜色、明暗背景要求和允许简化的图形元素
  • 现有 favicon、HTML head、框架图标目录、manifest 与 robots.txt

在 Claude Code 里是这样推进的

把品牌规范、项目背景和现有文件放在同一个项目目录，Claude Code 会结合项目内容调用相应 Skill。

让它先列出任务步骤，再读取文件、调用终端或 MCP 工具完成研究和制作；复杂任务可以分给多个子任务。

团队 Skill 放 .claude/skills/，源图位置、文件名和尺寸矩阵写入项目说明，生成文件进入受控目录。

MANUAL HANDOFF

需要团队补充的步骤

产物区审阅需要手工补

有 1 项能力需要你在 Claude Code 之外完成，下面写清了各自影响哪一步、怎么补。

  • 产物区审阅

    影响：第 7 步 完成搜索与多端验收

    原因：没有独立产物区，成果以项目文件形式落地

    做法：在对话流里分段核对结果

COLLABORATE · CHAIN

协作与后续衔接

用 PR 汇总图像、前端和 SEO 评审

每类改动显示来源、目标文件和验收证据。外部设计系统通过获批 MCP 读取，写入与发布保留批准。

共享尺寸配置约束所有子任务

源图和 sizes 配置先冻结。项目已配置图像工具时，由图像任务生成文件；未配置时，由设计团队交付所需文件。前端任务负责接入，测试任务负责验证，主任务拒绝配置外的临时文件名。

COMBINATION CASE

场景化实战案例

示例：团队持续维护营销站图标

假设一个团队有主站和文档站，品牌更新后容易遗漏其中一个 hostname。

  1. 建立源图与尺寸配置
  2. 多任务扫描两个站点
  3. 生成分站点改动
  4. 加入引用检查
  5. 在 PR 中汇总验收

预期结果：交付物应形成可版本化的图标规则、站点差异和检查机制；最终视觉由品牌负责人批准。

VERIFY · TROUBLESHOOT

效果验证方法

完成样本后新开会话，检查源图、五种尺寸、主页声明、manifest 和抓取规则能否稳定复现

完成样本后新开会话，检查源图、五种尺寸、主页声明、manifest 和抓取规则能否稳定复现。

可直接使用的第一个任务

请在 Claude Code 中使用「网站 Favicon 制作 Skill」。本次要完成：搜索结果或浏览器标签仍显示默认图标，需要补齐网站 Favicon 与首页声明。我会提供网站技术栈、主页地址、部署目录和 PWA 使用情况和Logo、品牌图形或已有图标源文件，优先提供 SVG 或高分辨率方形图片。请先完成一份小样，交付尺寸与格式清单：16、32、180、192、512 像素及 SVG、PNG、ICO 用途和网站图标文件方案：浏览器、Apple Touch Icon、Android 与 PWA 对应文件，并列出需要我确认的金额、日期、适用人群和目标链接。注意：产物区审阅这部分你做不到，遇到时直接告诉我，我手工补。

安装后的最小验证任务

安装完成后，先只做第 2 步：让 Claude Code 盘点品牌图形，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

Claude Code 常见问题

  • 没有调用 Skill 时，在任务里直接写出 Skill 名称
  • 没有取到 MCP 数据时，检查连接和授权状态
  • 项目资料太多时，指出本次优先参考的文件
  • 第 7 步 完成搜索与多端验收停住时，不用反复换提示词——没有独立产物区，成果以项目文件形式落地，按上面的手工方式补这一步即可
  • 页面预览相关步骤结果不稳定时，先确认当前环境是否满足条件
Claude Code 跑网站 Favicon 制作 Skill需要改哪几步？

7 个环节里有 6 个可以处理，其中 2 个需要相应工具与配置，1 个需要团队补充。请结合逐步说明确认实际做法。

资料要怎么交给 Claude Code？

Claude Code可以直接读取目录里的资料，把这些文件放在同一个位置即可。

装完先做什么验证？

安装完成后，先只做第 2 步：让 Claude Code 盘点品牌图形，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

什么任务更适合选 Claude Code？

因为它能在敏感写入前请求确认，在 7 个 Agent 里具备这些能力的不多。如果你的卡点不在这里，页面下方列出了更合适的选择。

Claude Code 常见的失败情况有哪些？

没有调用 Skill 时，在任务里直接写出 Skill 名称；没有取到 MCP 数据时，检查连接和授权状态；项目资料太多时，指出本次优先参考的文件。

用 Hooks 检查旧路径和缺失文件

对 HTML、元数据与 manifest 的图标引用检查目标文件，发现旧路径或缺失尺寸时阻止合并并给出位置。

INSTALL

安装到 Claude Code

把网站 Favicon 制作 Skill装进 Claude Code，一条命令完成

团队 Skill 放 .claude/skills/，源图位置、文件名和尺寸矩阵写入项目说明，生成文件进入受控目录。

METHOD 01 · 交给 AI 自己装

复制提示词

适合大多数情况。Agent 会下载 ZIP、解压、放到正确目录，并在缺少权限时告诉你需要手工做哪一步。

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

OTHER AGENTS

跨 Agent 适配对比

Codex、WorkBuddy、TRAE在这个 Skill 上覆盖更多环节

下面的步数来自逐步比对。卡在哪一步，就看哪个 AI 能直接完成那一步。

5/7 步可直接执行

Codex 网站 Favicon 制作

Codex在这个 Skill 上直接覆盖 5/7 步，而且能在独立产物区里逐份审阅和修改交付物——如果你这次的卡点正是产物区审阅，换它更省事。

4/7 步可直接执行

WorkBuddy 网站 Favicon 制作

WorkBuddy在这个 Skill 上直接覆盖 4/7 步，而且能在独立产物区里逐份审阅和修改交付物——如果你这次的卡点正是产物区审阅，换它更省事。

4/7 步可直接执行

TRAE 网站 Favicon 制作

TRAE在这个 Skill 上直接覆盖 4/7 步，而且能把成果渲染成可直接查看的页面——如果你这次的卡点正是页面预览，换它更省事。

FURTHER READING

Claude Code 与网站 Favicon 制作相关的实操文章

围绕 Claude Code 和这个任务的共同标签挑出来的，换成别的 Agent 看到的不是同一批。

官网菜单越改越简，定价和文档为什么更难找

假设一家 SaaS 公司把官网从六个一级栏目收成“产品、解决方案、资源”三个下拉菜单。价格页和文档页仍在，只是从页头可见入口移到了第二层。改版后如果销售频繁收到“有没有公开价格”“API 文档在哪里”

  • SEO
  • 内容策略
  • 产品营销
  • 信息架构

免费工具访问量很高，为什么销售还是收不到好线索

假设一家 SaaS 公司上线了 ROI 计算器。三个月后，工具页的自然流量和使用次数都在涨，市场团队把它当作新的获客入口，销售却说收到的邮箱很难跟进：有人只想算一道题，有人来自目标行业之外，还有人留下

  • SEO
  • B2B获客
  • 增长策略
  • 营销分析

竞品对比页写满功能，买家为什么还是不信

买家搜索“A 对比 B”时，通常已经知道品类，也看过其他产品。他打开供应商的对比页，看到自家产品每一行都是绿色勾，竞品则处处受限；再打开竞品的网站，结论正好反过来。两张页面都写了很多功能，却没有帮助他

  • SEO
  • 竞品分析
  • 产品营销
  • B2B营销

营销Skill调用失败怎么排查？按触发、路径、权限和输出定位

营销Skill调用失败怎么排查？先不要急着改提示词。用户看到的“没按Skill执行”可能是根本没有触发，也可能是Skill已启动却读不到文件、拿不到权限，或者运行成功但输出不符合预期。这几类问题需要不

  • VibeMarketing
  • 营销自动化
  • Skill排错
  • 营销Skill

产品那句话客户复述不出来，销售和市场就会各写一套

市场部改官网，销售改话术，投放改广告，三边各自有一套说法，在不少团队里已经算日常。语气不同还能凑合用。客户听完三遍，仍然复述不出你们到底解决哪一件事，这才麻烦。功能清单越长，这句话越容易丢。产品营销要

  • 定位
  • 销售赋能
  • 产品营销

NEXT WORKFLOW

搭配使用

按产出物与输入资料的衔接关系计算，都是同一个 Agent 下的版本，装完可以直接接着跑。

Claude Code · 内容与创意#02

Claude Code 品牌视觉系统 Skill

用 Claude Code 完成「品牌官网、销售演示和社媒模板各用一套颜色与字体，需要统一视觉规范」，最终得到品牌视觉规范：字体角色、字号层级、颜色用途、间距尺度和 Logo 使用规则。

来源项目 · kostja94/marketing-skills ★ 1,012 · Fork 140

VibeMKT COMMUNITY

加入 VibeMKT 社群

微信扫码，交流营销 Skill 的选择、安装、试用与业务化改造。

加入 VibeMKT 社群的微信二维码

二维码会持续显示，关闭弹窗后返回当前页面。