code design
RU EN
~/wiki /dizayn-sistema-i-komponenty/

Дизайн-система и компоненты

Токены, цвета, типографика, UI-kit, состояния компонентов, паттерны интерфейса и единый визуальный язык продукта.

Как пользоваться разделом

Эта страница - короткий маршрут по одной теме. Здесь собраны только публичные индексируемые материалы, чтобы перейти от обзора к действию без поиска по всей вики.
10 материалов
01
Начните с самого свежего материала, если нужен контекст по инструменту или релизу.
02
Откройте самый практический гайд первым, если решаете конкретную задачу проекта.
03
Используйте Glossary для терминов и Jobs для проверки спроса вокруг этой темы.

$ ls ./sections

Разделы направления

Основы VibeDesign/

Как устроен VibeDesign: бриф, процесс, роли, насмотренность, критерии качества и работа с ИИ как с дизайн-партнером.
0 статьи

Новости/

Новости и важные обновления из мира ИИ и разработки: релизы инструментов, изменения платформ и их практическое влияние на работу.
0 статьи

UX и интерфейсы/

Сценарии пользователя, структура экранов, навигация, формы, типографика, читаемость и интерфейсные решения без лишнего шума.
0 статьи

Исследования и UX-методы/

Интервью, CJM, Jobs To Be Done, быстрые UX-проверки, гипотезы, пользовательские боли и способы принимать дизайн-решения на фактах.
0 статьи

Figma и макеты/

Wireframe, auto-layout, компоненты, сетки, подготовка экранов, аккуратная структура файла и практическая работа с Figma через ИИ.
0 статьи

AI-инструменты дизайна/

Claude Design, Open Design, Google Stitch, Pencil.dev и другие инструменты: где они ускоряют работу, а где требуют контроля дизайнера.
0 статьи

Дизайн-система и компоненты/

Токены, цвета, типографика, UI-kit, состояния компонентов, паттерны интерфейса и единый визуальный язык продукта.
10 статей

Брендинг и айдентика/

Позиционирование, визуальный стиль, логотипы, тон коммуникации, бренд-система и упаковка продукта для узнаваемости и доверия.
0 статьи

Motion и анимация/

Микроанимации, переходы, интерактивные состояния, motion-принципы и анимация, которая помогает интерфейсу, а не отвлекает.
0 статьи

Прототипы и handoff/

Кликабельные прототипы, сценарии, спецификации, handoff в разработку, контроль реализации и приемка интерфейса после сборки.
0 статьи

Редизайн и аудит/

UX-аудит, визуальная диагностика, обновление сайта или продукта, сохранение SEO и план релиза без поломки текущих сценариев.
0 статьи

Доступность/

Контраст, фокус, клавиатурная навигация, читаемость, aria-паттерны и интерфейсы, которыми удобно пользоваться разным людям.
0 статьи

Портфолио и кейсы/

Разборы работ, кейсы редизайна, оформление портфолио, структура результата и упаковка дизайн-проекта для клиента или работодателя.
0 статьи

Новости дизайна/

Релизы AI-дизайн инструментов, обновления Figma, Claude, Stitch и других сервисов, свежие подходы и практические разборы новинок.
0 статьи
Дизайн-система и компоненты
14.06.2026 9 мин

MCP-сервер вашей дизайн-системы: подключаем AI-агент к компонентам напрямую

«Создай карточку как в нашей системе» без MCP — агент смотрит на кодовую базу и угадывает. Находит чтото похожее на карточку, адаптирует. Результат близкий но не тот: другой borderradius, другая структура пропсов, другое имя которое теперь нужно искать и исправлять.
дизайн-системаMCPAI-дизайнинструменты
Дизайн-система и компоненты
14.06.2026 13 мин

LLM-readable документация: как писать про компоненты чтобы AI не изобретал велосипед

В мае 2026 в реальном job posting Senior Product Designer появилось требование которого год назад не существовало: «Создавать и поддерживать документацию системы читаемую дизайнерами, инженерами и LLM вроде Claude».
дизайн-системаAI-дизайнкомпонентыAGENTS.md
Дизайн-система и компоненты
14.06.2026 8 мин

