# 前端设计师

> |

- **Type:** Skill
- **Install:** `agentstack add skill-laborany-laborany-frontend-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [laborany](https://agentstack.voostack.com/s/laborany)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [laborany](https://github.com/laborany)
- **Source:** https://github.com/laborany/laborany/tree/main/skills/frontend-design
- **Website:** https://laborany.github.io

## Install

```sh
agentstack add skill-laborany-laborany-frontend-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 前端设计师

## 核心理念

**避免 AI 味，追求独特性。**

AI 生成的界面往往有明显的"AI 味"：过度使用渐变、圆角过大、配色单调、布局雷同。
本 skill 的目标是打破这种模式，创造有品味、有个性的设计。

## 设计原则

### 1. 拒绝模板化

```
❌ 避免                          ✅ 追求
─────────────────────────────────────────────────
蓝紫渐变背景                     单色或微妙的色彩变化
超大圆角 (20px+)                 精确的圆角 (4-8px)
居中对称布局                     不对称、有张力的布局
通用图标库                       定制图形或无图标
"现代感"卡片堆叠                 有层次的信息架构
```

### 2. 色彩哲学

```css
/* ═══════════════════════════════════════════════════════════════
 * 色彩不是装饰，是信息
 * ═══════════════════════════════════════════════════════════════ */

/* 主色调：克制使用，仅用于关键交互 */
--primary: #1a1a1a;        /* 深色系更显高级 */
--accent: #0066ff;         /* 点缀色，少即是多 */

/* 灰度系统：建立层次感 */
--gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;
--gray-400: #a3a3a3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;
```

### 3. 排版法则

```css
/* ═══════════════════════════════════════════════════════════════
 * 排版是设计的骨架
 * ═══════════════════════════════════════════════════════════════ */

/* 字体选择：系统字体优先，避免 Google Fonts 的同质化 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

/* 中文字体：思源黑体或系统默认 */
font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", sans-serif;

/* 字号系统：基于 4px 网格 */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;

/* 行高：紧凑但可读 */
line-height: 1.5;          /* 正文 */
line-height: 1.2;          /* 标题 */
```

### 4. 间距系统

```css
/* ═══════════════════════════════════════════════════════════════
 * 间距创造呼吸感
 * ═══════════════════════════════════════════════════════════════ */

/* 基于 4px 的间距系统 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;

/* 组件内间距：紧凑 */
padding: var(--space-3) var(--space-4);

/* 区块间距：宽松 */
margin-bottom: var(--space-8);
```

### 5. 交互细节

```css
/* ═══════════════════════════════════════════════════════════════
 * 微交互体现品质
 * ═══════════════════════════════════════════════════════════════ */

/* 过渡：快速但不突兀 */
transition: all 0.15s ease;

/* 悬停：微妙的变化 */
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 点击：即时反馈 */
.button:active {
  transform: translateY(0);
}

/* 焦点：清晰的视觉指示 */
.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
```

## 布局模式

### 不对称布局

```html

  
  

```

### 留白艺术

```css
/* 大量留白 = 高级感 */
.hero {
  padding: 120px 0;        /* 不要怕空 */
  max-width: 600px;        /* 限制宽度 */
}

.section {
  margin: 80px 0;          /* 区块间大间距 */
}
```

## 组件示例

### 按钮

```html

  确认

  取消

```

### 卡片

```html

  标题
  描述文字

```

## 检查清单

生成 HTML 前，检查以下要点：

- [ ] 是否避免了渐变背景？
- [ ] 圆角是否控制在 8px 以内？
- [ ] 是否有足够的留白？
- [ ] 配色是否克制（主色不超过 3 种）？
- [ ] 字体大小是否遵循系统？
- [ ] 交互是否有微妙的反馈？
- [ ] 布局是否有层次感？

## 反面教材

```html

  欢迎使用
  开启您的精彩旅程
  立即开始

```

**问题分析：**
1. 渐变背景 → 俗气
2. 超大圆角 → 幼稚
3. 过重阴影 → 浮夸
4. 居中布局 → 无聊
5. 空洞文案 → 无意义

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [laborany](https://github.com/laborany)
- **Source:** [laborany/laborany](https://github.com/laborany/laborany)
- **License:** MIT
- **Homepage:** https://laborany.github.io

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-laborany-laborany-frontend-design
- Seller: https://agentstack.voostack.com/s/laborany
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.