尧图网页设计 
AI 图表生成3 分钟画出编辑级图表【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design上次让 AI 助手画架构图交回来的是深色底、青色描边、所有节点同款圆角矩形——设计圈管这叫 AI SlopAI 垃圾美学。AI 图表生成早就被这种AI 味拖住了后腿。diagram-design 就是为治它而生的把它装进 Claude Code 等 AI 助手一句话自动产出编辑级editorial的自包含 HTML 图表。它到底是什么打个比方它相当于给 AI 配了一本设计部风格手册。diagram-design 是一个智能体技能Agent Skill跑在 Claude Code、Codex、Pi 等 AI 编程助手里。你用自然语言描述需求它自动选定图表类型输出一个自包含 HTML 文件——SVG 和 CSS 全部内联双击就能在浏览器打开。单文件双击即开几乎零依赖。39 种图表类型每种三种静态变体极简浅色、极简深色、完整编辑版。颜色、字体与连线规则集中在 style-guide.md总规则在 SKILL.md——AI 没有自由发挥的空间。上架构图示例——自包含 HTML SVG无阴影、细边框39 种图表类型一句话进去一张图出来39 种视觉类型——架构图、时序、ER、甘特、桑基、Wardley 地图、飞轮每种都有独立规范文档每种图三种静态变体——极简浅色、极简深色、完整编辑版打开仓库里的 assets/index.html 画廊可逐一预览克制的设计规则——一个强调色只给 1–2 个焦点无阴影1px 细边框圆角不超过 10px4 像素网格 密度上限——所有坐标、宽度、间距必须被 4 整除超过 9 个节点就拆成两张图上飞轮Loop图2.0 版本新增的图表类型60 秒品牌接入让图表继承你网站的配色给一个网址——它抓取你的首页提取主色板和字体栈映射到语义角色——网页背景变图表纸色CTA 按钮色变强调色正文字体变节点标签字体内置 WCAG AA 对比度检查——颜色在图表字号下不达标时主动提出调整值并解释原因默认无障碍——内联 SVG 带roleimg和aria-labelledby屏幕阅读器能读出图表标题与描述多客户档案——品牌接入可保存为命名档案profile不同项目并行使用互不覆盖把 draw.io 和 Mermaid 旧图一键升级为编辑级纯文本解析——支持.drawio、.drawio.svg、.mmd、.mermaid文件和 Markdown 里的 mermaid 代码块不渲染、不联网重绘而非转换——源文件的坐标、配色、字体全部丢弃只保留组件、关系、分组和方向保真清单——结尾列出哪些节点被合并、折叠或删除AI 动了什么手脚一目了然SVG / PNG 导出——SVG 可进 Figma、Illustrator 继续编辑PNG 默认按 2 倍分辨率输出旋钮选项控制什么Formathtml / svg / png交付物形态Size文档、幻灯片、社媒、打印等 9 种预设画布比例与字号梯度Detailfaithful / balanced / simplified保留多少源内容Audienceengineer / mixed / executive措辞专业程度上一份 12 节点的 draw.io 文件按 balanced 细节级别重绘从零到第一张成品的 3 步路径第一步安装。以 Claude Code 为例两条命令装好插件/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-designCodex 和 Pi 有对等命令想先逛一遍 39 种图的画廊可以克隆仓库再打开 assets/index.htmlgit clone https://gitcode.com/GitHub_Trending/di/diagram-design第二步首次调用。直接用自然语言画一张我应用的架构图前端、后端、数据库、Redis 缓存。我需要一张四象限图展示 Q2 项目按影响力和投入的分布。把这个 drawio 文件重绘成幻灯片用的编辑级版本。AI 会先报出选定的图表类型、尺寸预设和计划删减的内容你确认后才生成文件。想自己动手可以从 template.html 脚手架起步。第三步进阶调节。贴上你的网站 URL 完成 60 秒品牌接入出图后说一句导出 PNG即可拿到透明背景位图完整流程见 export.md。什么时候不该画图三列表格能说清的对比——写表格任何列表类内容——用项目符号一句话能讲明白的单一概念——写句子别画图这套审美背后的设计信条只有一句最高级的操作通常是删除。一张图值得画前提是读者从图里学到的比一段好文字更多。下次博客要配图别再开 Figma 磨半小时——一句话3 分钟试试让 AI 画出设计师不嫌弃的图。【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI 图表生成：3 分钟画出编辑级图表
AI 图表生成3 分钟画出编辑级图表【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design上次让 AI 助手画架构图交回来的是深色底、青色描边、所有节点同款圆角矩形——设计圈管这叫 AI SlopAI 垃圾美学。AI 图表生成早就被这种AI 味拖住了后腿。diagram-design 就是为治它而生的把它装进 Claude Code 等 AI 助手一句话自动产出编辑级editorial的自包含 HTML 图表。它到底是什么打个比方它相当于给 AI 配了一本设计部风格手册。diagram-design 是一个智能体技能Agent Skill跑在 Claude Code、Codex、Pi 等 AI 编程助手里。你用自然语言描述需求它自动选定图表类型输出一个自包含 HTML 文件——SVG 和 CSS 全部内联双击就能在浏览器打开。单文件双击即开几乎零依赖。39 种图表类型每种三种静态变体极简浅色、极简深色、完整编辑版。颜色、字体与连线规则集中在 style-guide.md总规则在 SKILL.md——AI 没有自由发挥的空间。上架构图示例——自包含 HTML SVG无阴影、细边框39 种图表类型一句话进去一张图出来39 种视觉类型——架构图、时序、ER、甘特、桑基、Wardley 地图、飞轮每种都有独立规范文档每种图三种静态变体——极简浅色、极简深色、完整编辑版打开仓库里的 assets/index.html 画廊可逐一预览克制的设计规则——一个强调色只给 1–2 个焦点无阴影1px 细边框圆角不超过 10px4 像素网格 密度上限——所有坐标、宽度、间距必须被 4 整除超过 9 个节点就拆成两张图上飞轮Loop图2.0 版本新增的图表类型60 秒品牌接入让图表继承你网站的配色给一个网址——它抓取你的首页提取主色板和字体栈映射到语义角色——网页背景变图表纸色CTA 按钮色变强调色正文字体变节点标签字体内置 WCAG AA 对比度检查——颜色在图表字号下不达标时主动提出调整值并解释原因默认无障碍——内联 SVG 带roleimg和aria-labelledby屏幕阅读器能读出图表标题与描述多客户档案——品牌接入可保存为命名档案profile不同项目并行使用互不覆盖把 draw.io 和 Mermaid 旧图一键升级为编辑级纯文本解析——支持.drawio、.drawio.svg、.mmd、.mermaid文件和 Markdown 里的 mermaid 代码块不渲染、不联网重绘而非转换——源文件的坐标、配色、字体全部丢弃只保留组件、关系、分组和方向保真清单——结尾列出哪些节点被合并、折叠或删除AI 动了什么手脚一目了然SVG / PNG 导出——SVG 可进 Figma、Illustrator 继续编辑PNG 默认按 2 倍分辨率输出旋钮选项控制什么Formathtml / svg / png交付物形态Size文档、幻灯片、社媒、打印等 9 种预设画布比例与字号梯度Detailfaithful / balanced / simplified保留多少源内容Audienceengineer / mixed / executive措辞专业程度上一份 12 节点的 draw.io 文件按 balanced 细节级别重绘从零到第一张成品的 3 步路径第一步安装。以 Claude Code 为例两条命令装好插件/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-designCodex 和 Pi 有对等命令想先逛一遍 39 种图的画廊可以克隆仓库再打开 assets/index.htmlgit clone https://gitcode.com/GitHub_Trending/di/diagram-design第二步首次调用。直接用自然语言画一张我应用的架构图前端、后端、数据库、Redis 缓存。我需要一张四象限图展示 Q2 项目按影响力和投入的分布。把这个 drawio 文件重绘成幻灯片用的编辑级版本。AI 会先报出选定的图表类型、尺寸预设和计划删减的内容你确认后才生成文件。想自己动手可以从 template.html 脚手架起步。第三步进阶调节。贴上你的网站 URL 完成 60 秒品牌接入出图后说一句导出 PNG即可拿到透明背景位图完整流程见 export.md。什么时候不该画图三列表格能说清的对比——写表格任何列表类内容——用项目符号一句话能讲明白的单一概念——写句子别画图这套审美背后的设计信条只有一句最高级的操作通常是删除。一张图值得画前提是读者从图里学到的比一段好文字更多。下次博客要配图别再开 Figma 磨半小时——一句话3 分钟试试让 AI 画出设计师不嫌弃的图。【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考