重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
svg-illustrations by fawzymohamed/devops
npx skills add https://github.com/fawzymohamed/devops --skill svg-illustrations此技能为 DevOps LMS 创建一致、高质量的手绘风格 SVG 插图提供指导。
插图系统采用 混合方法:
用途: 顺序的逐步流程
最适合:
属性:
interface Props {
steps: Array<{
label: string // 主文本
sublabel?: string // 次要文本
icon?: string // 表情符号图标
color: string // Tailwind 颜色名称
}>
direction?: 'horizontal' | 'vertical' // 由步骤数量自动确定(可选)
showFeedbackLoop?: boolean // 显示返回箭头
feedbackLabel?: string // 反馈标签
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
}
自动方向(无需指定 direction):
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 步骤数 | 布局 | 行为 |
|---|---|---|
| ≤5 | 水平 | 并排流,全宽 |
| 6-10 | 垂直 | 堆叠流,280px 宽 |
10 | 垂直 + 滚动 | 600px 最大高度,带滚动条
如果需要,仍可使用 direction: horizontal 或 direction: vertical 覆盖。
MDC 用法:
::illustration-linear-flow
---
steps:
- label: 计划
sublabel: 冲刺计划
icon: 📋
color: violet
- label: 构建
sublabel: 开发
icon: 🔨
color: blue
- label: 测试
sublabel: 质量保证
icon: ✅
color: emerald
- label: 部署
sublabel: 发布
icon: 🚀
color: amber
showFeedbackLoop: true
feedbackLabel: 持续改进
---
::
用途: 具有手绘美感的复选框式列表
最适合:
属性:
interface Props {
title: string // 检查清单标题
items: Array<string | { // 简单字符串或对象
text: string
icon?: string
}>
note?: string // 可选的脚注,带 💡
color?: string // 默认:emerald
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // 默认:2xl
}
MDC 用法:
::illustration-checklist
---
title: 完成的定义
items:
- text: 代码已评审并批准
icon: 👀
- text: 单元测试通过
icon: ✅
- text: 文档已更新
icon: 📝
- text: 已部署到预发布环境
icon: 🚀
note: 所有项目必须在标记完成前勾选
color: emerald
---
::
用途: 包含职责的团队角色容器
最适合:
属性:
interface Props {
title: string // 团队标题
subtitle?: string // 可选副标题
roles: Array<{
name: string // 角色名称
owns: string // 他们负责什么
icon: string // 表情符号图标
color: string // Tailwind 颜色
responsibilities: string[] // 职责列表
}>
footnote?: string // 可选脚注
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // 默认:full
}
MDC 用法:
::illustration-team-composition
---
title: Scrum 团队
subtitle: 自组织,跨职能
roles:
- name: 产品负责人
owns: 产品待办列表
icon: 🎯
color: violet
responsibilities:
- 最大化价值
- 管理待办列表
- 利益相关者联络人
- name: Scrum Master
owns: 流程
icon: 🛡️
color: blue
responsibilities:
- 移除障碍
- 促进活动
- 指导团队
- name: 开发人员
owns: 冲刺工作
icon: 👥
color: emerald
responsibilities:
- 构建增量
- 自组织
- 跨职能
footnote: 典型团队规模:5-9 人
---
::
用途: 带连接器的并排概念映射
最适合:
属性:
interface Props {
leftTitle: string // 左列标题
rightTitle: string // 右列标题
leftColor?: string // 默认:violet
rightColor?: string // 默认:cyan
connections: Array<{
left: string // 左侧项目文本
right: string // 右侧项目文本
icon: string // 连接器表情符号
}>
footnote?: string // 可选脚注
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // 默认:full
}
MDC 用法:
::illustration-comparison-map
---
leftTitle: Scrum
rightTitle: DevOps
leftColor: violet
rightColor: cyan
connections:
- left: Sprint
right: Pipeline
icon: 🔄
- left: Backlog
right: Kanban Board
icon: 📋
- left: Retrospective
right: Post-mortem
icon: 🔍
footnote: 两者都强调持续改进
---
::
用途: 金字塔/层次结构图,其中大小表示数量或重要性
最适合:
属性:
interface Props {
layers: Array<{
label: string // 层名称(显示在内部)
description?: string // 显示在右侧的文本
icon?: string // 显示在左侧的表情符号
color: string // Tailwind 颜色名称
}> // 顺序:从上到下(最小到最大)
title?: string // 金字塔上方的可选标题
footnote?: string // 下方居中的可选脚注
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // 默认:xl
}
MDC 用法:
::illustration-pyramid
---
layers:
- label: 端到端测试
description: 少 - 慢,脆弱
icon: 🌐
color: rose
- label: 集成测试
description: 中等 - 速度适中
icon: 🔗
color: amber
- label: 单元测试
description: 多 - 快,成本低
icon: 🧩
color: emerald
footnote: 底部测试多,顶部测试少
size: xl
---
::
视觉结构:
/\
/ \ ← 顶层(少/小)- rose
/____\
/ \ ← 中间层(中等/中)- amber
/________\
/ \ ← 底层(多/大)- emerald
/______________\
所有插图组件都支持 size 属性来控制最大宽度:
| 尺寸 | 最大宽度 | 最适合 |
|---|---|---|
sm | 384px | 垂直流程,简单图表 |
md | 448px | 紧凑的水平流程 |
lg | 512px | 中等检查清单 |
xl | 576px | 标准插图 |
2xl | 672px | 带较长文本的检查清单 |
3xl | 768px | 宽幅对比 |
full | 100% | 全宽插图(大多数组件的默认值) |
| 组件 | 默认尺寸 | 理由 |
|---|---|---|
IllustrationLinearFlow | 自动调整 | 方向和尺寸由步骤数决定 |
IllustrationChecklist | 2xl | 单列列表不需要全宽 |
IllustrationTeamComposition | full | 团队卡片水平展开 |
IllustrationComparisonMap | full | 并排对比需要空间 |
IllustrationPyramid | xl | 带侧边描述的金字塔需要中等宽度 |
组件自动确定布局和尺寸:
directionsize: md 或 size: lg位于 app/composables/useIllustrationDesign.ts
| 颜色名称 | 主色 Hex | 浅色 Hex | 文本色 Hex | 用于 |
|---|---|---|---|---|
violet | #8b5cf6 | #a78bfa | #c4b5fd | 计划,策略,产品 |
blue | #3b82f6 | #60a5fa | #93c5fd | 开发,构建,流程 |
emerald | #10b981 | #34d399 | #6ee7b7 | 测试,成功,完成 |
amber | #f59e0b | #fbbf24 | #fcd34d | 警告,重要,部署 |
rose | #f43f5e | #fb7185 | #fda4af | 关键,错误,阻塞 |
cyan | #06b6d4 | #22d3ee | #67e8f9 | 信息,链接,运维 |
gray | #6b7280 | #9ca3af | #d1d5db | 中性,禁用,背景 |
SPACING = {
boxPadding: 20, // 框内边距
itemGap: 35, // 列表项之间的间距
arrowLength: 50, // 箭头长度
containerPadding: 30, // 容器内边距
boxWidth: 140, // 标准框
boxHeight: 70, // 标准框
largeBoxWidth: 160, // 角色卡片
largeBoxHeight: 200, // 角色卡片
borderRadius: 12, // 圆角半径
iconRadius: 25 // 图标圆形半径
}
STROKES = {
boxDash: '8,4', // 框描边图案
arrowDash: '4,3', // 箭头描边图案
containerDash: '10,5', // 容器描边图案
boxStrokeWidth: 2.5, // 框描边宽度
arrowStrokeWidth: 2, // 箭头描边宽度
containerStrokeWidth: 2 // 容器描边宽度
}
TYPOGRAPHY = {
fontFamily: "'Segoe UI', system-ui, sans-serif",
titleSize: 14, // 标题/页眉
labelSize: 12, // 主标签
sublabelSize: 10, // 次要文本
smallSize: 9, // 注释/说明文字
iconSize: 20 // 表情符号大小
}
What type of diagram do you need?
│
├── Sequential process? (A → B → C)
│ └── Use: IllustrationLinearFlow
│
├── Checklist/list with checkboxes?
│ └── Use: IllustrationChecklist
│
├── Team/roles with responsibilities?
│ └── Use: IllustrationTeamComposition
│
├── Side-by-side comparison?
│ └── Use: IllustrationComparisonMap
│
├── Pyramid/hierarchy where size shows quantity?
│ └── Use: IllustrationPyramid
│
└── None of the above?
└── Create custom SVG (see below)
仅当没有组件适合时才创建自定义 SVG。请遵循以下规则:
<script setup>
import {
COLORS,
SPACING,
STROKES,
OPACITY,
TYPOGRAPHY,
getColor,
getHandDrawnRotation
} from '~/composables/useIllustrationDesign'
</script>
stroke-dasharray 并配合设计系统图案getHandDrawnRotation(index) 以产生变化fill-opacityrx 属性并配合 SPACING.borderRadius<template>
<svg
:viewBox="`0 0 ${width} ${height}`"
class="w-full h-auto"
role="img"
aria-label="Descriptive label"
>
<!-- Elements here -->
</svg>
</template>
role="img" 和 aria-label组件通过 MDC 语法在 markdown 中自动可用:
Here's how the Scrum framework flows:
::illustration-linear-flow
---
steps:
- label: Sprint Planning
color: violet
- label: Daily Scrum
color: blue
- label: Sprint Review
color: emerald
- label: Retrospective
color: amber
---
::
As you can see, Scrum is an iterative process...
直接从组件目录导入:
<script setup>
import { IllustrationLinearFlow } from '~/components/illustrations'
</script>
<template>
<IllustrationLinearFlow :steps="mySteps" />
</template>
app/
├── components/content/ # MDC 组件(在 markdown 中自动注册)
│ ├── IllustrationLinearFlow.vue
│ ├── IllustrationChecklist.vue
│ ├── IllustrationTeamComposition.vue
│ ├── IllustrationComparisonMap.vue
│ └── IllustrationPyramid.vue
└── composables/
└── useIllustrationDesign.ts
重要提示: 组件必须位于 components/content/ 目录下,MDC 语法才能在 markdown 文件中工作。
在完成任何插图之前:
当这些模式频繁需要时,将添加新组件:
注意:添加了 IllustrationPyramid 以支持测试金字塔和分层层次结构。
每周安装次数
54
仓库
GitHub 星标数
1
首次出现
Jan 29, 2026
安全审计
安装于
github-copilot53
codex53
gemini-cli53
cursor53
opencode53
kimi-cli52
This skill provides guidance for creating consistent, high-quality hand-drawn style SVG illustrations for the DevOps LMS.
The illustration system uses a hybrid approach :
Purpose: Sequential step-by-step processes
Best For:
Props:
interface Props {
steps: Array<{
label: string // Main text
sublabel?: string // Secondary text
icon?: string // Emoji icon
color: string // Tailwind color name
}>
direction?: 'horizontal' | 'vertical' // Auto-determined by step count (optional)
showFeedbackLoop?: boolean // Show return arrow
feedbackLabel?: string // Label for feedback
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
}
Auto-Direction (No need to specify direction):
| Steps | Layout | Behavior |
|---|---|---|
| ≤5 | Horizontal | Side-by-side flow, full width |
| 6-10 | Vertical | Stacked flow, 280px width |
10 | Vertical + Scroll | 600px max-height with scrolling
You can still override with direction: horizontal or direction: vertical if needed.
MDC Usage:
::illustration-linear-flow
---
steps:
- label: Plan
sublabel: Sprint Planning
icon: 📋
color: violet
- label: Build
sublabel: Development
icon: 🔨
color: blue
- label: Test
sublabel: QA
icon: ✅
color: emerald
- label: Deploy
sublabel: Release
icon: 🚀
color: amber
showFeedbackLoop: true
feedbackLabel: Continuous Improvement
---
::
Purpose: Checkbox-style lists with hand-drawn aesthetic
Best For:
Props:
interface Props {
title: string // Checklist title
items: Array<string | { // Simple string or object
text: string
icon?: string
}>
note?: string // Optional footnote with 💡
color?: string // Default: emerald
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // Default: 2xl
}
MDC Usage:
::illustration-checklist
---
title: Definition of Done
items:
- text: Code reviewed and approved
icon: 👀
- text: Unit tests passing
icon: ✅
- text: Documentation updated
icon: 📝
- text: Deployed to staging
icon: 🚀
note: All items must be checked before marking complete
color: emerald
---
::
Purpose: Team roles in a container with responsibilities
Best For:
Props:
interface Props {
title: string // Team title
subtitle?: string // Optional subtitle
roles: Array<{
name: string // Role name
owns: string // What they own
icon: string // Emoji icon
color: string // Tailwind color
responsibilities: string[] // List of responsibilities
}>
footnote?: string // Optional footnote
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // Default: full
}
MDC Usage:
::illustration-team-composition
---
title: Scrum Team
subtitle: Self-organizing, cross-functional
roles:
- name: Product Owner
owns: Product Backlog
icon: 🎯
color: violet
responsibilities:
- Maximizes value
- Manages backlog
- Stakeholder liaison
- name: Scrum Master
owns: Process
icon: 🛡️
color: blue
responsibilities:
- Removes impediments
- Facilitates events
- Coaches team
- name: Developers
owns: Sprint Work
icon: 👥
color: emerald
responsibilities:
- Build increment
- Self-organize
- Cross-functional
footnote: Typical team size: 5-9 people
---
::
Purpose: Side-by-side concept mapping with connectors
Best For:
Props:
interface Props {
leftTitle: string // Left column title
rightTitle: string // Right column title
leftColor?: string // Default: violet
rightColor?: string // Default: cyan
connections: Array<{
left: string // Left item text
right: string // Right item text
icon: string // Connector emoji
}>
footnote?: string // Optional footnote
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // Default: full
}
MDC Usage:
::illustration-comparison-map
---
leftTitle: Scrum
rightTitle: DevOps
leftColor: violet
rightColor: cyan
connections:
- left: Sprint
right: Pipeline
icon: 🔄
- left: Backlog
right: Kanban Board
icon: 📋
- left: Retrospective
right: Post-mortem
icon: 🔍
footnote: Both emphasize continuous improvement
---
::
Purpose: Pyramid/hierarchy diagrams where size indicates quantity or importance
Best For:
Props:
interface Props {
layers: Array<{
label: string // Layer name (displayed inside)
description?: string // Text shown to the right
icon?: string // Emoji shown to the left
color: string // Tailwind color name
}> // Order: top (smallest) to bottom (largest)
title?: string // Optional title above pyramid
footnote?: string // Optional centered footnote below
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' // Default: xl
}
MDC Usage:
::illustration-pyramid
---
layers:
- label: E2E Tests
description: Few - slow, fragile
icon: 🌐
color: rose
- label: Integration
description: Some - moderate speed
icon: 🔗
color: amber
- label: Unit Tests
description: Many - fast, cheap
icon: 🧩
color: emerald
footnote: More tests at the bottom, fewer at the top
size: xl
---
::
Visual Structure:
/\
/ \ ← Top layer (few/small) - rose
/____\
/ \ ← Middle layer (some/medium) - amber
/________\
/ \ ← Bottom layer (many/large) - emerald
/______________\
All illustration components support a size prop to control the maximum width:
| Size | Max Width | Best For |
|---|---|---|
sm | 384px | Vertical flows, simple diagrams |
md | 448px | Compact horizontal flows |
lg | 512px | Medium checklists |
xl | 576px | Standard illustrations |
2xl | 672px | Checklists with longer text |
| Component | Default Size | Reasoning |
|---|---|---|
IllustrationLinearFlow | Auto-sized | Direction and size determined by step count |
IllustrationChecklist | 2xl | Single-column lists don't need full width |
IllustrationTeamComposition | full | Team cards spread horizontally |
IllustrationComparisonMap |
The component automatically determines layout and size:
direction only when you specifically need horizontal for >5 items or vertical for ≤5 itemssize: md or size: lg when you want a more compact lookLocated in app/composables/useIllustrationDesign.ts
| Color Name | Main Hex | Light Hex | Text Hex | Use For |
|---|---|---|---|---|
violet | #8b5cf6 | #a78bfa | #c4b5fd | Planning, Strategy, Product |
blue | #3b82f6 | #60a5fa | #93c5fd | Development, Build, Process |
emerald | #10b981 | #34d399 | #6ee7b7 | Testing, Success, Done |
amber |
SPACING = {
boxPadding: 20, // Inside boxes
itemGap: 35, // Between list items
arrowLength: 50, // Arrow length
containerPadding: 30, // Container padding
boxWidth: 140, // Standard box
boxHeight: 70, // Standard box
largeBoxWidth: 160, // Role cards
largeBoxHeight: 200, // Role cards
borderRadius: 12, // Rounded corners
iconRadius: 25 // Icon circles
}
STROKES = {
boxDash: '8,4', // Box stroke pattern
arrowDash: '4,3', // Arrow stroke pattern
containerDash: '10,5', // Container stroke pattern
boxStrokeWidth: 2.5, // Box stroke width
arrowStrokeWidth: 2, // Arrow stroke width
containerStrokeWidth: 2 // Container stroke width
}
TYPOGRAPHY = {
fontFamily: "'Segoe UI', system-ui, sans-serif",
titleSize: 14, // Titles/headers
labelSize: 12, // Main labels
sublabelSize: 10, // Secondary text
smallSize: 9, // Notes/captions
iconSize: 20 // Emoji size
}
What type of diagram do you need?
│
├── Sequential process? (A → B → C)
│ └── Use: IllustrationLinearFlow
│
├── Checklist/list with checkboxes?
│ └── Use: IllustrationChecklist
│
├── Team/roles with responsibilities?
│ └── Use: IllustrationTeamComposition
│
├── Side-by-side comparison?
│ └── Use: IllustrationComparisonMap
│
├── Pyramid/hierarchy where size shows quantity?
│ └── Use: IllustrationPyramid
│
└── None of the above?
└── Create custom SVG (see below)
Only create custom SVG when no component fits. Follow these rules:
<script setup>
import {
COLORS,
SPACING,
STROKES,
OPACITY,
TYPOGRAPHY,
getColor,
getHandDrawnRotation
} from '~/composables/useIllustrationDesign'
</script>
stroke-dasharray with design system patternsgetHandDrawnRotation(index) for variationfill-opacity from OPACITY constantsrx attribute with SPACING.borderRadius<template>
<svg
:viewBox="`0 0 ${width} ${height}`"
class="w-full h-auto"
role="img"
aria-label="Descriptive label"
>
<!-- Elements here -->
</svg>
</template>
role="img" and aria-labelComponents are automatically available in markdown via MDC syntax:
Here's how the Scrum framework flows:
::illustration-linear-flow
---
steps:
- label: Sprint Planning
color: violet
- label: Daily Scrum
color: blue
- label: Sprint Review
color: emerald
- label: Retrospective
color: amber
---
::
As you can see, Scrum is an iterative process...
Import directly from the components directory:
<script setup>
import { IllustrationLinearFlow } from '~/components/illustrations'
</script>
<template>
<IllustrationLinearFlow :steps="mySteps" />
</template>
app/
├── components/content/ # MDC components (auto-registered for markdown)
│ ├── IllustrationLinearFlow.vue
│ ├── IllustrationChecklist.vue
│ ├── IllustrationTeamComposition.vue
│ ├── IllustrationComparisonMap.vue
│ └── IllustrationPyramid.vue
└── composables/
└── useIllustrationDesign.ts
Important: Components must be in components/content/ for MDC syntax to work in markdown files.
Before completing any illustration:
When these patterns are needed frequently, new components will be added:
Note: IllustrationPyramid was added to support testing pyramids and layered hierarchies.
Weekly Installs
54
Repository
GitHub Stars
1
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot53
codex53
gemini-cli53
cursor53
opencode53
kimi-cli52
build-dashboard:快速构建交互式HTML仪表板 | 无需服务器,支持图表、表格、筛选器
993 周安装
3xl |
| 768px |
| Wide comparisons |
full | 100% | Full-width illustrations (default for most) |
full |
| Side-by-side comparisons need space |
IllustrationPyramid | xl | Pyramid with side descriptions needs moderate width |
| #f59e0b |
| #fbbf24 |
| #fcd34d |
| Warnings, Important, Deploy |
rose | #f43f5e | #fb7185 | #fda4af | Critical, Errors, Blockers |
cyan | #06b6d4 | #22d3ee | #67e8f9 | Information, Links, Ops |
gray | #6b7280 | #9ca3af | #d1d5db | Neutral, Disabled, Background |