企业官网建设流程全解析

Diagram Design 快速上手指南：一句话让 AI 生成 39 种编辑级图表

【免费下载链接】UI-TARSPioneering Automated GUI Interaction with Native Agents项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS

Diagram Design 是一个给 AI 编程助手用的 Agent Skill 图表生成技能包：内置 39 种编辑级图表类型，两行命令即可安装，交付单个自包含 HTML（内联 SVG + CSS），默认纯静态、不含 JavaScript；整套设计规则只允许 1 个强调色，用来保住图表的编辑级观感。

Diagram Design 怎么安装？两行命令 + 本地画廊 3 分钟跑通

短答：Claude Code 里粘贴两行命令完成安装，其余工具见 README。

Claude Code 用户在对话窗口依次执行/plugin marketplace add cathrynlavery/diagram-design和/plugin install diagram-design@diagram-design，第一条添加插件市场，第二条把技能装入助手。Codex、Factory Droid、Pi 的对应命令都写在 README 的 Install 一节，安装后各客户端走自己的更新通道。不想装也能先看效果：

git clone https://gitcode.com/GitHub_Trending/ui/UI-TARS cd diagram-design open skills/diagram-design/assets/index.html

（Linux 用xdg-open替换open。）打开 本地画廊 后，39 种图按浅色、深色、完整编辑版三个变体排列，一键切换，可当作选型参照。

AI 画架构图听什么指令？39 种类型各有一份独立排版规范

短答：你用一句话描述要画什么，技能负责选类型，且每种类型都有写死的排版规范。

覆盖范围包括流程图、泳道、时序、状态机、ER、甘特、桑基、Wardley、UML 类图、数据库结构、用户旅程等 39 种类型，每种在 references/type-*.md 目录下都有独立排版规范文件，AI 接到请求先读对应规范再生成，而不是自由发挥。每类图默认提供 3 个变体：极简浅色适合博客配图，极简深色适合暗色幻灯片，完整编辑版信息最密。动画是可选能力，默认输出静态 HTML，无构建步骤。

AI 图表生成时序图示例：编辑级 sequence diagram

工作流固定为四步：一句话提需求 → AI 先报出选定的图表类型、尺寸预设和准备裁减的内容 → 你确认 → 生成文件。确认环节保证产出前先对齐范围，避免画完才发现结构不对。

仓库里的 drawio 和 Mermaid 旧图怎么办？一句话重绘成 SVG 或 PNG

短答：把文件丢给技能即可重绘，支持 draw.io 与 Mermaid 全家桶，全程纯文本解析，不渲染、不联网。

支持的文件包括 .drawio、.drawio.xml、.drawio.png、.drawio.svg、.mmd、.mermaid，以及 Markdown 里的 mermaid 代码块。重绘输出由 4 个维度控制：格式（html / svg / png / html+png）、尺寸（doc-inline、slide-16x9、social-og 等 9 种预设）、细节（faithful ≤24 节点、balanced ≤12、simplified ≤7）、受众（engineer / mixed / executive，管措辞不管数量）。

AI 图表生成数据库结构图示例：drawio 重绘 db schema

规则细节见 import-drawio.md 与 import-mermaid.md。值得留意的是结尾的保真清单：被合并、折叠、删除的节点会逐条列出，重绘时动过哪些内容一目了然。

怎么让图长到我网站的样子？品牌 onboarding 与对比度双重保障

短答：把网站 URL 传给技能，约 60 秒完成配色与字体映射，并附 WCAG AA 对比度检查。

对技能说一句"onboard diagram-design to 你的网站 URL"，它会抓取首页，提取主色板和字体栈，再映射到图表的语义角色：页面背景色变图表底色，CTA 按钮色变焦点强调色，正文字体变节点标签字体。两道保障：一是在 9–12px 图表字号下做 WCAG AA 对比度检查，不达标的颜色会给出调整值并解释原因；二是新项目第一次画图时如果检测到配色仍是默认值，会先停下来询问是否先换品牌色。

AI 图表生成 ER 数据模型示例：品牌配色适配

经常同时服务多个客户的，可以把映射结果存成命名 profile，各项目根目录放一个.diagram-design标记文件切换品牌，互不覆盖。

它凭什么不像 AI 画的？一组写死的硬参数

短答：所有视觉规则都写成文件里的硬约束，生成端没有发挥空间。

具体规则：强调色只有 1 个 #eb6c36，且只准出现在 1–2 个节点上，多了信号就失效；无阴影、1px 细边框，圆角半径只允许 4 / 6 / 8 三档；4 像素网格约束所有坐标、宽度、间距，出现非 4 的倍数即视为错误；节点上限 9 个、箭头上限 12 条，超出就拆成两张图；连线只走直角肘形，转弯弧半径 r=8，标签与线之间留 6–10px 空隙；三种字体分工——Instrument Serif 写标题，Geist 写节点名，Geist Mono 写技术副标签。

全部颜色、字体、令牌集中在 style-guide.md 一个文件，39 种类型都从这里读取语义角色。每张图默认带无障碍属性：SVG 有 role="img" 和标题/描述，读屏软件可以读出图表内容。

什么情况下别用 Diagram Design？边界与适合人群

短答：判据是一条——读者能不能从这张图里比从一段好段落里学到更多，不能就别画。

项目自己写明的"别画"清单：三列表格能说清的对比，用表格；一句话能讲明的单一概念，直接写句子；要列举的内容，用列表；快速 unicode 小图，去用 wiretext 类技能。

适合人群：写博客、做技术分享、做产品文档，需要频繁往文章和幻灯片里放图的人。不适合：公司有像素级设计验收流程，或要在 Figma 等设计工具里集中管理几十张图的团队——那种场景设计工具更高效。

下一步：装上它，今天就画你的第一张架构图

先跑通安装两行命令，再让 AI 画一张你的应用架构图：前端、后端、数据库、Redis 缓存。它先报类型和尺寸预设，你确认后 1 分钟拿到自包含 HTML；配色不合要求，就把网站地址丢给它，60 秒换成品牌色。

【免费下载链接】UI-TARSPioneering Automated GUI Interaction with Native Agents项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS