interface-designавтор Dammyjay93

Interface Design Skill.

Skill для Claude Code и Codex для UI-дизайна: дизайн интерфейсов с акцентом на качество исполнения для дашбордов, административных панелей, SaaS-инструментов и страниц настроек.

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

Dammyjay93/interface-design · .claude/skills/interface-design/SKILL.mdSKILL.md

--- name: interface-design description: Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work. --- ## Scope ## One focal point per view ## Type scale is a ratio, and weight beats size ## Density is a decision, expressed in px ## Spatial rhythm — breathe unevenly ## Proportions speak

Вводная часть и заголовки разделов прочитаны из исходного файла 14 сентября 2026 · 29 304 символа полностью

01 Что делает

Что делает skill interface-design в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Дисциплина, ориентированная прежде всего на мастерство, для создания продуктового UI — дашбордов, административных панелей, SaaS-приложений, инструментов, страниц настроек, интерфейсов данных — с решениями, которые принимала бы ведущая дизайн-команда. Она требует рабочего брифа до написания кода: кто этот человек, какое единственное действие он пришёл совершить, и каким должен быть интерфейс на ощупь — словами, которые действительно что-то значат.

Далее описан подход к исследованию домена (домен, цветовой мир, фирменный элемент, отклонённые дефолты по умолчанию), шкала типографики на основе коэффициента, где иерархию задают вес и цвет, единая закреплённая стратегия глубины, семантические токены вместо жёстко заданных значений, а также базовые принципы полировки и анимации — табличные цифры, концентричный радиус, длительности до 300 мс, отсутствие анимации на высокочастотных действиях. Явно не предназначено для лендингов, маркетинговых сайтов, кампаний или чисто брендовой работы.

Что он выдаёт

Предложение в формате Suggest + Ask с указанием домена, цветового мира, фирменного элемента, отклонений и направления.
Встроенные отрендеренные образцы — палитровые сэмплы, шкала типографики в реальной гарнитуре, стек карточек с уровнями возвышения, фирменный элемент как реальный компонент — при наличии инструмента рендеринга; сама реализация всё равно попадает в кодовую базу.
Сохранённый файл .interface-design/system.md с направлением, стратегией глубины, решениями по иерархии и повторяющимися паттернами компонентов, записанный только после согласия пользователя.

Смотрите пример запроса ↗

Как это работает

01
Составьте рабочий бриф
Перед написанием кода определите, кто пользователь, какое действие он должен выполнить и каким должен быть интерфейс на ощупь — кратко, если направление не требует подтверждения.
02
Исследуйте домен продукта
Подготовьте четыре результата перед предложением направления: минимум 5 концепций домена, 5+ цветов из физического мира продукта, один фирменный элемент и 3 очевидных дефолта, которые следует отклонить.
03
Предложите и подтвердите направление
Начните с блока Suggest + Ask с указанием домена, цветового мира, фирменного элемента, отклонений и направления, затем убедитесь, что направление верное, перед началом работы.
04
Рендерите образцы, где это возможно
Если в сессии есть встроенный инструмент визуального рендеринга, показывайте палитру, шкалу типографики, уровни возвышения и фирменный элемент как реальные компоненты вместо описания; иначе используйте код.
05
Стройте на основе существующего, затем проверяйте
Изучите приложение, токены, паттерны компонентов и system.md, внесите изменения в реализацию, запустите сборку, проверку типов или тесты, если они доступны, затем проверьте визуально на десктопной и мобильной ширине.
06
Предложите сохранить паттерны
После задачи предложите зафиксировать направление, стратегию глубины, решения по иерархии и повторяющиеся паттерны компонентов, чтобы последующие сессии оставались согласованными.

02 Определите своё применение

Когда использовать interface-design Skill

Используйте скилл interface-design в Claude Code или Codex, когда задача — UI-дизайн такого рода. Область применения и ограничения ниже взяты из файла самого скилла.

Хорошо подходит

Работа над продуктовым UI: дашборды, панели администратора, SaaS-приложения, инструменты, страницы настроек и интерфейсы данных.
Проверка, аудит или доработка существующего продуктового UI, а не только создание новых экранов.
Экраны с нуля, крупные редизайны и размытое направление, где визуальный проход по референсам может предшествовать коду.
Удержание существующего файла system.md в рамках заявленных значений при новой работе.

Знайте границы

Лендинги, маркетинговые сайты, кампании и чисто брендовая работа, которые файл направляет вместо этого к маркетинговому или frontend-дизайн skill.
Сгенерированные изображения покрывают только арт для пустых состояний и текстуры — никогда иконки, логотипы или диаграммы.
Нативные select и date-поля невозможно стилизовать, поэтому их нужно заменять headless-примитивом, а не писать вручную.
Встроенный рендеринг условен: в CI, headless-агентах или обычных терминалах виджета нет, поэтому skill переходит к коду, токенам и письменному предложению.

Что предоставить

Человек, действие и ощущениеБриф должен указывать, кто открывает интерфейс, чего он должен достичь и каким должно быть ощущение — в содержательных словах; если это невозможно, скилл задаёт один краткий вопрос или формулирует обоснованное предположение и продолжает работу.
Существующая кодовая базаИзучаются существующее приложение, дизайн-токены, паттерны компонентов и .interface-design/system.md, чтобы элементы управления и стили использовались повторно, а не изобретались заново.
Скриншот для paintoverЕсли доступен инструмент генерации изображений, существующий скриншот можно превратить в более сильную версию ещё до написания кода.

