card-design · Social Card Design System
A visual design system for social cards: palettes, Chinese typography hierarchy, full-bleed layouts, category skeletons, and dead-space/density QA — fixing template-looking decks and cheap AI aesthetics.
Not a generator but a design spec: pick one of 9 named styles (Swiss minimal, editorial magazine, neo-Chinese ink, and more), lock its spec, then render through the card_audit.py hard gate — only all-PASS work ships.
Example invocation: "Make a knowledge quote card in the Swiss minimal style."
Full brief
Positioning
card-design is a design system plus hard rules for card visuals — not a generator. It pins down design decisions for every "HTML/CSS → screenshot" card and poster skill. The core belief: sophistication comes from restraint, hierarchy, grid, and fullness — never from decorative pile-up.
Core capabilities
- 9 named styles: Swiss minimal / editorial magazine / neo-Chinese ink / cream gentle / dopamine Y2K / luxury black-gold / journal sticker / geek terminal / botanical fresh — each with fonts (family + weights), palette hexes, layout character, ornament, and fit notes. Style selection is step one; 3–4 candidates are recommended when the user hasn't chosen.
- Spec lock: once a style is chosen, the whole card set uses only its fonts and palette — no improvising, no color swaps.
- Chinese typography hierarchy: the bigger the type, the lighter the weight (Thin/Light for headlines, bold only for small text); body text never below 28px on mobile.
- Category skeletons: cover / ledger / pipeline / comparison / matrix / data / quote — each with a minimum density line that content must meet.
- Fill rule: content covers ≥75% of frame height; any unjustified blank band over 15% of frame height fails; short on content, expand copy / switch to a shorter skeleton / switch to 1:1 — never decorate the void.
- De-AI-slop hard rules: no emoji as icons (line icons or pure typography), no blue-purple tech gradients, no gradient text, no glassmorphism, no center-everything; body text never pure black.
- Post-render gate:
card_audit.py audithard gate — any FAIL (dead space / insufficient span / top-heavy) means refilling content or swapping skeletons and re-rendering per the correction ladder; only all-PASS ships.
Workflow
- Have the user pick a style (recommend 3–4 candidates; if they're in a hurry, use the top recommendation and say so)
- Lock that style's font + palette spec
- Set the typography hierarchy
- Pick a card skeleton, fill content to its minimum density line
- Render, run card_audit.py; FAIL → refill or re-render, all-PASS → deliver
Inputs & outputs
| Input | Notes |
|---|---|
| Content topic | Required — what the card should say |
| Style choice | Optional — candidates recommended from the 9 styles when unspecified |
Output: a spec-locked card visual plan (fonts / palette / skeleton / density requirements) for card-* / poster-hero rendering skills to execute before writing any HTML — or the audited card itself.
Boundaries with adjacent skills
- card-quote / card-xiaohongshu / poster-hero etc.: the final renderers (HTML/CSS → screenshot); they read this system as the design spec before writing their first line of HTML.
- ai-image-gen: pure AI image generation; this system is deterministic layout design — it generates no imagery and wins on typographic precision.
Fit
- Setting visual standards for social cards, covers, and posters
- Unifying an account's visual identity (locked colors, fonts, skeletons)
- Reviewing and fixing cards that look "too AI" or under-filled
Before you start
- No API key.
- With a Profile, brand palette/style preferences are read — but the sophistication baseline wins: without an explicit visual spec from the Profile, pick the stance and lock colors per this system rather than falling back to vague "soft gradient" descriptions.
- Style selection is step one: whether a card looks good depends on picking the right style first.
card-design is part of the Aiglade Skill library. Invoke it from the Aiglade chat box in plain language.