Xhs Cover Maker

SKILL前端设计
前端设计 未标注权限 许可证不明确

把 xhs-content-forge 的配图清单渲染成小红书封面/配图(4x高清、文字清晰)。固定五岳AI公司视觉IP,5套版式:封面×3(大字报/对比/看板)+内页×2(要点图/金句卡)。用于小红书出封面/做配图/渲染笔记图。

一句话选型结论

按资料字段整理

Xhs Cover Maker是前端设计类的 Agent Skill,安装方式:GitHub 仓库,权限级别未标注,许可证不明确,没有现成安装命令,需按说明手动放置 SKILL.md。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式GitHub 仓库 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 skills
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

GitHub 仓库
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    按安装说明或仓库 README,把 SKILL.md 放到客户端的 skills 目录(一般一个技能一个文件夹)。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方wujiaming88仓库 skills · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式GitHub 仓库安装包 wujiaming88/skills
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 2026-06-14
正文体量5.6 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 基础信息齐全,可以先按说明装一个试试。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有现成安装命令,要按安装说明或仓库 README 手动放置。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
Xhs Cover Maker当前 未标注权限 GitHub 仓库 未标注 未标注 无
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

5.6 KB
模型实际读到的说明书原文,来自技能仓库

小红书封面/配图工厂 · xhs-cover-maker

把「配图清单」变成成品图。确定性渲染:用 WeasyPrint(纯 Python,不依赖浏览器)把 HTML/CSS 渲成 PDF,再经 poppler 超采样栅格化为高清 PNG,把"设计"降级成"填空出图"。固定五岳视觉 IP,文字永远清晰(AI 直出图做不到)。

> ⚠️ 本宿主机 chromium 被容器 sandbox 杀(zygote/network crashed),故弃用 Playwright 改用 WeasyPrint 链路。详见 workspace/xhs-output/RENDER_REPORT.md。

不做创意设计决策——版式和配色已定死,只负责填内容、渲染、交付。需要纯艺术海报时才考虑 canvas-design。

什么时候用

  • content-forge 产出了配图清单,要出封面/内页图
  • 要小红书竖版封面(1080×1440,3:4)或配图
  • 要保证图上文字清晰可读(数据/标题/对话)

五套版式(3 套封面 + 2 套内页,对应作战手册封面公式)

封面(首图,1080×1440):

版式 模板 适用栏目 特征
大字报 assets/cover_dazibao.html ③翻车 / ④教程 / ②人设 超大主标题(≤12字)占画面50%+,纯色/渐变底,关键词高亮
对比 assets/cover_duibi.html ①成果 / 反差 左右分屏「需求 vs 成品」「人 vs AI」
看板 assets/cover_kanban.html ①数据成果 终端/仪表盘风,数据卡片 + 高亮重点

内页(P2-P9,同尺寸 1080×1440):

版式 模板 用途 特征
要点信息图 assets/cover_neiye_point.html 干货拆条(P2-P5) 标题 + 3-4 个要点条目(emoji 序号),留白克制
金句卡 assets/cover_neiye_quote.html 收尾图(P9) 一句话金句大字 + 署名「—— 五岳AI公司」,引收藏/转发

五套共用 assets/brand.css(五岳视觉 IP:配色 + logo 角标 + 字体链 + 高亮词机制 + 防溢出工具)。

占位符体系(content-forge → cover-maker 无缝衔接)

每个模板顶部注释列全了自己的 {{...}} 占位符,命名统一({{TITLE}} / {{SUB}} / {{SECTION}} / {{Pn_*}} 等)。content-forge 输出的「封面变量」直接逐个映射,不用猜。

高亮词机制(三档,brand.css 内置)——让用户能指定某词强调:

写法 效果
<span class="hl">词</span> 描绿
<span class="hl-amber">词</span> 描橙
<span class="hl-box">词</span> 绿底色块(最抢眼,留给最狠的那个词)
<span class="hl-box-amber">词</span> 橙底色块

防溢出:模板已给文本挂 .fit(长词自动换行断词)和 .clamp-2/.clamp-3(副标/正文限行省略号)。标题超长时:大字报加 class="title t-long"(缩到 104px)、金句卡加 class="quote q-long"(缩到 62px),防止填满 12 字 / 两行副标时爆版。

空块自动隐藏:要点图有 4 个点位、看板有多张数据卡,只填一部分时,渲染脚本会自动删除仍残留 {{...}} 未填充占位符的 .point / .stat 块——填几个点就出几个,不会出现空卡片。

工作流

  1. 挑版式:按配图清单里标注的版式选模板(封面:大字报/对比/看板;内页:要点图/金句卡)。
  2. 填内容:复制对应 assets/*.html 到工作目录,按模板顶部注释里列出的 {{...}} 占位符逐个填。content-forge 的「封面变量」直接映射过来。主标题 ≤12 字,关键词用 <span class="hl">/hl-amber/hl-box 高亮(见下高亮词机制)。文案超长时挂 t-long/q-long 防溢出。
  3. 渲染:用本 skill 的脚本出高清竖版图。
    bash python3 scripts/render_cover.py <填好的.html> <输出.png>
    默认竖版 1080×1440(小红书 3:4)、3x 超采样。底层 WeasyPrint→PDF→pdftocairo 栅格化→Pillow LANCZOS 下采样。
    - 重要:填好的 HTML 必须与 brand.css 同目录(或保证 href="brand.css" 相对路径可解析),否则 CSS 变量失效会导致文字/配色全丢、整图变纯深底。建议直接复制 assets 内的模板就地改、就地渲。
    - 依赖(本机已装):weasyprint、poppler-utils(pdftocairo)、Pillow、Noto Sans CJK SC 字体。
  4. 控大小:>5MB 自动转 JPEG(quality 92)。脚本已内置 --jpeg 选项。
  5. 交付:输出 MEDIA:<path>;Telegram 发原图用 --force-document 避免压缩。

视觉 IP 铁律(改了就丢失辨识度,别动)

  • 配色:深色科技底(炭黑 #0E1116 / 深墨绿)+ 荧光绿强调 #00E676 / 橙黄 #FFAB00,贴 AI/终端气质,区别于美妆白底流。
  • logo 角标:每张图右下角固定"🏔 五岳AI公司"角标(brand.css 已内置)。
  • 字体:"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif,"Noto Color Emoji",保证中文渲染;末尾 Noto Color Emoji 让 🏔📝🎯🛠⚡💬✓ 等 emoji 在 WeasyPrint 下出彩色字形(实测不是空白框)。
  • 文字排版:主标题 ≤12字一眼读完;关键词描黄/描绿;最多 3 字号层级,别堆字。
  • 尺寸:封面竖版 3:4(1080×1440)。内页可 1:1 或 3:4。

注意

  • 不出现真人(不露脸)。需要"人"的元素用山峰/终端/对话气泡等抽象呈现。
  • 图上绝不出现微信号/二维码/联系方式(平台导流红线)。
  • 文字必须清晰:这是用渲染而非 AI 直出的唯一理由,别省 4x。

常见问题

5 问
答案由本站依据条目字段整理
Xhs Cover Maker怎么安装?

没有现成安装命令:按安装说明或仓库 README,把 SKILL.md 放进客户端的 skills 目录(一般一个技能一个文件夹)。

Xhs Cover Maker支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

Xhs Cover Maker权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

Xhs Cover Maker收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

Xhs Cover Maker用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。