Автор и репозиторий
Автор — Affaan M. Репозиторий собрал 207k звёзд на GitHub. Распространяется под лицензией MIT. Файл frontend-design-direction.md открыт: прочитать его можно до установки.
Открыть репозиторий
Скилл · Разработка
Frontend Design Direction
Дизайн-направление проекта: система, иерархия, токены, шкалы.
О скилле
Что делает
Задаёт визуальные правила проекта с самого начала: дизайн-система, иерархия компонентов, цветовые переменные и типографическая шкала. Техническому руководителю и дизайнеру, стартующим продукт, даёт единый стандарт до того, как разъедется. Пригодится при выборе стилевого фреймворка и планировании библиотеки компонентов.
Источник
Откуда скилл и как поставить
Установка в Claude Code
Склонируйте репозиторий в ~/.claude/skills/ и перезапустите Claude Code — скилл подхватится сам. Дальше просто попросите ассистента использовать «Frontend Design Direction».
Cursor и другие редакторы
Скопируйте содержимое SKILL.md в системные правила проекта. Скиллы не запускают код — это текстовые инструкции, которые меняют поведение модели.
Гайды 2026
Разобрано до шаблонов: три гайда по 490 ₽
Всё, что в статьях идёт по верхам, здесь собрано в PDF: пошаговые схемы, готовые промпты и шаблоны, которые можно взять и применить в тот же день.
Промпты, которые работают: система и 60 готовых шаблонов
Как писать запросы к нейросетям так, чтобы ответы можно было брать в работу без переписывания
- Формула промпта из семи элементов с разбором «плохо / хорошо»
- Работа с контекстом и файлами: как кормить модель данными
- Итерации: как дорабатывать ответ, а не начинать заново
- Few-shot и цепочки промптов со схемами
Нужен платёжному сервису, других рассылок не будет.
Посмотреть фрагмент (PDF)
Свой ИИ-агент за выходные: пошагово, с кодом и без
Три рабочих проекта, выбор платформы, безопасность, стоимость и тесты: от агента в конструкторе до Python-кода с MCP
- Цикл агента и пять архитектур со схемами
- Честный раздел «когда агент не нужен» и дерево решений
- Сравнение платформ no-code и кода по девяти критериям
- Три проекта пошагово: секретарь заявок, аналитик отчёта, агент на коде
Нужен платёжному сервису, других рассылок не будет.
Посмотреть фрагмент (PDF)
Claude с нуля: от первого чата до скиллов и Claude Code
Модели, проекты, 18 сценариев с промптами, скиллы, MCP и Claude Code для тех, кто не пишет код
- Как выбрать модель Claude по задаче (актуально на 25.09.2026)
- Схема интерфейса и разбор возможностей: проекты, артефакты, поиск, память, рассуждение
- Формула запроса и приёмы, которые работают именно у Claude
- 18 рабочих сценариев с готовыми промптами: письма, договоры, презентации, таблицы, исследования
Нужен платёжному сервису, других рассылок не будет.
Посмотреть фрагмент (PDF)
Есть и бесплатные гайды
- 10 промптов для маркетолога, которые экономят рабочий день
- Claude: шпаргалка на каждый день
- Нужен ли вам ИИ-агент: чек-лист из 12 вопросов
- Видит ли нейросеть ваш сайт: чек-лист AEO/GEO на 20 пунктов
Оплата на стороне платёжного сервиса. После оплаты вы вернётесь на сайт, и файл откроется сразу. Оплачивая, вы принимаете оферту.
Хотите внедрить, но некогда разбираться?
Подберу скиллы под вашу задачу, поставлю и покажу на живом примере — быстрее, чем читать документацию.
Получить консультацию
Рядом на полке
Похожие скиллы
agent-transcript.md★ 379k
Agent Transcript
Прикладывает к пул-реквесту ход работы агента, а не только диф
OpenClaw · MIT
mcporter.md★ 379k
Mcporter
Все MCP-серверы под контролем из одного места: установка, статус, настройка
OpenClaw · MIT
security-triage.md★ 379k
Security Triage
Разбирает поток уведомлений об уязвимостях по критичности
OpenClaw · MIT
react18-legacy-context.md★ 246k
React18 Legacy Context
Замена устаревшего механизма передачи данных в React
facebook · MIT
react19-source-patterns.md★ 246k
React19 Source Patterns
Переезд на React 19: что сломается и чем заменить
facebook · MIT
superpowers.md★ 232k
Superpowers
Мета-пак от obra: десятки скиллов разом, негласный стандарт сообщества
obra
Дальше
Куда идти дальше
Категория «Разработка»
Самая большая полка каталога: написание и ревью кода, рефакторинг, отладка, архитектура, работа с фреймворками.
Ко всем скиллам категорииСайт под заявки
Делаем быстрые сайты с понятным путём к заявке — этот сайт тоже наша работа.
Создание сайтов под ключГайды
Пошаговые разборы: от первого промпта до своих агентов и автоматизации.
К каталогу гайдов
Вопросы
Частые вопросы
Что делает скилл Frontend Design Direction?
Дизайн-направление проекта: система, иерархия, токены, шкалы. Это Agent Skill — текстовое расширение для Claude Code и Cursor: подключается файлом SKILL.md и меняет поведение ассистента, кода внутри нет. Темы скилла: универсальный.
Как установить Frontend Design Direction?
Склонируйте репозиторий автора в папку скиллов: git clone https://github.com/affaan-m/ECC/tree/main/skills/frontend-design-direction ~/.claude/skills/frontend-design-direction — и перезапустите Claude Code, он подхватит скилл сам. В Cursor и похожих редакторах скопируйте содержимое SKILL.md в правила проекта. Перед установкой файл стоит прочитать: это обычный текст.
Это бесплатно?
Да. Скилл «Frontend Design Direction» открыт: автор — Affaan M, скачивается из официального репозитория без регистрации. Распространяется под лицензией MIT. На этой странице ничего покупать не нужно — каталог часть моего раздела «Обучение».
Нужен такой результат в вашей работе?
Напишите, чем занимаетесь, — скажу, закроет ли задачу этот скилл или собрать решение под вас.
Получить консультациюПн–Вс, 10:00–20:00. Отвечаю лично.