Card Design

卡片设计系统（生成前必读）

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

五步流程（照做，别跳）

1. 让用户选风格（第一步，也是最重要的一步）：从 references/styles.md 的风格库里给用户几个选项，让 ta 挑一个——

• 用户已指定风格 → 直接用。
• 用户没指定 → 列 3-4 个候选（风格名 + 一句话 + 适用），按内容品类/平台/Profile 推荐，问 ta 选哪个；急着要就用推荐的第一个并说明"默认用了 X 风格，想换随时说"。
• 风格库现有 9 种：瑞士极简 / 杂志编辑 / 新中式墨韵 / 奶油温柔 / 多巴胺 Y2K / 高奢黑金 / 手账贴纸 / 极客终端 / 植物清新。卡片美不美，第一取决于选对风格，别所有内容都套同一种。

1. 锁定该风格的 spec：styles.md 里选中风格给了字体(family+字重)+配色(hex)+版式性格+装饰——严格照它，整套卡片全程只用这一套，不自由发挥、不换色。（配色细节另见 palettes.md）
2. 定字体层级：按 typography.md——「字越大越细」（字体已装 Noto Sans/Serif CJK 全字重，大标题用 Thin/Light）。手机端正文 ≥28px。
3. 套骨架：从 card-recipes.md 选卡型骨架(封面/账本/管线/对比/矩阵/数据/金句)，按其最小密度线填内容。
4. 渲染后自检（硬门禁）：

``bash 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(风格命名与模板库思路)。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ZJU-REAL
• Source: ZJU-REAL/Easel
• License: Apache-2.0
• Homepage: https://zju-real.github.io/Easel/

Install and usage instructions live in the source repository linked above.