Профиль навыка

Разработка дизайн-систем

Design tokens, components library, Storybook, documentation, theming, versioning

Frontend Development CSS и стилизация

Ролей

где встречается этот навык

Грейдов

сформированная дорожка роста

Обязательных требований

ещё 0 — необязательные

Домен

Frontend Development

Группа

CSS и стилизация

Последнее обновление

17.03.2026

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

Выберите текущий грейд и сравните ожидания. Карточки ниже покажут, что нужно закрыть для следующего уровня.

Чего ждут на каждом уровне

Таблица показывает, как меняется глубина владения навыком от Junior до Principal.

Роль	Обязательность	Описание
Frontend Developer (Angular)	Обязателен	Использует готовые компоненты Angular Material или ng-zorro-antd в проекте. Понимает принципы дизайн-системы: консистентность, переиспользование компонентов, следование гайдлайнам по цветам и типографике.
Frontend Developer (React)	Обязателен	Использует готовые компоненты дизайн-системы на Radix UI в React-приложении: кнопки, формы, модалки, навигацию. Понимает принципы композиции компонентов, применяет правильные варианты и размеры согласно дизайн-гайдлайнам.
Frontend Developer (Svelte)	Обязателен	Использует готовые компоненты из Skeleton UI или других Svelte UI-библиотек, следуя документированным паттернам. Применяет design tokens (CSS variables) для цветов и типографики, создаёт простые переиспользуемые Svelte-компоненты согласно гайдлайнам.
Frontend Developer (Vue)	Обязателен	Использует готовые компоненты Vue дизайн-систем — Vuetify, PrimeVue, Headless UI. Следует документации при кастомизации, понимает слоты и props для адаптации компонентов под требования проекта.
Fullstack Developer	Обязателен	Использует компоненты дизайн-системы для сборки UI fullstack-приложения: кнопки, формы, карточки по документации. Соблюдает принципы композиции и переиспользования, корректно передаёт пропсы и применяет варианты компонентов.

Роль	Обязательность	Описание
Frontend Developer (Angular)	Обязателен	Создаёт переиспользуемые Angular-компоненты для дизайн-системы: кастомные form-контролы через ControlValueAccessor, composable-компоненты с content projection (ng-content), документация через Storybook.
Frontend Developer (React)	Обязателен	Создаёт переиспользуемые React-компоненты для дизайн-системы на базе Radix UI primitives: compound components, полиморфные компоненты через asChild. Документирует в Storybook с интерактивными примерами, типизирует props через TypeScript.
Frontend Developer (Svelte)	Обязателен	Разрабатывает компоненты дизайн-системы на Svelte 5 с типизированными $props(), слотами и snippet-ами для гибкой композиции. Настраивает Storybook для документации Svelte-компонентов, создаёт варианты через CSS variables и Tailwind-классы.
Frontend Developer (Vue)	Обязателен	Создаёт библиотеку Vue-компонентов с единым API — slots, expose, v-model кастомизация. Документирует компоненты в Storybook с Histoire, пишет component tests через Vitest и Vue Test Utils.
Fullstack Developer	Обязателен	Самостоятельно реализует сложные UI-компоненты с Разработка дизайн-систем. Оптимизирует производительность рендеринга. Пишет тесты. Применяет для state management.

