一键导入
space-text-logic-diagram
将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Generates professional slide deck images from content. Creates outlines with style instructions, generates individual slide images, and exports PPTX/PDF. Includes a brand design system mode using 60+ getdesign.md brand styles: auto-matches content to brand-inspired slide styles, recommends 5 matched styles plus 1 smart match, or uses an explicitly requested brand style. Use when user asks to "create slides", "make a presentation", "generate deck", "slide deck", "PPT", "design slide", "brand style PPT", or wants content turned into a designed presentation.
分析文章结构并批量生成AI配图,调用Gemini API为每个段落创建专业逻辑图/概念图。当用户说"批量配图"、"给文章配图"、"生成文章插图"、"为这篇文章配图"时触发。支持两种风格:简约手绘风和建筑蓝图编辑风。自动保存到Obsidian图片目录并插入文档。
创建专业、支持深色/浅色双主题切换的系统架构图,输出为独立的 HTML 文件(内含 SVG 图形)。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图,或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明,内置主题切换按钮。
根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格(苹果/Apple、Notion、Claude、Stripe 等),支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
AI 全能图表生成器(扩展版)。一键生成 35+ 种设计美观的图表 HTML 文件,涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格(黑白简约、深色暗调、Claude 暖色)+ 品牌风格扩展。 触发词:"画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
| name | space-text-logic-diagram |
| description | 将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。 |
| license | MIT |
| metadata | {"version":"1.1","author":"Text Logic Diagram Skill"} |
将文本转换为精准的逻辑关系 SVG 图,输出为独立 HTML 文件。
当用户提到以下场景时,主动使用此技能:
| 关系类型 | 适用场景 | 视觉特征 |
|---|---|---|
| 递进关系 | 概念渐进发展、层层深入 | 阶梯式排列,箭头从左到右或从上到下 |
| 流程关系 | 步骤顺序、阶段推进 | 线性/蛇形排列,带编号的节点 |
| 循环关系 | 概念循环往复、闭环反馈 | 环形排列,首尾相连 |
| 层次结构 | 包含、从属、分类关系 | 树形/金字塔/嵌套结构 |
| 对比关系 | 对照、比较、优劣分析 | 左右/上下对称排列 |
| 矩阵关系 | 多维度交叉、复杂关联 | 网格/象限布局 |
根据分析结果,使用本技能的设计规范生成 HTML 文件。
多段拆解规则:
<div class="diagram-card"> 容器支持深色和浅色主题切换,默认深色。
融合 Cursor 暖色深底 + Claude 赭石强调色。告别冷蓝色调。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #141413 (温暖近黑) |
| 卡片背景 | #1a1a18 |
| 节点填充主色 | #1e1e1c → #282825 |
| 节点描边 | #7a6e5e (暖棕) |
| 主文字 | #faf9f5 (Ivory 暖白) |
| 副文字 | #b0aea5 (暖银) |
| 连接线 | rgba(38, 37, 30, 0.35) |
| 箭头 | #8a8377 |
| 强调色 | #7a6e5e (暖棕), #c96442 (赭石) |
融合 Claude 羊皮纸 + Cursor 暖面。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #f5f4ed (羊皮纸) |
| 卡片背景 | #faf9f5 (Ivory) |
| 节点填充主色 | #ebe9e2 → #e0ddd4 |
| 节点描边 | #8a7e6e (暖棕) |
| 主文字 | #141413 (暖近黑) |
| 副文字 | #5e5d59 (橄榄灰) |
| 连接线 | #c8c5bc |
| 箭头 | #8a8377 |
| 强调色 | #8a7e6e (暖棕), #c96442 (赭石) |
0 0 800 500,按需调整dx=1.5, dy=1.5, stdDeviation=2<!-- 带阴影的圆角矩形节点 -->
<rect x="X" y="Y" width="W" height="H" rx="8"
class="svg-node" stroke="#7a6e5e" stroke-width="1.5"
filter="url(#shadow)"/>
<text x="CX" y="CY" class="svg-text-primary" font-size="14" font-weight="600"
text-anchor="middle">概念名称</text>
<!-- 标准连接线 -->
<line x1="X1" y1="Y1" x2="X2" y2="Y2"
class="svg-line" stroke-width="1" marker-end="url(#arrow)"/>
<!-- 虚线连接(表示弱关系/隐含关系) -->
<line x1="X1" y1="Y1" x2="X2" y2="Y2"
class="svg-line" stroke-width="1" stroke-dasharray="4,3"
marker-end="url(#arrow)"/>
<!-- 曲线连接(避开障碍物) -->
<path d="M X1 Y1 Q CX CY X2 Y2"
class="svg-line" stroke-width="1" fill="none"
marker-end="url(#arrow)"/>
<div class="diagram-card">
<div class="diagram-label">
<span class="label-tag">递进关系</span>
<span class="label-title">第一段:XXX 的渐进发展</span>
</div>
<div class="diagram-body">
<svg class="diagram-svg" viewBox="0 0 800 500">
<!-- SVG 内容 -->
</svg>
</div>
</div>
始终生成一个独立的 .html 文件,包含: