企业官网建设流程全解析

前阵子一直在研究怎么让大模型输出的图表“能看又能打”，试过各种提示词模板，结果生成的图表要么是默认配色的“程序员审美”，要么元素堆叠得毫无呼吸感。后来发现问题的关键不在提示词，而在引入一个可复用的能力单元——Skill。它能把晦涩的图表审美规则封装成一套明确的步骤和规范，让AI真正做出有杂志感的可视化作品。

本文不从零讲大模型基础，而是聚焦于一个具体问题：如何设计并应用一个“杂志感图表Skill”，让 AI 在生成图表时自动遵循规范，产出兼具信息密度和设计美感的可视化结果。文章覆盖 Skill 的原理、目录结构、指令编写、Python 实战案例以及常见排错，适合正在研究大模型可视化应用、AI 办公提效或者对数据展示审美有要求的开发者与内容创作者。

1. 为什么AI生成的图表总是“够用但不好看”

1.1 AI图表常见的三种通病

先看三个很常见的现象：

• 默认参数堆叠：AI 生成 matplotlib 或 ECharts 代码时，经常直接使用默认配色、默认网格线、默认图例位置，结果就是满屏艳色加黑框，信息之间没有层级。
• 要点不突出：明明是一份销售趋势数据，AI 生成的图表却把每个系列画得一样粗、一样色，读者无法第一时间感知重点。
• 装饰与信息失衡：有的图表为了“好看”加了大量阴影、渐变、装饰性元素，反而干扰数据阅读；有的则完全裸奔，没有任何标注和数据来源说明。

这些问题的根源，都是因为大模型尽管知道很多图表知识，但缺少一套统一的“审美决策规则”。你问它“画个好看点的图”，它只能凭概率挑一个中間结果；而如果你给它一套明确的风格规范和决策流程，它能稳定输出接近人类设计师水准的图表。

1.2 什么是Skill

Skill 可以理解为一种“面向大模型的结构化能力包”，它通常由三部分组成：

• 指令文档（SKILL.md）：告诉大模型在什么场景下启用这个能力，以及具体的执行步骤。
• 参考资料与模板：可选的示例图表、色板、字体规范、代码模板。
• 执行脚本或资源：可选的辅助脚本，比如自动加载数据、计算色值、导出图片。

可以把它理解成“大模型的外挂操作手册”。人不擅长把模糊的审美经验讲清楚，但 Skill 可以；大模型不擅长稳定复用一个风格，但配合 Skill 的强制步骤，它每次都能按规范走。

1.3 Skill解决图表审美问题的思路

杂志感图表 Skill 的核心逻辑是：把设计规范转换为可执行的决策步骤。它不再依赖用户反复描述需求，而是在 Skill 文件里明确回答四个问题：

1. 什么是“杂志感”？（视觉定义）
2. 拿到数据后第一步做什么？（数据预处理）
3. 如何选择图表类型？（匹配规则）
4. 如何排版与配色？（输出控制）

当大模型被如何安装或引入 Skill 后，它在生成图表代码前会先将数据读一遍，再依据 Skill 中的规则选择图表类型和视觉方案，最后输出带有规范参数的代码。整个过程类似“设计师先看数据，再定风格，最后落稿”。

2. 环境准备：搭建轻量实验环境

2.1 运行环境

本文实验不依赖复杂框架，核心环境如下：

• Python 3.9 及以上版本，建议本地虚拟环境。
• 需要matplotlib和pandas库，用于数据读取与绘图。
• 需要一个大模型对话客户端，且该客户端支持 Skill 或类似的自定义指令加载机制。
• 推荐使用 Jupyter Notebook 或 VS Code 进行代码调试。

如果本地没有装绘图库，可执行安装命令：

pip install matplotlib pandas

如果你的大模型客户端不支持自定义 Skill，退而求其次的方法是把 Skill 内容作为“系统提示词”的一部分注入对话，后面也会演示这种兼容用法。

2.2 Skill目录结构

下面是一个最小的“杂志感图表Skill”目录结构：

skill-beauty-chart/ ├── SKILL.md ├── assets/ │ ├── palette.json │ └── font_guide.md └── templates/ ├── line_chart_template.py └── bar_chart_template.py

• SKILL.md是核心指令，负责定义触发条件和执行流程。
• assets/palette.json存放推荐的配色方案。
• assets/font_guide.md说明中文和数字的字体使用规范。
• templates/下放两个可复用的绘图模板，减少大模型每次从头写代码的负担。

