Claude Code artifact-diagramming 技能解析Artifact 内联 SVG 制图的决策准则与实现机制【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks本文基于 system_prompts_leaks 仓库中泄露的 Claude Codeartifact-diagramming技能文档SKILL.md完整拆解 Claude Code 在生成 Artifact可发布页面时如何决定该不该画一张图、画什么才算机制图以及内联 SVG 在手写场景下的全部工程约束——viewBox尺寸策略、currentColor主题适配、箭头 marker 规范、无障碍标注与自包含要求。读完本文你可以掌握一套可迁移到任意 HTML 输出场景的机制图画法并理解这些约束与 Claude Code Artifact 运行时CSP、主题系统之间的底层对应关系。这个技能在 Claude Code 技能体系中的位置artifact-diagramming是 Claude Code 内置技能集Skills中专门负责图怎么画的一条。技能的 front matter 声明如下name: artifact-diagramming description: Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.从系统提示词的技能清单看它与几个技能构成明确的分工。在 claude-code-fable-5.md 的 Skills 列表中artifact-design——Design guidance and fundamentals for Artifacts要求写任何 Artifact 前必须加载负责整体视觉设计artifact-diagramming——专门管 Artifact 中示意图的画法datavizdataviz/SKILL.md——管图表chart/graph/dashboard的选型、配色与校验。也就是说artifact-diagramming只管机制示意图数据流向、组件关系、状态迁移这类图不接管图表图表归dataviz也不接管页面整体设计归artifact-design。加载时机在 claude-code-fable-5.1.md 中有一段值得注意的例外说明常规 Artifact 一律先加载artifact-design但workshop技能产出的文档有自己独立的两个lane输出轨道此时跳过artifact-design改为加载artifact-diagramming来负责模板页中的示意图。这条提示也解释了本文档中lane一词的来源——不同渲染轨道HTML 页面 vs Markdown 页面由不同的技能负责指定画图方式。核心立场像要长期维护这个决策的工程师那样画图原文档开篇定调SKILL.md 第 6 行Draw as the engineer who has to live with the decision, not as a decorator.翻译过来就是你是要长期为这个决策负责的工程师不是装饰工。一张图挣得它的位置earns its place的条件是它能让一个没有上下文的读者cold reader直接看到一段只能从文字里费力拼凑出来的机制——数据往哪里流、哪些组件在互相通信、两个方案之间差在哪里、一个请求经过哪些状态。并给出一个硬性反证如果一句话能更快说清楚就写那句话。这条规则把画图从默认动作降格为例外动作是整份技能的第一原则。画什么四条机制图准则1. 画机制不画名字Depict the mechanism, not its name原文的核心论证是一个标着 cache 的盒子信息量还不如一段文字。真正有信息量的是——请求穿过缓存的路径、它夹在哪两个存储之间、以及当缓存被移除后消失的那根箭头。准则要求画出论证真正依赖的那些部分——正在被跨越的边界boundary、正在被新增的一跳hop、正在移动的数据——把无关部分全部去掉。这与系统全景图式画法相反不画库存inventory只画决策的支点。2. 比较方案时画差异不画两份清单Comparing options? Draw the difference原文给出了真比较和假比较的判据真比较两套架构并排side by side、before/after、每个方案各自新增或删除的那一条边edge——读者应该能用手指指出我要在什么之间做选择假比较被明确点名否决每个方案各一个带标签的盒子、与系统之间没有任何连线——这不叫比较这叫把方案列表重述了一遍。这条规则在实操中可以直接当验收标准用检查并排的两张图看它们是否共享同一套系统骨架、差异是否体现在连线上而不是两张孤立的盒子图。3. 复杂度与赌注匹配Match complexity to the stakes原文给了两个对称的锚点一跳one-hop问题 → 三盒子的图就够把写流量改道经过队列的迁移 → 必须画出队列、写者、读者和那根表顺序的箭头ordering arrow。结论是画到决策真正依赖的粒度为止既不接受强行极简forced minimalism也不接受把整个系统列一遍inventory of the whole system。复杂度由这个决策要赌什么决定而不是由作者的手感决定。4. 给箭头打标签Label the arrows原文的判断标准An unlabeled arrow is related somehow.无标签箭头只表达 somehow 有关系而writes、invalidates、polls every 30s这种标签本身就是信息。关于图例legend原文给了一条克制原则只有当同一种编码方式虚线、颜色、双线在图中重复出现时图例才值得存在否则直接把含义写在标记本身箭头/连线上。这是对每张图都配图例惯例的反向约束。内联 SVG 机制手写svg的全部约束适用前提HTML 轨道才用内联 SVG原文第 20 行划定了适用边界These mechanics apply where the page renders inline SVG natively (HTML pages); a markdown-rendered page draws its diagrams in whatever fence that lanes renderer supports, and the skill that owns the lane says which.HTML 页面直接手写内联svg本文后续所有机制都适用于这一轨道Markdown 渲染页面图画在该轨道渲染器支持的代码围栏fence里具体用哪个围栏由拥有该轨道的技能指定。结合 claude-code-fable-5.md 中 Artifact 运行时的说明可以印证这一点Artifact 原生渲染 mermaid 图——Markdown 用 htmlGatewayCachePrimaryreadsfalls through缓存命中路径Gateway 先查 Cache未命中再写穿到主库Cache 框用强调色标出当前讨论的对象。对照技能逐条核对viewBox按内容定宽宽大于高横向流除 Cache 框外全部走currentColor唯一点缀色标出讨论焦点箭头头是defs内 marker、marker-endurl(#arrow)引用片段内 id文字 11–12px 且短标签reads、falls through直接写在箭头上而不是图例里整段包在figure里figcaption陈述图的内容roleimgaria-label带同一断言无script/style/foreignObject无外部资源。约束四保持文字可读按绘制尺度算字号大约11–13px用text-anchor做对齐middle/start/end短标签一个词到三个词解释性的句子放图下方的 caption 里不放进图内。这条把图内信息与图外解释的职责切开了图内只承载命名与动作叙事全部交给figcaption。约束五对齐到网格Shared baselines and even gaps are most of what makes a hand diagram read as deliberate; eyeballed offsets read as noise.共享基线 等距间隙是一幅手写图看起来是刻意的的最大来源凭眼睛估的偏移只会读起来像噪声。实操上意味着盒子的 y 坐标、字号、线宽都从同一小组里取值示例里所有盒子同 y40、同高 40线宽统一 1.5px而不是每个元素各偏几像素。约束六一图一断言One figure, one claim这是把前面所有约束收拢成文档契约的一条svg必须包在figure里figcaption陈述这张图展示了什么——不是架构总览这类空话而是图的具体断言给svg加roleimgaria-label携带同一个断言服务于看不到图读屏的读者。一图一断言同时是内容原则一张图只证明一件事对应画什么一节里只画决策支点和无障碍原则figcaption 与 aria-label 内容一致视觉读者与非视觉读者拿到的是同一个事实。约束七保持自包含Stay self-containedSVG 内禁止script、style、foreignObject渐变gradients、图案patterns、use只能引用同一片段内的 idhref#id——不允许跨片段或跨文档引用最后一条是风格自检长串装饰性的 path 数据是这张图该用真正的图形工具的信号——简化别硬画。这条约束呼应了两个相邻技能。artifact-design在Build cleanly一节明确生成式或装饰性图形应走 Canvas 或 WebGL而不是手写长 SVG pathartifact-design/SKILL.mddesign技能对图标的要求则是永不使用 emoji 或 dingbat 字符画内联 SVG描边式、16/20/24px 网格、风格统一以便缩放与改色design/SKILL.md。三者合起来构成 Claude Code 的图形输出谱系数据图走dataviz的图表规范机制图走artifact-diagramming的手写内联 SVG装饰图形交给 Canvas/WebGL图标用网格化描边 SVG——artifact-diagramming恰好覆盖中间手写 SVG那一格它的自包含规则正是 Artifact CSP 环境对这一格的硬约束。Markdown 轨道围栏fence替代手写 SVG技能的Inline SVG mechanics一节开头就声明这些机制只适用于原生渲染内联 SVG 的页面HTML 页面。Markdown 渲染页面的示意图画在该轨道渲染器支持的围栏里由拥有该轨道的技能指定具体围栏。从仓库中 Artifact 运行时的描述可以还原出这条 lane 的实际形态Artifact 原生渲染 mermaid——Markdown 页面用mermaid围栏HTML 页面用pre classmermaid块全程无外部库见 claude-code-fable-5.md。这意味着轨道画图手段主题/尺寸适用判断HTML 页面手写内联svg原生形状 textviewBox CSS 缩放currentColor跟主题需要精确控制布局、强调色、标签位置时Markdown 页面该 lane 渲染器支持的围栏运行时原生支持 mermaid由渲染器托管快速表达结构关系时两条轨道共同的底线是无外部图片、无外部资源差异只在于 HTML 轨道把主题适配与无障碍标注的责任压给作者本人currentColor、roleimg、aria-label而围栏轨道把这些交给渲染器。实操自检清单综合全文产出一张符合该技能的 Artifact 示意图前可以逐条过一遍该不该画一句话能说清吗能就写句子。技能第一条画的是机制不是名字图里有没有论证的支点——被跨越的边界、新增/移除的那条边、移动的数据无关组件是否都删了比较图是不是真比较读者能否指出两方案共享的骨架与各自的差异连线还是只是两个孤立盒子复杂度对不对三盒子够不够还是必须画出队列/写者/读者与顺序箭头箭头都有标签每根无标签的箭头是否都值得存在图例是否只在同一编码重复时才出现viewBox 按内容定宽幅对应横向流、纵向对应分层堆叠。currentColor全覆盖 唯一强调色强调色在深浅两种底色下都读得清吗箭头头是 marker 或 polygonid 引用在本 SVG 片段内。文字 11–13px、一词到三词解释句挪进 caption。基线共享、间隙均等没有凭眼睛估的偏移。figurefigcaptionroleimgaria-labelcaption 与 aria-label 陈述同一断言。无script/style/foreignObject无外部资源path 数据一长就回头简化。参考与延伸阅读本文主体文档Anthropic/claude-code/skills/artifact-diagramming/SKILL.md技能清单与加载规则claude-code-fable-5.md、claude-code-fable-5.1.md主题三态系统与自包含/CSP 约束artifact-design/SKILL.md、claude-code-fable-5.md、claude-code-haiku-4.5.md相邻图形技能分工对照dataviz/SKILL.md、design/SKILL.md需要说明的适用前提artifact-diagramming是 Claude Code 面向 Artifact 发布场景的技能文档其自包含、无运行时等约束与 Artifact 的 CSP 运行时强绑定在普通网页或文档站中使用这些内联 SVG 技巧时无外部资源一条可以从硬性约束降级为最佳实践而viewBox尺寸策略、currentColor主题化、箭头标签、网格对齐与一图一断言这几条则不依赖任何特定运行时可以直接复用。【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Claude Code artifact-diagramming 技能解析：Artifact 内联 SVG 制图的决策准则与实现机制
Claude Code artifact-diagramming 技能解析Artifact 内联 SVG 制图的决策准则与实现机制【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks本文基于 system_prompts_leaks 仓库中泄露的 Claude Codeartifact-diagramming技能文档SKILL.md完整拆解 Claude Code 在生成 Artifact可发布页面时如何决定该不该画一张图、画什么才算机制图以及内联 SVG 在手写场景下的全部工程约束——viewBox尺寸策略、currentColor主题适配、箭头 marker 规范、无障碍标注与自包含要求。读完本文你可以掌握一套可迁移到任意 HTML 输出场景的机制图画法并理解这些约束与 Claude Code Artifact 运行时CSP、主题系统之间的底层对应关系。这个技能在 Claude Code 技能体系中的位置artifact-diagramming是 Claude Code 内置技能集Skills中专门负责图怎么画的一条。技能的 front matter 声明如下name: artifact-diagramming description: Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.从系统提示词的技能清单看它与几个技能构成明确的分工。在 claude-code-fable-5.md 的 Skills 列表中artifact-design——Design guidance and fundamentals for Artifacts要求写任何 Artifact 前必须加载负责整体视觉设计artifact-diagramming——专门管 Artifact 中示意图的画法datavizdataviz/SKILL.md——管图表chart/graph/dashboard的选型、配色与校验。也就是说artifact-diagramming只管机制示意图数据流向、组件关系、状态迁移这类图不接管图表图表归dataviz也不接管页面整体设计归artifact-design。加载时机在 claude-code-fable-5.1.md 中有一段值得注意的例外说明常规 Artifact 一律先加载artifact-design但workshop技能产出的文档有自己独立的两个lane输出轨道此时跳过artifact-design改为加载artifact-diagramming来负责模板页中的示意图。这条提示也解释了本文档中lane一词的来源——不同渲染轨道HTML 页面 vs Markdown 页面由不同的技能负责指定画图方式。核心立场像要长期维护这个决策的工程师那样画图原文档开篇定调SKILL.md 第 6 行Draw as the engineer who has to live with the decision, not as a decorator.翻译过来就是你是要长期为这个决策负责的工程师不是装饰工。一张图挣得它的位置earns its place的条件是它能让一个没有上下文的读者cold reader直接看到一段只能从文字里费力拼凑出来的机制——数据往哪里流、哪些组件在互相通信、两个方案之间差在哪里、一个请求经过哪些状态。并给出一个硬性反证如果一句话能更快说清楚就写那句话。这条规则把画图从默认动作降格为例外动作是整份技能的第一原则。画什么四条机制图准则1. 画机制不画名字Depict the mechanism, not its name原文的核心论证是一个标着 cache 的盒子信息量还不如一段文字。真正有信息量的是——请求穿过缓存的路径、它夹在哪两个存储之间、以及当缓存被移除后消失的那根箭头。准则要求画出论证真正依赖的那些部分——正在被跨越的边界boundary、正在被新增的一跳hop、正在移动的数据——把无关部分全部去掉。这与系统全景图式画法相反不画库存inventory只画决策的支点。2. 比较方案时画差异不画两份清单Comparing options? Draw the difference原文给出了真比较和假比较的判据真比较两套架构并排side by side、before/after、每个方案各自新增或删除的那一条边edge——读者应该能用手指指出我要在什么之间做选择假比较被明确点名否决每个方案各一个带标签的盒子、与系统之间没有任何连线——这不叫比较这叫把方案列表重述了一遍。这条规则在实操中可以直接当验收标准用检查并排的两张图看它们是否共享同一套系统骨架、差异是否体现在连线上而不是两张孤立的盒子图。3. 复杂度与赌注匹配Match complexity to the stakes原文给了两个对称的锚点一跳one-hop问题 → 三盒子的图就够把写流量改道经过队列的迁移 → 必须画出队列、写者、读者和那根表顺序的箭头ordering arrow。结论是画到决策真正依赖的粒度为止既不接受强行极简forced minimalism也不接受把整个系统列一遍inventory of the whole system。复杂度由这个决策要赌什么决定而不是由作者的手感决定。4. 给箭头打标签Label the arrows原文的判断标准An unlabeled arrow is related somehow.无标签箭头只表达 somehow 有关系而writes、invalidates、polls every 30s这种标签本身就是信息。关于图例legend原文给了一条克制原则只有当同一种编码方式虚线、颜色、双线在图中重复出现时图例才值得存在否则直接把含义写在标记本身箭头/连线上。这是对每张图都配图例惯例的反向约束。内联 SVG 机制手写svg的全部约束适用前提HTML 轨道才用内联 SVG原文第 20 行划定了适用边界These mechanics apply where the page renders inline SVG natively (HTML pages); a markdown-rendered page draws its diagrams in whatever fence that lanes renderer supports, and the skill that owns the lane says which.HTML 页面直接手写内联svg本文后续所有机制都适用于这一轨道Markdown 渲染页面图画在该轨道渲染器支持的代码围栏fence里具体用哪个围栏由拥有该轨道的技能指定。结合 claude-code-fable-5.md 中 Artifact 运行时的说明可以印证这一点Artifact 原生渲染 mermaid 图——Markdown 用 htmlGatewayCachePrimaryreadsfalls through缓存命中路径Gateway 先查 Cache未命中再写穿到主库Cache 框用强调色标出当前讨论的对象。对照技能逐条核对viewBox按内容定宽宽大于高横向流除 Cache 框外全部走currentColor唯一点缀色标出讨论焦点箭头头是defs内 marker、marker-endurl(#arrow)引用片段内 id文字 11–12px 且短标签reads、falls through直接写在箭头上而不是图例里整段包在figure里figcaption陈述图的内容roleimgaria-label带同一断言无script/style/foreignObject无外部资源。约束四保持文字可读按绘制尺度算字号大约11–13px用text-anchor做对齐middle/start/end短标签一个词到三个词解释性的句子放图下方的 caption 里不放进图内。这条把图内信息与图外解释的职责切开了图内只承载命名与动作叙事全部交给figcaption。约束五对齐到网格Shared baselines and even gaps are most of what makes a hand diagram read as deliberate; eyeballed offsets read as noise.共享基线 等距间隙是一幅手写图看起来是刻意的的最大来源凭眼睛估的偏移只会读起来像噪声。实操上意味着盒子的 y 坐标、字号、线宽都从同一小组里取值示例里所有盒子同 y40、同高 40线宽统一 1.5px而不是每个元素各偏几像素。约束六一图一断言One figure, one claim这是把前面所有约束收拢成文档契约的一条svg必须包在figure里figcaption陈述这张图展示了什么——不是架构总览这类空话而是图的具体断言给svg加roleimgaria-label携带同一个断言服务于看不到图读屏的读者。一图一断言同时是内容原则一张图只证明一件事对应画什么一节里只画决策支点和无障碍原则figcaption 与 aria-label 内容一致视觉读者与非视觉读者拿到的是同一个事实。约束七保持自包含Stay self-containedSVG 内禁止script、style、foreignObject渐变gradients、图案patterns、use只能引用同一片段内的 idhref#id——不允许跨片段或跨文档引用最后一条是风格自检长串装饰性的 path 数据是这张图该用真正的图形工具的信号——简化别硬画。这条约束呼应了两个相邻技能。artifact-design在Build cleanly一节明确生成式或装饰性图形应走 Canvas 或 WebGL而不是手写长 SVG pathartifact-design/SKILL.mddesign技能对图标的要求则是永不使用 emoji 或 dingbat 字符画内联 SVG描边式、16/20/24px 网格、风格统一以便缩放与改色design/SKILL.md。三者合起来构成 Claude Code 的图形输出谱系数据图走dataviz的图表规范机制图走artifact-diagramming的手写内联 SVG装饰图形交给 Canvas/WebGL图标用网格化描边 SVG——artifact-diagramming恰好覆盖中间手写 SVG那一格它的自包含规则正是 Artifact CSP 环境对这一格的硬约束。Markdown 轨道围栏fence替代手写 SVG技能的Inline SVG mechanics一节开头就声明这些机制只适用于原生渲染内联 SVG 的页面HTML 页面。Markdown 渲染页面的示意图画在该轨道渲染器支持的围栏里由拥有该轨道的技能指定具体围栏。从仓库中 Artifact 运行时的描述可以还原出这条 lane 的实际形态Artifact 原生渲染 mermaid——Markdown 页面用mermaid围栏HTML 页面用pre classmermaid块全程无外部库见 claude-code-fable-5.md。这意味着轨道画图手段主题/尺寸适用判断HTML 页面手写内联svg原生形状 textviewBox CSS 缩放currentColor跟主题需要精确控制布局、强调色、标签位置时Markdown 页面该 lane 渲染器支持的围栏运行时原生支持 mermaid由渲染器托管快速表达结构关系时两条轨道共同的底线是无外部图片、无外部资源差异只在于 HTML 轨道把主题适配与无障碍标注的责任压给作者本人currentColor、roleimg、aria-label而围栏轨道把这些交给渲染器。实操自检清单综合全文产出一张符合该技能的 Artifact 示意图前可以逐条过一遍该不该画一句话能说清吗能就写句子。技能第一条画的是机制不是名字图里有没有论证的支点——被跨越的边界、新增/移除的那条边、移动的数据无关组件是否都删了比较图是不是真比较读者能否指出两方案共享的骨架与各自的差异连线还是只是两个孤立盒子复杂度对不对三盒子够不够还是必须画出队列/写者/读者与顺序箭头箭头都有标签每根无标签的箭头是否都值得存在图例是否只在同一编码重复时才出现viewBox 按内容定宽幅对应横向流、纵向对应分层堆叠。currentColor全覆盖 唯一强调色强调色在深浅两种底色下都读得清吗箭头头是 marker 或 polygonid 引用在本 SVG 片段内。文字 11–13px、一词到三词解释句挪进 caption。基线共享、间隙均等没有凭眼睛估的偏移。figurefigcaptionroleimgaria-labelcaption 与 aria-label 陈述同一断言。无script/style/foreignObject无外部资源path 数据一长就回头简化。参考与延伸阅读本文主体文档Anthropic/claude-code/skills/artifact-diagramming/SKILL.md技能清单与加载规则claude-code-fable-5.md、claude-code-fable-5.1.md主题三态系统与自包含/CSP 约束artifact-design/SKILL.md、claude-code-fable-5.md、claude-code-haiku-4.5.md相邻图形技能分工对照dataviz/SKILL.md、design/SKILL.md需要说明的适用前提artifact-diagramming是 Claude Code 面向 Artifact 发布场景的技能文档其自包含、无运行时等约束与 Artifact 的 CSP 运行时强绑定在普通网页或文档站中使用这些内联 SVG 技巧时无外部资源一条可以从硬性约束降级为最佳实践而viewBox尺寸策略、currentColor主题化、箭头标签、网格对齐与一图一断言这几条则不依赖任何特定运行时可以直接复用。【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
