Frontend Design - без AI-эстетики

frontend-design - генератор UI без AI-эстетики. Перед кодом задаёт BOLD-направление (brutalist, claymorphism, editorial, retro-futuristic и ещё 10+), продумывает композицию, цвет и типографику - и только потом пишет production-grade код React/HTML/CSS. Никаких «дашбордов на градиенте» как у всех.

Кому полезно: разрабам и дизайн-инженерам, основателям-стартаперам, кто пилит лендинги и продукты сам и хочет выделиться.

Запрос: «Лендинг для AI-курса, стиль editorial magazine»

```
🎨 Aesthetic direction: editorial magazine

Уточняю:

1. Тёмная или светлая палитра?
2. Шрифты: serif (Vogue-style) или mix display+sans?
3. Фотографии-герои или векторная графика?
4. Английский / русский / mix?

[После ответов:]

🚀 Создаю компоненты:

<Hero>

• Display font: PP Editorial New (или Tiempos Headline)
• Body: Inter
• Гигантский заголовок (>120px) с большим letter-spacing
• Маленький подзаголовок aside
• Asymmetric layout - текст слева, illustration справа

<CourseProgram>

• Гриднутая магазинная сетка (как разворот журнала)
• Каждый модуль = "статья" с номером, заголовком, лидом
• Тонкие разделительные линии
• Pull-quotes между модулями

<TestimonialSection>

• Чёрно-белые фото в большом размере
• Цитата + подпись (имя, должность)
• Один testimonial занимает целый экран

[+ полный production-grade код React/Tailwind]
```

Структура файлов

```
📁 frontend-design/
📄 SKILL.md <- инструкции для bold visual direction
```

Куда положить

Mac/Linux:
```bash
mkdir -p ~/.claude/skills/frontend-design
cp SKILL.md ~/.claude/skills/frontend-design/
```

Windows (PowerShell):
```powershell
mkdir "$env:USERPROFILE\.claude\skills\frontend-design"
copy SKILL.md "$env:USERPROFILE\.claude\skills\frontend-design\"
```

Как пользоваться

> /frontend-design сделай мне лендинг для AI-курса. Стиль - editorial magazine.

Скилл сначала задаст 3-5 вопросов про aesthetic direction (если не указал явно), потом сгенерит компоненты + production-grade код.

• Claude Code - CLI, десктоп-приложение или VS Code-расширение ([установка](https://docs.anthropic.com/en/docs/claude-code/overview)).
• Подписка Claude Pro / Max / Team - для большинства команд.
• Никаких API-ключей, токенов и зависимостей не требуется.