Awesome-omni-skill card-generator

创建可下载的卡片式宣传网页/海报。当用户需要制作产品介绍卡片、教程卡片、知识科普卡片、小红书风格图文、PPT式滑动展示页时使用。支持多种预设模板（科技风、简约风、渐变风、暗黑风等），生成包含React+SVG的单HTML文件，内置ZIP打包下载功能。

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/card-generator" ~/.claude/skills/diegosouzapw-awesome-omni-skill-card-generator && rm -rf "$T"

manifest: skills/development/card-generator/SKILL.md

source content

Card Generator Skill

生成精美的卡片式HTML网页，支持一键下载为PNG图片压缩包。

核心能力

将用户内容转换为3:4比例的卡片组
生成单HTML文件（React + Tailwind + SVG）
内置JSZip下载功能，导出高清PNG

模板选择

根据用户需求选择合适的模板，模板文件位于

assets/templates/

模板	文件	适用场景
科技渐变	`tech-gradient.html`	产品发布、技术教程、工具介绍
简约清新	`minimal-clean.html`	知识科普、生活方式、读书笔记
暗黑终端	`dark-terminal.html`	开发者工具、命令行教程、黑客风
活力手绘	`vibrant-pop.html`	备忘录风格、手写笔记、涂鸦
商务专业	`business-pro.html`	企业介绍、数据报告、行业分析
极光玻璃	`glass-morphism.html`	潮流前沿、设计趋势、艺术感
轻奢黑金	`luxury-gold.html`	高端品牌、VIP邀请、会员卡
几何包豪斯	`geometric-bauhaus.html`	艺术展览、设计理论、复古海报
自然清新	`nature-fresh.html`	有机食品、生活方式、环保话题
复古蒸汽波	`retro-vaporwave.html`	音乐活动、游戏宣发、怀旧主题
立体投影	`shadow-stacked.html`	图文排版、长文分享、个性语录

使用流程

1. 分析用户内容

将用户提供的内容拆分为4-6张卡片：

封面卡：标题 + 副标题 + 品牌标识
内容卡：核心信息点，每卡1个主题
结尾卡：总结/行动召唤/联系方式

2. 选择并读取模板

view assets/templates/<template-name>.html

3. 基于模板生成

复制模板结构，替换以下内容：

```
<title>
```
标签内容
各 SVG 组件的文字和图形
配色方案（如需自定义）
卡片数量和布局

4. SVG卡片设计规范

// 每张卡片的基础结构
const CardComponent = () => (
  <svg viewBox="0 0 300 400" className="w-full h-full">
    {/* 背景 */}
    <rect width="300" height="400" fill="..." />
    
    {/* 装饰元素 */}
    <circle cx="..." cy="..." r="..." fill="..." opacity="0.1" />
    
    {/* 主标题 - y位置约在 80-150 */}
    <text x="150" y="120" textAnchor="middle" 
          fill="..." fontSize="28" fontWeight="900">
      标题文字
    </text>
    
    {/* 内容区域 - y位置约在 180-300 */}
    <g transform="translate(30, 180)">
      {/* 内容元素 */}
    </g>
    
    {/* 底部信息 - y位置约在 350-380 */}
    <text x="150" y="370" textAnchor="middle" 
          fill="..." fontSize="14">
      底部说明
    </text>
  </svg>
);

5. 必需的下载功能

确保包含以下依赖和下载逻辑：

<!-- 头部引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

// 下载函数核心逻辑
const handleDownload = async () => {
  const zip = new JSZip();
  const cardIds = ['card-1', 'card-2', ...]; // 所有卡片ID
  
  for (const [index, id] of cardIds.entries()) {
    const svg = document.querySelector(`#${id} svg`);
    const svgBlob = new Blob([new XMLSerializer().serializeToString(svg)], 
                            {type: 'image/svg+xml;charset=utf-8'});
    const url = URL.createObjectURL(svgBlob);
    
    const img = new Image();
    await new Promise(r => { img.onload = r; img.src = url; });
    
    const canvas = document.createElement('canvas');
    canvas.width = 600; canvas.height = 800; // 2x缩放
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2);
    ctx.drawImage(img, 0, 0);
    
    const blob = await new Promise(r => canvas.toBlob(r, 'image/png'));
    zip.file(`card-${index + 1}.png`, blob);
    URL.revokeObjectURL(url);
  }
  
  const content = await zip.generateAsync({type: 'blob'});
  saveAs(content, 'cards.zip');
};

设计原则

视觉层次：标题 > 核心内容 > 装饰元素
留白充足：内容不超过卡片面积的60%
配色一致：同一套卡片使用统一色系
字体大小：标题24-32px，正文12-16px，说明10-12px
移动优先：确保在手机上可正常查看

输出位置

生成的HTML文件保存到

/mnt/user-data/outputs/

并使用

present_files

工具展示给用户。