frontend-design-expert

概述

前端页面设计专家

任务目标

• 本 Skill 用于：审查前端页面的设计质量，确保页面统一性和美观性
• 能力包含：页面视觉分析、一致性检查、美观性评估、优化建议生成
• 触发条件：用户请求审查页面、检查设计一致性、优化视觉效果、制定设计规范

适用与不适用

适用场景

• 审查单个页面的设计质量（登录页、首页、详情页等）
• 检查多个页面之间的设计一致性
• 对比设计稿与实现页面的差异
• 评估颜色、字体、间距、组件是否符合规范
• 为新项目制定设计规范（Design System）
• 修复设计不一致问题，生成可直接复用的 CSS 修复代码

不适用场景（请改用其他 Skill 或工具）

• 纯后端逻辑审查：API 设计、数据库设计、算法优化 → 用后端审查类 Skill
• 性能优化：首屏加载、运行时性能 → 用 performance 类 Skill
• SEO 审查：TDK、sitemap、结构化数据 → 用 SEO 类 Skill
• 可访问性深度审查：屏幕阅读器、ARIA 全量审查 → 用 a11y 专项 Skill（本 Skill 仅做基础对比度检查）
• 纯数据接口设计：无 UI 的 JSON API → 与本 Skill 无关
• 纯文案撰写：营销文案、技术文档 → 用 writing 类 Skill
• 图片素材制作：图标、插图设计 → 用图像生成类 Skill

前置准备

无需额外依赖或准备工作。

输入要求与异常处理

推荐输入（按优先级）

1. 页面截图：完整可见区域，分辨率 ≥ 1280×720，优先提供桌面端
2. HTML/CSS 代码：关键组件的源码片段
3. 设计稿：Figma 链接、Sketch 文件、XD 链接
4. 设计目标：风格倾向（简约/活泼/专业）、参考网站、目标用户
5. 已有规范：Design System 文档、Style Guide

最低输入

至少需要以下之一，否则无法有效审查：

• 一张可读的页面截图
• 一段关键组件的 HTML/CSS 代码
• 一份设计稿或设计规范

异常处理

操作步骤

标准流程

1. 页面分析

• 获取页面截图或代码
• 识别页面元素：颜色、字体、间距、布局、组件
• 提取设计模式：按钮样式、卡片样式、表单样式等
• 调用智能体的视觉识别能力分析页面结构

2. 统一性检查

• 颜色一致性：检查主色、辅助色、功能色使用是否规范
• 字体一致性：检查字体大小、字重、行高是否符合层级
• 间距一致性：检查间距系统（8px 基准）是否统一应用
• 组件一致性：检查同类组件样式是否一致
• 参考 [references/design-checklist.md](references/design-checklist.md) 的检查清单

3. 美观性评估

• 视觉平衡：评估页面重心、元素分布是否平衡
• 对齐规范：检查元素对齐方式（左对齐、居中、网格对齐）
• 对比度：检查文字与背景对比度是否符合可读性标准
• 留白：评估留白是否合理，避免拥挤或空旷
• 参考 [references/design-principles.md](references/design-principles.md) 的设计原则

4. 优化建议生成

• 生成具体改进点，每个问题包含：
  • 问题描述
  • 位置定位（具体组件或区域）
  • 改进建议（设计方向）
  • CSS 代码示例（可直接应用）
• 优先标注影响用户体验的高优先级问题
• 提供完整性和渐进式改进方案

5. 设计规范建议（可选）

• 如用户需要，生成设计规范文档：
  • 颜色系统定义（参考 [references/color-system.md](references/color-system.md)）
  • 排版规范（参考 [references/typography-guide.md](references/typography-guide.md)）
  • 间距系统定义
  • 组件样式规范

可选分支

• 当用户提供设计稿时：对比设计稿与实现的一致性
• 当用户提供多个页面时：跨页面一致性检查
• 当需要重构时：提供重构优先级和路线图

资源索引

领域参考

• [references/design-principles.md](references/design-principles.md)：核心设计原则（CRAP 原则），评估美观性时读取
• [references/design-checklist.md](references/design-checklist.md)：页面审查检查清单，执行统一性检查时读取
• [references/color-system.md](references/color-system.md)：色彩系统指南，颜色相关问题时读取
• [references/typography-guide.md](references/typography-guide.md)：排版规范，字体相关问题时读取
• [references/layout-patterns.md](references/layout-patterns.md)：常见布局模式，布局优化时读取