Роль	Обязательность	Описание
Frontend Developer (Angular)	Обязателен	Проектирует архитектуру дизайн-системы на Angular: standalone-библиотека компонентов, theming через CSS Custom Properties, Angular CDK для поведенческих примитивов, автогенерация документации.
Frontend Developer (React)	Обязателен	Проектирует архитектуру дизайн-системы на React: headless-компоненты с Radix UI, стилизация через Tailwind CSS + CVA, токенизация через CSS custom properties. Создаёт NPM-пакет с tree-shaking, автотестами и визуальным регрессионным тестированием.
Frontend Developer (Svelte)	Обязателен	Проектирует архитектуру дизайн-системы на Svelte: headless-компоненты, token-система, themeable-архитектура с CSS custom properties. Создаёт npm-пакет библиотеки с автогенерацией документации, обеспечивает WCAG 2.1 AA и поддержку SSR в SvelteKit.
Frontend Developer (Vue)	Обязателен	Проектирует дизайн-систему на Vue 3 — headless компоненты с Tailwind-стилизацией, токены, иконки, типографика. Организует монорепо для дизайн-системы с Turborepo, автоматизирует публикацию через changesets.
Fullstack Developer	Обязателен	Разрабатывает компоненты дизайн-системы для fullstack-проекта: типизированные интерфейсы, accessibility, поддержка тем. Создаёт Storybook-документацию и интеграционные тесты. Обеспечивает консистентность UI между серверно-рендеренными и клиентскими частями приложения.

Роль	Обязательность	Описание
Frontend Developer (Angular)	Обязателен	Управляет развитием дизайн-системы Angular-команды: версионирование через Nx-библиотеки, процесс RFC для новых компонентов, интеграция с Figma через design tokens, метрики adoption.
Frontend Developer (React)	Обязателен	Руководит разработкой дизайн-системы для React-проектов команды: определяет API компонентов, процесс contribution, версионирование и breaking changes. Координирует с дизайнерами для обеспечения Figma-to-code consistency через design tokens.
Frontend Developer (Svelte)	Обязателен	Управляет развитием дизайн-системы команды: roadmap компонентов, version policy, процесс contributions. Координирует работу дизайнеров и разработчиков, обеспечивает синхронизацию Figma-токенов с Svelte-компонентами и Tailwind-конфигурацией.
Frontend Developer (Vue)	Обязателен	Определяет архитектуру дизайн-системы организации на Vue — governance, versioning, adoption strategy. Выстраивает процесс синхронизации между дизайнерами (Figma) и Vue-компонентами через tokens и code generation.
Fullstack Developer	Обязателен	Проектирует архитектуру дизайн-системы fullstack-платформы: модульная структура пакетов, версионирование, changelog-процесс. Координирует работу фронтенд-разработчиков и дизайнеров, определяет API компонентов и стратегию эволюции системы.

Роль	Обязательность	Описание
Frontend Developer (Angular)	Обязателен	Определяет стратегию дизайн-системы на уровне организации: мультиплатформенная система (Angular + mobile), micro-frontend совместимость, Web Components для кросс-фреймворковой переиспользуемости.
Frontend Developer (React)	Обязателен	Определяет стратегию дизайн-системы для экосистемы React-приложений организации. Проектирует multi-brand архитектуру с общим ядром, white-label темизацию, governance model для распределённых команд и стратегию adoption по всей компании.
Frontend Developer (Svelte)	Обязателен	Определяет стратегию дизайн-систем на уровне организации, обеспечивает масштабирование между Svelte-продуктами. Исследует передовые подходы: style-dictionary интеграция, cross-framework tokens, автоматическая генерация компонентов из Figma для Svelte-экосистемы.
Frontend Developer (Vue)	Обязателен	Формирует стратегию дизайн-систем для экосистемы Vue-приложений компании — multi-brand поддержка, cross-framework совместимость через Web Components, federated дизайн-система для микрофронтендов.
Fullstack Developer	Обязателен	Определяет стратегию дизайн-системы организации: мультиплатформенность, автоматическая генерация документации, метрики адаптации. Проектирует инфраструктуру для публикации и версионирования пакетов. Обучает лидов созданию и масштабированию дизайн-систем.

Junior 5 требований

Frontend Developer (Angular)
Обязателен

Использует готовые компоненты Angular Material или ng-zorro-antd в проекте. Понимает принципы дизайн-системы: консистентность, переиспользование компонентов, следование гайдлайнам по цветам и типографике.
Frontend Developer (React)
Обязателен

