SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillscard

card

Design & creation

View repository

Updated 10-15 20:05

About this skill

card: Cast

Cast content into a visible form. Content goes in, HTML and PNG come out. The mold determines the shape, and the root Skill handles routing, quality control, and delivery.

Parameters

Parameter Mold Size Description
-l(default) Long image 1080 x auto Single reading card, content automatically expands in height
-i Infographic 1080 x auto Content-driven adaptive visual layout
-m Multi-card 1080 x 1440 Automatically split into multiple reading cards
-v Visual notes 1080 x auto Hand-drawn style sketchnote, dynamically selects a style direction
-c Comic 1080 x auto Japanese black-and-white manga style, dynamically selects a manga artist's visual language

Input and Output

Accepted input

  • URL
  • Pasted text
  • Markdown / article file path
  • Already-organized outlines, key points, and framework descriptions

Not applicable scenarios

  • General poster or single illustration generation
  • Editable flowcharts / architecture diagrams / whiteboard sketches
  • Slide deck design or full theme replacement

Output strategy

  • If the user provides an output path, use that path first.
  • If the user does not provide a path, use the default output directory ~/Downloads/。
  • Always generate the HTML first, then generate the PNG.
  • Single image mode returns: the selected mode, HTML path, PNG path.
  • Multi-card mode returns: the number of cards, each card's HTML path, each card's PNG path.

This skill outputs visual files, so the Org-mode, Denote, and ASCII-only conventions in L0 do not apply.

Shared execution protocol

Obtain content

  • URL: prefer a lightweight web reading method to capture the main text.
  • Pasted text: use directly.
  • File path: read the local file content.

Unless the user requests keeping all the noise from the original text, first remove obviously irrelevant navigation, ads, footnotes, and boilerplate, then hand it to the corresponding mold.

File naming

Extract the title or core idea from the content as {name}(use Chinese directly, remove punctuation, ≤ 20 characters).

Output directory

Let output_dir be the save directory for the final PNG and HTML:

  • User-specified path: follow the user's specification
  • User did not specify:~/Downloads/

Screenshot tool

node "$SKILL_DIR/scripts/capture.js" <html> <png> <width> <height> [fullpage]

Dependency: Playwright within the Skill directory. If an error is reported:

cd "$SKILL_DIR" && npm install && npx playwright install chromium

arxiv detection

When the content source is an arxiv paper (URL contains arxiv.org, file name contains paper tag, or an arxiv ID appears in the content), extract the arxiv ID (format XXXX.XXXXX), and display it on the right side of the card footer. Applies to -l and -i molds (-m multi-card has no footer, so it does not apply).

Taste guidelines

Shared by all moldsBefore executing any mold, first Read $SKILL_DIR/references/taste.md, and treat it as the visual quality baseline.

Core: counter AI-generated traces. Ban the default Inter font scheme, ban pure black, ban three-equal-column cards, ban centered Hero, ban AI copywriting tone, ban fake data.

-l/-m/-i Additionally, you must Read $SKILL_DIR/references/editorial-typography.md. These three editorial modes use the Skill's built-in local Cang'er Jinkai, and do not rely on remote fonts.

Mode selection

Explicit parameters take precedence. If the user has already provided -l/-i/-m/-v/-c, do not change the template on your own.

When the user has not specified parameters, route automatically based on content and goal:

  • -l: linear reading-oriented content, article summaries, long opinion pieces, reading cards
  • -i: structured knowledge, comparisons, frameworks, steps, data-dense content
  • -m: clearly exceeds the capacity of a single image, or the user explicitly wants a carousel / pagination / multi-page cards
  • -v: conceptual relationships, teaching breakdowns, causal chains, node networks
  • -c: narrative tension, character conflict, stage transitions, content that needs comic-style expression

If it is still ambiguous, default to -l, and clearly state in the result that this is a conservative choice.

Unified workflow

  1. Fetch the content and denoise it.
  2. Extract the title, core proposition, source information, and {name}。
  3. decide the mode.
  4. Read $SKILL_DIR/references/taste.md and the corresponding mode document. -l/-m/-i also Read $SKILL_DIR/references/editorial-typography.md。
  5. Use the mode document to guide generation of the complete HTML.
  6. First do the mode self-check, then do the root Skill unified quality check.
  7. Save the HTML to output_dir。
  8. Call $SKILL_DIR/scripts/capture.js to generate the PNG.
  9. Return the delivery paths; do not just say "generated".

Unified failure checks

Under any template, if the following situations occur, treat it as a failure and redo:

  • The title is crowded, obscures the body text, or intrudes into the main content area
  • The layout degenerates into an evenly divided card wall with no primary-secondary hierarchy
  • Whitespace is clearly out of control, looking like it was left unfinished rather than intentionally breathing
  • The body text or annotations are unreadable after zooming on mobile
  • The visual language does not match the content
  • The result has an obvious AI feel: default fonts, default shadows, default gradients, a uniform template feel, empty copy

First adjust the structure and hierarchy, then consider cutting content. Do not start by cutting down the amount of information.

Failure and recovery

  • URL fetch fails or an obvious paywall is encountered: immediately tell the user the reason the fetch failed, and ask them to paste the body text or provide a readable version; do not pretend you obtained the body text.
  • Content is too short: do not force a "full-page infographic"; switch to a lighter -l or -v, and explain why.
  • Content is too long: prefer switching to -m multi-card, or trim in layers while preserving information density; do not directly truncate the core conclusions.
  • Playwright / screenshot fails: first install dependencies according to the documentation and retry once; if it still fails, at least deliver the HTML and clearly state that the PNG was not generated.
  • The mode is obviously unsuitable: change the routing before generation; do not generate first and then use explanations to make up for a bad layout.

Delivery contract

Single-image mode (-l/-i/-v/-c）

  • Report the selected mode
  • Report the HTML path
  • Report the PNG path
  • If there is an arXiv ID, state that it has been written into the footer (only -l/-i）

Multi-card mode (-m）

  • Report the total number of cards
  • List each card's HTML path and PNG path in order
  • Give a very short summary for each card to make it easy to manually verify whether the pagination is reasonable

Template resources

Select the template based on the parameters, Read $SKILL_DIR/references/taste.md + the corresponding mode file, and execute step by step:

-l (default): long image

Read $SKILL_DIR/references/editorial-typography.md + $SKILL_DIR/references/mode-long.md, and execute according to its steps.

Template:$SKILL_DIR/assets/long_template.html

-i: Infographic

Read $SKILL_DIR/references/editorial-typography.md + $SKILL_DIR/references/mode-infograph.md, follow its steps.

Template:$SKILL_DIR/assets/infograph_template.html

-m: Multi-card

Read $SKILL_DIR/references/editorial-typography.md + $SKILL_DIR/references/mode-multi.md, follow its steps.

Template:$SKILL_DIR/assets/poster_template.html

-v: Visual notes

Read $SKILL_DIR/references/mode-sketchnote.md, follow its steps.

Template:$SKILL_DIR/assets/sketchnote_template.html

-c: Comic

Read $SKILL_DIR/references/mode-comic.md, follow its steps.

Template:$SKILL_DIR/assets/comic_template.html