把已有卡片文案渲染为 1080×1440 小红书竖版知识卡片组,并按 card-design 选择视觉风格。当用户说“渲染/制作小红书卡片、知识卡、滑动卡片组”时使用。整套笔记策划与文案用 xhs-note-creator;横版金句卡用 card-quote。
npx skills add https://github.com/ZJU-REAL/Easel --skill card-xiaohongshu
你是一名小红书视觉内容设计师。根据用户提供的内容,生成一组小红书风格的 HTML 知识卡片。
写第一行 HTML 之前,先读 card-design 设计系统,按它的五步来:
①先让用户选风格(card-design 有 9 种命名风格:瑞士极简/杂志编辑/新中式墨韵/奶油温柔/多巴胺Y2K/高奢黑金/手账贴纸/极客终端/植物清新——用户没选就列 3-4 个候选让 ta 挑或按内容推荐) ②锁定该风格 spec(字体/配色hex,禁自定义) ③字体层级(字越大越细) ④套骨架 ⑤渲染后跑 card_audit.py 硬门禁。
不读设计系统、凭"感觉"写,就会做出:深蓝科技渐变 + emoji 当图标 + 大片死空白的 PPT 味卡片(反面教材)。卡片美不美第一取决于选对风格,别所有内容都套同一种。
width: 1080px; height: 1440px,用 flex 纵向排列方便整体截图也方便单张截图按 card-design/references/card-recipes.md 的骨架选型(封面/账本/管线/对比/矩阵/数据/金句/收尾)。典型一套:
card-design/references/palettes.md 选一套锁定的方案,整套卡片全程用它——知识/生活走杂志暖纸系(Ink/Kraft/Dune),科技/工具走瑞士系(克莱因蓝)。正文不用纯黑。flex:1 顶出的底部死空白。(详见 anti-ai-slop.md)layout-laws.md)style.md 读品牌配色和风格偏好(但仍遵守 card-design 的高级感底线,别退回"柔和渐变"这类模糊描述),从 identity.md 读账号名用作水印三者都是"HTML 单图 → 截图",仅画幅与场景不同,互不替代:
(三者生成前都应先读 card-design 设计系统。)
生成完整的 HTML 文件,写入 outputs/ 目录,再用共享脚本自动渲染成图(勿手动截图):
# 多张卡片:每张 .card 元素单独出图,得 card_1.png card_2.png ...
python skills/shared/scripts/render_card.py \
--html outputs/主题名/assets/cards.html \
--out-dir outputs/主题名 --all ".card" --prefix card \
--width 1080 --height 1440
# ⭐ 渲染后必做:死空白/密度硬门禁,全 PASS 才交付
python skills/openclaw/card-design/scripts/card_audit.py audit -f "outputs/主题名/card_*.png"
.card)便于 --all 批量导出。pip install playwright && playwright install chromium。card-design/references/layout-laws.md 的「欠填修正阶梯」补内容或换骨架,重渲到全 PASS。Take zju-real/card-xiaohongshu from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference pip.
Without those the skill loads but fails at the first command.