---
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 产品时,使用此技能确保设计风格与麦好火品牌保持一致。