skills.rest
geekjourneyx
geekjourneyxCOMMUNITY
Explore all skills by this author →
Website𝕏@seekjourneyGitHub

claude-design-card

Generate HTML cards from text, web pages, or URLs with Playwright screenshots.

458|47|Updated Apr 25, 2026
Search Tags:#web design#content design#card generation#design card#Claude/Anthropic
One-click install
npx skills add https://github.com/geekjourneyx/claude-design-card --skill claude-design-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design-card
Source: https://github.com/geekjourneyx/claude-design-card/tree/main
Command: npx skills add https://github.com/geekjourneyx/claude-design-card --skill claude-design-card

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows users to convert text, web pages, or URLs into beautifully designed cards that adhere to Claude/Anthropic design standards, streamlining the process of creating visually appealing content for various platforms.

Core Features & Use Cases

  • Design Card Generation: Converts text, web pages, or URLs into professional design cards for platforms such as WeChat, Weibo, Douyin, and more.
  • Custom Formats: Supports 14 different card formats, each with a unique aesthetic standard.
  • Design System Compliance: Ensures all cards are consistent with Claude/Anthropic's design system, including color schemes, typography, and layout.
  • Use Case: A user can generate a WeChat article cover, a Douyin full-screen vertical cover, or a long-form article layout card in seconds.

Quick Start

Use the claude-design-card skill to generate a WeChat article cover with dimensions 900x383 by providing the input HTML file 'article.html'.

Frequently Asked Questions about claude-design-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert web page content into a WeChat article cover?▼

To convert web page content into a WeChat article cover, you can generate an HTML card from a URL and specify the 900x383 dimension. The system analyzes the content and outputs a screenshot adhering to Claude/Anthropic design standards.

What platforms are supported for generating design cards from text?▼

Generating design cards from text supports platforms like WeChat, Weibo, and Douyin. It offers 14 different card formats, including full-screen vertical covers and long-form article layouts, tailored to each platform's specifications.

Do I need Playwright to output HTML cards as screenshots?▼

Yes, you need Playwright installed to output HTML cards as screenshots. The dependency is required to capture the generated HTML card designs and convert them into image files for immediate use.

What is the best way to ensure my generated cards follow a consistent design system?▼

The best way to ensure consistent design cards is to use a generation process that enforces a strict design system. This skill automatically applies Claude/Anthropic standards for color schemes, typography, and layout across all 14 supported formats.

Are there limitations when creating vertical full-screen covers for Douyin?▼

Creating vertical full-screen covers for Douyin is fully supported through its specific card format. Limitations mainly involve ensuring your input text or URL content fits the vertical aspect ratio without breaking the applied typography and layout standards.

Can I customize the typography and color schemes in the generated design cards?▼

Customization of typography and color schemes is bound to the Claude/Anthropic design system standards. The generated cards automatically apply these predefined aesthetics to ensure professional and consistent visual output across all platforms.

Related Skills

Explore More Content & Communication Skills→
okwindsokwinds
50

headless-web-viewer

Render JavaScript-heavy webpages and extract visible text with Playwright.

Community
Intermediate
xianmingyaoxianmingyao
1

social-media-publish

Automates publishing formatted drafts to WeChat Official Accounts, Baijiahao, and Xiaohongshu via browser automation.

Community
Intermediate
caoronglincaoronglin
2

MCP Fetch

Retrieve and extract text or raw HTML from URLs with robots.txt compliance.

Community
Basic
zivtechzivtech

graphic-design-executor

Transform design-planner specifications into SVG and HTML assets.

Official
Advanced