SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillscard-skill

card-skill

Design & creation

View repository

Updated 10-15 23:46

About this skill

card-skill

Cast content into a visible form. Content goes in, PNG comes out. The mold determines the shape.

Parameters

Parameter Description Default value
--design Specify a design system (skip candidate preview) Empty (enter preview flow)
--dpr Device pixel ratio 2 (4K quality)
--author Signature text Kenny Wu
--photo Signature avatar URL/path assets/avatar.png

Execution flow

Step 0: Render routing

Determine whether the current content can go through CLI fast rendering.

CLI-eligible modes: big, long, whiteboard, poster AI-only modes: infograph, comic, sketchnote (require creative layout, cannot be schema-ized)

Decision logic:

  1. If mode is infograph / comic / sketchnote → go directly to the AI flow (Step 1)
  2. If mode is big / long / whiteboard / poster:
    • Evaluate whether the content structure can fit into the schema of the corresponding mode (see schemas/{mode}.json）
    • Content structure is clear (has a title, well-defined paragraphs, linear reasoning chain) → CLI path
    • Content is too complex (nested references, multi-column comparison, special layout requirements, uncertain whether it can fit) → AI path

CLI path：

  1. Extract structured JSON from the content, conforming to the schema of the corresponding mode
  2. Write to a temporary file card_input.json
  3. Call:
node scripts/card.js --input card_input.json --output ~/Downloads/{name}.png
  1. CLI succeeds → jump to Step 7 delivery (skip Steps 1-6)
  2. CLI fails → report the error, fall back to the full AI flow (continue to Step 1)

JSON schema structure(for the complete definition of each mode, see the schemas/ directory):

big: { mode, phrase, design?, accent_words?, ghost_char?, attribution? } long: { mode, title, body: [{type, text, ...}], design?, kicker?, subtitle?, theme? } whiteboard: { mode, title, steps: [{type, ...}], design?, subtitle?, accent_words? } poster: { mode, title, cards: [{body: [{type, ...}]}], design?, subtitle? }

Step 0.5: Read the basics

The following files must be read before starting:

Required reading：

  1. references/taste.md — taste baseline (anti-AI aesthetics + paper print feel)
  2. references/design-index.md — 18 brand design systems + 8 content tone indexes (26 total)

Read as needed by content type(determine which are needed after the Step 1 analysis): 3. references/mode-infograph.md — infographic content theory (three-dimensional analysis of density/structure/emotion, 90/8/2 color rule, layout generation principles) 4. references/mode-long.md — long-form content rules (highlight sentence detection, tone perception, paragraph preprocessing) 5. references/mode-big.md — big-character poster typography (dynamic font size calculation from character count, manual line-breaking principles) 6. references/mode-sketchnote.md — narrative structure (six rules against translationese, problem→failure→epiphany arc) 7. references/mode-whiteboard.md — whiteboard reasoning (logic chain extraction, 4 structural routes) 8. references/mode-poster.md — multi-card splitting (visual weight calculation, greedy splitting algorithm) 9. references/mode-comic.md — comic narrative (conflict extraction, storyboard system, 5 style routes)

Step 1: Acquire + analyze content

Acquire: URL → WebFetch / pasted text → use directly / file path → Read

Analyze: extract the three-dimensional features of the content (see references/mode-infograph.md）

标题：[≤ 15 字]
副标题：[一句话 ≤ 30 字]
来源：[可选]
密度：[稀 ≤50字 / 中 50-200 / 密 200+]
结构：[单点 / 对比 / 层级 / 流程 / 辐射 / 并列]
情绪：[沉思 / 锐利 / 温暖 / 技术]
主题标签：[2-5 个关键词]

Content preprocessing(follow the ljg-card specification):

  • Highlight sentence detection: standalone paragraphs <25 characters containing a core insight are marked as highlight
  • Paragraph segmentation: split by semantic completeness, not mechanically by a fixed character count
  • Data cleaning: ensure numbers feel real (47.2% instead of 50%，+1 (312) 847-1928 instead of 1234567）
  • Copy de-AI-ification: ban typical AI wording such as "empower/seamless/unleash/next-generation/deeply empower" (for the complete list, see references/taste.md Section 5)
  • Anti-translationese: prohibit "is..." / "in the process of..." / "perform + noun" (full rules see references/mode-sketchnote.md six axioms)

Step 2: Match candidates

Comic mode skips this step: comic mode uses a fixed black-and-white palette, and the design system's color tokens do not apply. Go directly to Step 4; the comic style is determined by references/mode-comic.md 's 5 routes (Katsuhiro Otomo/Takehiko Inoue/Kentaro Miura/Taiyo Matsumoto/Jiro Taniguchi), chosen at Step 4 rendering based on the content's temperament.

Select 3-5 candidate design systems from design-index.md.

Matching logic：

  1. Emotion→visual style：
    • Contemplative → minimal-clean / editorial-warm / dark-premium
    • Sharp → dark-minimal / high-contrast / vibrant
    • Warm → editorial-warm / organic-warm / playful
    • Technical → technical-data / monospace / dark-minimal
  2. Thematic relevance: add points when the content domain intersects with the brand domain (e.g., AI content→AI brand, finance→fintech)
  3. Density fit: sparse→whitespace style (apple, notion), dense→data-dense style (stripe, ibm)
  4. Visual diversity: candidates should be visually clearly different from one another. If all 3 are dark-minimal, swap one for editorial-warm

Output the candidate list, each with a one-sentence matching rationale.

Step 3: Candidate confirmation

Display the candidate list in the terminal, each with a one-sentence matching rationale and palette information:

候选设计系统：
1. linear — 精密暗色，适合技术架构内容 (Canvas: #010102, Accent: #5e6ad2)
2. claude — 温暖编辑风，适合人文思考 (Canvas: #faf9f5, Accent: #cc785c)
3. stripe — 数据密集，适合金融展示 (Canvas: #ffffff, Accent: #533afd)
4. notion — 简约留白，适合知识管理 (Canvas: #ffffff, Accent: #5645d4)

Tell the user: choose a number (e.g., "use 2"), or say "swap batch" to get new recommendations. After the user confirms, proceed to Step 4.

Step 4: Render

Based on the mode determined in Step 1, select the corresponding template:

Mode Template file
infograph assets/infograph_template.html
big assets/big_template.html
long assets/long_template.html
whiteboard assets/whiteboard_template.html
poster assets/poster_template.html
comic assets/comic_template.html
sketchnote assets/sketchnote_template.html

After the user selects:

  1. Read the compact design file:references/designs/{name}.md
    • ljg-* For tones, no need to read a file; directly use the CSS variables in design-index.md
  2. Read references/taste.md(paper print feel baseline)
  3. Read the corresponding template file
  4. Map design tokens to template CSS variables:
Template variable Design system source
--bg canvas color (overlay paper grain texture)
--green(structural color) hairline / surface-2 color
--pink(accent color) accent / primary color
--ink ink main text color (reduce saturation by 10-20% to simulate printing)
--ink-light ink-muted color

Fonts are not in this table—they are fixed by mode, see references/taste.md Section 2.

Font sizes and typography follow ljg-card, not the brand design system. The brand design system only provides color and visual atmosphere references (palette, shadow philosophy, corner radius style, whitespace rhythm). Font size rules strictly follow ljg-card's mobile-first standard: body text ≥36px, annotations ≥24px. Element ratios are graded by mode: big≥10:1, infograph≥6:1, comic≥8:1, sketchnote≥5:1, long/poster/whiteboard≥4:1 (see references/taste.md）。

Paper print feel: all output should follow references/taste.md Section 6's paper aesthetic requirements—warm paper base color, ink-like text, desaturated accent colors, ultra-thin hairline borders, like a printed piece rather than a web screenshot.

  1. Design the visual based on content analysis (density/structure/anchors), following the same principles as the ljg-card infographic mode
  2. Replace the placeholders in the template (see the comments at the top of each template file for its placeholders)
  3. Write to a temporary file card_{name}.html

poster mode is special: each card is written independently, with a sequence number in the filename card_{name}_{N}.html。

Multi-card batch consistency: when content needs to be split into multiple images (infographic series, multi-card poster, user requests "multiple images"), the following batch rules must be followed:

  1. Token locking: before rendering the first card, first output a shared CSS variable table used by all cards. The variable table includes:

    • Color:--bg, --green, --pink, --ink, --ink-light(from the design token mapping in Step 4)
    • Font size gradient: heading font size / section heading font size / body font size / annotation font size (from taste.md the mode rules in Section 2)
    • Spacing rhythm: content margins, block spacing, colophon height
    • Font stack: determined by mode, consistent across the whole batch

  2. Token locking output format(written before the HTML of all cards):

    批次 Token：
--bg: #faf6f0; --green: #e8dfd2; --pink: #d97757; --ink: #2c2418; --ink-light: #7a6f5f
标题: 140px serif | 段落标题: 48px zh-serif | 正文: 36px zh-serif | 标注: 24px mono
边距: 60px | 区块间距: 40px | 圆角: 6px

  3. Each card's {{CUSTOM_CSS}} must begin by copying the CSS variable declarations from the Token locking table（:root { ... }), and only then write the layout CSS unique to that card. This ensures that even if a card's HTML is opened on its own, the visual effect is complete.

  4. No cross-card drift: between different cards, elements at the same semantic level must use the same font size. For example, if card 1's body text is 36px, card 2's body text must also be 36px. Only the layout structure (grid, flex, positioning) is allowed to vary due to different content.

Signature parameters：--author replaces the footer's left-side text,--photo serves as the footer avatar. When unspecified, the default signature is Kenny Wu, and the default avatar is the absolute path of assets/avatar.png .

Step 5: Self-check

  • Does the visual form grow out of the content? If the content were changed, would this layout still hold up?
  • Is the design system's brand language perceptible in the image (not just a swapped color palette, but the typographic rhythm also matches)?
  • Do the element proportions meet the mode's minimum standard? (big≥10:1, infograph≥6:1, comic≥8:1, sketchnote≥5:1, others≥4:1)
  • Do the accent colors comply with the brand type rules? (standard colors ≤2 places, weak accent ≤3 visually prominent points)
  • Body text ≥36px, annotations ≥24px?
  • Multi-card mode: does each card cover only one section/topic? Is content on different themes not mixed onto the same card?
  • Batch consistency (for multiple cards): do all cards' color variables, font size gradients, and spacing rhythm strictly match the Token locking table? Are the font sizes for the same semantic level (body, heading, annotation) exactly consistent?
  • Would it be obvious at a glance if you told someone "AI made this"?

Step 6: Screenshot (4K)

The template CSS width is 1080px. The width parameter of capture4k.js is the viewport width (not the output width). The DPR parameter controls the output resolution. The template CSS width is 1080px. The width parameter of capture4k.js is the viewport width (not the output width). The DPR parameter controls the output resolution.

node assets/capture4k.js <html_path> <png_path> 1080 800 2 fullpage

Parameter description:1080 = viewport width (matches the template),800 = initial height (automatically expands in fullpage mode),2 = DPR (output 2160px wide),fullpage = capture the full content height. Parameter description:1080 = viewport width (matches the template),800 = initial height (automatically expanded in fullpage mode),2 = DPR (output 2160px wide),fullpage = capture the full content height.

Multi-card batch: all cards in the same batch must use exactly the same capture command parameters to ensure consistent output width and DPR.

Step 7: Delivery

Report the file path.

Refinement

  • "Change the design system" → go back to Step 3
  • "Adjust the color scheme" → fine-tune the CSS variables, keep the same design system
  • "Change the layout" → redesign, same design system

Quick mode (specified with --design)

When the user specifies the design system via --design , skip Step 3 and go directly to Step 4.

For available names, see the directory names in references/design-index.md .

Developer tools (for non-AI workflows)

Script Purpose
scripts/gallery_render.js Render all design×mode combinations, generate a static showcase page
scripts/batch_render_covers.js Batch-generate light cover screenshots
scripts/batch_render_covers_dark.js Batch-generate dark cover screenshots
scripts/picker_server.js Local HTTP server, works with assets/candidate_picker.html to provide a candidate selection UI