Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ZJU-REAL/Easel --skill card-designgit clone --depth 1 https://github.com/ZJU-REAL/EaselWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/zju-real/easel/card-design)<a href="https://agentmods.dev/skills/zju-real/easel/card-design"><img src="https://agentmods.dev/badge/skills/zju-real/easel/card-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/zju-real/easel/card-design"><img src="https://agentmods.dev/badge/skills/zju-real/easel/card-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00113 | $0.01616 |
| Opus 5 | $0.00056 | $0.00808 |
| Sonnet 5 | $0.00023 | $0.00323 |
| Haiku 4.5 | $0.00011 | $0.00162 |
Grade A, and why
card-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 57 lines — stays where its author put it; the contents beside it link to each section on GitHub.
卡片设计系统（生成前必读）
这不是一个"生成器",而是一套设计系统 + 硬规则。所有"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 暖纸」。
What ships with it
8 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 57 lines · 113 tokens per session scan A d6a15e78dcde
card-design is a skill published in the GitHub repository ZJU-REAL/Easel (710 stars, last pushed today), licensed Apache-2.0. It adds 113 tokens to every session and 1,616 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
gemini-cli
SVG slide layout and aesthetic optimizer via scripts/invoke-gemini-ppt.ts. Gemini's role is to optimize layout and improve visual aesthetics — not just check compliance. It evaluates layout balance, visual hierarchy, color harmony, typography, and readability, then proposes concrete improvements. The script…
imagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not…
brandkit
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional…
visual-asset-design
A guide for turning character, scene, and prop ideas into prompts for generating consistent reference images. It covers layouts, camera views, visual identity, and continuity across image variations.
sn-infographic
An image-making tool that turns supplied content into an infographic, a visual format for explaining information with arranged text and graphics.
skin-creator
Create and apply a two-asset LobsterAI visual skin from the user's style description. Use only when the AI Skin Designer kit supplies the structured skinpack workflow marker; do not use for ordinary theme or image requests.