注意事项

• 仅在需要时读取参考文档，保持上下文简洁
• 所有分析和建议基于智能体的视觉识别和设计知识，无需脚本
• 提供的 CSS 示例应可直接复制使用，包含具体数值
• 优先解决影响用户体验和一致性的核心问题
• 建议应具体可执行，避免模糊的描述

使用示例

触发方式

主动调用本 Skill 的典型表述（供你直接复制）：

• "帮我审查这个登录页的设计质量"
• "检查这 3 个页面的设计一致性"
• "对比这个设计稿和实现页面的差异"
• "为我的项目设计一套 Design System"
• "这个按钮的样式需要优化，给我具体 CSS"

示例 1：单页面设计审查

• 场景：审查登录页面的设计质量
• 输入：登录页截图 + 核心组件 HTML/CSS
• 执行方式：智能体分析页面截图 → 检查一致性 → 评估美观性 → 生成优化建议
• 关键要点：检查按钮样式、表单布局、颜色使用、字体层级
• 输出：问题列表（含 P0/P1/P2 优先级） + CSS 修复代码

预期输出示例：

# 登录页设计审查报告

## 总体评分
- 颜色系统：7/10
- 排版系统：8/10
- 间距系统：6/10
- 组件一致性：7/10
- 布局与对齐：8/10
- 可访问性：6/10

## 问题清单
### P0（必须修复）
1. [对比度不足] - 登录按钮文字（#FFFFFF on #BFDBFE）对比度仅 2.1:1
2. [焦点状态缺失] - 输入框聚焦时无明显视觉反馈

### P1（建议修复）
1. [间距不统一] - 表单项间距 18px，应统一为 16px 或 24px
...

## 快速修复
[CSS 代码]

示例 2：多页面一致性检查

• 场景：检查整个应用的设计一致性
• 输入：3-5 个核心页面截图 + 全局 CSS 文件
• 执行方式：分析多个页面 → 提取设计模式 → 对比差异 → 生成统一方案
• 关键要点：跨页面组件一致性、全局颜色规范、间距系统
• 输出：一致性报告 + 全局 CSS 变量定义

示例 3：设计规范制定

• 场景：为新项目建立 Design System
• 输入：品牌色、Logo、参考网站
• 执行方式：分析品牌调性 → 推导色彩/字体/间距系统 → 输出规范文档
• 关键要点：颜色系统、排版系统、间距系统、组件规范
• 输出：完整的 Design System 文档（含 CSS 变量、组件代码、设计原则）

反模式与 FAQ

常见反模式（不要这样做）

FAQ

Q1：截图分辨率不够/模糊怎么办？A：请提供 ≥ 1280×720 的清晰截图；移动端单独提供 375×667 截图。如确实无法提供，可仅审查代码层面。

Q2：如何同时审查桌面端和移动端？A：分别提供两端截图，审查时会输出独立报告。移动端额外检查触控目标、单列布局、字号适配。

Q3：审查结果与设计稿不一致时听谁的？A：默认以设计稿为准（Figma 是单一事实源），实现偏离时标注"实现偏差"；若设计稿本身有问题，会同时指出。

Q4：能直接帮我写完整组件代码吗？A：可以。明确说"直接给组件代码，不要审查"即可，会跳过审查步骤直接输出符合规范的代码。

Q5：审查 React/Vue 组件库（如 Ant Design、Material UI）怎么办？A：可以审查使用方式（间距/颜色是否被自定义覆盖），但组件库本身的设计不在审查范围内。

Q6：能审查暗色模式吗？A：可以。提供浅色和暗色两套截图，会分别审查并指出暗色模式特有的问题（对比度反转、阴影调整等）。

Q7：审查一个大型项目要多久？A：单页约 2-3 分钟，全项目（5-10 页）建议分批审查，每批 2-3 页，避免建议过于笼统。

Q8：我的设计是中文为主的，需要特殊考虑吗？A：需要。中文排版的字号、行高、字体栈与西文不同，会参考 typography-guide.md 中的中文字体栈和最佳实践。