# Design Prompt Optimizer

> 基于 DesignPrompt 设计原则的专业设计评估与优化技能,专注于界面的视觉表现。 当你说"优化设计"或"看看这个设计怎么样",我会自动激活。 核心聚焦于视觉设计层面:排版布局、色彩搭配、视觉层次、字体使用、间距留白等。 弱化交互设计和代码实现,专注于让界面看起来更美、更专业。

- Skill: `majiayu000/design-prompt-optimizer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/design-prompt-optimizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/design-prompt-optimizer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/design-prompt-optimizer

---


# DesignPrompt 设计优化技能

## 触发条件

当以下任何情况发生时,我会使用此技能:

1. 用户明确说"优化设计"或"改进设计"
2. 用户要求"设计建议"或"设计反馈"
3. 用户使用类似"帮我看看这个设计怎么样"这样的表达
4. 用户提到"界面不好看"、"排版很乱"等视觉设计相关的痛点
5. 用户要求"用这个设计原则优化我的界面"
6. 用户上传界面截图或代码,要求美学改进

## 核心定位

⚠️ **明确边界:此技能专注于视觉设计,不涉及代码质量评估或交互设计优化。**

### 聚焦领域

✅ **重点关注的视觉设计要素:**
- 排版布局(Layout & Composition)
- 色彩搭配(Color & Contrast)
- 视觉层次(Visual Hierarchy)
- 字体使用(Typography)
- 间距留白(Spacing & White Space)
- 元素对齐(Alignment)
- 图片与图标使用
- 整体视觉流(Visual Flow)

❌ **不涉及的领域:**
- 代码结构和可维护性
- 交互流程和用户体验流程
- 复杂业务逻辑
- 动画和动效设计(除非影响视觉平衡)

## 我的能力

### 1. 视觉设计原则评估

基于 DesignPrompt 的设计原则,我可以:

- 分析你的界面截图、样式代码或设计稿
- 识别不符合视觉设计原则的地方
- 提供具体的视觉改进建议
- 优化排版布局和视觉层次

### 2. 识别"过度设计"问题

我会特别关注并诊断以下问题:

- **层层嵌套的容器**:多个卡片、盒子、渐变叠加
- **装饰性元素**:不必要的分割线、边框、阴影,仅仅为了"看起来好看"
- **视觉噪音**:过多的层级结构,增加认知负担
- **过度装饰**:额外的结构仅为了视觉效果,而非功能需求
- **结构复杂度**:为装饰而增加的 DOM 层级

### 3. 识别"不必要的视觉包装"

我会诊断:

- 是否有"为了卡片而卡片"的设计(如整个页面都在一个卡片内)
- 是否有"为了区块而区块"的设计(如每个小功能都套一个卡片)
- 是否有"为了边框而边框"的设计(如用边框包裹已经有分隔的内容)
- 是否有"为了阴影而阴影"的设计(如嵌套阴影营造"层次感")

### 4. 简化视觉层级

我会提供:

- **去除不必要的容器**:识别仅用于视觉包装而无功能作用的结构
- **减少视觉噪音**:去掉装饰性的分割线、边框、背景
- **扁平化设计**:减少嵌套层级,让界面更简洁
- **内容优先**:让内容成为主角,而不是让装饰性结构分散注意力

### 2. 专业评估维度

我会从以下视觉设计维度评估你的界面:

#### 排版布局
- 布局是否平衡、有节奏感
- 信息分组是否合理清晰
- 视觉重点是否突出
- 元素大小比例是否协调

#### 色彩搭配
- 主色调、辅助色、点缀色使用是否恰当
- 色彩对比度是否足够(可读性)
- 色彩情感是否符合产品定位
- 品牌色彩是否贯穿一致

#### 视觉层次
- 信息层级是否清晰(通过大小、颜色、粗细区分)
- 用户视线是否自然引导到重要内容
- 内容区块划分是否明确
- 视觉重量分配是否合理

#### 字体使用
- 字体选择是否专业且合适
- 字体大小梯度是否合理
- 行高、字间距是否舒适
- 字体层级是否清晰(标题、正文、标签等)

#### 间距与留白
- 元素间距是否一致且合理
- 留白是否足够(避免拥挤或空洞)
- 间距系统是否有规律(如8点网格)
- 负空间使用是否提升可读性

#### 元素对齐
- 元素是否对齐到网格或基线
- 对齐方式是否统一(左对齐/居中对齐)
- 视觉对齐是否符合设计规范

## 使用方法

### 基本使用步骤

当你需要优化视觉设计时,只需告诉我:

1. **提供设计界面**:
   - 上传界面截图,或
   - 提供 HTML/CSS 代码,或
   - 提供项目文件路径,或
   - 描述当前设计问题

2. **说明优化方向**(可选):
   - 想重点改进哪个方面?(如"排版看起来很乱")
   - 目标风格和调性是什么?(如"更现代、更专业")
   - 是否有参考的设计风格?

3. **期待什么样的帮助**:
   - 只需要设计反馈和建议
   - 需要具体的样式改进建议
   - 需要重新设计的完整方案

### 我会做什么

#### 第 1 步:视觉诊断

使用 Read、Glob 等工具查看你的设计文件,理解当前的视觉设计状况:

- 识别配色方案和字体使用
- 分析布局和视觉层次
- 检查间距和对齐问题

#### 第 2 步:问题识别

基于 DesignPrompt 设计原则,我识别:

- **视觉层次问题**:重要信息不突出,层级混乱
- **排版问题**:字体使用不当,行距不合适
- **色彩问题**:对比度不足,色彩搭配不当
- **布局问题**:元素拥挤或松散,不平衡
- **对齐问题**:缺乏对齐规范,看起来凌乱

#### 第 3 步:提供视觉优化方案

针对每个问题,我提供:

- **具体的设计原则依据** - 为什么这样改更好
- **视觉优化建议** - 如何改进(如"增大主标题字体到 24px")
- **样式建议** - 具体的 CSS 属性值建议
- **布局调整** - 元素的重新排列建议

#### 第 4 步:总结输出

- 视觉设计问题清单(优先级排序)
- 具体的改进建议和原则
- 视觉设计优化前后对比
- 实施优先级和难度评估

## 你能获得的输出

### 1. 设计评估报告

我会提供结构化的设计反馈:

```
## 视觉诊断报告

