最近很多做数据平台和 AI 应用的朋友反馈同一个问题让大模型写代码生成图表流程倒是很顺数据也对得上但输出的图总有一股“工程草图”的味道。标题默认居中、配色靠系统自动循环、网格线又密又重、图例摆放随意——明明模型能力已经足够强为什么图表还是不好看原因其实不在模型而在约束。模型在生成图表代码时优化目标是“语法正确、数据正确”而不是“视觉正确”。如果你不告诉它什么样的图表算好看它就会默认把 matplotlib 的全部默认参数原样交给你。换句话说AI 出图质量的瓶颈已经从“会不会画”变成了“有没有标准”。这篇文章要分享的是用 Skill 的方式把“杂志级图表”的设计标准固化下来让大模型每次生成图表时自动遵守一套编辑规范。文章会从 Skill 的基本概念讲起给出完整的 SKILL.md、样式脚本和调用方式并附上常见问题与排查方法。读完你可以直接构建一个属于自己的图表 Skill让 AI 输出从“能用”变成“有设计感”。1. 这篇文章真正要解决的问题在展开代码之前先说清楚我们到底在解决什么问题。让大模型画一张图常规路径是把数据传给模型让它选一个合适的库写一段 Python 代码运行后输出图片。这条路绝大多数时候跑得通尤其在 pandas、matplotlib、seaborn 这些库已经非常成熟的情况下。真正让开发者和分析师头疼的是最后一步图出来了但只像一个“第一版草稿”。默认样式的图有非常明显的共性标题居中且字号偏大坐标轴四周都有黑色边框网格线密密麻麻多系列数据时颜色全部由系统循环图例位置随机边距贴着数据整个画面没有呼吸感。单独看每一处都不是错误合在一起就是“一眼默认”的效果。如果这张图要放进公众号、技术博客、年终汇报或者产品宣传页它就拿不出手。这里要给出一个明确判断AI 图表的视觉问题不是模型智力问题而是设计约束缺失问题。模型中大概率已经见过大量好看的图表但它没有动力在每次生成时主动调用那些设计规则。于是我们需要把设计规范转译成机器可执行的约束并且在每次生成任务前强制加载。Skill 正好是干这件事的载体。它不是一段随时会被忽略的 prompt而是一个包含指令、代码、资源和检查清单的完整模块。用 Skill 承载图表设计标准之后团队里任何人都可以让 AI 按同一套视觉语言出图而不是靠个人 prompt 技巧碰运气。这篇文章适合三类读者第一类经常让 AI 生成图表但觉得效果始终不够专业的开发者第二类正在研究 Agent、Skill、插件化能力扩展想找一个低门槛实践案例的人第三类需要为团队制定统一数据可视化规范的技术负责人。2. Skill 是什么给大模型装上“专业手艺”要理解这个方案先要理解 Skill 到底改变了什么。从产品形态上说目前主流大模型助手和 Agent 框架普遍提供了“技能Skill”机制。一个 Skill 通常就是一个文件夹里面至少有一个描述文件SKILL.md再加若干辅助脚本、模板或静态资源。AI 在收到用户指令后会先查看各个 Skill 的描述信息判断当前任务与哪个技能最匹配匹配成功后就加载对应的描述文档和脚本按里面的规范来执行。这个机制在不同产品里叫法不同可能是 Skills、技能插件或者“工具包”但核心思路是共通的把某一类任务的专家经验打包成模型可以按需加载的外部知识。2.1 一个 Skill 的物理结构一个最简 Skill 的目录通常长这样skills/editorial-chart/ ├── SKILL.md ├── chart_style.py ├── make_chart.py └── sample_data.csvSKILL.md 是入口负责告诉模型“你是谁、什么时候该用你、用你的时候要遵守什么规则”。chart_style.py 和 make_chart.py 是具体执行工具提供设计令牌和图表生成函数。sample_data.csv 是测试用的数据文件。如果把 AI 比作一位新入职的同事那么 SKILL.md 就是部门工作手册脚本就是标准模板和工具集。新同事不需要靠口头叮嘱慢慢积累经验而是拿到手册和模板就能按统一标准开始工作。这个类比在工程上非常准确Skill 解决的是“经验复用”和“输出一致性”而不是“单次正确”。2.2 Skill 与普通 Prompt 的本质区别很多人会问我不就是把要求写清楚放进 prompt 吗为什么要用一个文件夹两者的区别可以从复用性、可维护性和可执行性三个角度看对比维度普通 PromptSkill复用方式复制粘贴文本容易丢失和漂移目录固定调用时自动加载可维护性每次修改都要重新发送完整指令修改文件即可全局生效职责边界所有要求混在一段话里指令、代码、资源各归其位可执行性模型只能理解文字描述内含脚本模型可以直接调用团队协作聊天记录难以传承用 Git 管理成员可共享在可视化场景下这个差异尤其明显。设计规范如果只写在 prompt 里模型可能只记住一部分或者在不同对话里理解不一致。但如果把它写成 chart_style.py 里的设计令牌模型只需要导入这个模块就必然能拿到统一的配色、字体、网格和边距设置。文字会漂移代码不会。所以结论是图表审美是最适合用 Skill 去封装的一类任务因为设计规范的大部分内容可以固化为代码和配置而不是依赖模型每次随机发挥。3. 杂志感图表的可视化设计原则在写代码之前我们先定标准。所谓“杂志感”不是指花花绿绿的视觉冲击而是编辑级别的规范感信息层级清楚、色彩克制、排版整齐、留白充分读者一眼就能看到最重要的信息。3.1 色彩克制单张图不超过三种主色杂志编辑选图时有一条不成文规则一张图里做主色用的颜色要克制。主色一到两种重点强调色一种剩下的全部用中性灰。对比之下默认 matplotlib 的连续色板会在一张图里平铺十种颜色每根柱子的饱和度和亮度都不同视觉上不仅没有重点还会分散注意力。在实际项目里推荐准备一套“纸色 墨色 强调色 中性灰”的调色板例如背景用纸色正文用墨色最高值或趋势线用深红强调其余数据用灰。这样不管生成什么图表画面始终有一个明确的视觉锚点。3.2 字体层级标题是骨架注释是细枝杂志排版的核心是字体层级。标题应该简洁、加粗、左对齐坐标轴标签和正文保持常规字重图例、注释和数据标签使用更小的字号和弱化颜色。反过来如果所有文字都是同一个字号和字重画面就会变成一堵密不透风的文字墙。在 AI 生成图表时这一点最容易出问题。因为模型通常只关心文字是否出现不关心文字层级。所以需要在代码里显式设定标题字号、坐标轴标签字号、图例字号和刻度字号让每一个文本元素都处在它应该处的位置。3.3 网格与边框只保留必要的信息线默认图表的“凌乱感”主要来自网格和边框。杂志风格的惯用做法是y 方向保留轻量网格线方便读取数值x 方向不画网格上边框和右边框直接隐藏。这样图表的视觉重量集中在数据本身而不是矩形边框上。3.4 留白与对齐让画面有呼吸感最后一个原则是留白。图表的边距、标题与数据区之间的距离、坐标轴标签与刻度之间的间距都决定了画面的松弛度。tight_layout 和 bbox_inches 这些方法虽然只是技术手段但也是编辑感的一部分图四周至少要有一定比例的空白标题不要紧贴着图表顶部。把这四条原则转译成代码就是下一节的设计令牌。4. 环境准备与 Skill 目录设计动手之前先把环境准备好。本文的示例使用 Python 和 matplotlib运行环境是普通的开发机即可不依赖特定服务器。需要准备的内容Python 3.9 及以上版本matplotlib 3.7 及以上版本一个用来组织 Skill 的目录例如项目根目录下的 skills/。建议使用虚拟环境避免污染系统 Pythonpython -m venv venv source venv/bin/activate # Windows 下为 venv\Scripts\activate pip install matplotlib依赖安装完成后在项目根目录创建 skills/editorial-chart/ 目录并按下面的结构放置文件skills/editorial-chart/ ├── SKILL.md ├── chart_style.py ├── make_chart.py └── sample_data.csv这个结构里每个文件的职责如下SKILL.md模型的调用指南决定 Skill 什么时候被触发、生成图表时遵守什么规范chart_style.py统一设计令牌把配色、字体、网格、边框等视觉参数集中管理make_chart.py可执行的图表生成脚本支持从 CSV 读取数据并输出 PNGsample_data.csv测试数据用于验证 Skill 是否正常工作。设计 Skill 目录时有一个原则尽量把“规范”和“逻辑”分开。颜色、字体、间距等设计参数放进 chart_style.py而图表类型选择、数据读取、输出逻辑放进 make_chart.py。这样你想调整品牌色或字体时只需要改一个文件不会影响其他逻辑。5. 完整实现SKILL.md、样式脚本与图表生成这一节是核心。我们会依次创建三个文件每个文件给出完整代码和关键逻辑说明。5.1 编写 SKILL.md 能力描述SKILL.md 是 Skill 的入口模型会先读这个文件来判断是否使用该技能。它的格式大致分为两部分开头的 YAML frontmatter 和正文指导文档。--- name: editorial-chart description: 按杂志编辑标准生成高质量数据可视化图表。当用户需要美观的折线图、柱状图、散点图、面积图等分析型图表或要求图表适合文章、报告、博客配图时使用本技能。 --- # 杂志感图表生成指南 ## 适用场景 - 业务数据周报、年度报告配图 - 公众号、技术博客插图 - 产品分析文档配图 ## 生成图表时必须遵守的设计规范 1. 配色只使用 chart_style.py 中定义的调色板。单张图主色不超过 2 种 强调色 1 种其余使用中性灰。 2. 字体调用 set_magazine_style() 后必须确认中文字体正常显示 标题加粗且左对齐正文常规注释使用灰色小字。 3. 网格只保留水平网格线颜色使用浅灰隐藏上边框和右边框。 4. 留白使用 fig.tight_layout() 保证四周留白标题与数据区保持间距。 5. 高亮只对最关键的数据点例如最大值、转折点使用强调色 不要对全部数据使用高亮。 6. 文本坐标轴必须带单位标题表述完整必要时添加一行分析结论。 ## 使用步骤 1. 先确认数据字段、量纲和时间跨度。 2. 根据数据形态选择图表类型趋势用折线对比用柱状分布用散点或直方图。 3. 调用 chart_style.py 中的设计令牌生成图表代码。 4. 运行脚本并检查输出确认标题、单位、图例和中文字体没有问题。 5. 如果输出不符合规范返回修正并重新运行。SKILL.md 最关键的是 description 字段。它决定了模型何时触发这个技能所以要把触发条件写清楚出现“图表”“可视化”“美观”“柱状图”“文章配图”这些词时模型更有可能加载本技能。正文部分不要写成散文而是写成可执行的检查清单方便模型逐条对照。5.2 设计令牌chart_style.py设计令牌是整篇文章最核心的一小段代码。它把杂志感的视觉标准变成 Python 参数# 文件路径skills/editorial-chart/chart_style.py 杂志感图表的统一设计令牌所有图表生成代码必须引用本模块。 import matplotlib as mpl PAPER #FAF9F7 # 纸色背景 INK #1A1A1A # 墨色正文 ACCENT #B91C1C # 强调色仅用于最关键数据 MUTED #6B7280 # 中性灰用于非重点数据 GRID #E4E2DE # 浅灰网格 PALETTE [#B91C1C, #1A1A1A, #6B7280, #D4A373, #3A5A40] def set_magazine_style(): 将 matplotlib 全局样式切换为杂志编辑模式。 mpl.rcParams.update({ figure.facecolor: PAPER, axes.facecolor: PAPER, axes.edgecolor: INK, axes.linewidth: 0.8, axes.titlesize: 16, axes.titleweight: bold, axes.titlecolor: INK, axes.titlepad: 16, axes.labelsize: 11, axes.labelcolor: INK, xtick.color: INK, ytick.color: INK, xtick.labelsize: 9, ytick.labelsize: 9, grid.color: GRID, grid.linewidth: 0.6, grid.linestyle: -, legend.frameon: False, legend.fontsize: 10, font.family: [ Source Han Sans SC, Noto Sans CJK SC, Microsoft YaHei, PingFang SC, SimHei, sans-serif, ], axes.prop_cycle: mpl.cycler(colorPALETTE), })代码逻辑不复杂但每个参数都有明确目的PAPER 和 INK 定义了图表的背景和前景色让整张图有一个统一的“纸面”基调ACCENT 是唯一的强调色配合后面的高亮逻辑使用字体列表把常见中文字体按优先级排列。Source Han Sans SC 和 Noto Sans CJK SC 是 Linux 服务器上最常安装的开源中文字体Microsoft YaHei 和 PingFang SC 照顾 Windows 和 macOS 用户axes.prop_cycle 指定系列数据的循环色板。可以看到调色板里前三个就是主色和辅助色后面的颜色要控制使用频率。5.3 图表生成脚本make_chart.py有了设计令牌再写一个可以直接运行的图表生成脚本让模型可以把数据交给这个脚本完成出图# 文件路径skills/editorial-chart/make_chart.py 从 CSV 读取数据并生成杂志风格柱状图。 import argparse import csv import matplotlib.pyplot as plt from chart_style import set_magazine_style, ACCENT, MUTED def load_csv(path): 读取两列 CSVlabel 列和 value 列。 with open(path, encodingutf-8-sig) as f: rows list(csv.DictReader(f)) return rows def make_bar_chart(labels, values, title, note): 生成一张杂志风格的柱状图自动高亮最大值。 set_magazine_style() fig, ax plt.subplots(figsize(8, 4.5), dpi160) bars ax.bar(labels, values, colorMUTED, width0.6) max_index values.index(max(values)) bars[max_index].set_color(ACCENT) ax.set_title(title, locleft, pad16) ax.set_ylabel(数值) ax.grid(axisy) ax.spines[top].set_visible(False) ax.spines[right].set_visible(False) if note: ax.text(0, 1.02, note, transformax.transAxes, fontsize9, colorMUTED) fig.tight_layout() return fig if __name__ __main__: parser argparse.ArgumentParser(description生成杂志风格柱状图) parser.add_argument(--data, requiredTrue, helpCSV 文件路径) parser.add_argument(--title, default数据概览, help图表标题) parser.add_argument(--note, default, help图表右上角的分析结论) parser.add_argument(--output, defaultchart.png, help输出图片路径) args parser.parse_args() rows load_csv(args.data) labels [r[label] for r in rows] values [float(r[value]) for r in rows] fig make_bar_chart(labels, values, args.title, args.note) fig.savefig(args.output, bbox_inchestight) print(fchart saved to {args.output})这段代码的重点在 make_bar_chart 函数默认柱子全部是中性灰只有最大值那一根会被改成强调色整个图表因此有了主次网格只开 y 轴方向上边框和右边框被隐藏画面立刻干净了很多标题通过 locleft 左对齐再配合 pad 拉开与数据区的距离这就是杂志排版的常见处理。5.4 创建测试数据为了让脚本可以独立验证在同一个目录下创建 sample_data.csvlabel,value 1月,320 2月,410 3月,390 4月,530 5月,610 6月,720读取时使用了 encodingutf-8-sig这是为了避免 Windows 下 Excel 导出的 CSV 中文乱码问题。utf-8-sig 会自动去掉开头的 BOM 标识兼容性更好。5.5 调用与接入方式如果你的 AI 客户端支持技能目录机制把 skills/editorial-chart 放到它规定的技能目录下即可。之后在对话中直接给出任务例如读取 skills/editorial-chart/sample_data.csv 使用 editorial-chart 技能生成一张杂志风格的柱状图 标题为“月度营收趋势”并添加一句分析结论。如果你的 AI 工具暂时不支持目录加载还有一个变通方案把 SKILL.md 的内容粘贴到系统提示词里再告诉模型“脚本文件位于 skills/editorial-chart/ 目录”让它在生成代码时读取并使用文件。这种方式的完整度比目录机制略低但设计规范依然能生效。不同产品的技能目录位置和加载方式存在差异具体路径以你所使用工具的官方文档为准。理解“指令 脚本 资源”的结构迁移到任何平台都只是路径和格式问题。6. 运行与效果验证创建好四个文件后先用命令行直接验证脚本本身能跑通cd skills/editorial-chart python make_chart.py \ --data sample_data.csv \ --title 月度营收趋势 \ --note 6月营收最高环比增长明显 \ --output monthly_revenue.png如果一切正常终端会输出chart saved to monthly_revenue.png此时打开图片检查是否符合杂志感的判断标准背景是否为纸色标题是否左对齐、加粗网格是否只有水平方向上边框和右边框是否消失最高的柱子是否被强调色高亮其余柱子是否为中性灰中文字体是否正常显示没有出现方框或乱码图的四周是否有足够留白标题和数据区没有挤压重叠。脚本能跑通只说明代码正确视觉检查通过才说明 Skill 的设计规范真正生效。建议把这五条作为团队内部验收图表的标准。如果运行失败不要急着改代码。先确认 CSV 文件与脚本是否在同一个目录再确认 Python 版本和 matplotlib 是否安装成功最后看报错信息是否和字体或编码有关。大多数情况下失败原因集中在文件路径、编码和字体这三类问题上。7. 常见问题与排查方法把实际使用中最容易踩到的坑集中列在下面问题现象可能原因排查方式解决方案中文全部显示为方框系统缺少中文字体执行 fc-list :langzh 查看已安装字体安装 Noto Sans CJK SC 或 Source Han Sans检查 font.family 是否包含回退字体图片背景不是纸色未调用 set_magazine_style()检查代码中是否 import 并调用该函数在创建 figure 前调用 set_magazine_style()标题、图例、标签重叠figsize 过小或缺少布局调整查看图片分辨率与布局状态增大 figsize调用 fig.tight_layout() 或 constrained_layout网格线过密或过粗网格参数被默认值覆盖打印 mpl.rcParams 中 grid 相关配置在 rcParams 中统一设置 grid.color、linewidth、axis多系列时颜色混乱手动指定了过多颜色检查是否使用统一色板只使用 PALETTE 中的颜色主色不超过两种CSV 读取中文乱码文件编码不是 UTF-8在命令行查看文件编码类型使用 utf-8-sig 读取编辑时另存为 UTF-8 with BOMSkill 没有被模型触发description 写得过于笼统查看模型的日志或思考过程在 description 中加入更多触发词图表、可视化、柱状图、美观、报告配图等这里单独说明一下字体问题的排查路径。在 Linux 服务器上中文字体缺失是最常见的问题。先执行 fc-list :langzh 确认系统有没有中文字体如果没有用系统自带的包管理器安装 fonts-noto-cjk 或同类中文字体包安装后清除 matplotlib 字体缓存即可。在 Windows 和 macOS 上通常不需要额外安装但要注意 matplotlib 的字体缓存偶尔会滞后遇到新字体不生效时可以删除 matplotlib 的缓存目录再重试。8. 最佳实践与工程建议把 Skill 用到真实项目里除了代码本身还有几个工程层面的建议值得记住。8.1 设计令牌与业务品牌隔离一个通用的图表 Skill 只应该包含通用设计规范不要写死某个业务的品牌色。实际项目中可以让 chart_style.py 提供默认调色板再通过环境变量或配置文件覆盖其中的主色和强调色。这样业务方可以按自己的品牌规范出图而通用版式、字体、网格逻辑完全复用。8.2 字体资源要在生产环境提前内置如果图表生成任务最终会跑在服务器、容器或定时任务里中文字体必须在部署时显式安装。很多 CI 环境和最小化镜像不包含中文字体第一次在本地运行没问题换到生产环境就出现整图方框。更稳妥的做法是把常用开源中文字体放入项目 resources/fonts 目录在代码中显式注册字体文件路径而不是依赖系统默认字体。8.3 Skill 也需要版本管理SKILL.md、样式脚本和测试数据应该放进 Git 仓库。修改配色或字体后最好更新 SKILL.md 中的版本号或说明并在 description 中标注行为变化。这样模型加载到新版本时不会因为描述与行为不一致而产生混乱。8.4 保持 Skill 职责单一一个 Skill 只做好一件事。图表 Skill 负责出图报告 Skill 负责把图表组合成文档数据分析 Skill 负责指标计算。如果试图把所有能力塞进一个 Skilldescription 会越来越长模型的触发准确率和执行准确率都会下降。8.5 注意数据安全边界图表 Skill 通常要读取数据文件。在真实业务中应确保 AI 只能访问被授权的工作区和数据集生成过程优先在本地或内网环境执行不要在不可信的公共渠道上传敏感明细。输出图片时也要留意图片本身可能携带数据信息发布前要经过脱敏和审核。8.6 用自动化测试保护样式回归图表样式很容易在迭代中悄悄退化。可以写一个简单的单元测试跑一次 make_chart.py然后检查输出图片的尺寸、格式甚至抽样统计关键像素颜色是否还在调色板范围内。这一步成本很低但能防止“改了个字体所有图表都变默认风格”的回归事故。9. 总结与后续可以做的事写到这里最初的问题已经回答完了AI 图表不够好看不是模型不行而是缺少被强制加载的设计约束。Skill 提供了一种非常优雅的解决方式——把配色、字体、网格、留白这些视觉规范固化成指令和代码让模型在每次出图的时候都按统一标准执行。从实践角度看本文给出的 editorial-chart Skill 是一个最小可用的起点。你可以在它的基础上扩展折线图、散点图、面积图函数可以把 matplotlib 的设计令牌迁移到 Plotly 或 ECharts也可以在 SKILL.md 里加入一份“输出前自检清单”让模型在返回图片前先对照规范检查一遍。有一点需要提醒AI 产品迭代非常快不同平台的 Skill 目录位置、加载方式、description 写法可能会有差异。但“指令 脚本 资源”这套打包思想是稳定的理解了它无论平台怎么变你都能快速迁移。建议先把这份示例在自己本机跑通形成肌肉记忆再结合你的业务数据做定制。收藏这篇文章等你真正开始搭图表 Skill 的时候直接照着目录结构和代码改就行。