claude-design-card
Claude设计语言驱动的卡片生成技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-design-card。 它的用途是：Claude设计语言驱动的卡片生成技能 完整的 Skill 内容见：https://321skill.com/skills/claude-design-card/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我把这篇公众号文章做成一张公众号首图封面”，它会自动分析文章标题和核心信息，生成900×383的卡片并保存到 /tmp/ 目录。若说：“把这段数据做成方形数据大字卡”，它会提取关键数字，生成包含超大数字和进度条的卡片，尺寸1080×1080。若说：“把这篇长文做成 The Broadsheet 编辑排版”，它会生成800px宽的三栏报纸风格卡片，包含 Drop Cap 和版刻装饰。
介绍
claude-design-card 是一个专为 Claude Code 设计的 AI Skill，能够将任意文本、网页链接或数据快速转化为符合 Claude/Anthropic 设计系统的精美卡片。它解决了内容创作者和社媒运营人员频繁制作封面、分享图、长文排版时的重复劳动与审美不一致问题——只需一句话描述，即可自动生成像素精准的 PNG 图片。
使用方式非常简单：安装后，在 Claude Code 中通过自然语言触发，例如“帮我把这篇文章做成小红书图文笔记卡片”。技能会自动分析内容，选择合适的格式（14种预设尺寸和风格），提炼关键信息，生成 HTML 模板，并调用 Playwright 截图输出至 /tmp/ 目录。整个过程无需手动调整设计参数，所有卡片统一使用 Parchment 暖色基调、Georgia 衬线字体、Terracotta 强调色。
适合内容创作者、社媒运营、营销专员、UI设计师等需要频繁制作视觉卡片的人群。尤其适合微信公众号、小红书、B站、抖音、视频号等平台的内容发布场景，以及长文编辑排版（如 The Broadsheet 报纸风格）或数据可视化卡片（如数据大字卡）。
使用建议：注意不同平台对尺寸和内容安全区的要求（如抖音全屏竖版需避开顶部、底部和右侧 UI 区域）；输出为静态 PNG，不可编辑源文件，因此建议在文案和设计确认后再生成；如需调整颜色或字体，目前仅支持 Claude 设计系统，暂不支持自定义主题。
核心特点
与 Canva、Figma 等通用设计工具或单一片段生成器相比，claude-design-card 彻底将设计决策交给 AI 和一套统一的设计系统——14 种格式共用同一套设计 Token，无需手动对齐风格；同时通过自然语言驱动，从内容分析到截图输出全自动完成，尤其适合批量、高频的卡片制作场景。
注意事项
仅支持静态 PNG 输出，无法导出可编辑源文件（如 SVG/PSD），且设计系统固定为 Claude 风格，暂不支持自定义颜色、字体或布局。
常见问题
如何自定义卡片的颜色或字体？
目前不支持自定义，所有卡片严格遵循 Claude 设计系统（Parchment 暖色、Georgia 衬线、Terracotta 强调色）。如需调整，可修改本地用于生成的 HTML 模板。
支持哪些平台和尺寸？
支持 14 种格式，覆盖公众号首图（900×383）、视频号竖封面（1080×1440）、B站/YouTube 横封面（1280×720）、小红书图文笔记（1080×1440）、金句分享卡（1080×1080）等，详见 README 格式表。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-design-card/raw/index.md 读取 claude-design-card 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-design-card/raw/index.md（查看排版版本）