# Minimalist Interface

> Create clean, minimalist interface designs with focus on usability and visual hierarchy. Use this skill when the user asks to create wireframes, mockups, or interface concepts that prioritize simplicity and functionality.

- Skill: `lisapullman/minimalist-interface` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lisapullman/minimalist-interface`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lisapullman/minimalist-interface/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: LisaPullman (https://skillmd.com/u/lisapullman)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/lisapullman/minimalist-interface

---


These are instructions for creating minimalist interface designs that emphasize clarity, functionality, and visual hierarchy through restraint and purposeful design.

## DEFAULT STYLE & OUTPUT

**��⚠��️ 除非用户明确指定其他风格，否则一律默认使用「极简主义界面 (Minimalist Interface)」风格生成设计。**

**默认输出格式：PNG**（除非用户明确要求 PDF 或其他格式）。

**默认画布尺寸：1440×900 px**（标准�桌面�屏幕比例）。

**��⚠��️ � 默认字体系统：使用 San Francisco 或系统默认无�衬线字体进行界面设计**。

### � 默认美学：极简主义界面 (Minimalist Interface)

Philosophy: Interface design through reduction, clarity, and purposeful element placement.
Visual expression: Ample whitespace, clear typographic hierarchy, intentional use of color and space, focus on essential elements only.

**�核心视觉语言**：
- 充分利用负空间创造呼吸感和专注度
- � 建立清�晰的视觉�层次引导用户注意力
- 限制色彩使用，仅在关�键交互元素上应用强调色
- 使用一致的间�距和对�齐创造�秩序感
- �优先考虑可读性和可用性而非装�饰性元素

### � 默认配色方案

| 元素           | � 颜色                       | Hex        |
| -------------- | -------------------------- | ---------- |
| **背景**       | 纯白                       | `#ffffff`  |
| **表面/卡片**  | � 浅�灰                       | `#f8f9fa`  |
| **主要文字**   | � 深�灰                       | `#212529`  |
| **次要文字**   | 中�灰                       | `#6c757d`  |
| **强调色**     | �� 蓝色                       | `#0d6efd`  |
| **成功色**     | �绿色                       | `#198754`  |
| **警告色**     | � 黄色                       | `#ffc107`  |
| **错误色**     | 红色                       | `#dc3545`  |
| **边�框色**     | � 边�框�灰                     | `#dee2e6`  |

**配色使用规则**：
1. 保持高对比度以确保可读性
2. � 强调色仅用于交互元素（按�钮、�链接、激活状态）
3. 保持色彩使用的一致性和节制
4. 利用不同的�灰度值创建�层次而不依�赖彩色

### � 基�础间�距和网格

**基�础单位**：8px
- 小间�距：4px、8px
- 中间�距：16px、24px
- 大间�距：32px、48px、64px

**排版系统**：
- 标题：24px、20px、18px、16px
- 正文：16px、14px
- � 辅助文字：12px、10px
- 行高：1.4-1.6

## DESIGN PRINCIPLES

### �核心原则
1. **少即是多**：移除所有不必要的元素
2. **功能先行**：每个元素必须有明确的目的
3. **视觉�层次**：通过大小、�颜色、位置引导注意力
4. **一致性**：保持视觉语言和交互模式的一致性
5. **可�访问性**：确保足够的对比度和可�触目标尺寸

### � 布局指导
- 使用12列�栅格系统（可选）
- 保持左对�齐或居中对�齐的一致性
- 为重要内容留出充分的白色空间
- 将相关元素分组，使用足够的间�距分隔不同部分

## COMPONENT GUIDELINES

### � 按�钮
- 最小�触目区域：44×44dp
- � 边界半径：4px-8px
- � 内边�距：水平16px，�垂直8px-12px
- 字重：中等或半�粗

### � 输入�框
- 高度：40px-48px
- � 边界：1px�固实线
- � 边界半径：4px
- � 内边�距：水平12px，�垂直8px
- � 聚�焦状态：使用强调色边界

### 卡片
- � 边界半径：8px-12px
- � 阴影：�柔和的Drop Shadow（可选）
- � 内边�距：16px-24px
- � 背景：白色或�浅�灰

### 导�航
- 高度：48px-64px
- 项目间�距：24px-32px
- 激活状态：使用强调色下划线或背景色

## OUTPUT SPECIFICATIONS

**默认输出**：单页高清�晰度PNG文件（1440×900px）
**可选输出**：PDF格式（用于演示或打印）
**文件命名**：使用�描述性名称，如 `interface-wireframe.png`

**创建流程**：
1. 定义界面目的和�核心功能
2. � 建立基本布局和结构
3. � 添加必要的界面组件
4. � 应用排版和间�距系统
5. 使用色彩强调关�键元素
6. �审查可�访问性和使用便利性
7. 导出为指定格式

---