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