Использует готовые компоненты дизайн-системы на Radix UI в React-приложении: кнопки, формы, модалки, навигацию. Понимает принципы композиции компонентов, применяет правильные варианты и размеры согласно дизайн-гайдлайнам.
Frontend Developer (Svelte)
Обязателен

Использует готовые компоненты из Skeleton UI или других Svelte UI-библиотек, следуя документированным паттернам. Применяет design tokens (CSS variables) для цветов и типографики, создаёт простые переиспользуемые Svelte-компоненты согласно гайдлайнам.

Middle 5 требований

Frontend Developer (Angular)
Обязателен

Создаёт переиспользуемые Angular-компоненты для дизайн-системы: кастомные form-контролы через ControlValueAccessor, composable-компоненты с content projection (ng-content), документация через Storybook.
Frontend Developer (React)
Обязателен

Создаёт переиспользуемые React-компоненты для дизайн-системы на базе Radix UI primitives: compound components, полиморфные компоненты через asChild. Документирует в Storybook с интерактивными примерами, типизирует props через TypeScript.
Frontend Developer (Svelte)
Обязателен

Разрабатывает компоненты дизайн-системы на Svelte 5 с типизированными $props(), слотами и snippet-ами для гибкой композиции. Настраивает Storybook для документации Svelte-компонентов, создаёт варианты через CSS variables и Tailwind-классы.

Senior 5 требований

Frontend Developer (Angular)
Обязателен

Проектирует архитектуру дизайн-системы на Angular: standalone-библиотека компонентов, theming через CSS Custom Properties, Angular CDK для поведенческих примитивов, автогенерация документации.
Frontend Developer (React)
Обязателен

Проектирует архитектуру дизайн-системы на React: headless-компоненты с Radix UI, стилизация через Tailwind CSS + CVA, токенизация через CSS custom properties. Создаёт NPM-пакет с tree-shaking, автотестами и визуальным регрессионным тестированием.
Frontend Developer (Svelte)
Обязателен

Проектирует архитектуру дизайн-системы на Svelte: headless-компоненты, token-система, themeable-архитектура с CSS custom properties. Создаёт npm-пакет библиотеки с автогенерацией документации, обеспечивает WCAG 2.1 AA и поддержку SSR в SvelteKit.

Lead / Staff 5 требований

Frontend Developer (Angular)
Обязателен

Управляет развитием дизайн-системы Angular-команды: версионирование через Nx-библиотеки, процесс RFC для новых компонентов, интеграция с Figma через design tokens, метрики adoption.
Frontend Developer (React)
Обязателен

Руководит разработкой дизайн-системы для React-проектов команды: определяет API компонентов, процесс contribution, версионирование и breaking changes. Координирует с дизайнерами для обеспечения Figma-to-code consistency через design tokens.
Frontend Developer (Svelte)
Обязателен

Управляет развитием дизайн-системы команды: roadmap компонентов, version policy, процесс contributions. Координирует работу дизайнеров и разработчиков, обеспечивает синхронизацию Figma-токенов с Svelte-компонентами и Tailwind-конфигурацией.

Principal 5 требований

Frontend Developer (Angular)
Обязателен

Определяет стратегию дизайн-системы на уровне организации: мультиплатформенная система (Angular + mobile), micro-frontend совместимость, Web Components для кросс-фреймворковой переиспользуемости.
Frontend Developer (React)
Обязателен

Определяет стратегию дизайн-системы для экосистемы React-приложений организации. Проектирует multi-brand архитектуру с общим ядром, white-label темизацию, governance model для распределённых команд и стратегию adoption по всей компании.
Frontend Developer (Svelte)
Обязателен

Определяет стратегию дизайн-систем на уровне организации, обеспечивает масштабирование между Svelte-продуктами. Исследует передовые подходы: style-dictionary интеграция, cross-framework tokens, автоматическая генерация компонентов из Figma для Svelte-экосистемы.

Сообщество

👁 Следить ✏️ Предложить изменение

Загрузка комментариев...