Storybook: почему инструмент разработчиков стал незаменим для дизайнеров

Storybook создавался для разработчиков — среда для изолированной разработки компонентов без запуска всего приложения. Дизайнеры которые начали его использовать говорят одно: «не понимаю как работал без него».
дизайн-системакомпонентыhandoffинструменты
Дизайн-система и компоненты
14.06.2026 10 мин

AI рисует не в вашем стиле: как заставить его соблюдать дизайн-систему

Объяснил AI что кнопки называются Button/Primary, акцент E94560, шрифт Bricolage Grotesque. В этой сессии всё правильно. Закрыл чат. Открыл новый — снова Inter, снова синяя кнопка, снова shadcn по умолчанию.
дизайн-системаAI-дизайнDESIGN.mdчеклист
Дизайн-система и компоненты
14.06.2026 10 мин

Тёмная тема за один день — если ты правильно настроил переменные заранее

Есть два способа добавить тёмную тему. Первый: открываешь каждый компонент, меняешь цвета вручную, смотришь как половина рассыпается, переделываешь три дня, всё равно чтото пропускаешь. Второй: создаёшь Dark Mode в Figma Variables, задаёшь тёмные значения, переключаешь — всё обновляется за секунду. Один день вместо трёх.
дизайн-систематокеныFigmaворкфлоу
Дизайн-система и компоненты
14.06.2026 8 мин

Атомарный дизайн на практике: перестань лепить интерфейс с нуля каждый раз

В проекте без системы каждый новый экран начинается с нуля. Дизайнер рисует кнопку — не ту же что на прошлом экране, похожую. Чуть другой padding. Чуть другой шрифт. Через год в продукте 40 вариантов кнопки где по логике должно быть 4.
дизайн-системакомпонентыворкфлоу
Дизайн-система и компоненты
14.06.2026 9 мин

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

В команде три разработчика делают три разных раздела продукта. У каждого в голове «основной синий цвет бренда» — но у каждого своё понимание какой именно синий. Первый пишет 1A1A2E. Второй 1B1B30. Третий берёт пипеткой из Figma но промахивается на пиксель — получается 1A1C2E.
дизайн-систематокеныFigmaворкфлоу
Дизайн-система и компоненты
14.06.2026 8 мин

Без дизайн-системы ты переделываешь одно и то же — снова и снова

Возьми любой продукт которому больше года и открой три разных экрана. Найди кнопку «Сохранить» на каждом. Скорее всего увидишь три слегка разные кнопки: padding чуть отличается, borderradius немного другой, шрифт другого размера. Никто специально этого не делал. Просто первый разработчик не нашёл нужный компонент и написал свой. Второй детачнул библиотечный чтобы быстрее. Третий скопировал с другого экрана но случ...
дизайн-систематокеныкомпонентыворкфлоу
Дизайн-система и компоненты
10.06.2026 8 мин

Дизайн как код: как упаковать насмотренность в файл и раздать всей команде

Попросите любой LLM сделать лендинг без дополнительных инструкций. Получите: Inter, белый фон, фиолетовый градиент в герое, четыре карточки в сетке, едва заметный hover. Anthropic называет это «distributional convergence» — модели воспроизводят статистический центр дизайн-решений из обучающих данных. Центр — это усреднённое. Усреднённое — это никакое. Skill-файлы это лечат. Но важнее другое: они превращают дизайн-суждение — то, что живёт в голове опытного дизайнера — в переиспользуемый артефакт, который можно передать агенту, команде, следующему проекту.
SKILL-mdClaude-CodeCodexDesign System
Дизайн-система и компоненты
26.04.2026 6 мин

Taste-Skill: как дать ИИ «хороший вкус» и навсегда избавиться от скучного фронтенда

В эпоху, когда ИИ-агенты вроде Cursor, Claude Code, Codex, Windsurf и Copilot пишут код быстрее человека, возникает новая проблема — **«AI-slop»** (от англ. slop — мусор, отбросы). ИИ отлично справляется с логикой и функционалом, но часто генерирует визуально скучные, шаблонные интерфейсы: одинаковые карточки по центру, серые цвета, отсутствие анимаций, слабая типографика и плоская иерархия.
SkillДизайнFrontend