### 🎨 色彩使用
- ✅ 优点:主色调统一,符合品牌
- ❌ 问题:对比度不足,文字可读性差
- 💡 建议:将正文颜色从 #666 改为 #333

### 📐 排版布局
- ✅ 优点:整体网格对齐
- ❌ 问题:标题层级不清晰
- 💡 建议:使用 32px/24px/18px/14px 的字体梯度

### 📏 间距系统
- ❌ 问题:间距不一致(4px, 5px, 7px 混用)
- 💡 建议:采用 8 点网格系统(8px, 16px, 24px, 32px)
```

### 2. 具体优化建议

不仅仅是指出问题,还会提供:

- **具体的 CSS 值**:如"将 margin 改为 16px"
- **字体建议**:如"标题使用 `font-weight: 600`"
- **颜色代码**:如"主色改为 `#1a73e8`"
- **布局调整**:如"将两栏布局改为一栏+侧边栏"

### 3. 设计原则解释

每个建议都会附带设计原则:

> "建议增大按钮的 padding 到 12px 20px,遵循 Fitts 定律 - 增大可点击区域能提升用户体验"

## 示例使用场景

### 场景 1:优化现有项目

**你说:** "帮我优化一下这个 Chrome 扩展的界面设计"

**我会:**
1. 读取你的 HTML/CSS 文件
2. 分析当前的视觉设计
3. 基于 DesignPrompt 原则进行评估
4. 提供具体的样式改进建议

