diegosouzapw 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 工具展示给用户。