03 Внутри скилла

Правила, которые skill interface-design задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Выполнить чек-пойнт перед написанием кода
Перед тем как писать любой UI-код, даже небольшие добавления, сформулируйте Intent, Hierarchy, Palette, Depth, Surfaces, Typography и Spacing — и будьте готовы объяснить, почему выбрано именно так по каждому пункту.
Сначала нативное, затем примитив, затем самостоятельная реализация
Никогда не создавайте div с onClick там, где платформа уже предлагает button или link; такие управляемые состоянием элементы, как select, combobox, dialog, popover, tooltip, tabs и date picker, должны браться из проверенного headless-примитива.
Токены важнее захардкоженных литералов
Привязывайте стили к семантическим токенам — bg-card, border-border, text-muted-foreground — а не к bg-white, border-gray-200 или text-gray-500, которые ломают темизацию и тёмную тему.
Задавайте шаг типографики по коэффициенту, а не на глаз
Выберите один коэффициент и следуйте ему: около 1.2 для плотного или спокойного UI, 1.25 для большинства продуктового UI, 1.333 для экспрессивного, начиная с базового текста 14–16px и округляя до целых пикселей по сетке отступов.
Придерживайтесь ровно одной стратегии глубины
Выберите один вариант — только границы, лёгкие тени, слоёные тени или изменение цвета поверхности — и придерживайтесь его повсюду; смешивание стратегий указано в разделе «Избегать».
Держите UI-анимацию в пределах 300мс
Нажатие кнопки 100–160мс, тултипы и popover 125–200мс, дропдауны 150–250мс, с кастомным ease-out, а не со слабыми встроенными кривыми или ease-in.
Никакой анимации для повторяющихся действий
Всё, что выполняется 100+ раз в день — клавиатурные сочетания, командная палитра — не должно иметь анимации вовсе, потому что она делает их ощутимо медленнее; модальные окна, шторки и тосты по-прежнему получают стандартную анимацию.
Никогда не анимируйте от нулевого масштаба
Появление начинается с масштаба 0.95 и прозрачности 0, потому что ничто не появляется из ничего.

04 Применение

Установите interface-design в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте interface-design в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design

Общая форма для CLI skills для .claude/skills/interface-design/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Build the settings page for [product], a SaaS tool. [The person] opens it to [task], and it should feel [feel], not like a generic admin panel. Our tokens and components live in [existing design system], so reuse those. The focal element is [focal element], and it needs loading, empty and error states.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Тест подмены — замените гарнитуру на обычную, а макет на стандартный шаблон; там, где ничего не изменится по ощущению, вы действовали по умолчанию.
Тест прищуренных глаз — расфокусируйте зрение; иерархия должна всё равно читаться, и ничто не должно резко выделяться.
Тест на подпись — укажите пять конкретных элементов, где проявляется подпись; общее ощущение не считается.
Тест токенов — прочитайте вслух CSS-переменные и спросите себя, принадлежат ли они миру этого продукта или любому проекту.
Посмотрите на результат в инструменте встроенного рендера, в локальном браузере или на скриншотах для desktop и mobile ширин.
Устраните перекрытия, сломанные отступы, пустые состояния, нечитаемый текст, отсутствующие ассеты и типовую композицию перед тем, как что-либо показывать.

В OpenDesign импортируйте interface-design по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Dammyjay93
Repository: github.com/Dammyjay93/interface-design Ветка main
Файл skill: .claude/skills/interface-design/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 2f9be32
License: MIT Из LICENSE.
Звёзды репозитория: 5,692 Снимок GitHub сделан 2026-09-14 для всего репозитория Dammyjay93/interface-design. Не является рейтингом или счётчиком использования interface-design.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Область примененияИспользуйте для дашбордов, админ-панелей, SaaS-приложений, инструментов, страниц настроек; не для лендингов или маркетинговых работ.
Сначала намерениеОтветьте, кто этот человек, что он должен выполнить и каким это должно ощущаться.
Исследование продуктового доменаСначала создайте концепции домена, цветовой мир, отличительную черту и 3 отклонённых дефолта.
Рендерите, когда можетеУсловно рендерите образцы при предложении, создании компонентов или критике, оставляя рассуждения в тексте.
Visual H

Собственное описание skill

«Craft-first дизайн интерфейсов для дашбордов, админ-панелей, SaaS-приложений, инструментов, страниц настроек, интерфейсов данных и интерактивных продуктов. Используется при проектировании, создании, ревью, аудите или доработке продуктового UI, где важны визуальный крафт, иерархия макета, токены, состояния, визуальное направление или согласованность дизайн-системы. Не для маркетинговых страниц, лендингов, кампаний или чисто брендовой работы.»

Описание из front-matter SKILL.md. Полный файл содержит около 29,304 символов. Прочитайте полный файл на GitHub.

Interface Design

Запустите interface-design на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте interface-design по ссылке на его SKILL.md, вставьте промпт выше и прочтите план до результата.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design

Что делает skill interface-design в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать interface-design Skill

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill interface-design задаёт Claude Code и Codex

Выполнить чек-пойнт перед написанием кода

Сначала нативное, затем примитив, затем самостоятельная реализация

Токены важнее захардкоженных литералов

Задавайте шаг типографики по коэффициенту, а не на глаз

Придерживайтесь ровно одной стратегии глубины

Держите UI-анимацию в пределах 300мс

Никакой анимации для повторяющихся действий

Никогда не анимируйте от нулевого масштаба