前端界面设计

做落地页/组件时避免「AI 味」界面，产出有设计感的代码。

安装

**Claude Code（推荐）**
```bash
git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills
mkdir -p ~/.claude/skills
cp -r /tmp/anthropic-skills/skills/frontend-design ~/.claude/skills/
```
重启 Claude Code 后，在 MrWhale 网关下用中文描述任务即可。

**Cursor 项目级**
```bash
mkdir -p .cursor/skills
curl -L -o .cursor/skills/frontend-design.md \
  https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md
```

Skill 正文

## 这个 Skill 做什么

强制 Agent 在写前端时先定 **设计方向**，避免千篇一律的紫色渐变、「AI 味」界面。

## 你可以用它完成

- 落地页、Dashboard、React 组件的 **高审美实现**
- 指定 **字体、配色、动效、布局** 策略

## 你怎么跟 Agent 说（示例）

- 「做一个 SaaS 首页，杂志编辑风，深色背景 + 衬线标题」
- 「把这个表格 UI 改得更有品牌感，不要用 Inter 和紫色渐变」

前端界面设计 — Skill 广场 | MrWhale | MrWhale Skill

前端界面设计

做落地页/组件时避免「AI 味」界面，产出有设计感的代码。

安装

**Claude Code（推荐）**
```bash
git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills
mkdir -p ~/.claude/skills
cp -r /tmp/anthropic-skills/skills/frontend-design ~/.claude/skills/
```
重启 Claude Code 后，在 MrWhale 网关下用中文描述任务即可。

**Cursor 项目级**
```bash
mkdir -p .cursor/skills
curl -L -o .cursor/skills/frontend-design.md \
  https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md
```

Skill 正文

## 这个 Skill 做什么

强制 Agent 在写前端时先定 **设计方向**，避免千篇一律的紫色渐变、「AI 味」界面。

## 你可以用它完成

- 落地页、Dashboard、React 组件的 **高审美实现**
- 指定 **字体、配色、动效、布局** 策略

## 你怎么跟 Agent 说（示例）

- 「做一个 SaaS 首页，杂志编辑风，深色背景 + 衬线标题」
- 「把这个表格 UI 改得更有品牌感，不要用 Inter 和紫色渐变」