Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Claude Design Card (claude-design-card)

Turns any text, page or URL into an HTML card in Claude/Anthropic's design language and screenshots it to PNG with Playwright.

Design & UIIntermediate★ 464⑂ 46AI score 9/10Last updated: May 27, 2026

What it does

  • Takes plain text, a webpage or a URL (arXiv, WeChat, X/Twitter are fetched via r.jina.ai), distills the key claim, numbers and pull quote, then writes a fully self-contained HTML card using Claude's palette (Parchment #f5f4ed, Terracotta #c96442, Georgia serif headlines, never font-weight 700).
  • Offers 14 formats in 4 families: platform covers (900×383, 1280×720, 1080×1440, 1080×1920), editorial content cards, square share cards (quote / big-number / generic), and long-form layouts (Broadsheet, Feature, Reader, Digest).
  • Asks before building: it proposes 1 primary + 2 alternate formats and asks at most 3 questions (platform, reading vs. sharing, brand color) before generating.
  • Enforces a strict SVG system — five functional types (ornamental rules, display quote marks, geometric illustration, data viz, pattern texture), max 3 types per card, no pie charts, no 3D, aria-hidden required.
  • Finishes with bun scripts/screenshot.ts for the PNG, including optional QR-code zones and --full-page auto-height mode, plus documented fallbacks when scraping or Chromium fails.

Who it's for

  • Content marketers and solo creators who need consistent covers and carousel cards without a designer.
  • Multi-platform publishers (WeChat, Xiaohongshu, Bilibili/YouTube, Douyin/Reels/Stories).
  • Researchers and newsletter writers turning long articles or reports into shareable visual summaries.

Examples

  1. Paste an article URL and ask for a YouTube thumbnail → content is scraped, the 1280×720 cover is recommended, HTML is saved for preview, and replying "screenshot" produces the PNG.
  2. Paste a how-to draft and ask for a step card → a 1080×1440 Practical Toolkit layout with 2–4 action blocks.
  3. Paste report metrics and ask for a square stat card → 1080×1080 with an oversized number, animated stroke-dasharray chart and a QR code in the corner.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/geekjourneyx/claude-design-card/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the SKILL.m folder from the GitHub repo geekjourneyx/claude-design-card into my ~/.claude/skills/claude-design-card/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/geekjourneyx/claude-design-card.git ~/.claude/skills/claude-design-card

⚠ This is a third-party skill. Check the source repository before installing.

  1. Install Bun, then run bunx playwright install chromium so screenshots can render.
  2. Create the skills folder if needed: mkdir -p ~/.claude/skills
  3. Clone the repo: git clone https://github.com/geekjourneyx/claude-design-card.git ~/.claude/skills/claude-design-card
  4. Verify the folder contains SKILL.md, scripts/screenshot.ts, references/design-spec.md and an assets/ directory with the font files.
  5. Restart Claude Code and try a prompt like "make an info card from this text" or "turn this URL into a cover image".
  6. If fonts fail to load, make sure @font-face uses an absolute file:///.../assets/... path — relative paths break inside the Playwright sandbox.
  7. Output defaults to /tmp/claude-card-[keyword].html and the matching .png.
View source on GitHub ↗