Agent Skills
› ZJU-REAL/Easel
› card-design
card-design
GitHub提供社媒卡片视觉设计规范，涵盖风格选择、字体层级、配色及布局密度质检，旨在通过克制与网格避免廉价AI感，确保高级感输出。
Trigger Scenarios
卡片难看
优化视觉
封面/海报设计
排版配色
卡片填不满
AI味重
Install
npx skills add ZJU-REAL/Easel --skill card-design -g -y
SKILL.md
Frontmatter
{
"name": "card-design",
"layer": "produce",
"description": "社媒卡片视觉设计系统：提供配色、中文字体层级、满画幅布局、品类骨架和死空白\/密度质检，避免模板化 PPT 与廉价 AI 感。 当用户说“卡片难看、优化视觉、封面\/海报设计、排版配色、卡片填不满、AI 味重”时使用；所有 card-*、poster-hero 等视觉产出应把它作为设计规范，而非最终渲染器。\n"
}
卡片设计系统（生成前必读）
这不是一个"生成器",而是一套设计系统 + 硬规则。所有"HTML/CSS → 截图"的卡片/海报 SKILL 在写第一行 HTML 之前先读它。核心信念(来自实战开源方案与去 AI 味研究的一致结论): 高级感来自「克制 + 层级 + 网格 + 填满」,不是靠阴影/圆角/渐变堆出来的。 「没人做设计决定」= AI 选了一万张图的统计平均值 = 廉价。本系统就是替你把决定钉死。
五步流程（照做，别跳）
- 让用户选风格（第一步，也是最重要的一步）：从
references/styles.md的风格库里给用户几个选项，让 ta 挑一个——- 用户已指定风格 → 直接用。
- 用户没指定 → 列 3-4 个候选（风格名 + 一句话 + 适用），按内容品类/平台/Profile 推荐，问 ta 选哪个；急着要就用推荐的第一个并说明"默认用了 X 风格，想换随时说"。
- 风格库现有 9 种：瑞士极简 / 杂志编辑 / 新中式墨韵 / 奶油温柔 / 多巴胺 Y2K / 高奢黑金 / 手账贴纸 / 极客终端 / 植物清新。卡片美不美，第一取决于选对风格，别所有内容都套同一种。
- 锁定该风格的 spec：
styles.md里选中风格给了字体(family+字重)+配色(hex)+版式性格+装饰——严格照它，整套卡片全程只用这一套，不自由发挥、不换色。（配色细节另见palettes.md） - 定字体层级：按
typography.md——「字越大越细」（字体已装 Noto Sans/Serif CJK 全字重，大标题用 Thin/Light）。手机端正文 ≥28px。 - 套骨架：从
card-recipes.md选卡型骨架(封面/账本/管线/对比/矩阵/数据/金句)，按其最小密度线填内容。 - 渲染后自检（硬门禁）：
任何 FAIL(死空白/跨度不足/头重脚轻)→ 按python skills/openclaw/card-design/scripts/card_audit.py audit -f outputs/主题名/card_*.pnglayout-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(风格命名与模板库思路)。
Version History
- 69c5928 Current 2026-09-08 17:36
