Claude Code、Codex 和 Pi 提供了 38 种编辑图。自包含的 HTML + SVG。没有阴影。没有美人鱼的粗糙内容。
概览
14种类型。一项Claude代码技能。60秒内完成你的品牌——该技能读取你的网站，并为每个图表映射颜色+字体。 没有Figma。没有通用的圆角盒子。没有30分钟的挑色会。 我写作时会在 littlemight.com（同时 BestSelf.co 也在旁边运营）。每次我需要图表——架构草图、流程图、最重要内容的金字塔——我都会问Claude，得到的是一个通用的圆角方框，完全不像网站其他部分。我要么和Figma争论30分钟，要么干脆跳过图表。 所以我为此构建了一个Claude代码技能。十四种类型，编辑质量，通过阅读你的网站，60秒内匹配你的品牌。 最高质量的动作通常是删除。每个节点都值得获得其位置。强调色保留给读者应先关注的1-2个。目标密度：4/10。 所有14张图纸均提供三种版本：极简光照、极暗和全编辑版。
概述（AI 翻译）
一个能在你品牌中绘制图解的特工技能，作为一个独立的HTML + SVG文件。45种图表类型。没有阴影。没有美人鱼的烂泥。
网站 ·画廊 ·更新日志
安装 ·它带来什么 ·快速启动 ·匹配你的品牌 ·进口 ·导出 ·贡献
NPX技能还能加Cathrynlavery/图解设计
请直白地问你的代理人：
- “帮我画一个应用的架构图：前端、后端、数据库、Redis 缓存。”
- “我需要一个象限，显示第二季度项目按影响与努力划分。”
- “给我一段带有401令牌刷新的持有人呼期序列。”
- “板上图示设计到 https://yoursite.com"（拉取你的调色板和字体，使之后的每个图与你的网站一致）
代理选择类型，说明计划，然后写入一个 .html 文件，你可以双击打开。
安装
支持任何读取Agent Skills的主机，包括Cursor、Claude Code、Codex、Qoder、GitHub Copilot、Gemini CLI、Cline、Windsurf和Amp：
在 Claude Code 中，插件市场会给你更新和斜杠命令：
官方构建仅来自该仓库。
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
Ask your agent in plain words:
- “Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
- “I need a quadrant showing Q2 projects by impact vs effort.”
- “Give me a sequence of a bearer call with token refresh on 401.”
- “Onboard diagram-design to https://yoursite.com” (pulls your palette and fonts so every diagram after this one matches your site)
The agent picks the type, states its plan, and writes one .html file you can open by double-clicking.
Install
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add cathrynlavery/diagram-design