**输出示例:**
```
## 视觉设计评估:Chrome 扩展界面

### 主要问题
1. **字体层级混乱**:所有文本都是 14px,没有层级
   - 建议:标题 17px Medium,正文 13px Regular

2. **色彩对比不足**:浅灰色文本在白色背景上
   - 建议:正文使用 #1f2329,次要文本 #646a73

3. **按钮缺乏视觉重量**:按钮和背景对比不够
   - 建议:主按钮使用渐变色,增加阴影
```

### 场景 2:设计反馈

**你说:** "这个页面看起来不协调,能帮我看看哪里有问题吗?"

**我会:**
1. 分析界面的视觉平衡
2. 识别色彩、字体、布局问题
3. 提供视觉优化建议

### 场景 3:视觉风格统一

**你说:** "我的应用界面风格不统一,怎么改进?"

**我会:**
1. 识别不一致的设计元素
2. 建立统一的视觉规范
3. 提供系统化的改进方案

## 核心设计原则

### 1. DesignPrompt 核心原则

基于 https://designprompt.vercel.app/ 的核心理念:

#### 布局与视觉结构
- **网格系统**:使用响应式网格,确保元素对齐和一致的间距
- **视觉分组**:将相关元素组合在一起,通过间距分隔不同组
- **对齐原则**:所有元素应对齐到网格或基线,保持视觉秩序

#### 清晰的视觉层次
- **主次层级**:确定最重要的信息,使其在视觉上最突出
- **强调方式**:通过大小、粗细、颜色、位置来强调重要元素
- **信息架构**:用户应能在3秒内理解页面的核心功能

#### 一致性与标准
- **设计系统**:建立颜色、字体、间距、圆角、阴影的统一标准
- **样式指南**:所有组件应遵循相同的视觉规范
- **模式复用**:相似的界面元素应有相似的外观和交互

#### 可读性与排版
- **字体限制**:最多使用2种字体族,避免视觉混乱
- **字体大小**:正文不小于12px,建议使用16px为基准
- **行高**:1.4-1.6倍字体大小,提升可读性
- **行长**:每行40-75个字符最佳

#### 色彩使用
- **主色调**:1-2种主色+中性色+点缀色
- **对比度**:确保4.5:1的对比度比(WCAG标准)
- **语义化**:不同颜色代表不同含义(成功、警告、错误)

#### 间距系统
- **8点网格**:使用8的倍数作为间距(4px、8px、16px、24px、32px)
- **规律**:建立一致的垂直和水平节奏
- **负空间**:留白是设计的一部分,不是空的区域

### 2. 简化与克制原则

#### 内容优先
- **功能驱动**:每个视觉元素都应为功能服务
- **去除装饰**:去掉仅为了"好看"而无功能的装饰
- **必要性质疑**:每个元素都应回答"为什么需要它"

#### 扁平化设计
- **减少嵌套**:避免"容器套容器"的设计
- **简化结构**:每个额外的DOM层级都应有必要性
- **直接呈现**:内容应直接呈现,不过度包装

#### 视觉噪音控制
- **减少分割线**:能用间距就不用线
- **避免边框**:内容已有分隔时,不需要额外边框
- **控制阴影**:阴影应营造层次,不是装饰

#### 避免"过度包装"
- **卡片使用**:不要为了卡片而卡片(整个页面套一个大卡片无意义)
- **区块划分**:功能性区块可以套卡片,但要有明确目的
- **边框使用**:用边框包裹已有分隔的内容=视觉噪音
- **阴影使用**:嵌套阴影营造"层次感"=过度设计

### 3. 识别"视觉噪音"的方法

当你看到以下情况,就是视觉噪音:

