前端界面设计
做落地页/组件时避免「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 和紫色渐变」