UI设计热门

frontend-design：8个美学锚点（Anthropic官方）

官方UI设计Skill。Swiss/Industrial/Brutalist等8种风格，每种锁定配色+字体+质感。277K安装。

📋 SKILL.md 完整代码

---
name: frontend-design-skill
description: >-
  官方UI设计Skill。Swiss/Industrial/Brutalist等8种风格，每种锁定配色+字体+质感。277K安装。
  Use when working on frontend design skill tasks.
allowed-tools: Read,Write,Bash
---

# frontend-design：8个美学锚点（Anthropic官方）

## Quick Start
1. Save as `~/.claude/skills/frontend-design-skill/SKILL.md`
2. Restart Claude Code
3. Type `/frontend-design-skill` or describe your task naturally
4. Claude auto-triggers when your task matches the description

## Instructions
- Understand the user's specific context and needs
- Apply domain best practices consistently
- Provide actionable, specific guidance with examples
- Verify all outputs before presenting to user

## Gotchas
- Test with a fresh Claude instance after changes
- Keep SKILL.md under 500 lines; use references/ for details
- Description is the trigger key — make it specific and keyword-rich

🚀 怎么用

1. 复制上面的 SKILL.md 代码
2. 保存为 ~/.claude/skills/frontend-design-skill/SKILL.md
3. 重启 Claude Code
4. 输入 /frontend-design-skill 或直接描述任务触发
5. AI 自动按 Skill 流程执行

8个美学锚点

Swiss（极简白+Helvetica+红点缀）、Industrial（纯黑+Mono字体+信号色）、Brutalist（粗野主义+大块面）、Aurora Maximalism（极繁+渐变）、Organic（大地色系+圆角+纹理）、Glassmorphism（毛玻璃+模糊）、Neubrutalist（新粗野+硬阴影）、Minimalist Warm（暖色极简）。每次选一个锚点，CSS必须严格匹配对应的设计Token。

SKILL.md

name: frontend-design description: Anthropic's official UI design skill. 8 aesthetic anchors. Use for all frontend work to avoid generic AI-generated UI. # Design Anchors Pick ONE per project: - Swiss: pure white, Akzidenz/Helvetica, red accent, visible grid - Industrial: pure black, JetBrains Mono, one signal color, flat - Organic: sage/clay/terracotta, warm serif, rounded, subtle texture - Glassmorphism: frosted glass, blur, pastel, translucent borders - Neubrutalist: hard shadows, bold borders, primary colors, no gradients