mcpField
B
brandfy-templates-canais

brandfy-templates-canais

github.com/promovaweb设计与 UI13156 次安装2 周前更新
代码仓库

关于 brandfy-templates-canais

用于为品牌各渠道制作模板的 skill,指导从 SVG 示例出发进行调整、检查可读性与变体,并完成导出和文档记录。

主要功能

  1. 01将 SVG 示例复制到 brand/templates/
  2. 02应用品牌颜色和字体
  3. 03保留可编辑内容字段
  4. 04检查安全区和移动端可读性
  5. 05导出 PNG 或 JPG
  6. 06记录限制和 Logo 变体

适用场景

  1. 01为选定渠道制作一组模板
  2. 02用长短标题检查版式
  3. 03测试搭配明暗照片的设计

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/promovaweb/brandfy --skill brandfy-templates-canais

安装后在 Claude Code 中输入/brandfy-templates-canais确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
email-header.svg
instagram-carousel-content.svg
instagram-carousel-cover.svg
linkedin-post.svg
youtube-banner.svg
youtube-thumbnail.svg
references/
channel-guides.md
scripts/
install-templates.mjs

详细介绍

创建渠道模板

操作协议

  • **计划与进度:**规划渠道、格式、变体、导出和测试。
  • **事实来源:**阅读手册、设计令牌、素材和 channel-guides.md。
  • **范围与幂等性:**先将示例复制到 brand/templates/,再进行调整。保留技能中已安装的模板。
  • **验证:**检查尺寸、安全区、密度、对比度、Logo、字体和移动端可读性。
  • **最终摘要:**记录模板、变体、导出内容和限制。

工作流

  1. 选择品牌使用的渠道。

  2. 复制所需的 SVG:

    node <caminho-da-skill>/scripts/install-templates.mjs \
      --output brand/templates
    
  3. 根据 brand/global.css 和 brand/fonts/fonts.css 中的定义替换占位符、颜色和字体系列。

  4. 创建足够多的变体,避免所有发布内容都使用相同构图,同时不破坏视觉系统。

  5. 保留可编辑字段,用于标题、辅助文案、图片、署名、版块、编号和行动号召。

  6. 导出 PNG 或 JPG,并按实际使用尺寸进行检查。

  7. 在每个模板旁记录用法、字符数限制、安全区和 Logo 变体。

打开选定的 SVG,替换占位符,并使用品牌调色板导出一个示例。在信息流或目标屏幕中检查,可以发现文字过小、安全区被侵占以及 Logo 使用了错误变体等问题。

专家思路

将模板视为灵活规则。固定保护品牌识别度、无障碍性和制作流程的部分;在内容需要节奏变化的地方允许调整。测试短标题和长标题、无图片的情况、明暗照片、翻译、移动端裁切和导出效果。只有理想示例才能正常使用的模板,还不能交给 Agent 使用。

评论

支持 Markdown