卡片设计系统(生成前必读)

SkillMedia

Social media card visual design system: provides color schemes, Chinese font hierarchy, full-bleed layouts, category skeletons, and dead-space/density checks to avoid template-like PPT and cheap AI-generated look. Use when users say things like "the card looks bad, optimize visuals, cover/poster des

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the 卡片设计系统(生成前必读) skill

What this skill tells your AI

The instructions your AI receives, as published by zju-real/easel in skills/openclaw/card-design/SKILL.md and read by ahel’s review.

这不是一个"生成器",而是一套设计系统 + 硬规则。所有"HTML/CSS → 截图"的卡片/海报 SKILL 在写第一行 HTML 之前先读它。核心信念(来自实战开源方案与去 AI 味研究的一致结论): 高级感来自「克制 + 层级 + 网格 + 填满」,不是靠阴影/圆角/渐变堆出来的。 「没人做设计决定」= AI 选了一万张图的统计平均值 = 廉价。本系统就是替你把决定钉死。

五步流程(照做,别跳)

  1. 让用户选风格(第一步,也是最重要的一步):从 references/styles.md风格库里给用户几个选项,让 ta 挑一个——
    • 用户已指定风格 → 直接用。
    • 用户没指定 → 列 3-4 个候选(风格名 + 一句话 + 适用),按内容品类/平台/Profile 推荐,问 ta 选哪个;急着要就用推荐的第一个并说明"默认用了 X 风格,想换随时说"。
    • 风格库现有 9 种:瑞士极简 / 杂志编辑 / 新中式墨韵 / 奶油温柔 / 多巴胺 Y2K / 高奢黑金 / 手账贴纸 / 极客终端 / 植物清新。卡片美不美,第一取决于选对风格,别所有内容都套同一种。
  2. 锁定该风格的 specstyles.md 里选中风格给了字体(family+字重)+配色(hex)+版式性格+装饰——严格照它,整套卡片全程只用这一套,不自由发挥、不换色。(配色细节另见 palettes.md
  3. 定字体层级:按 typography.md——「字越大越细」(字体已装 Noto Sans/Serif CJK 全字重,大标题用 Thin/Light)。手机端正文 ≥28px。
  4. 套骨架:从 card-recipes.md 选卡型骨架(封面/账本/管线/对比/矩阵/数据/金句),按其最小密度线填内容。
  5. 渲染后自检(硬门禁):
    python skills/openclaw/card-design/scripts/card_audit.py audit -f outputs/主题名/card_*.png
    
    任何 FAIL(死空白/跨度不足/头重脚轻)→ 按 layout-laws.md「欠填修正阶梯」补内容或换骨架重渲,全 PASS 再交付。

铁律速查(详见 references)

  • 填满:内容覆盖 ≥75% 画高;任何无理由空白带 >15% 画高 = 失败。内容少就扩内容/换省高骨架/换 1:1 画幅,绝不flex:1 把内容顶成垂直居中、绝不加装饰 blob 填空。→ layout-laws.md
  • 字越大越细:大标题 w200-500,小字才用粗体。全用 700 粗黑体 = 廉价 banner。→ typography.md
  • 禁 emoji 当图标:用线性图标(Lucide,stroke 1.5,棱角款)或纯排版。→ anti-ai-slop.md
  • 禁蓝紫科技渐变(头号 AI tell)、禁 bg-clip-text 渐变字、禁玻璃拟态、禁"居中一切"。→ anti-ai-slop.md
  • 正文永远不用纯黑,用深灰/深墨(#6B6560 / #0a1f3d 等)。
  • 瑞士立场:零圆角、零阴影、禁渐变,靠色块+发丝线+网格。杂志立场:小圆角、仅截图给极柔阴影、必须有背景氛围层(极淡纸纹/墨晕)。

references

  • styles.md — ⭐ 风格库(9 种命名风格,用户选一个),每个含字体/配色hex/版式性格/装饰/适用。第一步先读它选风格。
  • palettes.md — 锁定配色细节(杂志6套 + 瑞士4套 + 莫兰迪/奶油补充),带 hex。
  • typography.md — 中文字体层级、"越大越细"、最小字号死线、中英混排(Noto Sans/Serif CJK 全字重)。
  • layout-laws.md — 填满画幅法则、4带密度自检、欠填/溢出修正阶梯(治死空白)。
  • anti-ai-slop.md — AI 廉价感 P0/P1/P2 反例清单 + 高杠杆去 AI 味动作。
  • card-recipes.md — 按卡型/品类的骨架 + 每种的最小密度线。

Profile 感知

  • 有 Profile:从 style.md 读品牌配色/风格倾向;但优先保证本系统的高级感底线——若 Profile 没给明确视觉规范,就按本系统选立场+锁色,别退回"柔和渐变"这类模糊描述。account 名用作水印。
  • 无 Profile:知识/科技类默认「瑞士 + 克莱因蓝」或「杂志 + Indigo Porcelain」;生活/情感类默认「杂志 + Kraft/Dune 暖纸」。

参考来源

EASEL-META.md。规则再提炼自 op7418/guizang-social-card-skill(设计立场/填满法则/密度自检,AGPL——仅借鉴规则未抄文件)、comeonzhj/Auto-Redbook-Skills(主题皮肤/自动分页)、funboy322/avoid-ai-design + yetone/kill-ai-slop(去 AI 味清单)、cardplanet/Ant-Card(风格命名与模板库思路)。

Signals

GitHub stars
1k
Forks
143
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
card-design
Source
github.com/zju-real/easel