# Design Visual Designer

> 视觉设计助手 - 专业的品牌视觉与平面设计专家。适用场景： (1) 品牌视觉识别系统设计（VI） (2) 配色方案设计与色彩理论 (3) 字体选择与排版设计 (4) 图标与插画风格指导 (5) 营销物料视觉设计 (6) 设计规范与风格指南 (7) 设计趋势分析与创意方向 触发关键词：视觉设计、VI设计、配色方案、字体排版、图标设计、品牌视觉、设计规范、风格指南、平面设计、视觉风格、色彩搭配

- Skill: `chendongqi/design-visual-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add chendongqi/design-visual-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chendongqi/design-visual-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: chendongqi (https://skillmd.com/u/chendongqi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chendongqi/design-visual-designer

---


# 视觉设计助手

## 核心工作流程

### 1. 品牌视觉识别系统（VI）

**VI系统构成：**
```
基础系统
├── 品牌标志（Logo）
│   ├── 主标志
│   ├── 辅助标志
│   ├── 标志组合规范
│   └── 最小使用尺寸
├── 标准色彩
│   ├── 主色
│   ├── 辅助色
│   ├── 点缀色
│   └── 色彩应用规范
├── 标准字体
│   ├── 品牌字体
│   ├── 正文字体
│   └── 字体层级
└── 辅助图形
    ├── 图形元素
    ├── 纹理/图案
    └── 应用规范

应用系统
├── 办公用品：名片/信纸/信封
├── 环境导视：指示牌/门牌
├── 营销物料：海报/展架/宣传册
├── 数字媒体：网站/App/社交媒体
└── 产品包装：产品/礼盒包装
```

**品牌调性与视觉风格对应：**

| 品牌调性 | 视觉特征 | 色彩倾向 | 字体风格 |
|----------|----------|----------|----------|
| 高端奢华 | 简洁留白、精致细节 | 黑金、深色系 | 衬线、纤细 |
| 年轻活力 | 大胆撞色、动态感 | 明亮饱和 | 圆润、粗体 |
| 专业可信 | 规整、稳重 | 蓝色系、中性色 | 无衬线、规整 |
| 温暖亲和 | 柔和、圆润 | 暖色调、低饱和 | 圆角、手写 |
| 科技前沿 | 几何、渐变 | 紫蓝渐变、霓虹 | 等宽、几何 |
| 自然环保 | 有机形态、纹理 | 绿色系、大地色 | 自然、复古 |

### 2. 色彩设计

**色彩基础理论：**
```
色彩三要素
├── 色相（Hue）：颜色种类
├── 饱和度（Saturation）：颜色纯度
└── 明度（Brightness）：颜色明暗

色彩关系
├── 互补色：色环对面（高对比）
├── 类似色：色环相邻（和谐）
├── 三角色：色环等距三点
├── 分裂互补：互补色两侧
└── 四角色：色环等距四点
```

**配色方案构建：**
```
60-30-10法则
├── 60% 主色：背景/大面积
├── 30% 辅助色：次要元素
└── 10% 点缀色：强调/CTA

品牌配色体系
├── 主色（1-2个）：品牌识别核心
├── 辅助色（2-3个）：功能区分/层次
├── 中性色（灰度）：文字/背景
├── 功能色：成功/警告/错误/信息
└── 渐变色：现代感/科技感
```

**色彩心理与应用：**

| 色彩 | 心理联想 | 适用行业 | 注意事项 |
|------|----------|----------|----------|
| 红色 | 激情、紧迫、食欲 | 餐饮、促销、娱乐 | 避免过度使用 |
| 橙色 | 活力、创意、温暖 | 儿童、创意、食品 | 可能显得廉价 |
| 黄色 | 乐观、注意、智慧 | 教育、物流、快消 | 纯黄难阅读 |
| 绿色 | 自然、健康、财富 | 环保、健康、金融 | 注意文化差异 |
| 蓝色 | 信任、专业、冷静 | 科技、金融、医疗 | 可能显得冷漠 |
| 紫色 | 高贵、神秘、创意 | 美妆、奢侈品、艺术 | 男性可能抵触 |
| 黑色 | 高端、权威、神秘 | 奢侈品、时尚、科技 | 需要搭配使用 |
| 白色 | 纯净、简洁、空间 | 医疗、科技、极简 | 注意对比度 |

### 3. 字体与排版

**字体分类与特点：**
```
衬线字体（Serif）
├── 特点：笔画末端装饰
├── 感觉：传统、正式、可信
├── 适用：印刷、长文阅读
└── 代表：宋体、Times、Georgia

无衬线字体（Sans-serif）
├── 特点：笔画简洁无装饰
├── 感觉：现代、简洁、友好
├── 适用：屏幕显示、标题
└── 代表：黑体、Helvetica、Arial

等宽字体（Monospace）
├── 特点：每个字符等宽
├── 感觉：技术、代码
├── 适用：代码、数据
└── 代表：Consolas、Monaco

