This project provides a Claude Code skill for generating polished, publishable design cards from text, web pages, or URLs. It offers 14 distinct formats for platform covers, social sharing, and editorial layouts, all adhering to the Claude/Anthropic design system's aesthetic. The tool benefits users by automating the creation of visually consistent, high-quality digital assets.

How It Works

The system converts arbitrary input into pixel-accurate PNG cards using Bun as the runtime and Playwright for headless browser rendering. It applies a unified design language, featuring a warm Parchment background, Georgia serif font, and Terracotta accents, defined via specific design tokens. The workflow involves generating HTML based on input and design rules, then capturing it as an image, ensuring a consistent aesthetic across all outputs.

Quick Start & Requirements

• Installation: Recommended: npx skills add https://github.com/geekjourneyx/claude-design-card. Local development: bun install then bunx playwright install chromium.
• Prerequisites: Bun (≥ 1.0), Playwright (≥ 1.59), TypeScript (≥ 5.0). Node.js is only required for the npx skills add command.
• Documentation: Examples and format specifications are detailed in the README.

Highlighted Details

• Supports 14 formats across four families: Platform Covers (e.g., WeChat, YouTube), Content Cards (e.g., Xiaohongshu, Tutorials), Social Sharing Cards (e.g., Quotes, Data), and Long-Form Editorial Layouts (e.g., Broadsheet, Feature).
• Enforces a strict Claude/Anthropic design system, using specific color tokens like --pg Parchment and --tc Terracotta, and fonts (Georgia, system-ui), avoiding specific color values like #ffffff and font-weight: 700.
• Integrates as an AI Skill, enabling natural language prompts for automated content analysis, format selection, and image generation.
• Offers flexible screenshotting, including fixed dimensions and --full-page for auto-height layouts.

Maintenance & Community

• Author: geekjourneyx (GitHub: geekjourneyx, Twitter: @seekjourney, Personal: jieni.ai).
• Community: WeChat public account "极客杰尼". No Discord, Slack, or roadmap links are provided in the README.

Licensing & Compatibility

• License: MIT License.
• Compatibility: Permissive MIT license allows free use, modification, and distribution, including for commercial applications.

Limitations & Caveats

The README does not specify any known limitations, bugs, or alpha status. The primary dependency on the Bun runtime may represent a less common development environment compared to Node.js.