企业官网建设流程全解析

📖 介绍 📖

上周写一份技术方案，卡在最不想干的环节上：画架构图。让 AI 编程助手顺手画一张，它倒是痛快，三秒出图——清一色的圆角方框、默认蓝紫渐变、箭头从框边正中戳出来，节点一多就互相压字。拿出去给同事看，对方第一句是「这是 Visio 画的吧」。

后来在 GitHub Trending 上碰到一个专门治这事的东西：一个图示设计技能，作者是设计师 Cathryn Lavery，简介一句话就把话说完了——「你的设计师不会讨厌的编辑级图示」。它的做法不是再训练一个画图模型，而是给 Claude Code、Codex、Copilot 这些编码助手塞一份 Markdown 设计规范：配色令牌、排版层级、导线画法、45 类图示模板，全写清楚，让助手照章作图。仓库 4 月上线，到现在 5.6 万 star，MIT 协议。

我把这台机器上原本装着的那份技能翻了出来，从零实测了一遍：写 HTML、跑自检脚本、导出 SVG、截图。两份亲手生成的图示都在文里，哪一步最容易卡住、它到底适不适合你，看完心里就有数了。全程不涉及部署，照着能复现。

📢注意：本文内容为个人学习笔记，仅供参考。附：读者须知

🏡 演示环境 🏡

• 🐧 系统：Debian 12
• 🟢 运行时：Node.js 24
• 🌐 网络：国内网络

📒 从设计规范到实测产物 📒

🧭 先看它反对什么

打开它的 README，第二行就一句口号：无阴影、无 Mermaid 味。这句话其实是在点名一类常见产物——你在技术文档里见过的那种图：每个框都带一层投影，配色是 IDE 默认色，箭头乱糟糟地从框中间穿过去，字体大小全靠助手心情。

它给的判断很直接：问题不在模型不会画，而在没人告诉它该画成什么样。

同样的思路在它自己的哲学一节里写得更狠：最高质量的操作通常是删除。一个节点就是一个独立想法，两个永远同时出现的节点应该合并成一个；一条连线必须携带信息，如果关系从排版上已经看出来了，就把线删掉。示意图的完成标准不是「该加的都加上了」，而是「再也没什么可删」。

它还规定了一个密度目标：4/10。技术上完整，但不需要一份说明书才能看懂。超过 9 个节点，大概就该拆成两张图。

🎨 核心机制：一份能改的设计令牌表

技能的本体是一份 Markdown，外加 60 多份分类参考文件。真正管住视觉的是references/style-guide.md里的一张令牌表——所有颜色不写十六进制值，而是按语义角色称呼：paper（纸面底色）、ink（正文与主描边）、accent（焦点色，一张图最多用一到两处）、muted（次级文字与默认箭头）、link（接口调用类箭头）。

这样做的好处很实在：改皮肤只改一张表。把accent从烧橙换成你们品牌的蓝，全篇图示的焦点色一起变，不用逐个文件翻。它的引导流程还支持从你网站 URL 反推配色和字体，装完之后每张图自动贴着你项目的视觉走。

令牌表底下挂着一张对比度契约，这条最见功夫：每个令牌都要过 WCAG（Web 内容无障碍指南，一套通用的对比度可读性标准）检查，普通文字对所在背景至少 4.5:1，大字号 3:1，箭头描边这类必要非文字标记 3:1。仓库里有专门的对比度校验脚本，CI 不过就红。

拿它自己的数据举例：默认亮色皮肤里，焦点色是#bf4520，在纸面上实测 4.71:1——刚刚过线。为什么不用更亮的原品牌橙？因为那个色在纸面上只有 2.86:1，当箭头或标签不够看，于是把同一个色相压暗到达标为止。这种「为了可读性主动牺牲鲜艳度」的取舍，是设计师才会抠的细节。

🧰 45 类图示，先选语义再选版式

技能里给了一张 45 类的选型表，逻辑不是「你要画什么图形」，而是「你要表达什么语义」。它把选择分成两步：先看行为语义，再定视觉类型。

表下面还有三条经验法则，其中两条是劝你别画的：如果三列表格能说清同样的事，就用表格；只有一个形状的「图」，把那句话写出来就行。

这个「先劝退」的设计贯穿整个技能。它的使用场景一节明确列了不适合的清单：随手画个 unicode 示意图、罗列一堆东西、只有属性的前后对比——这些都不该用图示。

🔌 不挑宿主：一段 Markdown 打天下

它的安装方式值得单独说。整个技能的交付物就是 Markdown，不是插件包、不是二进制。仓库名是 diagram-design，一条命令装到本地：

npx skillsaddcathrynlavery/diagram-design

一条命令，装到任何一个读 Agent Skills（一种「模型按需加载的 Markdown 指令」开放约定）的宿主里。Claude Code、Codex、Copilot、Cursor、Factory Droid 都支持；不换宿主的时候，同一份技能在 GPT、Claude、Gemini 乃至本地模型上都能跑。

它的 README 把各宿主的插件市场命令也列全了，Claude Code 和 Copilot 装完还能拿到自动更新和斜杠命令。作者的说明很直白：官方构建只出自这个仓库。

对我这种同时在几个助手里切换的人，这点比图好看不好看更实际——画图规范第一次成了可跨工具迁移的资产，而不是锁死在某个编辑器的插件里。

🖥️ 技能里到底装了什么

翻出这台机器上装着的技能，本地版本号 2.6。先说结论：从一句需求到一张能贴进文档的图，全在本地闭环，没有一次网络请求。