- 🚫 一个卡片套另一个卡片,套第三个卡片
- 🚫 用边框包裹已经有间距分隔的内容
- 🚫 添加阴影"为了让内容看起来浮起来",但功能上不需要
- 🚫 画一条线"为了视觉分隔",但间距已经提供了分隔
- 🚫 整个页面背景色+整个卡片背景色+内部区块背景色
- 🚫 "我觉得这里太空了,加个装饰吧"

### 4. 设计决策质问

做每一个设计决策时,问自己:

1. **这个元素的功能是什么?** - 如果只是为了"好看",考虑删除
2. **这个容器有必要吗?** - 如果只是为了"包装",考虑扁平化
3. **这个分割线能删除吗?** - 如果间距已提供分隔,就不需要线
4. **这个装饰能简化吗?** - 复杂的设计=更高的认知负担

#### ……如果你的回答是:
- "为了让界面更有层次感" - 可能是过度设计
- "为了看起来不那么单调" - 可能是过度设计
- "为了一圈一圈的视觉效果" - 可能是过度设计

#### ✅ 如果你的回答是:
- "为了明确的功能分组" - 有必要
- "为了重要的视觉层次" - 有必要
- "为了让用户更快理解" - 有必要

### 5. 视觉噪音的后果

- **认知负担**:每个额外元素都需要大脑处理
- **性能影响**:更多的DOM节点=更慢的渲染
- **维护成本**:越复杂的设计越容易出错
- **可访问性**:复杂结构对屏幕阅读器不友好
- **加载速度**:更多样式=更大的文件

### 6. 简化设计的原则

#### 能不用就不用
- 能用间距就不用分割线
- 能用留白就不用边框
- 能用字体大小就不用颜色区分
- 能用单一背景就不用多层背景

#### 内容优先
- 内容是主角,装饰是配角
- 用户是来用功能的,不是看装饰的
- 90%的用户注意力在20%的核心功能上

#### 3秒理解原则
- 用户应在3秒内理解界面核心功能
- 如果3秒内看不懂,说明太复杂了
- 每个额外的视觉元素都会增加理解时间

### 7. 常见反模式

#### ❌ 有害模式
…′“卡片套卡片” - 层层嵌套的信息不是更清晰,而是更复杂
…′“边框外还有边框” - 如果已经有间距,边框=视觉噪音
…′“大卡片配小卡片” - 复杂化视觉层级,不是简化
…′“渐变背景有内容背景” - 用户分不清应该看哪里
…′“装饰性分割线” - 如果间距已分隔内容,线=多余

#### ✅ 推荐模式
…′“扁平化布局” - 内容直接呈现,减少不必要的容器
…′“间距分隔” - 用留白提供视觉分组,比线更优雅
…′“单一背景” - 一个背景色就够了,除非功能需要
…′“功能性区块” - 只在需要明确功能分组时使用容器

## 技术原理

此技能基于:

1. **DesignPrompt 设计原则** (已整合到本文档)
2. **格式塔原理**:接近性、相似性、连续性、闭合性、图形-背景关系
3. **极简设计**:Dieter Rams 的"少而精"原则
4. **认知心理学**:人类的认知负担和注意机制
5. **Web 可访问性**:WCAG 标准

## 约束和限制

- **专注视觉层面**:不提供交互流程或代码架构建议
- **建议性质**:最终实施需要结合你的技术约束
- **静态设计**:不处理动画和过渡效果
- **视觉诊断**:需要你能提供界面或代码

## 预期效果

使用此技能后,你将获得:

✅ 专业的视觉设计评估报告
✅ 基于设计原则的具体改进建议
✅ 可实施的样式和布局优化方案
✅ 美观度和专业度的提升
✅ 视觉层次和可读性的改善
✅ 设计规范和一致性的建立

## 相关资源

- DesignPrompt 官网: https://designprompt.vercel.app/
- 设计原则参考:格式塔原理、视觉权重、色彩理论
- 优秀设计案例:Material Design、Apple Human Interface Guidelines