diagram-design Terminal 皮肤详解用 CLI 窗口外壳渲染开发者向技术图的完整指南【免费下载链接】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本篇指南围绕 diagram-design 技能仓库中的终端窗口皮肤Terminal Window / CLI-chrome variant展开讲解如何把任意一张架构图、流程图或循环图包裹进一个伪造的 macOS 风格终端窗口三圆点标题栏 $提示符 全等宽字体用于开发工具发布帖、CLI 产品宣传和技术社交卡片。读完本文你将掌握该皮肤的 9 枚固定 token、页面骨架语法、token 1:1 替换规则、专属字体排印与标题栏圆点规范以及它与品牌化默认皮肤onboarding流程产出的边界关系可以直接基于 template-terminal.html 产出可发布的自包含 HTML 图。一、什么是 Terminal 皮肤第二套固定皮肤而非品牌皮肤diagram-design 的核心设计系统是「可换肤」的全部颜色与字体 token 收敛在 style-guide.md 这一个源头。默认皮肤是冷色调编辑风格白烟纸paper、墨黑ink、原子橙accent可通过 onboarding.md 的 URL 提取流程替换成任意品牌色板。Terminal 皮肤则是第二套、固定不变的皮肤fixed skin它不继承onboarding 的品牌 token也不参与默认皮肤的明暗反转规则无论宿主站点用什么品牌色所有 terminal 示例都使用同一组 9 枚 token它的定位是让一张截图在深色为主的信息流里X、Discord、开发博客读起来是「terminal」而不是「editorial doc」。因此文档明确指出不要试图把 terminal 皮肤与 onboarding 品牌输出调和在一起。品牌化输出走默认/全编辑变体CLI 质感的开发者向输出才走 terminal 皮肤。9 枚固定 token 对照表依据 style-guide.md § Terminal skin (opt-in alternate) 与模板文件 template-terminal.html 中:root的实际定义Token取值用途terminal-page#0a0a0a窗口背后的页面背景terminal-paper#141414窗口主体、节点填充terminal-bar#1b1b1b标题栏条带terminal-border#2b2b2b窗口边框、细线terminal-ink#f5f5f5主文字、主描边与默认ink同值terminal-muted#9a9a9a次级文字、子标签、环描边terminal-soft#5c5c5c三级元素——非激活圆点、辐条terminal-accent#ff5a36唯一的强调色——焦点节点、$提示符、激活圆点terminal-accent-tintrgba(255,90,54,0.12)强调描边盒子的填充1-accent 规则在这里依然成立除terminal-ink/terminal-muted/terminal-soft外剩下的颜色只能来自terminal-accent绝不允许引入第二种色相。这也是#ff5a36这一红橙色在整套皮肤中反复出现的原因——它承载了「焦点」「提示符」「激活态」三个语义角色靠的是作用位置区分而不是靠换色。二、页面骨架terminal 的 Grammar原始文档给出了 terminal 变体的最小结构。完整可运行版本直接看模板 template-terminal.htmldiv classterminal div classtitlebar div classdot accent/div div classdot/div div classdot/div div classtitlebar-nameloop.sh — self-improving-loop/div /div main classframe p classprompt span classsign$/span diagram-design render --type loop /p h1# The self-improving loop/h1 svg.../svg /main /div对应模板中的核心 CSS 如下取值来自模板实际源码body { background: var(--color-page); /* #0a0a0a */ font-family: var(--font-mono); /* Geist Mono, ui-monospace, monospace */ } .terminal { width: 100%; max-width: 1200px; background: var(--color-paper); /* #141414 */ border: 1px solid var(--color-border); /* #2b2b2b */ border-radius: 12px; overflow: hidden; } .titlebar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--color-bar); /* #1b1b1b */ border-bottom: 1px solid var(--color-border); } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-soft); /* #5c5c5c */ } .dot.accent { background: var(--color-accent); /* #ff5a36 —— 三圆点中恰好一个 */ }模板里还有两个值得注意的实现细节.titlebar-name使用flex: 1居中并保留margin-right: 46px来「抵消三个圆点的宽度」使窗口标题在视觉上真正居中见模板注释.prompt是display: flex; gap: 0.6em$符号由.sign上色为terminal-accent命令文本保持terminal-mutedh1通过h1::before { content: # }自动加上井号前缀色值取terminal-soft让它读起来像一行注释内嵌 SVG 设min-width: 900px保证在小屏上可横向滚动viewBox默认0 0 1000 600。三、SVG 内部的 token 1:1 替换规则进入 SVG 之后terminal 皮肤并不改变图的结构与画法只做一件事把默认明/暗皮肤的 token 一一对应地换成terminal-*等价物。原始文档给出的映射表是默认 tokenTerminal 等价物paperterminal-paperinkterminal-inkmuted/softterminal-muted/terminal-softaccent/accent-tintterminal-accent/terminal-accent-tint两个仍然生效的既有模式hub/焦点节点模式需要高亮的那一个元素使用「反转填充」accent-tint填充 accent描边其余元素全部落在paper/ink/muted的灰度体系里连接线规则正交直角连接、箭头标签遮罩、6–10px 间隙等 SKILL.md §6 的硬性规则在 terminal 皮肤下没有任何放宽。以仓库内的成品示例 example-loop-terminal.html 为例它把「自改进循环self-improving loop」渲染成 6 个工位Capture → Research → Decide → Act → Measure → Learn绕一个共享记忆中枢旋转的图Decide是唯一的焦点工位使用.station.focalaccent-tint填充 accent描边 1.4六条顺时针环线用terminal-muted实线并带箭头六条虚线写回辐条用terminal-softstroke-dasharray: 5 4——在保持 1-accent 规则的同时用线型实线/虚线而不是颜色区分「环内流转」与「回写中枢」两种语义。四、字体排印这是唯一允许「全等宽」的变体原始文档特别强调这是唯一一个全等宽是正确的变体。默认皮肤的三字体体系Instrument Serif 标题 Geist 无衬线节点名 Geist Mono 技术子标签在这里被整体替换彻底弃用 Instrument Serif 与 Geist sans全站只保留 Geist Mono模板实际加载GeistMono:wght400;500;600;700页面标题使用等宽加粗前缀#读起来像一行注释原「eyebrow 眉题」角色被替换为shell 提示符$用terminal-accent命令本体用terminal-muted如diagram-design render --type loop默认皮肤里「Mono 只用于技术内容、名字必须用无衬线」的规则是 terminal 皮肤唯一被豁免的地方——因为整个窗口的隐喻就是终端本身。字号整体上调 1–2px等宽字体在默认字号下比它所替代的无衬线/衬线组合显得更小而且这类卡片通常在社交信息流的缩略尺寸下观看因此原始文档规定每个文本角色比 style-guide.md 的默认字号上调约 1–2px文本角色默认字号Terminal 字号node-name节点名12px14pxsublabel/arrow-label子标签 / 箭头标签8–9px9–10pxhub 标签中枢名16px18px这一点在 example-loop-terminal.html 的样式表里有完整落地.node-name为font: 600 14px var(--mono).sublabel为font: 400 9.5px var(--mono).hub-name为font: 700 18px var(--mono)箭头标签为font: 500 9px var(--mono)并带letter-spacing: 0.08em。注意调号后仍需遵守 SKILL.md §7 的 4px 网格要求坐标、尺寸、间距尽量落在 4 的倍数上字体尺寸豁免只适用于模板默认的排版 ramp 参照。五、标题栏三圆点1-accent 规则在这里的又一次收口标题栏三个 10px 圆形macOS 风格。原始文档给出两条硬约束三圆点中恰好一个为terminal-accent另外两个为terminal-soft模板注释也明确写着 exactly one of the three dots gets this严禁使用红/黄/绿红绿灯三色组——那等于引入了第二、第三种色相直接违反调色板的 1-accent 纪律。实现上模板用.dot.accent这个组合选择器完成「一热两冷」.dot默认terminal-soft只有额外带上accent类的那个圆点变成terminal-accent。这是理解整张图色彩语义的钥匙三圆点不是「窗口控件」装饰而是对 1-accent 规则的一次视觉示范。六、三条关键红线Critical rules原始文档给出 terminal 皮肤专属的三条不可逾越规则它们分别对应默认皮肤的同类约束不允许纯黑#000000——页面背景用terminal-page#0a0a0a窗口主体用terminal-paper#141414。原因与默认皮肤相同真正的纯黑在 OLED 屏和印刷品上会出现裁切/糊死。只能有一个强调色。若图需要第二个焦点元素用terminal-ink白色通过字重和字号制造强调而不是引入第二种颜色。背景点阵如使用必须保持rgba(255,255,255,0.06–0.08)的极低透明度——它是几乎不可见的纹理绝不能成为与标题栏 chrome 竞争的视觉元素。模板中的可选点阵用rgba(255,255,255,0.08)、22×22 网格与 SKILL.md §6 的可选点纸变体同构但换成了白色系示例图在rect fill#141414之后再叠一层fillurl(#dots) opacity0.7属于可选装饰而非默认。七、适用场景与反适用场景原始文档给出了清晰的判定边界直接决定你是否该选这套皮肤应当使用开发工具 / CLI 产品发布帖npm 包、CLI 标志位、终端工作流需要传达「这是给工程师的工具」的技术社交卡片要在深色主导的信息流X、Discord、开发博客里「跳出来」的截图。不应当使用编辑型 / 长文帖子——请改用默认浅色或全编辑full-editorial变体onboarding 品牌匹配输出——terminal 是固定皮肤、不做品牌 token 化不要试图调和两者受众不是「开发者编码」的场合——如果读者无法把$、#、三圆点读作窗口 chrome 而不是内容本身这套隐喻就失效了。八、仓库配套资产与校验支撑仓库为这套皮肤提供了完整的落地资产与一致性校验模板template-terminal.html 是 terminal 变体的标准起点命名遵循example-type-terminal.html模式当前仓库内有 example-loop-terminal.html 这一成品示例运行时依赖verify-docs-sync.py 的REQUIRED_PACKAGED_RUNTIME_FILES集合中明确包含assets/template-terminal.html也就是说模板是 skill 打包安装时必须随包分发的运行时文件这从源码层面印证了 terminal 皮肤是一等公民而非边缘特性引用关系SKILL.md §10 把 terminal 列为「可选变体可替换上面任何一种变体」并指向primitive-terminal.mdstyle-guide.md 的「Terminal skin (opt-in alternate)」小节则持有 token 表的唯一权威定义。九、实战基于模板创建一个 Terminal 皮肤图在仓库中动手的最小流程仓库只读产出物请保存在自己的工作目录复制 template-terminal.html替换[diagram-slug]、[file.sh]、[command that generated this]、[Diagram title]四个占位符按 §三 的映射表把默认 token 全部换成terminal-*注意 SVG 里rect fill#141414的页面底纸不可遗漏按 §四 的字号表把所有文本角色上调 1–2pxnode-name 14px、sublabel/arrow-label 9–10px、hub 18px标题栏只点亮一个.dot.accent其余保持.dot如需背景纹理启用模板中注释掉的 22×22 点阵rgba(255,255,255,0.08)否则保持纯terminal-paper跑一遍 SKILL.md §9 的 taste gatesvg的roleimg与aria-labelledby、title作为svg首子元素、slug 前缀 ID如loop-terminal-title、无纯黑、单一强调色、坐标符合 4px 网格、连接线满足六条 connector 规则产出为自包含单文件 HTML除 Google Fonts 外无外部依赖静态即可无需脚本。十、与其他皮肤的关系速查变体模板Token 来源典型用途Minimal light默认template.html默认编辑风格或品牌化截图即用、暖纸底Minimal darktemplate-dark.html默认皮肤反转深色站点、高对比帖Full editorialtemplate-full.html默认编辑风格长文 hero 图Terminal本文template-terminal.html固定 9 枚terminal-*token开发者向发布帖、技术社交卡片记住终端皮肤的核心判断它是隐喻不是装饰。当「这张图是给工程师的」本身就是信息的一部分时CLI 窗口外壳是最诚实的呈现方式而一旦需要品牌匹配或长文编辑语境就应回到默认或全编辑变体避免两套皮肤相互妥协。【免费下载链接】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），仅供参考
