Markdown 转视觉卡片 Skill

将 Markdown 文章转换为适合在社交媒体（小红书、公众号）发布的视觉卡片。

工作流程

1. 读取并解析 Markdown

读取用户指定的 Markdown 文件，解析以下内容：

• 标题层级 (H1, H2, H3)：作为卡片的主标题或章节标题
• 段落文字：正文内容
• 列表项：要点展示
• 引用块：强调内容
• 图片链接：Obsidian 格式 ![[filename.png]] 或标准 Markdown ![alt](path)
• 分隔线 (---)：作为分页标记

2. 内容分页策略

将内容智能分页，生成多张卡片：

封面卡片：

• 使用文章 H1 标题作为主标题
• 添加副标题或文章摘要（前100字）
• 使用醒目的视觉设计

内容卡片：

• 每个 H2/H3 标题开启一个新卡片
• 每个卡片容纳 3-5 个要点或 150-250 字正文
• 在内容自然断裂处（段落结束、列表结束）分页

结尾卡片（可选）：

• 可添加二维码占位、关注引导等

3. 视觉设计风格

使用现代简约风格，特点：

• 配色：使用温暖的配色方案，主色调为暖橙色 (#FF6B6B) 和米白色 (#FFF9F5)
• 字体：标题使用粗体无衬线字体，正文使用易读字体
• 布局：竖版 9:16 比例（推荐 1080x1920px）
• 元素：
  • 圆角卡片容器
  • 柔和的阴影效果
  • 适当的留白和间距
  • 图标装饰（使用 emoji 或简单图形）

4. 创建视觉稿

使用 pencil MCP 工具创建 .pen 文件：

// 使用 batch_design 操作创建卡片
// 每张卡片是一个 frame，竖版布局
// 内部包含：
//   - 标题文本 (type: "text")
//   - 正文文本 (type: "text")
//   - 装饰元素 (type: "rectangle" 或 "frame")
//   - 图片占位 (type: "frame" 带图片填充)

卡片结构示例：

Card Frame (1080x1920)
├── Header Frame
│   └── Title Text (H1/H2)
├── Content Frame
│   ├── Paragraph Text
│   └── Bullet Points (if any)
└── Footer Frame (optional)
    └── Branding/Date

5. 输出文件

• 创建 mdout/ 目录（如果不存在）
• 保存 .pen 文件到 mdout/<article-name>.pen
• 生成预览截图（如可能）

使用示例

用户输入：

"帮我把 article.md 转成小红书卡片"

执行步骤：

1. 读取 article.md
2. 解析内容结构
3. 分页规划（封面 + 3个内容页）
4. 使用 pencil 创建 4 张竖版卡片
5. 保存到 mdout/article-cards.pen
6. 告知用户文件位置

设计规范

尺寸规范

• 卡片尺寸：1080 x 1920 px（9:16 竖版）
• 边距：左右 80px，上下 120px
• 内容区最大宽度：920px

字体规范

• 主标题：48-64px，bold，行高 1.3
• 副标题/章节标题：36-40px，bold，行高 1.4
• 正文：28-32px，regular，行高 1.6
• 小字/注释：24px，regular

配色方案

• 背景色：#FFF9F5（米白）或 #FFFFFF（纯白）
• 主色：#FF6B6B（暖橙）用于标题、强调
• 辅色：#4ECDC4（青绿）用于装饰
• 文字色：#2C3E50（深蓝灰）
• 次要文字：#7F8C8D（灰色）

间距规范

• 标题与内容间距：40px
• 段落间距：24px
• 列表项间距：16px
• 卡片内边距：80px

图片处理

Obsidian 图片链接格式：

• 格式：![[Pasted image YYYYMMDDHHMMSS.png]]
• 实际路径：通常位于 附件/ 或 Attachments/ 文件夹
• 处理方式：在卡片中创建图片占位区，标注原文件名

注意事项

1. 内容长度控制：每张卡片文字不宜过多，确保可读性
2. 标题突出：使用颜色、大小对比让标题醒目
3. 呼吸感：保持足够的留白，避免拥挤
4. 一致性：所有卡片保持风格统一
5. 中文优化：中文字号适当增大，行高适当增加