Diagram Design 快速上手指南一句话让 AI 生成 39 种编辑级图表【免费下载链接】UI-TARSPioneering Automated GUI Interaction with Native Agents项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARSDiagram 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-designdiagram-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.htmlLinux 用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 / htmlpng、尺寸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 条超出就拆成两张图连线只走直角肘形转弯弧半径 r8标签与线之间留 6–10px 空隙三种字体分工——Instrument Serif 写标题Geist 写节点名Geist Mono 写技术副标签。全部颜色、字体、令牌集中在 style-guide.md 一个文件39 种类型都从这里读取语义角色。每张图默认带无障碍属性SVG 有 roleimg 和标题/描述读屏软件可以读出图表内容。什么情况下别用 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Diagram Design 快速上手指南：一句话让 AI 生成 39 种编辑级图表
Diagram Design 快速上手指南一句话让 AI 生成 39 种编辑级图表【免费下载链接】UI-TARSPioneering Automated GUI Interaction with Native Agents项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARSDiagram 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-designdiagram-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.htmlLinux 用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 / htmlpng、尺寸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 条超出就拆成两张图连线只走直角肘形转弯弧半径 r8标签与线之间留 6–10px 空隙三种字体分工——Instrument Serif 写标题Geist 写节点名Geist Mono 写技术副标签。全部颜色、字体、令牌集中在 style-guide.md 一个文件39 种类型都从这里读取语义角色。每张图默认带无障碍属性SVG 有 roleimg 和标题/描述读屏软件可以读出图表内容。什么情况下别用 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考