不同平台对 Skill 目录的约定可能略有差异，建议先查看你所用工具的官方文档，但整体“指令 + 资源 + 模板”的结构是通用的。

2.3 准备测试数据

为了演示效果，我们构造一份模拟数据，内容为某产品线近一年的月度销售额与增长率。

import pandas as pd import numpy as np months = [f"{i}月" for i in range(1, 13)] np.random.seed(42) sales = np.random.normal(2000, 300, 12).cumsum() + 5000 growth = np.random.normal(0.03, 0.02, 12) + 0.05 df = pd.DataFrame({ "月份": months, "销售额": sales.round(0).astype(int), "增长率": growth.round(4) }) print(df.head(12))

这是一份很普通的业务数据，普通图表能一眼看懂，但很难留下深刻印象。接下来我们会先让 AI 直接用默认方式绘制，再通过 Skill 生成杂志感版本，对比观感差异。

3. 拆解“杂志感图表Skill”的核心设计

3.1 杂志感的本质

杂志感不是简单意义的“好看”，而是几个明确视觉原则的共同作用：

• 信息层级分明：标题、副标题、数据正文、注释与数据来源，每一层都有清晰的字体和字号差异。
• 大面积留白：图表不挤满画布，坐标轴区域与四周留出足够边界。
• 克制的配色：主色一般不超过两种，辅助色用于弱化非关键数据，不采用高饱和彩虹色。
• 细腻的细节：比如网格线极浅、坐标轴刻度简洁、数据标签字号偏小；必要时用小箭头或文字说明直接标注结论。

3.2 SKILL.md的指令分层

设计 SKILL.md 时，把规范拆成三个层级。

第一层：触发条件与角色。

# Skill: Magazine-style Data Visualization You are a designer and>## Workflow 1. Read the user's data carefully. List the variables and their types. 2. Determine the single message (main takeaway) of this chart. 3. Pick a chart type based on the "Chart Type Decision Rules". 4. Load the palette from assets/palette.json and font guide from assets/font_guide.md. 5. Generate Python/matplotlib code with EXACT layout rules below. 6. After generating code, run a self-check: is the main point visually emphasized?

第三层：输出规范（硬性参数）。这里不应写“尽量用浅色网格线”，而要给出可执行的具体值。

## Output Rules - canvas size: 10 x 6 inches, dpi=150 - font: title >= 16pt, axis tick <= 11pt, annotation <= 10pt - grid: axis='y', linestyle='--', linewidth=0.6, alpha=0.35 - palette: use ONLY the imported palette, never use default rainbow colors - emphasize: the key series must use the first color; secondary series use muted tones - annotations: no more than 3 text annotations - chart area left margin: 12% of width - source note: bottom-left small text with data source

3.3 配色与字体规范

杂志感配色的俗规则是“少而准”。一个能稳定使用的方案是：

• 主强调色：钴蓝色#0057B7或 深墨绿#0F6B61
• 辅助色：浅灰蓝#A8BCCB、暖灰#8A8D8F
• 数据弱化色：极浅灰#D9D9D9
• 背景：纯白或#F7F7F5
• 文字：标题用#1A1A1A，注释用#6A6A6A

把这个色板写成 JSON，大模型就可以直接读取：

{ "primary": "#0057B7", "secondary": "#A8BCCB", "muted": "#8A8D8F", "faint": "#D9D9D9", "background": "#FFFFFF", "text": "#1A1A1A", "annotation": "#6A6A6A" }

中文场景下，字体是很多人忽略的点。如果系统找不到中文字体，matplotlib 会输出方块乱码。可以在 Skill 的font_guide.md中写明：

# Font Guide - Preferred Chinese font: "Microsoft YaHei", "SimHei", "Noto Sans CJK SC" - Preferred English font: "Helvetica", "Arial", or same font as Chinese - Always set font.family with a Chinese-safe font list. - Use `plt.rcParams["font.sans-serif"] = [...]` before plotting.

3.4 图表类型选择逻辑

杂志感图表 Skill 的另一项核心能力是强制 AI 按逻辑选图表类型，而不是默认折线图。可以给出这样的决策规则：

• 只展示一个数值随连续时间变化 → 折线图，避免多个 y 轴混用。
• 对比少数几个分类的大小关系 → 条形图（横向优先）。
• 展示部分与整体的构成 → 堆叠条形图或饼图，但饼图不超过 5 个扇区。
• 展示分布或离群点 → 散点图 + 浅色趋势线。
• 两变量相关性 → 散点图 + 回归线，而不是折线图。

将这些规则以列表形式放入 SKILL.md 的附录，AI 在生成图表前先“选类型”，然后才“画代码”，能显著减少图表语义错误。

4. 完整实战：从普通图表到杂志感图表

4.1 创建Skill文件

先创建目录结构：

mkdir -p skill-beauty-chart/assets mkdir -p skill-beauty-chart/templates touch skill-beauty-chart/SKILL.md

将前面的 SKILL.md 内容整理成一份完整文件：

# Skill: Magazine-style Data Visualization You are a designer and>import matplotlib.pyplot as plt import pandas as pd # 假设 df 已经存在 plt.figure(figsize=(10, 6)) plt.plot(df["月份"], df["销售额"], marker="o") plt.title("销售趋势") plt.grid(True) plt.tight_layout() plt.show()

运行结果虽然没大错，但存在这些问题：

• 使用 matplotlib 默认蓝色 #1f77b4，标题字号和正文字号区分度低。
• 网格线是全坐标轴且透明度较高，容易干扰阅读。
• 没有任何标注，读者需要自己总结趋势拐点。

4.3 使用Skill生成杂志感图表

在支持 Skill 的客户端中，我们可以这样下达指令：

请使用 skill-beauty-chart，绘制 df 中销售额随月份变化的图表。 关键信息：说明下半年增长放缓。

AI 会先读数据，再依据 Skill 产出类似下面的代码：

import matplotlib.pyplot as plt import matplotlib as mpl import pandas as pd # 字体与颜色配置 mpl.rcParams["font.sans-serif"] = ["Microsoft YaHei", "SimHei", "Noto Sans CJK SC"] mpl.rcParams["axes.unicode_minus"] = False # 颜色直接来自 assets/palette.json PRIMARY = "#0057B7" SECONDARY = "#A8BCCB" MUTED = "#8A8D8F" FAINT = "#D9D9D9" TEXT = "#1A1A1A" ANNOTATION = "#6A6A6A" # 画布 fig, ax = plt.subplots(figsize=(10, 6), dpi=150) # 主折线 ax.plot( df["月份"], df["销售额"], color=PRIMARY, linewidth=2.4, marker="o", markersize=4, label="销售额" ) # 背景网格：只有 y 轴，浅色虚线 ax.grid(axis="y", linestyle="--", linewidth=0.6, alpha=0.35, color=FAINT) ax.set_axisbelow(True) # 去掉上、右边框 for spine in ["top", "right"]: ax.spines[spine].set_visible(False) # 弱化左、下边框 ax.spines["left"].set_color(FAINT) ax.spines["bottom"].set_color(FAINT) # 标题层级 ax.set_title("月度销售趋势：下半年增长放缓", fontsize=16, color=TEXT, loc="left", pad=20) ax.set_xlabel("月份", fontsize=11, color=ANNOTATION) ax.set_ylabel("销售额", fontsize=11, color=ANNOTATION) # 刻度 ax.tick_params(axis="x", labelsize=10, colors=ANNOTATION) ax.tick_params(axis="y", labelsize=10, colors=ANNOTATION) # 关键信息标注（不超过3处） ax.annotate( "6月起增速放缓", xy=(6, df.loc[5, "销售额"]), xytext=(3, df["销售额"].max() * 0.9), fontsize=10, color=ANNOTATION, arrowprops=dict(arrowstyle="->", color=ANNOTATION, lw=0.8) ) # 图例与数据来源 ax.legend(frameon=False, fontsize=10, loc="upper left") ax.text(0.02, -0.12, "数据来源：模拟业务数据，仅用于教程演示", transform=ax.transAxes, fontsize=9, color=ANNOTATION) fig.tight_layout() plt.show()

这段代码体现了 Skill 核心规则的几个关键点：

• 用font.sans-serif列表确保中文字体回退正确。
• 只显示 y 轴网格，且通过alpha=0.35降低存在感。
• 用spines细调边框，去掉视觉噪音。
• 标题左对齐并加大字号，形成明确的信息层级。
• 只保留一处结论标注，避免信息过载。

4.4 运行结果对比

对比两张图，杂志感版本的变化非常直接：

这组对比就是 Skill 的价值：不是 AI 不能变得“好看”，而是需要一套可复用的审美指令让它每次都尽量做到这种程度。

5. 把Skill扩展到其他可视化工具

5.1 前端 ECharts 场景

如果图表最终要嵌入 Web 页面，你可以仿照上面的 SKILL.md，把输出规范换成 ECharts 的 option 结构。关键是在 Skill 中写明：

• 必须关闭或弱化splitLine。
• 使用axisLabel控制字号与颜色。
• 间距、内边距数值化，比如grid: {left: 48, right: 24, top: 48, bottom: 32}。
• 图例不显示边框，位置放在图表区域内的右上角。

示例片段：

option = { grid: { left: 48, right: 24, top: 48, bottom: 32 }, color: ['#0057B7', '#A8BCCB'], xAxis: { type: 'category', axisLine: { lineStyle: { color: '#D9D9D9' } }, axisTick: { show: false }, axisLabel: { color: '#6A6A6A', fontSize: 10 } }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#D9D9D9', opacity: 0.5 } } }, series: [{ type: 'line', data: sales, smooth: false, lineStyle: { width: 2.4 }, symbolSize: 4 }] };

5.2 Excel 与 BI 工具

即使不用大模型生成代码，你也可以把 Skill 中的视觉规范迁移到 Excel 或 Power BI：

• 固定一个“品牌色”色板，不直接使用 Excel 默认主题色。
• 将网格线颜色改为浅灰，或直接去掉网格线。
• 图表标题设置为左对齐、加粗、字号大于图表内的所有文字。
• 在图表右下角用文本框添加数据来源。

很多 BI 工具的“样式模板”功能本质上也是在手动实现一套 Skill 的视觉规则。

6. 常见问题与排查思路

使用 Skill 生成杂志感图表时，最容易遇到下面几类问题：

排查时不要逐个提示词去试，而是要回到 Skill 文件本身检查：

1. 触发条件是否太模糊？用户是否根本没有触发这个 Skill。
2. 输出规则是否足够具体？像“浅一点”“好看一点”这类词，大模型无法稳定执行。
3. 是否缺少模板？给 AI 一份可复用的代码模板，比让它每次重新组织代码更稳定。
4. 字体配置是否齐全？中文环境中字体永远是高优先级问题。

7. 最佳实践与工程建议

如果要把这种能力真正用到日常工作中，下面几点值得认真考虑。

7.1 从一份高质量图表反推Skill

最快的 Skill 编写方法，不是凭空想规范，而是先找一份你认为“很有杂志感”的图表，然后反推它的所有参数：字号、颜色、间距、网格、坐标轴格式、注释密度。把这些参数记录下来，就得到了 Skill 的初稿。拿 5 到 10 份优秀作品反推，你会得到一套稳定的风格签名。

7.2 把Skill做成版本化资产

Skill 文件也是代码资产。建议将skill-beauty-chart放入 Git 仓库管理，每次修改配色或字体规范都提交一次，并记录修改原因。这样当图表风格出现漂移时，你可以快速回滚到某个稳定版本。

7.3 善用模板代码

在 Skill 的templates/目录中维护 3 到 5 个常用模板：折线图、条形图、散点图、堆叠条形图、环形图。AI 生成代码时优先基于模板修改，而不是从头写。模板的好处是参数经过了人工校验，不容易出现语法错误或样式遗漏。

7.4 结合数据预处理步骤

很多图表难看不是因为画图参数，而是数据本身没有整理。Skill 的 Workflow 中可以增加一个“数据检查”环节：

• 确认是否有缺失值或异常值。
• 确认数据类型（数值、字符串、日期）是否已正确解析。
• 确认单位是否统一。

在画图前先做数据清洗，是杂志感图表稳定的重要前提。这一条在 pandas 数据分析流程中同样适用。

7.5 不要神化Skill

说明一下边界：Skill 能提升图表的美感和一致性，但无法替代真正的问题定义。如果数据本身没有核心观点，再好看的图表也只是“空壳”。好的可视化流程仍然是：先想清楚要传递什么信息，再选择图表类型，最后用 Skill 控制视觉呈现。把 Skill 理解为“审美执行层”，而不是“分析决策层”，会让整个流程更健康。

写到这里，一个能稳定产出杂志感图表的 Skill 已经从原理到代码都跑通了。你可以先拿模拟数据做实验，再逐步把 Skill 迁移到真实业务报表中，积累几版配色和模板后，AI 出图的质量会越来越像成品设计稿。如果以后积攒了更多案例，也可以把配色规范和模板数量扩充成个人专属的可视化资产库。