·web-design-mastery
*

web-design-mastery

Дизайн пользовательского интерфейса веб-приложения промышленного уровня на основе принципов рефакторинга пользовательского интерфейса. ВСЕГДА активируйте для: целевой страницы, информационной панели, экранов авторизации, главных разделов, дизайна карточек, дизайна кнопок, ввода форм, навигации, макетов, решений по пространству, иерархии типографики, выбора цвета, теней, глубины, пустых состояний, оформления фона. Обеспечивает рабочий процесс проектирования, визуальную иерархию, системы интервалов (сетка 4 пикселя), масштаб шрифта, цветовые системы HSL, высоту теней и последние штрихи. Турецкий: Sayfa tasarımı, UI/UX, frontend tasarım, web tasarım, güzel arayüz, Contemporary tasarım, card tasarımı, button stili, form tasarımı, renk palati, типографи. Английский: красивый интерфейс, стильный дизайн, ощущение премиум-класса, визуальная иерархия, пробелы, цветовая палитра, типографский масштаб.

24Установки·1Тренд·@anilcancakir

Установка

$npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery

Как установить web-design-mastery

Быстро установите AI-навык web-design-mastery в вашу среду разработки через командную строку

  1. Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
  2. Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery
  3. Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Источник: anilcancakir/my-claude-code.

Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.

| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |

| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |

Факты (для цитирования)

Стабильные поля и команды для ссылок в AI/поиске.

Команда установки
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery
Категория
*Креатив
Проверено
Впервые замечено
2026-02-01
Обновлено
2026-03-11

Browse more skills from anilcancakir/my-claude-code

Короткие ответы

Что такое web-design-mastery?

Дизайн пользовательского интерфейса веб-приложения промышленного уровня на основе принципов рефакторинга пользовательского интерфейса. ВСЕГДА активируйте для: целевой страницы, информационной панели, экранов авторизации, главных разделов, дизайна карточек, дизайна кнопок, ввода форм, навигации, макетов, решений по пространству, иерархии типографики, выбора цвета, теней, глубины, пустых состояний, оформления фона. Обеспечивает рабочий процесс проектирования, визуальную иерархию, системы интервалов (сетка 4 пикселя), масштаб шрифта, цветовые системы HSL, высоту теней и последние штрихи. Турецкий: Sayfa tasarımı, UI/UX, frontend tasarım, web tasarım, güzel arayüz, Contemporary tasarım, card tasarımı, button stili, form tasarımı, renk palati, типографи. Английский: красивый интерфейс, стильный дизайн, ощущение премиум-класса, визуальная иерархия, пробелы, цветовая палитра, типографский масштаб. Источник: anilcancakir/my-claude-code.

Как установить web-design-mastery?

Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Где находится исходный репозиторий?

https://github.com/anilcancakir/my-claude-code

Детали

Категория
*Креатив
Источник
skills.sh
Впервые замечено
2026-02-01