企业官网建设流程全解析

最近很多做数据平台和 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.csv

SKILL.md 是入口，负责告诉模型“你是谁、什么时候该用你、用你的时候要遵守什么规则”。chart_style.py 和 make_chart.py 是具体执行工具，提供设计令牌和图表生成函数。sample_data.csv 是测试用的数据文件。

如果把 AI 比作一位新入职的同事，那么 SKILL.md 就是部门工作手册，脚本就是标准模板和工具集。新同事不需要靠口头叮嘱慢慢积累经验，而是拿到手册和模板就能按统一标准开始工作。这个类比在工程上非常准确：Skill 解决的是“经验复用”和“输出一致性”，而不是“单次正确”。

2.2 Skill 与普通 Prompt 的本质区别

很多人会问：我不就是把要求写清楚放进 prompt 吗，为什么要用一个文件夹？

两者的区别可以从复用性、可维护性和可执行性三个角度看：

在可视化场景下，这个差异尤其明显。设计规范如果只写在 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/。

建议使用虚拟环境，避免污染系统 Python：

python -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 读取数据并输出 PNG；
• sample_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(color=PALETTE), })

代码逻辑不复杂，但每个参数都有明确目的：

• 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): """读取两列 CSV：label 列和 value 列。""" with open(path, encoding="utf-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), dpi=160) bars = ax.bar(labels, values, color=MUTED, width=0.6) max_index = values.index(max(values)) bars[max_index].set_color(ACCENT) ax.set_title(title, loc="left", pad=16) ax.set_ylabel("数值") ax.grid(axis="y") ax.spines["top"].set_visible(False) ax.spines["right"].set_visible(False) if note: ax.text(0, 1.02, note, transform=ax.transAxes, fontsize=9, color=MUTED) fig.tight_layout() return fig if __name__ == "__main__": parser = argparse.ArgumentParser(description="生成杂志风格柱状图") parser.add_argument("--data", required=True, help="CSV 文件路径") parser.add_argument("--title", default="数据概览", help="图表标题") parser.add_argument("--note", default="", help="图表右上角的分析结论") parser.add_argument("--output", default="chart.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_inches="tight") print(f"chart saved to {args.output}")

这段代码的重点在 make_bar_chart 函数：默认柱子全部是中性灰，只有最大值那一根会被改成强调色，整个图表因此有了主次；网格只开 y 轴方向，上边框和右边框被隐藏，画面立刻干净了很多；标题通过 loc="left" 左对齐，再配合 pad 拉开与数据区的距离，这就是杂志排版的常见处理。

5.4 创建测试数据

为了让脚本可以独立验证，在同一个目录下创建 sample_data.csv：

label,value 1月,320 2月,410 3月,390 4月,530 5月,610 6月,720

读取时使用了 encoding="utf-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. 常见问题与排查方法

把实际使用中最容易踩到的坑集中列在下面：

这里单独说明一下字体问题的排查路径。在 Linux 服务器上，中文字体缺失是最常见的问题。先执行 fc-list :lang=zh 确认系统有没有中文字体，如果没有，用系统自带的包管理器安装 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 负责指标计算。如果试图把所有能力塞进一个 Skill，description 会越来越长，模型的触发准确率和执行准确率都会下降。

8.5 注意数据安全边界

图表 Skill 通常要读取数据文件。在真实业务中，应确保 AI 只能访问被授权的工作区和数据集，生成过程优先在本地或内网环境执行，不要在不可信的公共渠道上传敏感明细。输出图片时也要留意，图片本身可能携带数据信息，发布前要经过脱敏和审核。

8.6 用自动化测试保护样式回归

图表样式很容易在迭代中悄悄退化。可以写一个简单的单元测试，跑一次 make_chart.py，然后检查输出图片的尺寸、格式，甚至抽样统计关键像素颜色是否还在调色板范围内。这一步成本很低，但能防止“改了个字体，所有图表都变默认风格”的回归事故。

9. 总结与后续可以做的事

写到这里，最初的问题已经回答完了：AI 图表不够好看，不是模型不行，而是缺少被强制加载的设计约束。Skill 提供了一种非常优雅的解决方式——把配色、字体、网格、留白这些视觉规范固化成指令和代码，让模型在每次出图的时候都按统一标准执行。

从实践角度看，本文给出的 editorial-chart Skill 是一个最小可用的起点。你可以在它的基础上扩展折线图、散点图、面积图函数，可以把 matplotlib 的设计令牌迁移到 Plotly 或 ECharts，也可以在 SKILL.md 里加入一份“输出前自检清单”，让模型在返回图片前先对照规范检查一遍。

有一点需要提醒：AI 产品迭代非常快，不同平台的 Skill 目录位置、加载方式、description 写法可能会有差异。但“指令 + 脚本 + 资源”这套打包思想是稳定的，理解了它，无论平台怎么变，你都能快速迁移。

建议先把这份示例在自己本机跑通，形成肌肉记忆，再结合你的业务数据做定制。收藏这篇文章，等你真正开始搭图表 Skill 的时候，直接照着目录结构和代码改就行。