手写/装饰字体
├── 特点：风格化、个性化
├── 感觉：独特、有趣
├── 适用：标题、装饰
└── 注意：可读性、适度使用
```

**排版基本原则：**
```
层级结构
├── 标题：大号、粗体、醒目
├── 副标题：中号、次要强调
├── 正文：标准大小、易读
├── 辅助文字：小号、次要信息
└── 注释：最小号、补充说明

排版参数
├── 行高：字号的1.4-1.8倍
├── 字间距：正常或微调
├── 段间距：行高的0.5-1倍
├── 每行字数：中文30-40字
└── 对齐方式：左对齐为主
```

**字体搭配原则：**

| 原则 | 说明 | 示例 |
|------|------|------|
| 对比原则 | 衬线+无衬线 | 标题Sans+正文Serif |
| 家族原则 | 同一字体家族不同字重 | Bold+Regular |
| 时代原则 | 同一时代风格的字体 | 现代几何字体组合 |
| 数量原则 | 最多2-3种字体 | 标题+正文+装饰 |

### 4. 图标设计

**图标设计原则：**
```
一致性
├── 风格统一：线性/面性/双色
├── 粗细统一：描边粗细一致
├── 圆角统一：圆角半径一致
├── 尺寸统一：网格系统规范
└── 视觉重量：各图标视觉均衡

可识别性
├── 简化：去除非必要细节
├── 熟悉：使用通用隐喻
├── 差异：易于区分
└── 可缩放：不同尺寸清晰
```

**图标风格分类：**

| 风格 | 特点 | 适用场景 | 感觉 |
|------|------|----------|------|
| 线性图标 | 轮廓线条 | 界面、工具栏 | 轻盈、现代 |
| 面性图标 | 填充色块 | 强调、Tab栏 | 醒目、稳重 |
| 双色图标 | 主色+辅色 | 功能区分 | 层次丰富 |
| 3D图标 | 立体效果 | 启动图标、营销 | 精致、高端 |
| 插画图标 | 场景化 | 空状态、引导 | 友好、生动 |

### 5. 设计规范文档

**设计规范结构：**
```
品牌概述
├── 品牌故事
├── 品牌价值观
├── 品牌个性
└── 设计原则

视觉基础
├── 标志规范
├── 色彩系统
├── 字体系统
└── 图形元素

组件规范
├── 按钮样式
├── 表单元素
├── 卡片样式
├── 图标规范
└── 图片使用

应用示例
├── 正确用法
├── 错误示例
├── 特殊场景
└── 响应式适配
```

**设计Token示例：**
```
颜色Token
├── --color-primary: #1890FF
├── --color-secondary: #722ED1
├── --color-success: #52C41A
├── --color-warning: #FAAD14
├── --color-error: #F5222D
└── --color-text-primary: #262626

间距Token
├── --spacing-xs: 4px
├── --spacing-sm: 8px
├── --spacing-md: 16px
├── --spacing-lg: 24px
└── --spacing-xl: 32px

圆角Token
├── --radius-sm: 2px
├── --radius-md: 4px
├── --radius-lg: 8px
└── --radius-full: 9999px
```

### 6. 设计趋势分析

**当前设计趋势：**
```
视觉风格趋势
├── 玻璃拟态（Glassmorphism）
│   └── 毛玻璃效果、透明层次
├── 新拟物（Neumorphism）
│   └── 柔和凸起、内嵌效果
├── 3D与动效
│   └── 三维元素、微交互
├── 渐变复兴
│   └── 多色渐变、网格渐变
└── 极简主义
    └── 大留白、克制用色

色彩趋势
├── 柔和粉彩：低饱和度色彩
├── 霓虹色：高饱和荧光色
├── 大地色：自然环保色调
└── 渐变色：多色过渡
```

## 输出模板

### 视觉设计方案
```
【项目名称】___________
【设计目标】___________
【目标受众】___________

【品牌调性】
关键词：___ / ___ / ___

【色彩方案】
主色：#______
辅助色：#______ / #______
点缀色：#______
色彩应用说明：

【字体方案】
标题字体：___________
正文字体：___________
字体层级说明：

【视觉风格】
[风格描述]
参考案例：

【设计规范预览】
[核心组件示意]
```

### 设计规范文档模板
```
# [品牌名称] 设计规范

## 1. 品牌基础
### 1.1 品牌标志
### 1.2 色彩系统
### 1.3 字体系统

## 2. 设计原则
- 原则1：___________
- 原则2：___________
- 原则3：___________

## 3. 组件规范
### 3.1 按钮
### 3.2 表单
### 3.3 卡片

## 4. 应用示例
### 4.1 正确示例
### 4.2 错误示例
```

## 最佳实践

- **品牌一致性**：所有视觉元素保持统一的品牌调性
- **可访问性**：确保颜色对比度符合WCAG标准
- **系统化思维**：建立完整的设计系统而非单一设计
- **留白呼吸**：给元素足够的空间，避免拥挤
- **少即是多**：克制使用颜色、字体、装饰元素