前端设计语言

技能文档

---
name: qian-duan-she-ji-yu-yan
description: 面向AI编码场景的前端设计语言体系，帮助开发者快速构建高质量的用户界面。包含视觉层次、排版系统、色彩理论、交互模式、响应式布局、无障碍设计、动效规范等7大领域的设计参考与20条核心引导指令，以及精选的反模式指南。当用户需要UI设计指导、UX设计、界面美化、前端设计系统搭建、视觉规范制定或界面设计审查时触发。触发词：UI设计、UX设计、界面设计、设计系统、前端美化、视觉规范、交互设计、设计语言、设计审查。
title: 前端设计语言
category: 开发工具
---

# 前端设计语言

让 AI 更擅长前端设计的设计语言参考体系。

## 七大设计领域

### 1. 排版系统
- 字号层级：标题(H1-H6)、正文、辅助文字、代码
- 行高规则：标题 1.2-1.3，正文 1.5-1.7
- 字重搭配：标题 Bold/SemiBold，正文 Regular
- 段落间距：使用 margin 而非连续 br
- 最大行宽：60-75 字符（中文 30-40 字）

### 2. 色彩理论
- 主色：品牌色，用于关键操作与标识
- 辅助色：2-3 个，用于分类与强调
- 中性色：灰度系列，用于文字、边框、背景
- 语义色：成功(绿)、警告(黄)、错误(红)、信息(蓝)
- 对比度：正文至少 4.5:1，大文字至少 3:1
- 暗色模式：降低饱和度，调整层级关系

### 3. 空间与布局
- 间距系统：4px 基准，倍数递进(4/8/12/16/24/32/48/64)
- 栅格系统：12列栅格， gutter 16-24px
- 留白原则：内容越重要，周围留白越多
- 分组法则：相关内容间距小，不相关内容间距大
- 对齐规则：同一视觉轴线上元素必须严格对齐

### 4. 交互模式
- 反馈即时性：操作后 100ms 内给出视觉反馈
- 操作可预测：交互元素外观暗示其功能
- 容错设计：支持撤销，确认危险操作
- 加载状态：骨架屏优于旋转加载图标
- 空状态：引导用户下一步操作

### 5. 响应式设计
- 移动优先：从最小屏幕开始设计
- 断点策略：sm(640px)/md(768px)/lg(1024px)/xl(1280px)
- 内容优先级：小屏幕优先展示核心内容
- 触控目标：最小 44x44px
- 图片响应：srcset + sizes 适配不同分辨率

### 6. 组件设计
- 按钮层级：主要(填充)/次要(描边)/文字(无边框)
- 表单规范：标签在上、错误提示就近、必填标记统一
- 卡片设计：标题+内容+操作区，间距分明
- 导航模式：顶部导航/侧边栏/底部标签栏的使用场景
- 弹窗策略：轻确认用 Toast，重要确认用 Dialog

### 7. 动效规范
- 时长控制：微交互 100-200ms，页面切换 300-500ms
- 缓动函数：入场用 ease-out，离场用 ease-in
- 意义优先：动效需传达信息，非纯装饰
- 一致性：同类元素使用相同动效参数
- 性能意识：优先使用 transform 和 opacity

## 设计审查清单

使用以下指令触发审查：

- `/audit` - 对当前页面进行全面设计审查
- `/critique` - 针对特定组件提供改进建议
- `/polish` - 优化视觉细节，提升精致度
- `/distill` - 简化过度设计，回归本质
- `/animate` - 为交互添加合理动效
- `/a11y` - 无障碍设计检查
- `/color` - 色彩方案审查与优化
- `/typography` - 排版系统审查
- `/spacing` - 间距与布局审查
- `/responsive` - 响应式适配检查

## 反模式指南

避免以下常见设计错误：

1. **彩虹色滥用**：超过 3 种高饱和度颜色
2. **字号混乱**：同一页面超过 5 种字号
3. **间距不一致**：相同层级元素间距不同
4. **对比度不足**：浅灰文字在白色背景上
5. **点击区域过小**：小于 44px 的可交互元素
6. **动效过度**：每个元素都有动画
7. **弹窗滥用**：用弹窗代替正常页面流程
8. **加载无反馈**：操作后无任何状态提示
9. **表单无校验**：提交后才显示错误
10. **层级混乱**：标题层级跳跃（h1 直接到 h4）

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。