点击👇关注我 学习更多AI知识
大家好，我是予贝
熟悉我的小伙伴可能知道，我的自媒体之路是从小红书起步的。
当时仅用两个月就涨粉 3700+，让我深刻体会到——在小红书，首图就是流量的敲门砖！
为了做出吸睛的首图，我每次都要花大量时间在稿定设计上反复调整。不仅时间成本高，最近会员到期后更是让我开始思考：能不能用 AI 编程打造一个更高效的解决方案？
没想到，AI 编程的强大超乎想象！短短两天时间，我就完成了一个功能完善的 Markdown 转图片工具。从内容排版到视觉呈现全部自动化，现在做图效率直接起飞～
开源 Github 地址：https://github.com/clcmj/md2pic
系统功能如下：
🎯 程序概述
md2pic 是一个专业的 Markdown 转图片工具，提供实时预览、可视化编辑和高质量图片导出功能。特别适用于创建社交媒体内容，如小红书、微博、朋友圈等平台的图文内容。
📱 界面布局
程序采用现代化的三栏布局设计：
🛠️ 核心功能模块
1. Markdown 编辑器 （右侧面板）
基础编辑功能
-
实时编辑： 支持标准 Markdown 语法的实时输入
-
语法高亮： 提供 Markdown 语法的可视化高亮显示
-
自动保存： 编辑内容的本地缓存和恢复
文件操作
- 文件导入：
- 支持 .md 和 .markdown 格式
- 拖拽导入功能
- 文件选择器导入
- 文件导出： 将编辑内容导出为
。md文件
快捷操作
- 顶部工具栏的"导入"和"导出"按钮
- 支持拖拽文件到编辑器区域
2. 可视化画布 （中央区域）
实时渲染
-
即时预览： Markdown 内容实时渲染为可视化元素
-
元素类型支持：
- 标题 （H1， H2， H3）
- 段落文本
- 粗体文本
- 列表 （有序、无序）
- 引用块
- 代码块
- 表格
拖拽编辑
-
元素选择： 点击选中任意可视化元素
-
拖拽移动： 鼠标拖拽调整元素位置
-
尺寸调整： 8 个方向的缩放手柄
-
智能对齐： 拖拽时显示对齐辅助线
-
就地编辑： 双击元素进入文本编辑模式
交互操作
- 键盘快捷键：
- Delete - 删除选中元素
- Ctrl+Z - 撤销操作
- Ctrl+Y - 重做操作
- Enter - 保存编辑
- Escape - 取消编辑
页面导航
- 顶部显示当前页码和总页数
- "上一页"/"下一页"按钮快速切换
3. 功能控制面板 （左侧）
左侧采用图标式菜单设计，包含 7 个主要功能模块：
3.1 添加元素面板 📝
-
文本元素： 添加标题、段落、列表等
-
快速插入： 预设常用元素模板
-
位置控制： 指定新元素的插入位置
3.2 页面分割面板 📄
-
智能分页： 基于 Markdown 标题层级自动分页
-
分割级别选择：
- H1 分割： 不分页，所有内容在一页
- H2 分割： 遇到 H1 或 H2 时分页
- H3 分割： 遇到 H1、H2 或 H3 时分页
-
自动分页开关： 可开启/关闭自动分页功能
-
页面预览： 显示分页结果和页面数量
3.3 背景设置面板 🎨
- 背景类型：
- 纯色背景
- 渐变背景 （线性/径向）
-
渐变方向： 8 种渐变方向选择
-
颜色选择器： 支持自定义颜色
-
装饰效果：
- 边框设置 （宽度、颜色、样式、圆角）
- 阴影效果 （偏移、模糊、颜色、透明度）
- 图案装饰 （点状、网格、斜线）
- 装饰框架 （简单、优雅、现代、复古）
- 随机背景： 一键生成随机美观背景
3.4 画布格式面板 📐
- 预设格式：
- 小红书： 1080×1440
- 微博： 1080×1080
- 微信朋友圈： 1080×1260
- Instagram: 1080×1080
- Twitter: 1200×675
-
自定义尺寸： 支持任意宽高设置
-
画布缩放： 10%-200%的缩放比例
-
实时预览： 格式变更即时生效
3.5 样式设置面板 🎨
- 主题配色：
- 粉色系、蓝色系、绿色系
- 紫色系、橙色系
- 全局样式：
- 字体大小调节 （0.5x-3x）
- 行高设置 （紧密、正常、宽松）
- 文字对齐 （左对齐、居中、右对齐）
- 标题颜色设置：
- H1 标题颜色
- H2 标题颜色
- H3 标题颜色
- 粗体文字颜色
- 实时预览： 样式调整即时反馈
3.6 导出功能面板 📥
- 单页导出：
- 当前页面导出为 PNG 图片
- 高质量截图 （2x 分辨率）
- 自动文件命名
- 批量导出：
- 所有页面打包为 ZIP 文件
- 批量处理进度显示
- 统一文件命名规则
- 导出设置：
- 格式选择： PNG、JPEG、WebP
- 质量控制： 0.1-1.0 可调节
- 分辨率倍数： 0.5x-3x
- 可选添加水印
3.7 AI 设置面板 🤖
- API 配置：
- API Key 设置
- 服务器地址配置
- 模型选择
-
连接状态： 显示 AI 助手启用状态
-
配置验证： 检查 API 配置有效性
4. AI 内容生成 （右下角）
功能特点
-
极简设计： 纯净的任务输入界面
-
直接覆盖： AI 生成内容直接替换编辑器内容
-
智能提示： 优化的内容结构生成
使用流程
- 在输入框中描述需要生成的内容
- 点击发送按钮
- AI 生成的内容自动覆盖编辑器原有内容
- 新内容立即在画布上可视化显示
AI 优化特性
-
结构合理： 每级标题下内容不会过多
-
适合分页： 内容分布均匀，便于自动分页
-
中文优化： 专门针对中文内容生成
5. 元素编辑面板 （动态显示）
当选中画布上的元素时，左侧面板会自动切换为元素编辑模式：
内容编辑
-
文本内容： 直接修改元素文本内容
-
元素类型： 显示当前元素类型
样式控制
-
字体大小： 滑动条精确调节
-
文字颜色： 颜色选择器
-
背景颜色： 可选背景色设置
-
文字对齐： 左对齐、居中、右对齐
位置和尺寸
-
坐标设置： 精确的 X/Y 坐标控制
-
尺寸调整： 宽度和高度设置
-
快捷调整： +/- 按钮微调
快捷操作
-
删除元素： 一键删除当前元素
-
复制样式： 快速复制样式到其他元素
🎯 使用场景
1. 社交媒体内容创作
-
小红书图文： 利用预设尺寸创建精美笔记
-
微博长图： 制作信息丰富的长图内容
-
朋友圈分享： 创建吸引眼球的图文内容
2. 专业文档可视化
-
技术文档： 将技术内容转换为易读图片
-
教学材料： 制作课程内容图片
-
工作汇报： 创建专业的汇报图片
3. 个人知识管理
-
学习笔记： 美化笔记内容
-
知识卡片： 制作知识点总结卡片
-
思维导图： 创建结构化内容图片
🚀 高级功能
1. 撤销重做系统
- 保存最近 50 个操作状态
- 支持复杂的编辑历史管理
- 智能历史记录保存
2. 智能布局算法
- 动态计算内容密度
- 自适应调整行间距
- 智能垂直居中对齐
- 防止内容溢出
3. 高性能渲染
- 实时拖拽预览
- 防抖处理优化
- 虚拟化渲染支持
4. 多格式导出
-
高质量图片生成
-
批量处理能力
-
自定义导出参数
作为一个不懂前端、连 React 都没摸过的小白，这个工具的实现全靠——和 AI 疯狂对话！
从 Markdown 解析到图片渲染，所有代码都是 AI 写的（甚至帮我 debug）。整个过程就像有个 24 小时在线的编程导师，硬是把我这个“前端萌新”抬到了终点线
现在不动手，更待何时？
靠 AI 两天撸出一个工具——你的生产力，只差一次尝试！
我们坚信AI编程的门槛会变得越来越低，开源了AI编程手册，包含网站，小程序，APP等多种开发案例，希望对大家有帮助，需要的扫码获取