npx skills add https://github.com/rhuss/cc-slidev --skill 'Visual Design'有效的视觉设计结合图表、图像和一致的视觉主题,以创建引人入胜、专业且易于访问的演示文稿。掌握 Mermaid 图表、图库摄影、AI 图像生成、色盲安全调色板和视觉一致性。
基于证据的无障碍性:此技能融合了基于研究的无障碍视觉设计最佳实践。完整指南请参阅 references/presentation-best-practices.md。
Mermaid 提供基于文本的图表绘制,在 Slidev 中渲染精美且导出效果良好。
最适合:流程、决策树、工作流
基本语法:
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
方向选项:
graph TD - 从上到下graph LR - 从左到右graph RL - 从右到左graph BT - 从下到上广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
节点形状:
graph LR
A[Rectangle]
B(Rounded)
C([Stadium])
D[[Subroutine]]
E[(Database)]
F((Circle))
G>Flag]
H{Diamond}
I{{Hexagon}}
箭头类型:
graph LR
A-->B %% Solid arrow
C-.->D %% Dotted arrow
E==>F %% Thick arrow
G-.-H %% Dotted line
I---J %% Solid line
边标签:
graph LR
A -->|Label text| B
B -.->|Another label| C
最适合:API 调用、交互、通信流程
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: HTTP Request
Server->>Database: Query
Database-->>Server: Results
Server-->>Client: HTTP Response
消息类型:
-> 实线--> 虚线->> 实线箭头-->> 虚线箭头激活框:
sequenceDiagram
Client->>+Server: Request
Server->>+Database: Query
Database-->>-Server: Data
Server-->>-Client: Response
注释:
sequenceDiagram
Client->>Server: Request
Note right of Server: Processing
Server->>Database: Query
Note over Client,Server: Communication
最适合:面向对象设计、数据模型、架构
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+int orderId
+Date date
+calculateTotal()
}
User "1" --> "*" Order : places
关系:
<|-- 继承*-- 组合o-- 聚合--> 关联-- 链接..|> 实现.. 依赖可见性:
+ 公共- 私有# 受保护~ 包最适合:状态机、生命周期、状态变更
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Approved
Review --> Rejected
Rejected --> Draft
Approved --> Published
Published --> [*]
带描述:
stateDiagram-v2
[*] --> Idle
Idle --> Processing : Start
Processing --> Complete : Success
Processing --> Error : Failure
Error --> Idle : Retry
Complete --> [*]
最适合:数据库模式、数据关系
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : includes
CUSTOMER {
string name
string email
int customerId
}
ORDER {
int orderId
date orderDate
float total
}
关系类型:
||--|| 一对一||--o{ 一对多}o--o{ 多对多||--o| 零或一最适合:时间线、项目进度、路线图
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Task 1 :a1, 2024-01-01, 30d
Task 2 :after a1, 20d
section Phase 2
Task 3 :2024-02-01, 25d
Task 4 :2024-02-15, 20d
应用一致的颜色:
%%{init: {'theme':'base', 'themeVariables': {
'primaryColor':'#3b82f6',
'primaryTextColor':'#fff',
'primaryBorderColor':'#2563eb',
'lineColor':'#6b7280',
'secondaryColor':'#8b5cf6',
'tertiaryColor':'#f59e0b'
}}}%%
graph TD
A[Start] --> B[Process]
B --> C[End]
主题预设:
default - 标准颜色dark - 深色模式forest - 绿色调neutral - 灰度base - 可自定义(使用 themeVariables)流程或工作流? → 流程图
系统交互? → 序列图
数据结构? → 类图或 ER 图
状态变更? → 状态图
时间线或进度? → 甘特图
复杂架构? → 组件图 + 流程图
相关性:
质量:
基调:
多样性:
基于概念的搜索:
特定颜色的搜索:
方向搜索:
质量指标:
与 Unsplash 类似,良好的备用来源:
包含在演示者备注或最后一页幻灯片中:
<!--
Image credits:
- Photo by [Photographer Name] on Unsplash
- https://unsplash.com/photos/[photo-id]
-->
使用前:
工具:
convert input.jpg -resize 1920x1080 output.jpg结构:
[Subject] + [Style] + [Composition] + [Colors] + [Details] + [Quality]
示例:
技术演示:
Isometric illustration of cloud infrastructure, interconnected servers
and databases, modern tech style, blue and purple gradient, clean
minimal design, high detail, professional quality
商务演示:
Professional photograph of diverse business team in modern office,
collaborating around laptop, natural lighting, corporate environment,
blue and gray tones, shallow depth of field, high resolution
数据可视化:
Abstract data visualization, flowing connections and nodes,
information network concept, gradient from blue to cyan,
dark background, glowing elements, futuristic style, 16:9 ratio
最佳实践:
结构:
/imagine [description] --ar 16:9 --v 6 --style [style]
示例:
概念插图:
/imagine neural network visualization, interconnected nodes and
pathways, abstract tech concept, electric blue and cyan,
dark background, volumetric lighting --ar 16:9 --v 6 --style raw
架构图:
/imagine microservices architecture diagram, isometric view,
containerized applications, kubernetes cluster, technical illustration,
blue white color scheme, clean lines --ar 16:9 --v 6
参数:
--ar 16:9 幻灯片宽高比--v 6 版本 6(最新)--style raw 艺术性较低,更写实--q 2 质量(1-2,越高越好)--s 50 风格化(0-1000,越低越写实)正向提示:
professional business chart visualization, clean modern design,
blue gradient background, data analytics concept, high quality,
detailed, 4k resolution, trending on artstation
负向提示:
blurry, low quality, text, watermark, signature, distorted,
ugly, bad anatomy, poorly drawn
设置:
应做:
不应做:
企业/专业:
Primary: #1e40af (Deep Blue)
Secondary: #6b7280 (Gray)
Accent: #3b82f6 (Bright Blue)
Background: #ffffff (White)
Text: #1f2937 (Dark Gray)
科技/现代:
Primary: #3b82f6 (Blue)
Secondary: #8b5cf6 (Purple)
Accent: #06b6d4 (Cyan)
Background: #0f172a (Dark Navy)
Text: #f8fafc (Light)
学术/正式:
Primary: #1e3a8a (Navy)
Secondary: #991b1b (Maroon)
Accent: #92400e (Brown)
Background: #fef3c7 (Cream)
Text: #1c1917 (Black)
创意/活力:
Primary: #dc2626 (Red)
Secondary: #f59e0b (Amber)
Accent: #8b5cf6 (Purple)
Background: #ffffff (White)
Text: #18181b (Black)
互补色: 色轮上相对的颜色
类似色: 色轮上相邻的颜色
单色系: 单一色调的变化
三色系: 三种等距分布的颜色
图表: 在所有 Mermaid 图表中使用主题颜色 图像: 应用滤镜或叠加层以匹配调色板 背景: 始终使用主题背景 文本: 一致的标题和正文颜色 图标: 单一风格(轮廓 vs 填充),颜色匹配
风格:
来源:
一致性规则:
将幻灯片划分为 3x3 网格:
均匀分布元素:
引导观众视线:
创建视觉层次:
确保可读性:
---
background: './image.jpg'
class: text-center
---
<div class="backdrop-blur-sm bg-black/50 p-8">
<h1 class="text-white text-6xl font-bold">
Readable Title
</h1>
</div>
技术:
图像 + 文本并排:
---
layout: image-right
image: './diagram.png'
---
# Content Here
- Point 1
- Point 2
- Point 3
平衡:
Title (H1): 44-60pt
Subtitle (H2): 32-40pt
Section (H3): 24-32pt
Body: 18-24pt
Caption: 14-18pt
Primary: Headlines, key data
Secondary: Subheadings, supporting text
Tertiary: Captions, notes
Neutral: Body text, backgrounds
Bold: Titles, emphasis, CTAs
Regular: Body text, most content
Light: Captions, metadata, fine print
✅ 应做:
❌ 不应做:
✅ 应做:
❌ 不应做:
✅ 应做:
❌ 不应做:
✅ 应做:
❌ 不应做:
Flowchart: graph TD
Sequence: sequenceDiagram
Class: classDiagram
State: stateDiagram-v2
ER: erDiagram
Gantt: gantt
蓝色 + 橙色(推荐 - 普遍无障碍):
primary: "#3b82f6" # Blue (trust, tech)
secondary: "#f97316" # Orange (energy, action)
neutral: "#6b7280" # Gray (backgrounds)
text: "#1f2937" # Dark gray (body text)
background: "#ffffff" # White (slide background)
# Contrast ratios:
# Blue on white: 8.6:1 ✓
# Orange on white: 3.4:1 (use for headings ≥24pt) ✓
# Text on white: 16.1:1 ✓
紫色 + 蓝绿色(专业、现代):
primary: "#8b5cf6" # Purple (creative, innovative)
secondary: "#14b8a6" # Teal (calm, balanced)
neutral: "#64748b" # Slate gray
text: "#0f172a" # Near black
background: "#ffffff" # White
深色模式(高对比度):
primary: "#60a5fa" # Light blue (readable on dark)
secondary: "#fbbf24" # Amber (attention)
neutral: "#475569" # Slate (dividers)
text: "#f1f5f9" # Light gray (body text)
background: "#0f172a" # Very dark blue
# Note: Dark mode requires ≥7:1 contrast for text
验证清单:
有关高级 Mermaid 语法和视觉设计原则,请查阅 Mermaid 文档 (https://mermaid.js.org/) 和 Refactoring UI 等设计资源。
每周安装次数
–
代码仓库
GitHub 星标数
17
首次出现
–
安全审计
Effective visual design combines diagrams, images, and consistent theming to create engaging, professional, accessible presentations. Master mermaid diagrams, stock photography, AI image generation, colorblind-safe palettes, and visual cohesion.
Evidence-based accessibility : This skill incorporates research-based best practices for accessible visual design. See references/presentation-best-practices.md for full guidelines.
Mermaid provides text-based diagramming that renders beautifully in Slidev and exports well.
Best for: Processes, decision trees, workflows
Basic syntax:
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
Direction options:
graph TD - Top to bottomgraph LR - Left to rightgraph RL - Right to leftgraph BT - Bottom to topNode shapes:
graph LR
A[Rectangle]
B(Rounded)
C([Stadium])
D[[Subroutine]]
E[(Database)]
F((Circle))
G>Flag]
H{Diamond}
I{{Hexagon}}
Arrow types:
graph LR
A-->B %% Solid arrow
C-.->D %% Dotted arrow
E==>F %% Thick arrow
G-.-H %% Dotted line
I---J %% Solid line
Edge labels:
graph LR
A -->|Label text| B
B -.->|Another label| C
Best for: API calls, interactions, communication flows
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: HTTP Request
Server->>Database: Query
Database-->>Server: Results
Server-->>Client: HTTP Response
Message types:
-> Solid line--> Dotted line->> Solid arrow-->> Dotted arrowActivation boxes:
sequenceDiagram
Client->>+Server: Request
Server->>+Database: Query
Database-->>-Server: Data
Server-->>-Client: Response
Notes:
sequenceDiagram
Client->>Server: Request
Note right of Server: Processing
Server->>Database: Query
Note over Client,Server: Communication
Best for: Object-oriented design, data models, architecture
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+int orderId
+Date date
+calculateTotal()
}
User "1" --> "*" Order : places
Relationships:
<|-- Inheritance*-- Compositiono-- Aggregation--> Association-- Link..|> Realization.. DependencyVisibility:
+ Public- Private# Protected~ PackageBest for: State machines, lifecycle, status changes
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Approved
Review --> Rejected
Rejected --> Draft
Approved --> Published
Published --> [*]
With descriptions:
stateDiagram-v2
[*] --> Idle
Idle --> Processing : Start
Processing --> Complete : Success
Processing --> Error : Failure
Error --> Idle : Retry
Complete --> [*]
Best for: Database schemas, data relationships
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : includes
CUSTOMER {
string name
string email
int customerId
}
ORDER {
int orderId
date orderDate
float total
}
Relationship types:
||--|| One to one||--o{ One to many}o--o{ Many to many||--o| Zero or oneBest for: Timelines, project schedules, roadmaps
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Task 1 :a1, 2024-01-01, 30d
Task 2 :after a1, 20d
section Phase 2
Task 3 :2024-02-01, 25d
Task 4 :2024-02-15, 20d
Apply consistent colors:
%%{init: {'theme':'base', 'themeVariables': {
'primaryColor':'#3b82f6',
'primaryTextColor':'#fff',
'primaryBorderColor':'#2563eb',
'lineColor':'#6b7280',
'secondaryColor':'#8b5cf6',
'tertiaryColor':'#f59e0b'
}}}%%
graph TD
A[Start] --> B[Process]
B --> C[End]
Theme presets:
default - Standard colorsdark - Dark modeforest - Green tonesneutral - Grayscalebase - Customizable (use themeVariables)Process or workflow? → Flowchart
System interaction? → Sequence Diagram
Data structure? → Class or ER Diagram
State changes? → State Diagram
Timeline or schedule? → Gantt Chart
Complex architecture? → Component + Flowchart
Relevance:
Quality:
Tone:
Diversity:
Concept-based searches:
Color-specific searches:
Orientation searches:
Quality indicators:
Similar to Unsplash, good backup source:
Include in presenter notes or final slide:
<!--
Image credits:
- Photo by [Photographer Name] on Unsplash
- https://unsplash.com/photos/[photo-id]
-->
Before using:
Tools:
convert input.jpg -resize 1920x1080 output.jpgStructure:
[Subject] + [Style] + [Composition] + [Colors] + [Details] + [Quality]
Examples:
Technical presentation:
Isometric illustration of cloud infrastructure, interconnected servers
and databases, modern tech style, blue and purple gradient, clean
minimal design, high detail, professional quality
Business presentation:
Professional photograph of diverse business team in modern office,
collaborating around laptop, natural lighting, corporate environment,
blue and gray tones, shallow depth of field, high resolution
Data visualization:
Abstract data visualization, flowing connections and nodes,
information network concept, gradient from blue to cyan,
dark background, glowing elements, futuristic style, 16:9 ratio
Best practices:
Structure:
/imagine [description] --ar 16:9 --v 6 --style [style]
Examples:
Concept illustration:
/imagine neural network visualization, interconnected nodes and
pathways, abstract tech concept, electric blue and cyan,
dark background, volumetric lighting --ar 16:9 --v 6 --style raw
Architectural diagram:
/imagine microservices architecture diagram, isometric view,
containerized applications, kubernetes cluster, technical illustration,
blue white color scheme, clean lines --ar 16:9 --v 6
Parameters:
--ar 16:9 Aspect ratio for slides--v 6 Version 6 (latest)--style raw Less artistic, more literal--q 2 Quality (1-2, higher = better)--s 50 Stylization (0-1000, lower = literal)Positive prompt:
professional business chart visualization, clean modern design,
blue gradient background, data analytics concept, high quality,
detailed, 4k resolution, trending on artstation
Negative prompt:
blurry, low quality, text, watermark, signature, distorted,
ugly, bad anatomy, poorly drawn
Settings:
Do:
Don't:
Corporate/Professional:
Primary: #1e40af (Deep Blue)
Secondary: #6b7280 (Gray)
Accent: #3b82f6 (Bright Blue)
Background: #ffffff (White)
Text: #1f2937 (Dark Gray)
Tech/Modern:
Primary: #3b82f6 (Blue)
Secondary: #8b5cf6 (Purple)
Accent: #06b6d4 (Cyan)
Background: #0f172a (Dark Navy)
Text: #f8fafc (Light)
Academic/Formal:
Primary: #1e3a8a (Navy)
Secondary: #991b1b (Maroon)
Accent: #92400e (Brown)
Background: #fef3c7 (Cream)
Text: #1c1917 (Black)
Creative/Energetic:
Primary: #dc2626 (Red)
Secondary: #f59e0b (Amber)
Accent: #8b5cf6 (Purple)
Background: #ffffff (White)
Text: #18181b (Black)
Complementary: Opposite on color wheel
Analogous: Adjacent on color wheel
Monochromatic: Variations of single hue
Triadic: Three equally spaced colors
Diagrams: Use theme colors in all mermaid diagrams Images: Apply filters or overlays to match palette Backgrounds: Stick to theme backgrounds throughout Text: Consistent heading and body colors Icons: Single style (outline vs filled), matching colors
Styles:
Sources:
Consistency rules:
Divide slide into 3x3 grid:
Distribute elements evenly:
Guide viewer's eye:
Create visual hierarchy:
Ensure readability:
---
background: './image.jpg'
class: text-center
---
<div class="backdrop-blur-sm bg-black/50 p-8">
<h1 class="text-white text-6xl font-bold">
Readable Title
</h1>
</div>
Techniques:
Image + text side-by-side:
---
layout: image-right
image: './diagram.png'
---
# Content Here
- Point 1
- Point 2
- Point 3
Balance:
Title (H1): 44-60pt
Subtitle (H2): 32-40pt
Section (H3): 24-32pt
Body: 18-24pt
Caption: 14-18pt
Primary: Headlines, key data
Secondary: Subheadings, supporting text
Tertiary: Captions, notes
Neutral: Body text, backgrounds
Bold: Titles, emphasis, CTAs
Regular: Body text, most content
Light: Captions, metadata, fine print
✅ Do:
❌ Don't:
✅ Do:
❌ Don't:
✅ Do:
❌ Don't:
✅ Do:
❌ Don't:
Flowchart: graph TD
Sequence: sequenceDiagram
Class: classDiagram
State: stateDiagram-v2
ER: erDiagram
Gantt: gantt
Blue + Orange (Recommended - Universally accessible):
primary: "#3b82f6" # Blue (trust, tech)
secondary: "#f97316" # Orange (energy, action)
neutral: "#6b7280" # Gray (backgrounds)
text: "#1f2937" # Dark gray (body text)
background: "#ffffff" # White (slide background)
# Contrast ratios:
# Blue on white: 8.6:1 ✓
# Orange on white: 3.4:1 (use for headings ≥24pt) ✓
# Text on white: 16.1:1 ✓
Purple + Teal (Professional, modern):
primary: "#8b5cf6" # Purple (creative, innovative)
secondary: "#14b8a6" # Teal (calm, balanced)
neutral: "#64748b" # Slate gray
text: "#0f172a" # Near black
background: "#ffffff" # White
Dark Mode (High contrast):
primary: "#60a5fa" # Light blue (readable on dark)
secondary: "#fbbf24" # Amber (attention)
neutral: "#475569" # Slate (dividers)
text: "#f1f5f9" # Light gray (body text)
background: "#0f172a" # Very dark blue
# Note: Dark mode requires ≥7:1 contrast for text
Verification checklist:
For advanced mermaid syntax and visual design principles, consult the Mermaid documentation (https://mermaid.js.org/) and design resources like Refactoring UI.
Weekly Installs
–
Repository
GitHub Stars
17
First Seen
–
Security Audits
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
39,800 周安装