本地目录里 SKILL.md 一份 394 行，references/下 63 份分类参考，scripts/下 5 个 Python 脚本，assets/下 217 个预生成的 HTML 示例。没有依赖安装步骤，没有构建环节。

翻了份参考文件的体量感受一下：references/primitive-icons.md104KB，references/type-line.md43KB，references/export.md30KB。这不是一个「提示词模板」级别的项目。

✍️ 动手写一张 HTML

按它的输出规范，产物是一个自包含 HTML 文件，SVG 内联，样式写在页面<style>里。我在测试目录写了一张最简架构图：左边三个编码助手，中间一个技能层，右边三条出口（本地文件、导出、导入旧格式重画）。

要点只有一个：别自己发明颜色，全部用令牌表的语义角色。

✅ 让自检脚本先过一遍

这是我最欣赏的一环。技能自带scripts/self_check.py，跑一条命令：

python3 scripts/self_check.py my-diagram.html

我第一版直接被它拦下，报了四个问题：

• svg 1 title must be its first child
• svg 1 needs non-empty title and desc
• svg 1 title/desc IDs must be diagram-prefixed, never bare
• svg 1 aria-labelledby must name title then desc

逐条都是无障碍（accessibility，让读屏软件能读出图的内容）约定：SVG 的<title>和<desc>必须是前两个子元素，ID 要带图名前缀，aria-labelledby要先指 title 再指 desc。补上之后脚本回OK，退出码 0。

它检查的不止这些：单文件安全性（禁止远端资源、禁止可执行属性）、绘制内容是否跑出 viewBox、带动画时还要过结构契约。等于把「别做出打不开的图」变成了机器判定。

📤 把图导出成 SVG

python3 scripts/export_svg.py my-diagram.html my-diagram.svg

这个脚本解决的是三个导出时的老坑：类样式图的<style>规则要嵌一份进 SVG，否则所有形状退化成黑色；<defs>里的 marker、渐变 ID 要加文件前缀，否则多张图塞进同一个文档时url(#arrow)会指到别人的声明；HTML 专有属性语法要改写成合法 XML。

导出完 4KB 的 SVG，可以直接贴进支持内联 SVG 的文档。

📸 截图确认成品

本地有 Chromium，一条命令出图：

chromium--headless--no-sandbox--screenshot=diagram.png --window-size=960,540file:///tmp/ddtest/diagram.html

全程无网络、无字体下载、无构建。下面这两张就是这次实测的产物，第一张是技能接入示意，第二张是装技能前后的效果对比。

⚠️ 顺手发现的一个版本差

实测过程中比对了本地和上游仓库的 SKILL.md，394 行里有两处不一样，都是小改动，但能看出维护节奏：

本地那份写「快速 unicode 图示 → 用 wiretext」，上游已经改成「用一个独立的纯文本工具，本技能不内置」；导出一节，上游新增了scripts/export_png.py并明确「导出是手动操作，别主动产文件」，本地还没有这个脚本。

顺手还查了「45 类图示」这个数字的出处：README 现行写 45，但 CHANGELOG 的 v2.6 记录和画廊编号还停在 44——新类型加上去了，几处文档没完全同步，属于常见的口径时差，装的时候以 README 为准即可。

上游最后一次提交是 10 月 16 日，内容是修 loop 图示的一处站位说明和版本号推进。一个还在天天动的项目，装的时候记得拉最新版。

👍 它适合谁

写技术文档要配图的人。这是它的主场景。架构图、流程图、序列图、ER 图，一次装好，之后每篇文档的图示风格统一，不用再开画图工具。

要给旧图换血的人。它支持从.drawio、Mermaid、.excalidraw三种格式导入重画，脚本分别是drawio_extract.py、mermaid_extract.py、excalidraw_extract.py。手头攒了一批早期画的图，可以按新规范批量重出。

团队视觉要对齐的人。令牌表加品牌引导，意味着「所有图示长得像一家出的」这件事第一次有了可执行的落地方式，而不是靠一份口头规范。

👎 什么情况别折腾

要频繁改的图。产物是 HTML，改节点位置得动代码。频繁调整的图，用支持拖拽的工具更合适。

要精确比例的工程图纸。它是编辑级图示，不是 CAD。尺寸标注、比例尺这类需求别找它。

只是随手记一笔。一句话能说清的事，画图是浪费。

💡 实测下来最有用的两点

第一是自检脚本。它把「图能不能正常打开、内容有没有跑出画布、无障碍标记齐不齐」这些本该人眼扫的事变成了命令行判定，写进文档流水线里可以当一道自动关卡。

第二是令牌表。它让我意识到，图示不好看的根因，往往是「每次从零选颜色」，而不是审美问题。把选择固化成一张表，之后只做判断不做选择。

⚠️说明：本文基于该项目 2026 年 10 月 17 日的版本与文档整理。开源项目的功能、图示类型数量、命令行参数与配置结构后续都可能调整，请前往官方仓库与文档查看最新内容并自行核实，一切以官网当前版本为准；本文所述仅代表整理时点的实测情况，仅供参考。

📌注意事项：

1. 本文所有 star 数、版本号、文件数量均为实测时点数据，随时会变。
2. 自检脚本报的无障碍四项是硬判定，不补齐拿不到OK，别跳过。
3. 截图用本地 Chromium，没网也能出图，但首次加载 Google Fonts 需要联网，想要完全离线可以用它的系统字体选项。
4. 每个人的环境不一样，配置请按自己的情况调整，方案仅供参考，不能保证照搬有效。

⚓️ 相关链接 ⚓️

• XiaoqiangClub
• diagram-design 官方仓库
• diagram-design 官网
• 图示类型在线画廊
• Agent Skills 介绍