Claude Design Card: skill pack for Hermes Agent

What Claude Design Card does

Claude Design Card converts any text, web page or URL into a finished image card. It covers 14 formats in four families: platform covers such as a WeChat article header, a Bilibili or YouTube thumbnail and a Douyin vertical cover; image-text content cards for Xiaohongshu, step tutorials and comparisons; 1080 by 1080 social cards for quotes, big numbers and general use; and long-form editorial layouts named The Broadsheet, The Feature, The Reader and The Digest.

Every card follows one design system documented in DESIGN.md: a parchment background, Georgia serif type, a terracotta accent, and a ban on cold blue-grays, pure white and font-weight 700. The skill analyzes the content, picks a format, extracts key points without inventing facts, generates HTML and screenshots it to /tmp/claude-card-*.png with Playwright and Bun. The README is written in Chinese.

Key features

14 card formats in four families
Platform covers sized for WeChat, Bilibili, YouTube and Douyin
Content cards for Xiaohongshu, tutorials and comparisons
Long-form editorial layouts with auto-height screenshots
One documented design system with fixed color and type tokens
Screenshot script built on Bun and Playwright Chromium

When to use it

Make a cover image for an article or video from a block of text
Turn a data point into a big-number social card
Format a long article as a newspaper-style page image

Who it is for: Content creators who want consistent, publishable card images generated by an agent and who can read Chinese documentation.

How it fits with Hermes Agent

The repository carries a hermes-agent topic and installs with npx skills add, but the README presents it as a Claude Code skill and has no Hermes-specific steps.

How to install Claude Design Card

These commands are copied from the project's README. Check the repository for the latest steps before you run them.

npx skills add https://github.com/geekjourneyx/claude-design-card

Requirements: Bun 1.0 or later, Playwright 1.59 or later with Chromium, TypeScript 5.0 or later; Node.js only for npx skills add

Note: The documentation is in Chinese, and GitHub detects no license file even though the README says MIT.

FAQ

What is Claude Design Card?

Claude Design Card is an agent skill that generates design cards from text, web pages or URLs. It supports 14 formats, including platform covers, social sharing cards and long-form editorial layouts, and outputs PNG files.

Does Claude Design Card work with Hermes Agent?

The repository is tagged hermes-agent and installs with the npx skills add command. Its README describes it as a Claude Code skill and gives no Hermes-specific steps.

Is Claude Design Card free and open source?

GitHub reports no license for the repository, although the README describes it as MIT. Confirm with the LICENSE file or the author before reuse.