# Card Design

> >

- **Type:** Skill
- **Install:** `agentstack add skill-zju-real-easel-card-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ZJU-REAL](https://agentstack.voostack.com/s/zju-real)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [ZJU-REAL](https://github.com/ZJU-REAL)
- **Source:** https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/card-design
- **Website:** https://zju-real.github.io/Easel/

## Install

```sh
agentstack add skill-zju-real-easel-card-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

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

## 五步流程（照做，别跳）

1. **让用户选风格**（第一步，也是最重要的一步）：从 `references/styles.md` 的**风格库**里给用户几个选项，让 ta 挑一个——
   - 用户已指定风格 → 直接用。
   - 用户没指定 → **列 3-4 个候选**（风格名 + 一句话 + 适用），按内容品类/平台/Profile 推荐，问 ta 选哪个；急着要就用推荐的第一个并说明"默认用了 X 风格，想换随时说"。
   - 风格库现有 9 种：瑞士极简 / 杂志编辑 / 新中式墨韵 / 奶油温柔 / 多巴胺 Y2K / 高奢黑金 / 手账贴纸 / 极客终端 / 植物清新。**卡片美不美，第一取决于选对风格**，别所有内容都套同一种。
2. **锁定该风格的 spec**：`styles.md` 里选中风格给了**字体(family+字重)+配色(hex)+版式性格+装饰**——**严格照它**，整套卡片全程只用这一套，不自由发挥、不换色。（配色细节另见 `palettes.md`）
3. **定字体层级**：按 `typography.md`——「**字越大越细**」（字体已装 Noto Sans/Serif CJK 全字重，大标题用 Thin/Light）。手机端正文 ≥28px。
4. **套骨架**：从 `card-recipes.md` 选卡型骨架(封面/账本/管线/对比/矩阵/数据/金句)，按其**最小密度线**填内容。
5. **渲染后自检**（硬门禁）：
   ```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](https://github.com/ZJU-REAL)
- **Source:** [ZJU-REAL/Easel](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-zju-real-easel-card-design
- Seller: https://agentstack.voostack.com/s/zju-real
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.