ワンクリックで
card-generator
创建可下载的卡片式宣传网页/海报。当用户需要制作产品介绍卡片、教程卡片、知识科普卡片、小红书风格图文、PPT式滑动展示页时使用。支持多种预设模板(科技风、简约风、渐变风、暗黑风等),生成包含React+SVG的单HTML文件,内置ZIP打包下载功能。
メニュー
创建可下载的卡片式宣传网页/海报。当用户需要制作产品介绍卡片、教程卡片、知识科普卡片、小红书风格图文、PPT式滑动展示页时使用。支持多种预设模板(科技风、简约风、渐变风、暗黑风等),生成包含React+SVG的单HTML文件,内置ZIP打包下载功能。
Creates social media zodiac posters by generating HTML from Markdown design specs and capturing screenshots. Use when the user wants to create zodiac-themed vertical posters (1080x1440), design Chinese copywriting images, produce zodiac personality or horoscope content, or batch generate cover and content page sets.
使用 xiaohongshu-mcp 发布内容到小红书,发布成功后自动标记飞书记录为已发布。
Generates zodiac poster sets from Feishu Bitable records with automatic HTML rendering and screenshot capture. Use when the user wants to batch generate posters from spreadsheet data, process pending Feishu records, sync generated images back to Feishu, or check how many tasks are pending in the Bitable.
图文模板体检工具,用于优化海报/卡片导出模板的视觉质量。 当用户需要: (1) 检查模板的布局、对齐、间距问题 (2) 优化排版和字体设置 (3) 确保导出图片的视觉一致性和专业度 (4) 解决"看起来差点意思"但说不清的设计问题
Uploads images to Feishu Bitable attachment fields using a Python script (since lark-mcp does not support file uploads). Use when the user needs to upload generated poster images to Feishu records, batch upload cover and content pages, or update attachment fields.
Analyzes viral Xiaohongshu notes stored in Feishu Bitable by fetching full content via MCP and identifying viral elements. Use when the user wants to analyze why certain notes went viral, extract successful content patterns, or write analysis results back to Feishu.
| name | card-generator |
| description | 创建可下载的卡片式宣传网页/海报。当用户需要制作产品介绍卡片、教程卡片、知识科普卡片、小红书风格图文、PPT式滑动展示页时使用。支持多种预设模板(科技风、简约风、渐变风、暗黑风等),生成包含React+SVG的单HTML文件,内置ZIP打包下载功能。 |
生成精美的卡片式HTML网页,支持一键下载为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 | 图文排版、长文分享、个性语录 |
将用户提供的内容拆分为4-6张卡片:
view assets/templates/<template-name>.html
复制模板结构,替换以下内容:
<title> 标签内容// 每张卡片的基础结构
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>
);
确保包含以下依赖和下载逻辑:
<!-- 头部引入 -->
<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');
};
生成的HTML文件保存到 /mnt/user-data/outputs/ 并使用 present_files 工具展示给用户。