ui-design-review

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Design Review

UI设计评审

This skill enables AI agents to perform a comprehensive visual design and aesthetics evaluation of digital interfaces, analyzing elements like typography, color palettes, spacing, visual hierarchy, and overall design quality.

While other UX skills focus on functionality and usability, this skill evaluates the visual polish, aesthetic appeal, and design craftsmanship that makes interfaces feel professional, trustworthy, and delightful.

Use this skill to elevate visual design quality, ensure brand consistency, and create interfaces that not only work well but also look exceptional.

Combine with "Nielsen Heuristics" for usability, "WCAG Accessibility" for inclusive design, or "Don Norman Principles" for intuitive interaction.

该技能可让AI Agent对数字界面进行全面的视觉设计与美学评估，分析排版、调色板、间距、视觉层级及整体设计质量等元素。

其他UX技能侧重于功能与可用性，而本技能则评估让界面显得专业、可信且愉悦的视觉精致度、美学吸引力与设计工艺。

使用此技能提升视觉设计质量，确保品牌一致性，打造不仅好用、更具出众视觉效果的界面。

可结合「Nielsen启发式评估」用于可用性分析、「WCAG无障碍标准」用于包容性设计，或「Don Norman设计原则」用于直观交互设计。

When to Use This Skill

何时使用该技能

Invoke this skill when:

Evaluating visual design quality and polish
Assessing brand consistency and personality
Reviewing typography, color, and spacing decisions
Identifying visual hierarchy issues
Comparing design to modern standards and trends
Preparing for design QA or handoff
Evaluating design system consistency
Assessing first impression and aesthetic appeal
Identifying visual debt or outdated design elements

在以下场景调用此技能：

评估视觉设计质量与精致度
评估品牌一致性与个性呈现
审核排版、色彩与间距决策
识别视觉层级问题
对比设计与现代标准及趋势
为设计QA或交接做准备
评估设计系统一致性
评估第一印象与美学吸引力
识别视觉债务或过时设计元素

Inputs Required

所需输入

When executing this review, gather:

interface_description: Description of interface (product type, target audience, brand personality) [REQUIRED]
screenshots_or_urls: Visual references of the interface (multiple screens preferred) [REQUIRED]
brand_guidelines: Brand colors, fonts, style guide (if available) [OPTIONAL]
target_audience: Demographics, preferences, expectations [OPTIONAL]
competitors: Competitor products for context [OPTIONAL]
design_goals: Modern/classic, minimal/rich, playful/serious, etc. [OPTIONAL]

执行评审时，需收集以下信息：

interface_description：界面描述（产品类型、目标受众、品牌个性）【必填】
screenshots_or_urls：界面视觉参考（优先提供多屏截图）【必填】
brand_guidelines：品牌色彩、字体、风格指南（如有）【可选】
target_audience：受众人群特征、偏好与期望【可选】
competitors：竞品参考（如有）【可选】
design_goals：设计定位（现代/经典、极简/丰富、活泼/严肃等）【可选】

Design Evaluation Framework

设计评估框架

Evaluate across 10 key design dimensions:

从10个核心设计维度展开评估：

1. Visual Hierarchy

1. 视觉层级

Definition: The arrangement of elements to show their importance and guide user attention.

Evaluate:

Clear primary, secondary, tertiary levels
Size, color, position used effectively
Important actions stand out
Content scannable and organized
F-pattern or Z-pattern consideration

Common Issues:

Everything looks equally important
CTA buttons don't stand out
Headers same size as body text
Poor use of visual weight

定义：通过元素排布体现重要性，引导用户注意力。

评估要点：

清晰区分一级、二级、三级内容层级
有效运用尺寸、色彩、位置强化层级
关键操作按钮突出显示
内容具备可扫描性与逻辑性
考虑F型或Z型视觉流

常见问题：

所有元素视觉权重一致
CTA按钮未突出
标题与正文字号相同
视觉权重运用不当

2. Typography

2. 排版

Definition: Font choices, sizes, line heights, and text styling.

Evaluate:

Font selection (appropriate, readable, on-brand)
Font pairing (max 2-3 typefaces)
Type scale (consistent sizing system)
Line height (1.4-1.6 for body text)
Line length (50-75 characters optimal)
Font weights used effectively
Readability on all devices

Common Issues:

Too many fonts
Poor font pairing
Tiny text (<14px body)
Insufficient line height
Long lines (>100 characters)
Script fonts for body text

定义：字体选择、字号、行高与文本样式。

评估要点：

字体选择合适、易读且符合品牌调性
字体搭配合理（最多2-3种字体）
建立标准化字号体系
正文字行高为1.4-1.6
行宽控制在50-75字符
字体字重运用合理
在所有设备上均具备可读性

常见问题：

使用字体过多
字体搭配不协调
正文字号过小（<14px）
行高不足
行宽过长（>100字符）
正文字体使用手写体

3. Color Palette

3. 调色板

Definition: Color choices, combinations, and usage.

Evaluate:

Primary, secondary, accent colors defined
Color harmony (complementary, analogous, triadic)
Sufficient contrast (WCAG compliant)
Intentional color usage (not arbitrary)
Neutrals for balance
Color psychology alignment with brand
Accessible to color-blind users

Common Issues:

Too many colors (no system)
Low contrast combinations
Clashing colors
Colors don't reflect brand
Overuse of pure black (#000)
No neutral palette

定义：色彩选择、组合与运用方式。

评估要点：

明确定义主色、辅助色与强调色
色彩搭配和谐（互补色、类似色、三色组等）
对比度达标（符合WCAG标准）
色彩运用具备目的性（非随意使用）
中性色平衡视觉
色彩心理学与品牌调性匹配
对色盲用户友好

常见问题：

色彩过多（无体系）
对比度不足的组合
色彩冲突
色彩未体现品牌调性
过度使用纯黑色（#000）
无中性色体系

4. Spacing & White Space

4. 间距与留白

Definition: Margins, padding, gaps, and negative space.

Evaluate:

Consistent spacing scale (8px grid common)
Generous white space
Proper padding in components
Balanced margins
Breathing room around elements
Doesn't feel cramped or chaotic

Common Issues:

Inconsistent spacing (3px here, 17px there)
Too cramped (insufficient padding)
Elements touching edges
No breathing room
Random gaps

定义：边距、内边距、间隙与负空间。

评估要点：

建立标准化间距体系（常用8px网格）
留白充足
组件内边距合理
边距平衡
元素间具备呼吸感
界面不拥挤、不混乱

常见问题：

间距不一致（此处3px，彼处17px）
过于拥挤（内边距不足）
元素贴边
无呼吸空间
间隙随机

5. Visual Consistency

5. 视觉一致性

Definition: Uniformity of design elements throughout.

Evaluate:

Button styles consistent
Card designs uniform
Icon style cohesive
Border radius consistent
Shadow/elevation system
Form styling standardized
Pattern library adherence

Common Issues:

Multiple button styles for same action
Inconsistent border radius
Mixed icon styles (outline + filled)
No design system
One-off components

定义：设计元素在全界面的统一性。

评估要点：

按钮样式一致
卡片设计统一
图标风格统一
圆角半径一致
阴影/层级体系明确
表单样式标准化
遵循组件库规范

常见问题：

同一操作使用多种按钮样式
圆角半径不一致
图标风格混杂（轮廓+填充）
无设计系统
存在一次性组件

6. Imagery & Graphics

6. 图像与图形

Definition: Photos, illustrations, icons, and visual assets.

Evaluate:

High quality, not pixelated
Consistent style (photography, illustration)
Appropriate to content
Proper aspect ratios
Icons clear and recognizable
Graphics support content, not distract
Optimized for performance

Common Issues:

Low-resolution images
Mixed illustration styles
Stock photos look generic
Icons inconsistent style
Graphics don't match brand
Overly decorative, no purpose

定义：照片、插画、图标等视觉资产。

评估要点：

画质高清，无像素化
风格统一（摄影、插画）
与内容适配
比例合理
图标清晰可识别
图形为内容服务，不分散注意力
性能优化到位

常见问题：

低分辨率图片
插画风格混杂
通用图库照片缺乏特色
图标风格不一致
图形与品牌不符
过度装饰，无实际用途

7. Layout & Grid

7. 布局与网格

Definition: Structural organization and alignment.

Evaluate:

Clear grid system (12-column common)
Proper alignment
Balanced composition
Responsive breakpoints
Logical content organization
Visual flow guides eye
Consistent page templates

Common Issues:

Misaligned elements
No grid system evident
Unbalanced layouts
Poor responsive behavior
Elements floating randomly

定义：界面结构组织与对齐方式。

评估要点：

明确的网格系统（常用12列）
元素对齐规范
构图平衡
响应式断点合理
内容组织逻辑清晰
视觉流引导用户视线
页面模板一致

常见问题：

元素错位
无明显网格系统
布局失衡
响应式表现差
元素无规则漂浮

8. Component Design

8. 组件设计

Definition: Quality of UI components (buttons, forms, cards, etc.).

Evaluate:

Buttons look clickable (affordance)
Forms easy to complete
Cards well-defined
Proper states (hover, active, disabled, focus)
Interactive elements obvious
Feedback on interaction
Component variants consistent

Common Issues:

Flat buttons (no depth/hover)
Missing states
Form inputs unclear
Cards poorly defined
No visual feedback

定义：UI组件（按钮、表单、卡片等）的质量。

评估要点：

按钮具备可点击感（视觉反馈）
表单易于填写
卡片边界清晰
状态完整（ hover、active、disabled、focus）
交互元素明确
交互提供反馈
组件变体一致

常见问题：

扁平化按钮（无深度/hover效果）
缺失状态反馈
表单输入框不清晰
卡片边界模糊
无视觉反馈

9. Branding & Personality

9. 品牌与个性

Definition: Expression of brand identity through design.

Evaluate:

Brand colors prominent
Typography reflects brand voice
Personality evident (playful, serious, etc.)
Unique, not generic
Consistent tone
Memorable design elements
Differentiated from competitors

Common Issues:

Generic, cookie-cutter design
Doesn't reflect brand
No personality
Looks like Bootstrap template
Inconsistent brand application

定义：通过设计传递品牌身份。

评估要点：

品牌色彩突出
排版体现品牌调性
个性鲜明（活泼、严肃等）
设计独特，非通用模板
语气一致
设计元素令人记忆深刻
与竞品形成差异

常见问题：

通用模板化设计
未体现品牌调性
无个性
类似Bootstrap模板
品牌应用不一致

10. Modern Design Standards

10. 现代设计标准

Definition: Alignment with current best practices and trends.

Evaluate:

Contemporary, not outdated
Appropriate use of shadows/depth
Clean, not cluttered
Follows platform conventions
Doesn't use deprecated patterns
Fresh, not dated
Balances trends with timelessness

Common Issues:

Dated design (Web 2.0 gradients, bevels)
Skeuomorphism when flat is standard
Outdated patterns (carousels, splash screens)
Ignores mobile-first
Looks 5+ years old

定义：与当前最佳实践及趋势的契合度。

评估要点：

设计现代，不过时
合理运用阴影/深度
界面简洁，不杂乱
遵循平台规范
不使用已淘汰模式
设计新颖，不陈旧
在趋势与经典间取得平衡

常见问题：

陈旧设计（Web 2.0渐变、斜面）
当扁平化成为主流时仍使用拟物化
过时模式（轮播图、启动页）
忽视移动优先原则
设计外观超过5年

Review Procedure

评审流程

Follow these steps systematically:

系统遵循以下步骤开展评审：

Step 1: First Impression Analysis (5 minutes)

步骤1：第一印象分析（5分钟）

Evaluate initial visual impact:

Questions to answer:

What's the immediate feeling? (Professional, playful, trustworthy, cheap, etc.)
Does it look modern and polished?
Is the brand immediately recognizable?
What stands out first? (Good or bad?)
Does it inspire confidence?
First impression score: 1-10

Document:

Initial reaction
Strongest visual elements
Most glaring issues
Competitive comparison (if applicable)

评估初始视觉冲击力：

需回答的问题：

第一感受是什么？（专业、活泼、可信、廉价等）
设计是否现代精致？
品牌是否能被立即识别？
最突出的元素是什么？（好/坏？）
是否能建立用户信任？
第一印象评分：1-10分

需记录：

初始反应
最突出的视觉元素
最明显的问题
竞品对比（如有）

Step 2: Dimension-by-Dimension Evaluation (45-60 minutes)

步骤2：分维度评估（45-60分钟）

For each of the 10 dimensions:

Analysis template:

markdown

undefined

针对10个维度逐一分析：

分析模板：

markdown

undefined

Dimension: [Name]

维度：[名称]

Overall Rating: ⭐⭐⭐⚪⚪ (3/5)

整体评分：⭐⭐⭐⚪⚪ (3/5)

Strengths

优势

✅ [Positive finding 1]
✅ [Positive finding 2]

✅ [正面发现1]
✅ [正面发现2]

Issues Found

发现的问题

Issue 1: [Title]

问题1：[标题]

Severity: Critical / High / Medium / Low
Location: [Where it appears]
Problem: [Specific description]
Impact: [Why it matters]
Current: [Screenshot or description]
Recommendation: [Specific fix]
Effort: Low (1-4h) / Medium (1-2d) / High (1w+)

严重程度：Critical / High / Medium / Low
位置：[出现位置]
问题描述：[具体说明]
影响：[为何重要]
当前状态：[截图或描述]
建议：[具体修复方案]
工作量：Low (1-4h) / Medium (1-2d) / High (1w+)

Issue 2: [Title]

问题2：[标题]

[Continue...]

[继续...]

Best Practices Comparison

最佳实践对比

Industry Standard: [What's expected]
Current Implementation: [What exists]
Gap: [Difference]

行业标准：[预期表现]
当前实现：[实际情况]
差距：[差异点]

Recommendations Summary

建议总结

[Priority 1 fix]
[Priority 2 fix]
[Priority 3 fix]

---

[优先级1修复方案]
[优先级2修复方案]
[优先级3修复方案]

---

Step 3: Component Inventory (15 minutes)

步骤3：组件盘点（15分钟）

Step 4: Design System Assessment (10 minutes)

步骤4：设计系统评估（10分钟）

Evaluate if a design system exists and its quality:

Design System Elements:

Color Palette: Defined, documented, consistently applied?
Typography Scale: Systematic or arbitrary?
Spacing System: Grid-based (4px, 8px) or random?
Component Library: Reusable components or one-offs?
Icon Set: Unified style?
Shadow/Elevation: Consistent depth levels?
Border Radius: Standardized?
Breakpoints: Defined responsive rules?

Rating:

No system evident: 0/10
Inconsistent patterns: 3/10
Some system, gaps: 5/10
Mostly systematic: 7/10
Complete design system: 10/10

评估是否存在设计系统及质量：

设计系统元素：

调色板：是否定义、文档化并一致应用？
字号体系：系统化还是随意设置？
间距系统：基于网格（4px、8px）还是随机？
组件库：可复用组件还是一次性组件？
图标集：风格统一？
阴影/层级：深度层级一致？
圆角半径：标准化？
响应式断点：定义规则？

评分：

无明显系统：0/10
模式不一致：3/10
存在部分系统，有差距：5/10
基本系统化：7/10
完整设计系统：10/10

Step 5: Competitive Comparison (10 minutes)

步骤5：竞品对比（10分钟）

If competitors provided, compare visually:

Comparison Matrix:

Aspect	This Product	Competitor 1	Competitor 2	Industry Standard
Visual Polish	[Rating]	[Rating]	[Rating]	[Benchmark]
Modernity	[Rating]	[Rating]	[Rating]	[Benchmark]
Brand Strength	[Rating]	[Rating]	[Rating]	[Benchmark]
Hierarchy	[Rating]	[Rating]	[Rating]	[Benchmark]

Insights:

Where does it excel?
Where does it lag?
What can be learned from competitors?

若提供竞品，进行视觉对比：

对比矩阵：

维度	本产品	竞品1	竞品2	行业标准
视觉精致度	[评分]	[评分]	[评分]	[基准值]
现代性	[评分]	[评分]	[评分]	[基准值]
品牌强度	[评分]	[评分]	[评分]	[基准值]
层级设计	[评分]	[评分]	[评分]	[基准值]

洞察：

本产品优势领域
本产品落后领域
可从竞品中学到什么？

Step 6: Synthesize and Report (15 minutes)

步骤6：整合与报告（15分钟）

Compile findings into comprehensive report.

将发现整理成完整报告。

Report Structure

报告结构

markdown

undefined

markdown

undefined

UI Design Review Report

UI设计评审报告

Interface: [Name] Date: [Date] Reviewer: [AI Agent] Pages Reviewed: [Number and types]

界面：[名称] 日期：[日期] 评审者：[AI Agent] 评审页面：[数量与类型]

Executive Summary

执行摘要

Visual Design Score: [X]/100

视觉设计总分：[X]/100

Dimension	Score	Status
Visual Hierarchy	[X]/10	✅ / ⚠️ / ❌
Typography	[X]/10	✅ / ⚠️ / ❌
Color Palette	[X]/10	✅ / ⚠️ / ❌
Spacing & White Space	[X]/10	✅ / ⚠️ / ❌
Visual Consistency	[X]/10	✅ / ⚠️ / ❌
Imagery & Graphics	[X]/10	✅ / ⚠️ / ❌
Layout & Grid	[X]/10	✅ / ⚠️ / ❌
Component Design	[X]/10	✅ / ⚠️ / ❌
Branding & Personality	[X]/10	✅ / ⚠️ / ❌
Modern Standards	[X]/10	✅ / ⚠️ / ❌

维度	得分	状态
视觉层级	[X]/10	✅ / ⚠️ / ❌
排版	[X]/10	✅ / ⚠️ / ❌
调色板	[X]/10	✅ / ⚠️ / ❌
间距与留白	[X]/10	✅ / ⚠️ / ❌
视觉一致性	[X]/10	✅ / ⚠️ / ❌
图像与图形	[X]/10	✅ / ⚠️ / ❌
布局与网格	[X]/10	✅ / ⚠️ / ❌
组件设计	[X]/10	✅ / ⚠️ / ❌
品牌与个性	[X]/10	✅ / ⚠️ / ❌
现代标准契合度	[X]/10	✅ / ⚠️ / ❌

Overall Assessment

整体评估

[2-3 sentences summarizing visual design quality]

[2-3句话总结视觉设计质量]

Top 3 Strengths

三大优势

[Strength 1]
[Strength 2]
[Strength 3]

[优势1]
[优势2]
[优势3]

Top 3 Issues

三大问题

[Critical issue 1]
[Critical issue 2]
[Critical issue 3]

[关键问题1]
[关键问题2]
[关键问题3]

First Impression

第一印象

Immediate Feeling: [Professional/Dated/Playful/Generic/etc.] Trust Level: [High/Medium/Low] Competitive Standing: [Leading/On-par/Behind]

即时感受：[专业/陈旧/活泼/通用等] 信任度：[高/中/低] 竞品定位：[领先/持平/落后]

Detailed Analysis

详细分析

1. Visual Hierarchy ⭐⭐⭐⭐⚪ (4/5)

1. 视觉层级 ⭐⭐⭐⭐⚪ (4/5)

Strengths

优势

✅ Primary CTAs clearly stand out with high contrast
✅ Heading sizes create clear content levels
✅ Good use of color to guide attention

✅ 主CTA通过高对比度清晰突出
✅ 标题字号建立清晰内容层级
✅ 合理运用色彩引导注意力

Issues

问题

Issue 1.1: Secondary CTAs compete with primary

Severity: Medium
Location: Homepage hero section
Problem: "Learn More" button uses same visual weight as "Get Started" primary CTA
Current: Both buttons same size, similar colors (blue vs. teal)
Impact: Dilutes focus, users unsure which action is preferred
Recommendation: Make secondary button text-only or outline style. Reduce size to 80% of primary.
Effort: Low (1 hour)

Issue 1.2: No clear focal point on product page

Severity: High
Problem: Product image, price, description, and CTA all compete equally
Impact: No visual flow, overwhelming, unclear what to do
Recommendation: Increase product image size to 60% of space, make "Add to Cart" button 2x larger with strong color
Effort: Medium (4 hours)

问题1.1：次要CTA与主CTA视觉权重相当

严重程度：Medium
位置：首页Hero区域
问题：“了解更多”按钮与“立即开始”主CTA视觉权重相同
当前状态：两个按钮尺寸相同，颜色相近（蓝色 vs 蓝绿色）
影响：分散注意力，用户无法明确优先操作
建议：将次要按钮改为文字型或轮廓型，尺寸设为主按钮的80%
工作量：Low (1小时)

问题1.2：产品页无清晰焦点

严重程度：High
问题：产品图片、价格、描述与CTA视觉权重一致
影响：无视觉流，用户感到混乱，不知如何操作
建议：将产品图片占比提升至60%，“加入购物车”按钮尺寸放大2倍并使用高饱和度色彩
工作量：Medium (4小时)

Recommendations Summary

建议总结

Establish clear CTA hierarchy (primary > secondary > tertiary)
Use size, color, and position to create focal points
Apply 60-30-10 rule (60% dominant, 30% secondary, 10% accent)

建立清晰的CTA层级（主>次>三级）
运用尺寸、色彩与位置打造视觉焦点
遵循60-30-10规则（60%主色、30%辅助色、10%强调色）

2. Typography ⭐⭐⚪⚪⚪ (2/5)

2. 排版 ⭐⭐⚪⚪⚪ (2/5)

Strengths

优势

✅ Clean, readable sans-serif font choice (Inter)

✅ 选择干净易读的无衬线字体（Inter）

Issues

问题

Issue 2.1: Body text too small

Severity: Critical
Location: All body copy throughout site
Current: 12px font size
Problem: Strains eyes, fails accessibility, looks unprofessional
Standard: 16px minimum for body text
Recommendation: Increase to 16px (1rem) base font size
Effort: Low (2 hours - global CSS change)

Issue 2.2: Too many font sizes

Severity: Medium
Location: Throughout interface
Current: Using 14px, 15px, 16px, 17px, 18px (no system)
Problem: Creates visual noise, no clear hierarchy

Recommendation: Implement type scale:

h1: 48px
h2: 36px
h3: 24px
h4: 20px
body: 16px
small: 14px

Effort: Medium (1 day - requires systematic update)

Issue 2.3: Insufficient line height

Severity: High
Current: Line height 1.2 on body text
Problem: Text feels cramped, hard to read
Standard: 1.5-1.6 for body text
Recommendation: Set line-height: 1.5 (24px on 16px text)
Effort: Low (1 hour)

问题2.1：正文字号过小

严重程度：Critical
位置：全网站所有正文
当前状态：12px字号
问题：伤眼，不符合无障碍标准，显得不专业
标准：正文字号最小16px
建议：将基础字号提升至16px（1rem）
工作量：Low (2小时 - 全局CSS修改)

问题2.2：字号过多

严重程度：Medium
位置：全界面
当前状态：使用14px、15px、16px、17px、18px（无体系）
问题：造成视觉噪音，无清晰层级

建议：建立字号体系：

h1: 48px
h2: 36px
h3: 24px
h4: 20px
body: 16px
small: 14px

工作量：Medium (1天 - 需要系统更新)

问题2.3：行高不足

严重程度：High
当前状态：正文字行高1.2
问题：文本拥挤，可读性差
标准：正文字行高1.5-1.6
建议：设置line-height: 1.5（16px文字对应24px行高）
工作量：Low (1小时)

3. Color Palette ⭐⭐⭐⭐⚪ (4/5)

3. 调色板 ⭐⭐⭐⭐⚪ (4/5)

Strengths

优势

✅ Well-defined primary blue (#2563EB)
✅ Good use of neutrals (grays)
✅ Brand colors consistently applied

✅ 定义清晰的主蓝色（#2563EB）
✅ 合理运用中性色（灰色系）
✅ 品牌色彩应用一致

Issues

问题

Issue 3.1: Accent color overused

Severity: Low
Problem: Orange accent appears everywhere, loses impact
Recommendation: Reserve orange for important CTAs and alerts only
Effort: Low (2-3 hours)

Issue 3.2: Insufficient color shades

Current: Only using one shade of blue
Problem: Can't create visual depth, hover states unclear

Recommendation: Create 9-shade palette (50-900) for primary color:

blue-50: #EFF6FF
blue-100: #DBEAFE
...
blue-500: #2563EB (primary)
...
blue-900: #1E3A8A

Effort: Medium (4 hours - requires design tokens)

[Continue for all 10 dimensions...]

问题3.1：强调色过度使用

严重程度：Low
问题：橙色强调色随处可见，失去突出效果
建议：仅在重要CTA与提示中使用橙色
工作量：Low (2-3小时)

问题3.2：色彩色阶不足

当前状态：仅使用一种蓝色色阶
问题：无法打造视觉深度，hover状态不清晰

建议：为主色创建9阶色板（50-900）：

blue-50: #EFF6FF
blue-100: #DBEAFE
...
blue-500: #2563EB (主色)
...
blue-900: #1E3A8A

工作量：Medium (4小时 - 需要设计token)

[其余10个维度以此类推...]

Component Audit

组件审核

Buttons

按钮

Primary Button

Status: ⚠️ Needs improvement
Issues:
- Insufficient padding (8px vs. 12-16px standard)
- Border radius inconsistent (4px vs. 6px elsewhere)
- No hover state animation

Recommendation:

css

/* Current */
padding: 8px 16px;
border-radius: 4px;

/* Recommended */
padding: 12px 24px;
border-radius: 6px;
transition: all 0.2s ease;

&:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Secondary Button

Status: ❌ Problematic
Issues: Looks identical to primary, no differentiation
Recommendation: Use outline style or lower visual weight

主按钮

状态：⚠️ 需要改进
问题：
- 内边距不足（标准12-16px，当前8px）
- 圆角半径不一致（当前4px，其他区域6px）
- 无hover状态动画

建议：

css

/* 当前 */
padding: 8px 16px;
border-radius: 4px;

/* 推荐 */
padding: 12px 24px;
border-radius: 6px;
transition: all 0.2s ease;

&:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

次要按钮

状态：❌ 存在问题
问题：与主按钮视觉效果一致，无区分度
建议：使用轮廓样式或降低视觉权重

Forms

表单

Input Fields

Status: ⚠️ Needs improvement
Issues:
- Small height (32px vs. 40-44px standard)
- Border too subtle
- No focus state
- Labels not bold enough
Recommendation: [Specific CSS improvements]

输入框

状态：⚠️ 需要改进
问题：
- 高度过小（标准40-44px，当前32px）
- 边框不明显
- 无焦点状态
- 标签字重不足
建议：[具体CSS优化方案]

Cards

卡片

Product Cards

Status: ✅ Good
Strengths: Clean, well-spaced, good hover effect
Minor: Could use subtle shadow instead of border

[Continue for all key components...]

产品卡片

状态：✅ 良好
优势：简洁、间距合理、hover效果佳
小问题：可使用轻微阴影替代边框

[其余核心组件以此类推...]

Design System Status

设计系统状态

Overall Score: 4/10 (Inconsistent patterns)

总分：4/10（模式不一致）

What Exists

已具备的内容

✅ Basic color palette defined
✅ Some typography styles
✅ Button variations

✅ 基础调色板已定义
✅ 部分排版样式
✅ 按钮变体

What's Missing

缺失的内容

❌ Documented spacing system
❌ Complete type scale
❌ Shadow/elevation system
❌ Consistent border radius values
❌ Icon guidelines
❌ Responsive breakpoint rules

❌ 文档化的间距系统
❌ 完整的字号体系
❌ 阴影/层级系统
❌ 统一的圆角半径值
❌ 图标规范
❌ 响应式断点规则

Recommendation

建议

Invest in formal design system:

Define design tokens (colors, spacing, typography)
Create component library (Figma or code)
Document usage guidelines
Enforce consistency in new designs

Effort: High (2-4 weeks) Impact: Massive - eliminates future inconsistency

投入资源构建正式设计系统：

定义设计token（色彩、间距、排版）
构建组件库（Figma或代码实现）
编写使用指南
在新设计中强制执行一致性

工作量：High (2-4周) 影响：巨大 - 消除未来的不一致问题

Competitive Comparison

竞品对比

Aspect	This Product	Competitor A	Competitor B	Winner
Visual Polish	6/10	8/10	7/10	Competitor A
Modernity	5/10	9/10	6/10	Competitor A
Typography	4/10	8/10	7/10	Competitor A
Color Usage	7/10	7/10	8/10	Competitor B
Consistency	5/10	9/10	7/10	Competitor A
Brand Strength	6/10	7/10	8/10	Competitor B

Key Insights:

Competitor A sets the visual standard in the category
Our product lags in typography and consistency
Opportunity to differentiate through stronger branding
Need to modernize visual language to compete

维度	本产品	竞品A	竞品B	领先者
视觉精致度	6/10	8/10	7/10	竞品A
现代性	5/10	9/10	6/10	竞品A
排版	4/10	8/10	7/10	竞品A
色彩运用	7/10	7/10	8/10	竞品B
一致性	5/10	9/10	7/10	竞品A
品牌强度	6/10	7/10	8/10	竞品B

核心洞察：

竞品A在视觉标准上处于行业领先
本产品在排版与一致性上落后
可通过强化品牌实现差异化
需要更新视觉语言以提升竞争力

Prioritized Recommendations

优先级建议

Phase 1: Critical Fixes (1 week, High ROI)

阶段1：关键修复（1周，高ROI）

Visual Impact: ★★★★★ | Effort: Low | Cost: ~20 hours

Increase body text to 16px
- Impact: Immediate professionalism boost
- Effort: 2 hours
- Tools: Global CSS update
Fix CTA hierarchy
- Impact: Clearer user guidance
- Effort: 4 hours
- Details: Primary stands out, secondary subdued
Improve button padding and states
- Impact: More premium feel
- Effort: 4 hours
- Details: Add hover, focus, active states
Increase spacing throughout
- Impact: Cleaner, less cramped
- Effort: 8 hours
- Details: Apply consistent 8px spacing scale
Add subtle shadows to cards
- Impact: Better depth and hierarchy
- Effort: 2 hours
- Details: Use elevation system (2px, 4px, 8px)

Expected Outcome: Professional, polished appearance

视觉影响：★★★★★ | 工作量：低 | 成本：~20小时

将正文字号提升至16px
- 影响：立即提升专业感
- 工作量：2小时
- 工具：全局CSS修改
优化CTA层级
- 影响：明确用户操作引导
- 工作量：4小时
- 细节：主CTA突出，次要CTA弱化
改进按钮内边距与状态
- 影响：提升高级感
- 工作量：4小时
- 细节：添加hover、focus、active状态
全界面统一间距
- 影响：界面更整洁，不拥挤
- 工作量：8小时
- 细节：应用统一的8px间距体系
为卡片添加轻微阴影
- 影响：提升深度与层级
- 工作量：2小时
- 细节：使用层级系统（2px、4px、8px）

预期成果： 界面呈现专业、精致的视觉效果

Phase 2: Design System Foundation (2-3 weeks)

阶段2：设计系统基础构建（2-3周）

Visual Impact: ★★★★☆ | Effort: Medium | Cost: ~80 hours

Create design tokens
- Colors (9 shades per color)
- Spacing scale (4, 8, 12, 16, 24, 32, 48, 64px)
- Type scale (with line heights)
- Shadow system
- Border radius values
Build component library
- Buttons (all variants)
- Forms (inputs, selects, checkboxes)
- Cards (all types)
- Navigation components
- Modals and overlays
Document guidelines
- When to use each component
- Do's and don'ts
- Code snippets
- Figma library

Expected Outcome: Consistency across all future designs

视觉影响：★★★★☆ | 工作量：中 | 成本：~80小时

创建设计token
- 色彩（每种颜色9阶）
- 间距体系（4、8、12、16、24、32、48、64px）
- 字号体系（含行高）
- 阴影系统
- 圆角半径值
构建组件库
- 按钮（所有变体）
- 表单（输入框、选择器、复选框）
- 卡片（所有类型）
- 导航组件
- 模态框与遮罩
编写使用指南
- 各组件使用场景
- 注意事项
- 代码片段
- Figma组件库

预期成果： 所有未来设计保持一致性

Phase 3: Visual Enhancement (1-2 months)

阶段3：视觉增强（1-2个月）

Visual Impact: ★★★★☆ | Effort: High | Cost: ~160 hours

Refresh brand application
Custom illustrations/graphics
Micro-interactions and animations
Dark mode (if applicable)
Advanced responsive optimization

Expected Outcome: Premium, differentiated visual design

视觉影响：★★★★☆ | 工作量：高 | 成本：~160小时

品牌应用优化
定制插画/图形
微交互与动画
深色模式（如适用）
高级响应式优化

预期成果： 打造高端、差异化的视觉设计

Design Trends Assessment (2026)

2026年设计趋势评估

Current Trends in Product Design

当前产品设计趋势

In (Modern):

✅ Generous white space
✅ Large typography
✅ Subtle shadows (not flat)
✅ Rounded corners (6-8px)
✅ Soft color palettes
✅ Micro-interactions
✅ Dark mode support
✅ Glassmorphism (subtle)
✅ 3D elements (tasteful)

Out (Dated):

❌ Extreme flat design
❌ Harsh shadows
❌ Gradients everywhere
❌ Small text (<14px)
❌ Overly complex layouts
❌ Skeuomorphism
❌ Carousels/sliders

This Product's Alignment:

Moderate - Some modern elements, some dated patterns
Needs update to feel current

流行（现代）：

✅ 充足留白
✅ 大字号排版
✅ 轻微阴影（非扁平化）
✅ 圆角（6-8px）
✅ 柔和调色板
✅ 微交互
✅ 深色模式支持
✅ 轻微毛玻璃效果
✅ 适度3D元素

过时（陈旧）：

❌ 极端扁平化设计
❌ 生硬阴影
❌ 随处可见的渐变
❌ 小字号（<14px）
❌ 过度复杂布局
❌ 拟物化
❌ 轮播图/滑块

本产品契合度：

中等 - 部分现代元素，部分陈旧模式
需要更新以符合当前趋势

Accessibility-Visual Overlap

无障碍-视觉重叠部分

While WCAG audit covers technical accessibility, visual design impacts it:

Color Contrast:

Current contrast ratios meet/fail WCAG?
Issues: [List contrast failures]

Typography Readability:

Font sizes appropriate for all users?
Line heights sufficient?

Touch Targets:

Buttons large enough (44×44px minimum)?
Spacing between interactive elements?

Visual Indicators:

Relying on color alone for meaning?
Icons + text labels?

[Cross-reference with WCAG audit]

虽然WCAG审核涵盖技术无障碍，但视觉设计也会影响无障碍体验：

色彩对比度：

当前对比度是否符合/不符合WCAG标准？
问题：[列出对比度不达标项]

排版可读性：

字号是否适合所有用户？
行高是否充足？

触摸目标：

按钮尺寸是否达标（最小44×44px）？
交互元素间距是否合理？

视觉指示器：

是否仅依赖色彩传递信息？
是否同时使用图标+文字标签？

[与WCAG审核结果交叉参考]

Before/After Mockup Recommendations

前后对比Mockup建议

For maximum impact, prioritize these visual transformations:

为实现最大效果，优先进行以下视觉改造：

Homepage Hero

首页Hero区域

Before Issues:

Cluttered, no clear focal point
Small, timid CTA
Weak visual hierarchy

After Improvements:

Clear headline with generous spacing
Bold, confident CTA (2x size)
Strong visual hierarchy
Better use of imagery

Expected Impact: +30% CTA click rate

当前问题：

拥挤，无清晰焦点
CTA按钮小且不突出
视觉层级弱

优化后：

标题清晰，留白充足
醒目自信的CTA（尺寸2倍）
清晰的视觉层级
图像运用更合理

预期影响： CTA点击率提升30%

Product Page

产品页

Before Issues:

Everything same size
No breathing room
"Add to Cart" lost in noise

After Improvements:

Product image dominates
Clear price display
Prominent "Add to Cart"
Organized product details

Expected Impact: +20% add-to-cart rate

[Continue for key pages...]

当前问题：

所有元素尺寸一致
无呼吸空间
“加入购物车”按钮被淹没

优化后：

产品图片占主导
价格展示清晰
“加入购物车”按钮突出
产品信息组织有序

预期影响： 加入购物车率提升20%

[其余关键页面以此类推...]

Design Quality Checklist

设计质量检查清单

Use this checklist for ongoing quality assurance:

用于持续质量保证：

Typography ✓

排版 ✓

Color ✓

色彩 ✓

Spacing ✓

间距 ✓

Components ✓

组件 ✓

Consistency ✓

一致性 ✓

Layout ✓

布局 ✓

Tools Recommended

Next Steps

下一步行动

Review findings with design/dev team
Prioritize Phase 1 fixes (quick wins)
Create design system foundation (Phase 2)
Establish design QA process (use checklist)
Re-audit in 3 months to measure progress

与设计/开发团队评审发现
优先执行阶段1修复（快速见效）
构建设计系统基础（阶段2）
建立设计QA流程（使用检查清单）
3个月后重新审核以衡量进展

Methodology Notes

方法论说明

Evaluation Method: Expert visual design review
Standards: Modern web design best practices (2026)
Focus: Visual aesthetics, polish, consistency
Limitations:
- Subjective elements (some design preferences vary)
- Not user testing (perception-based)
- Should be validated with target audience
Complement with: User research, A/B testing, analytics

评估方法：专业视觉设计评审
标准：2026年现代网页设计最佳实践
重点：视觉美学、精致度、一致性
局限性：
- 部分主观元素（设计偏好存在差异）
- 非用户测试（基于感知）
- 需结合目标受众验证
补充建议：结合用户研究、A/B测试、数据分析

References

参考资料

Steve Krug - "Don't Make Me Think" (Visual design for usability)
Robin Williams - "The Non-Designer's Design Book"
Refactoring UI - Adam Wathan & Steve Schoger
Material Design Guidelines (Google)
Human Interface Guidelines (Apple)
Laws of UX - Jon Yablonski

Version: 1.0 Date: [Date]

---

Steve Krug - 《点石成金：访客至上的网页设计秘笈》（可用性视觉设计）
Robin Williams - 《写给大家看的设计书》
Refactoring UI - Adam Wathan & Steve Schoger
Material Design Guidelines（Google）
Human Interface Guidelines（Apple）
Laws of UX - Jon Yablonski

版本：1.0 日期：[日期]

---

Scoring System

评分体系

Overall Design Score Calculation

整体设计总分计算

Each dimension scored 0-10:

9-10: Exceptional, industry-leading
7-8: Strong, professional
5-6: Adequate, room for improvement
3-4: Below par, needs attention
0-2: Poor, requires major redesign

Overall Score = Average of all 10 dimensions

Grade:

90-100: A+ (Exceptional)
80-89: A (Excellent)
70-79: B (Good)
60-69: C (Acceptable)
50-59: D (Needs Work)
0-49: F (Poor)

每个维度0-10分：

9-10：卓越，行业领先
7-8：优秀，专业
5-6：合格，有提升空间
3-4：低于标准，需关注
0-2：较差，需重大重构

总分 = 10个维度平均分

等级：

90-100: A+（卓越）
80-89: A（优秀）
70-79: B（良好）
60-69: C（合格）
50-59: D（需要改进）
0-49: F（较差）

Common Design Smells

常见设计问题信号

Quick indicators of visual design issues:

🚩 Typography Red Flags:

Body text <14px
More than 3 font families
Line height <1.3
Comic Sans, Papyrus (unless satirical)

🚩 Color Red Flags:

Pure black (#000) on pure white (#FFF)
Rainbow explosion (no color system)
Low contrast combinations
Clashing color combinations

🚩 Spacing Red Flags:

Random pixel values (13px, 23px, 17px)
Elements touching screen edges
No consistent spacing
Too cramped or too sparse

🚩 Consistency Red Flags:

Multiple button styles for same action
Border radius varies wildly
Mixed icon styles
No evident design system

🚩 Modernity Red Flags:

Beveled edges
Web 2.0 gloss/gradients
Outdated stock photos
Flash-era animations
Non-responsive design

视觉设计问题的快速识别指标：

🚩 排版红色预警：

正文字号<14px
使用3种以上字体
行高<1.3
使用Comic Sans、Papyrus（除非用于讽刺）

🚩 色彩红色预警：

纯黑（#000）配纯白（#FFF）
彩虹式配色（无体系）
低对比度组合
色彩冲突

🚩 间距红色预警：

随机像素值（13px、23px、17px）
元素贴边
无统一间距
过于拥挤或稀疏

🚩 一致性红色预警：

同一操作使用多种按钮样式
圆角半径差异大
图标风格混杂
无明显设计系统

🚩 现代性红色预警：

斜面边缘
Web 2.0光泽/渐变
过时图库照片
Flash时代动画
非响应式设计

Design Quality Levels

设计质量等级

Level 1: Bootstrap Template (Score: 40-50)

等级1：Bootstrap模板（得分40-50）

Generic, off-the-shelf appearance
Minimal customization
No personality or brand
Functional but forgettable

通用，现成模板外观
极少定制
无个性或品牌特色
可用但无记忆点

Level 2: Customized Framework (Score: 60-70)

等级2：定制化框架（得分60-70）

Some brand application
Customized colors/fonts
Inconsistencies evident
Decent but not distinctive

部分品牌应用
定制色彩/字体
存在不一致性
尚可但无特色

Level 3: Professional Design (Score: 70-80)

等级3：专业设计（得分70-80）

Strong brand identity
Consistent design system
Polished and intentional
Competitive quality

鲜明品牌身份
统一设计系统
精致且有目的性
具备竞争力

Level 4: Design Excellence (Score: 80-90)

等级4：卓越设计（得分80-90）

Exceptional craft and attention to detail
Strong personality and uniqueness
Memorable and delightful
Industry-leading

卓越工艺与细节
鲜明个性与独特性
令人难忘且愉悦
行业领先

Level 5: Award-Worthy (Score: 90-100)

等级5：获奖级设计（得分90-100）

Innovative and trendsetting
Perfect execution
Emotional resonance
Benchmark for others

Goal: Aim for Level 3+ (70+) to be competitive.

创新且引领趋势
完美执行
情感共鸣
行业标杆

目标：瞄准等级3+（70分以上）以保持竞争力。

Version

版本

1.0 - Initial release

Remember: Great visual design isn't about trends or decoration—it's about creating clear, beautiful, functional interfaces that serve users while expressing brand personality. Design is not just how it looks, but how it works.

1.0 - 初始版本

谨记：优秀的视觉设计无关趋势或装饰——而是打造清晰、美观、实用的界面，在服务用户的同时传递品牌个性。设计不仅关乎外观，更关乎体验。