design-uiПроверки: пройдено 4

frontend-design-system

Шаблон для создания производственной UI‑системы с токенами дизайна, правилами макетов, анимацией и проверкой доступности.

Суть

Что это за skill и зачем он нужен

Skill предоставляет полностью описанную систему дизайна фронтенда: набор токенов (цвета, типографика, отступы, радиусы, тени, брейкпоинты), рекомендации по макетам и UX‑целям, примеры компонентов (Hero, Button, Card и др.), гайдлайны по анимации и подробный чек‑лист доступности. Всё это оформлено в виде готовых файлов (design‑tokens.ts, примеры JSX/TSX) и инструкций, позволяющих быстро генерировать UI‑концепты из запросов и передавать их в разработку.

Установка

Как установить

npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system

Сценарии

Когда использовать

Подходит

Необходимо создать единый визуальный язык для продукта или серии продуктов
Требуется обеспечить согласованность UI‑элементов при масштабировании проекта
Нужна готовая база токенов и рекомендаций для быстрой генерации макетов из промптов
Важно включить проверку доступности (WCAG 2.1 AA) на ранних этапах дизайна
Проект ориентирован на реактивные фреймворки (React, Vue, Svelte) и использует TypeScript

Не подходит

Для простых одностраничных прототипов без требований к согласованности
Если команда уже использует собственную, полностью кастомизированную систему токенов
Когда требуется только бекенд‑логика без UI‑компонентов
Если проект не поддерживает TypeScript или JSX/TSX‑синтаксис

Доверие

Проверки безопасности

Gen Agent Trust HubПройдено

Проверка не нашла критичных проблем.

RunlayerПройдено

Проверка не нашла критичных проблем.

SnykПройдено

Низкий риск · проблем не найдено.

SocketПройдено

Предупреждений нет.

Похожие