DesignPrompt 设计优化技能

触发条件

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

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

核心定位

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

聚焦领域

✅ 重点关注的视觉设计要素:

•排版布局(Layout & Composition)
•色彩搭配(Color & Contrast)
•视觉层次(Visual Hierarchy)
•字体使用(Typography)
•间距留白(Spacing & White Space)
•元素对齐(Alignment)
•图片与图标使用
•整体视觉流(Visual Flow)

❌ 不涉及的领域:

•代码结构和可维护性
•交互流程和用户体验流程
•复杂业务逻辑
•动画和动效设计(除非影响视觉平衡)

我的能力

1. 视觉设计原则评估

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

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

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

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

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

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

我会诊断:

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

4. 简化视觉层级

我会提供:

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

2. 专业评估维度

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

排版布局

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

色彩搭配

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

视觉层次

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

字体使用

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

间距与留白

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

元素对齐

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

使用方法

基本使用步骤

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

•
提供设计界面:
- •上传界面截图,或
- •提供 HTML/CSS 代码,或
- •提供项目文件路径,或
- •描述当前设计问题
•
说明优化方向(可选):
- •想重点改进哪个方面?(如"排版看起来很乱")
- •目标风格和调性是什么?(如"更现代、更专业")
- •是否有参考的设计风格?
•
期待什么样的帮助:
- •只需要设计反馈和建议
- •需要具体的样式改进建议
- •需要重新设计的完整方案

我会做什么

第 1 步:视觉诊断

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

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

第 2 步:问题识别

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

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

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

针对每个问题,我提供:

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

第 4 步:总结输出

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

你能获得的输出

1. 设计评估报告

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

code

## 视觉诊断报告

### 🎨 色彩使用
- ✅ 优点:主色调统一,符合品牌
- ❌ 问题:对比度不足,文字可读性差
- 💡 建议:将正文颜色从 #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 扩展的界面设计"

我会:

•读取你的 HTML/CSS 文件
•分析当前的视觉设计
•基于 DesignPrompt 原则进行评估
•提供具体的样式改进建议

输出示例:

code

## 视觉设计评估:Chrome 扩展界面

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

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

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

场景 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. 设计决策质问

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

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

……如果你的回答是:

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

✅ 如果你的回答是:

•"为了明确的功能分组" - 有必要
•"为了重要的视觉层次" - 有必要
•"为了让用户更快理解" - 有必要

5. 视觉噪音的后果

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

6. 简化设计的原则

能不用就不用

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

内容优先

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

3秒理解原则

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

7. 常见反模式

❌ 有害模式

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

✅ 推荐模式

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

技术原理

此技能基于:

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

约束和限制

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

预期效果

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

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

DesignPrompt 设计优化技能

触发条件

核心定位

聚焦领域

我的能力

1. 视觉设计原则评估

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

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

4. 简化视觉层级

2. 专业评估维度

排版布局

色彩搭配

视觉层次

字体使用

间距与留白

元素对齐

使用方法

基本使用步骤

我会做什么

第 1 步:视觉诊断

第 2 步:问题识别

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

第 4 步:总结输出

你能获得的输出

1. 设计评估报告

2. 具体优化建议

3. 设计原则解释

示例使用场景

场景 1:优化现有项目

场景 2:设计反馈

场景 3:视觉风格统一

核心设计原则

1. DesignPrompt 核心原则

布局与视觉结构

清晰的视觉层次

一致性与标准

可读性与排版

色彩使用

间距系统

2. 简化与克制原则

内容优先

扁平化设计

视觉噪音控制

避免"过度包装"

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

4. 设计决策质问

……如果你的回答是:

✅ 如果你的回答是:

5. 视觉噪音的后果

6. 简化设计的原则

能不用就不用

内容优先

3秒理解原则

7. 常见反模式

❌ 有害模式

✅ 推荐模式

技术原理

约束和限制

预期效果

相关资源