麦好火 UI 设计

---
name: 麦好火 UI 设计
description: 创建符合麦好火品牌风格的现代化企业级前端界面。专注于简约、专业、商务化的设计语言，适用于麦好火内部管理系统、SaaS 应用和企业级 Web 应用。遵循麦好火的设计规范，确保所有界面的一致性和专业感。
version: 1.0.0
category: 设计工具
tags: mhh-ui,企业设计,商务风格,简约设计
---

# 麦好火 UI 设计指南

本技能指导创建符合麦好火品牌风格的企业级前端界面，确保所有产品保持统一的视觉语言和用户体验。

## 麦好火设计原则

### 核心理念
- **简约至上**: 去除不必要的装饰...

---
name: 麦好火 UI 设计
description: 创建符合麦好火品牌风格的现代化企业级前端界面。专注于简约、专业、商务化的设计语言，适用于麦好火内部管理系统、SaaS 应用和企业级 Web 应用。遵循麦好火的设计规范，确保所有界面的一致性和专业感。
version: 1.0.0
category: 设计工具
tags: mhh-ui,企业设计,商务风格,简约设计
---

# 麦好火 UI 设计指南

本技能指导创建符合麦好火品牌风格的企业级前端界面，确保所有产品保持统一的视觉语言和用户体验。

## 麦好火设计原则

### 核心理念
- **简约至上**: 去除不必要的装饰，专注于功能性和清晰度
- **专业商务**: 采用保守的配色和布局，传达可靠和专业的品牌形象
- **一致性**: 所有界面遵循相同的设计规范和视觉语言
- **高效实用**: 设计服务于功能，提升用户工作效率

### 设计目标
- 创建清晰、易用的企业级界面
- 保持麦好火品牌识别度
- 提供一致的用户体验
- 支持多平台适配（Web、移动端）

## 麦好火配色方案

### 主色调
```css
--mhh-bg-primary: rgb(245, 245, 245);        /* 浅灰背景 */
--mhh-bg-white: rgb(255, 255, 255);          /* 白色背景 */
--mhh-text-primary: rgb(0, 0, 0);            /* 主文字色 */
--mhh-text-secondary: rgba(0, 0, 0, 0.9);    /* 次要文字色 */
--mhh-text-tertiary: rgb(48, 49, 51);        /* 三级文字色 */
```

### 辅助色
```css
--mhh-border-light: rgb(220, 223, 230);      /* 浅色边框 */
--mhh-border-medium: rgb(192, 196, 204);     /* 中色边框 */
--mhh-border-dark: rgb(48, 49, 51);          /* 深色边框 */
--mhh-gray-light: rgb(154, 158, 178);        /* 浅灰色文字 */
--mhh-gray-medium: rgb(79, 83, 101);         /* 中灰色文字 */
--mhh-gray-dark: rgb(96, 98, 102);           /* 深灰色文字 */
```

### 强调色
```css
--mhh-accent-red: rgb(230, 47, 61);          /* 红色 - 错误/警告 */
--mhh-accent-blue: rgb(64, 158, 255);        /* 蓝色 - 链接/信息 */
--mhh-accent-green: rgb(103, 194, 58);       /* 绿色 - 成功 */
```

## 字体规范

### 字体家族
```css
--mhh-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
```

### 字号规范
```css
--mhh-font-size-xs: 12px;     /* 辅助文字 */
--mhh-font-size-sm: 14px;     /* 小号文字 */
--mhh-font-size-base: 16px;   /* 基础文字 */
--mhh-font-size-lg: 18px;     /* 大号文字 */
--mhh-font-size-xl: 20px;     /* 特大文字 */
--mhh-font-size-2xl: 24px;    /* 标题文字 */
```

### 字重规范
```css
--mhh-font-weight-normal: 400;    /* 常规 */
--mhh-font-weight-medium: 500;    /* 中等 */
--mhh-font-weight-semibold: 600;  /* 半粗 */
--mhh-font-weight-bold: 700;      /* 粗体 */
```

## 组件设计规范

### 按钮
```css
/* 主按钮 */
.mhh-btn-primary {
  background-color: var(--mhh-text-primary);
  color: var(--mhh-bg-white);
  border: none;
  border-radius: 0px;
  padding: 8px 16px;
  font-size: var(--mhh-font-size-base);
  font-weight: var(--mhh-font-weight-medium);
}

/* 次要按钮 */
.mhh-btn-secondary {
  background-color: var(--mhh-bg-white);
  color: var(--mhh-text-primary);
  border: 1px solid var(--mhh-border-dark);
  border-radius: 0px;
  padding: 8px 16px;
  font-size: var(--mhh-font-size-base);
  font-weight: var(--mhh-font-weight-medium);
}

/* 文字按钮 */
.mhh-btn-text {
  background-color: transparent;
  color: var(--mhh-text-primary);
  border: none;
  padding: 8px 16px;
  font-size: var(--mhh-font-size-base);
}
```

### 输入框
```css
.mhh-input {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid var(--mhh-border-dark);
  border-radius: 0px;
  padding: 8px 12px;
  font-size: var(--mhh-font-size-base);
  color: var(--mhh-text-primary);
}

.mhh-input:focus {
  border-color: var(--mhh-text-primary);
  outline: none;
}

.mhh-input::placeholder {
  color: var(--mhh-gray-light);
}
```

### 卡片
```css
.mhh-card {
  background-color: var(--mhh-bg-white);
  border: 1px solid var(--mhh-border-light);
  border-radius: 0px;
  padding: 16px;
  box-shadow: none;
}
```

### 表单
```css
.mhh-form-label {
  font-size: var(--mhh-font-size-sm);
  font-weight: var(--mhh-font-weight-medium);
  color: var(--mhh-text-tertiary);
  margin-bottom: 8px;
}

.mhh-form-item {
  margin-bottom: 16px;
}
```

## 布局规范

### 间距系统
```css
--mhh-space-xs: 4px;
--mhh-space-sm: 8px;
--mhh-space-md: 16px;
--mhh-space-lg: 24px;
--mhh-space-xl: 32px;
--mhh-space-2xl: 48px;
```

### 页面布局
```css
/* 页面容器 */
.mhh-page {
  background-color: var(--mhh-bg-primary);
  min-height: 100vh;
  padding: var(--mhh-space-lg);
}

/* 内容区域 */
.mhh-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* 栅格系统 */
.mhh-grid {
  display: grid;
  gap: var(--mhh-space-md);
}

.mhh-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mhh-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mhh-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
```

## 响应式设计

### 断点规范
```css
--mhh-breakpoint-sm: 640px;
--mhh-breakpoint-md: 768px;
--mhh-breakpoint-lg: 1024px;
--mhh-breakpoint-xl: 1280px;
```

### 移动端适配
```css
@media (max-width: 768px) {
  .mhh-grid-2,
  .mhh-grid-3,
  .mhh-grid-4 {
    grid-template-columns: 1fr;
  }

  .mhh-page {
    padding: var(--mhh-space-md);
  }
}
```

## 交互设计

### 状态反馈
```css
/* 悬停状态 */
.mhh-btn-primary:hover {
  opacity: 0.9;
}

/* 点击状态 */
.mhh-btn-primary:active {
  opacity: 0.8;
}

/* 禁用状态 */
.mhh-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### 动画效果
```css
/* 淡入动画 */
@keyframes mhh-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mhh-animate-fade-in {
  animation: mhh-fade-in 0.3s ease-in-out;
}

/* 过渡效果 */
.mhh-transition {
  transition: all 0.2s ease-in-out;
}
```

## 常见页面模板

### 登录页面
```html
<div class="mhh-page mhh-page-login">
  <div class="mhh-content">
    <div class="mhh-card mhh-card-login">
      <h1 class="mhh-title">麦好火</h1>
      <form class="mhh-form">
        <div class="mhh-form-item">
          <label class="mhh-form-label">用户名</label>
          <input type="text" class="mhh-input" placeholder="请输入用户名">
        </div>
        <div class="mhh-form-item">
          <label class="mhh-form-label">密码</label>
          <input type="password" class="mhh-input" placeholder="请输入密码">
        </div>
        <button type="submit" class="mhh-btn-primary mhh-btn-block">登录</button>
      </form>
    </div>
  </div>
</div>
```

### 列表页面
```html
<div class="mhh-page">
  <div class="mhh-content">
    <div class="mhh-header">
      <h1 class="mhh-title">页面标题</h1>
      <button class="mhh-btn-primary">新建</button>
    </div>
    <div class="mhh-card">
      <table class="mhh-table">
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 列表项 -->
        </tbody>
      </table>
    </div>
  </div>
</div>
```

## 设计检查清单

在使用本技能创建界面时，确保：

- [ ] 使用麦好火标准配色方案
- [ ] 遵循字体规范（字体家族、字号、字重）
- [ ] 使用直角边框（border-radius: 0px）
- [ ] 保持一致的间距系统
- [ ] 确保响应式适配
- [ ] 提供清晰的状态反馈
- [ ] 保持简约的设计风格
- [ ] 避免过度装饰和动画
- [ ] 确保文字对比度符合可访问性要求
- [ ] 测试在不同设备上的显示效果

## 注意事项

1. **避免使用**: 圆角、阴影、渐变背景、花哨的动画效果
2. **优先使用**: 直角边框、纯色背景、简单的过渡动画
3. **保持克制**: 不要添加不必要的装饰元素
4. **功能优先**: 设计服务于功能，提升工作效率
5. **一致性**: 所有页面遵循相同的设计规范

## 技术栈建议

- **框架**: Vue.js / React / uni-app
- **CSS**: 原生 CSS / SCSS / Tailwind CSS（配置麦好火主题）
- **构建工具**: Vite / Webpack
- **组件库**: Element Plus / Ant Design（需自定义主题）

## 参考资源

- 麦好火官网: https://yw.maihh.com
- 麦好火设计规范: 内部文档
- 企业级 UI 设计最佳实践

---

**使用场景**: 当需要创建麦好火相关的 Web 应用、管理系统、SaaS 产品时，使用此技能确保设计风格与麦好火品牌保持一致。