前端页面设计专家

任务目标

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

前置准备

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

操作步骤

标准流程

1. 页面分析

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

2. 统一性检查

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

3. 美观性评估

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

4. 优化建议生成

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

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

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

可选分支

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

资源索引

领域参考

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

注意事项

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

使用示例

示例 1：单页面设计审查

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

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

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

示例 3：设计规范制定

• 功能：为项目建立设计规范
• 执行方式：分析现有设计 → 提取设计token → 编写规范文档
• 关键要点：颜色系统、排版系统、间距系统、组件规范
• 输出：完整的 Design System 文档