Перейти к руководству
prototypeавтор Emil Kowalski

Prototype Skill.

Навык для Claude Code и Codex в области UI-дизайна: создаёт несколько действительно разных вариантов элемента интерфейса с интерактивным визуальным переключателем.

  • Web и UI
  • UI-код
emilkowalski/skills · skills/prototype/SKILL.mdSKILL.md
--- name: prototype description: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own. --- ## Operating Posture ## Hard Rules ## Workflow ## Invocation Variants ## Tone
Метаданные и заголовки разделов прочитаны из исходного файла 14 сентября 2026 г. · 7 432 символа полностью

01 Что делает

Что делает скилл prototype в Claude Code и Codex

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

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

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

Скилл дивергентного исследования одного элемента интерфейса за раз — тоста, карточки тарифа, кнопки удаления с зажатием. Он берёт описанный элемент, строит несколько по-настоящему разных версий, расходящихся по заданной оси (макет, плотность, характер, движение, модель взаимодействия), и помещает их в визуальный пикер, чтобы пользователь мог живьём переключаться между ними и выбрать победителя.

Он запускается только по явному вызову, по умолчанию создаёт три варианта, не допускает исследовательский код в продакшн и удаляет прототипную поверхность после интеграции выбранного варианта.

Что он выдаёт

  • Живой визуальный пикер с вариантами, позволяющий переключаться между ними и выбрать один из них.
  • Сравнительная таблица с указанием оси каждого варианта, случая, когда он подходит лучше всего, и его стоимости.
  • Продакшн-код для выбранного варианта, интегрированный в кодовую базу, с удалённой прототипной поверхностью.
  • Скриншоты каждого варианта, если доступны инструменты браузера.
Смотрите пример запроса ↗

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

  1. 01
    Ограничение до одного элемента

    Если бриф охватывает несколько компонентов, скилл выбирает один элемент с наибольшей отдачей, объясняет, какой и почему, и предлагает остальные как последующие запуски.

  2. 02
    Разведка местности

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

  3. 03
    Сначала назвать направления

    По умолчанию создаётся три варианта, до пяти — по запросу или если пространство действительно широкое; каждому даётся имя и ось до написания кода.

  4. 04
    Собрать оснастку пикера

    В проекте изолированный маршрут содержит по одному файлу на вариант плюс небольшой файл оснастки; сам пикер копируется из PICKER.md, а не проектируется заново.

  5. 05
    Проверить перед показом

    Оснастка запускается, и каждый вариант проверяется на корректность рендера и взаимодействия, со скриншотами, если есть инструменты браузера.

  6. 06
    Продвинуть победителя

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

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

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

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

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

  • У вас есть один описанный элемент интерфейса для исследования — тост, карточка тарифа, кнопка удаления с зажатием.
  • Вы хотите увидеть несколько обоснованных направлений рядом и предпочитаете выбирать, живьём переключаясь между ними, а не читая спецификацию.
  • Работа ведётся в запущенном проекте с dev-сервером, где изолированный маршрут может разместить оснастку.
  • Вы исследуете вообще без проекта и вам просто нужно что-то, что можно открыть прямо в браузере.

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

  • Просмотр уже существующего интерфейса — это задача для review-animations.
  • Планирование правок для существующей анимации или выбор зависимости — обе задачи относятся к другим skill.
  • Использование расхождения как повода снизить качество исполнения: неряшливый вариант ничего не говорит о направлении, которое он представляет.

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

  • Описание элемента UIЧто это за элемент, где он будет использоваться и что должен делать — бриф переформулируется в одном предложении.
  • Доступ к проекту для разведкиЧтобы токены, характер и окружающий контекст задавали границы того, насколько далеко может зайти самый смелый вариант.
  • Количество вариантов, опциональноФорма вызова x5 запрашивает больше вариантов, но не более пяти.
  • Ваш выбор в концеSkill останавливается после показа набора; продвижение ждёт выбора или команды keep/riff.

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

Правила, которые skill прототипирования даёт Claude Code и Codex

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

  1. Никогда не трогать продакшн-код во время исследования

    Вся работа остаётся в изолированной прототипной среде; интеграция происходит только на Фазе 6 и только для варианта, выбранного пользователем.

  2. Каждый вариант занимает именованную ось

    Варианты должны расходиться по компоновке, плотности, характеру, анимации или модели взаимодействия, и каждую ось нужно сформулировать фразой до начала работы.

  3. Настоящий контент в каждом варианте

    Настоящие взаимодействия, настоящая анимация, реальные, похожие на продукт тексты с правдоподобными именами и числами; никакого lorem ipsum, никаких мёртвых кнопок, никаких «представьте эту часть».

  4. Пикер — это фиксированный интерфейс

    Его разметка, стили, работа с клавиатурой и поведение берутся буквально из PICKER.md и никогда не подстраиваются под проект — его вид не является дизайнерским решением.

  5. Планка качества применяется к каждому варианту

    Расхождение не снижает планку: ease-out на появлениях и никогда ease-in, анимация UI менее 300 мс, корректный transform-origin, только transform/opacity, обработка reduced-motion.

  6. Переключение вариантов происходит мгновенно

    Переключение — это действие, выполняемое 100+ раз за сессию, поэтому по правилу частоты смена варианта не сопровождается анимацией.

  7. Названия описывают направления

    Варианты называются по направлению — Quiet, Editorial, Playful, Dense — никогда Option A/B/C; два направления, различающиеся только акцентным цветом или текстом, — это одно направление.

  8. Удалить среду после выбора

    Когда победитель выбран, прототипная среда удаляется, если пользователь не попросит оставить её.

04 Применение

Установить prototype в Claude Code или Codex

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

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

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

Terminal
npx skills add https://github.com/emilkowalski/skills --skill prototype

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

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

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

Starter prompt
Build me a few versions of the toast that appears after someone saves a filter. It shows bottom-left over the dashboard, has an undo action, and auto-dismisses. We're on React with Tailwind and the tokens live in theme.css. Give me 3 variants and put them behind the picker.

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

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

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

  • У каждого варианта есть имя и заявленная ось, и никакие два варианта не занимают одну и ту же позицию на оси.
  • Каждый вариант доступен из пикера и работает корректно, без ошибок в консоли.
  • В итоговой таблице не выбран заранее ни один любимый вариант; если вас спросят, какой вы бы выбрали, ответ должен исходить из характера продукта и частоты использования.
  • Если два варианта в процессе сборки сошлись в одно, убирайте один и говорите об этом, а не раздувайте набор искусственно.
  • После команды keep проверьте, должен ли пикер сохраниться: обычная форма keep удаляет поверхность прототипа, форма «оставить пикер» сохраняет её.

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

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

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

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

Repository
github.com/emilkowalski/skills Ветка main
Файл skill
skills/prototype/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит d23d7f8
License
MIT Из LICENSE.
Звёзды репозитория
37 516 Снимок GitHub сделан 2026-09-14 для всего репозитория emilkowalski/skills, который содержит 9 навыков в этом каталоге. Не является рейтингом или счётчиком использования для prototype.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Рабочая позицияПозиция старшего дизайн-инженера; расхождение вариантов — вся ценность, но планка качества исполнения остаётся
  2. Жёсткие правилаПять пронумерованных ограничений на продакшн-код, оси, работающие варианты, пикер и уборку
  3. Рабочий процессФазы 1–6: границы задачи, разведка, направления, каркас, проверка, продвижение
  4. Варианты вызоваТаблица вызовов description, x5, riff и keep и их поведения
  5. ТонЧестно представляйте каждый вариант, называйте его цену, никогда не выбирайте фаворита заранее
Собственное описание skill
«Собирает несколько по-настоящему разных версий UI-элемента, который вы описали, отрендеренных за визуальным селектором, чтобы вы могли пролистать их в реальном времени и выбрать тот, что подходит. Запускается только при явном вызове; сам по себе не срабатывает».

Описание из заголовка SKILL.md. Полный файл занимает примерно 7432 символа. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill prototype

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Он срабатывает сам по себе, когда я редактирую UI?

Нет. Он запускается только при явном вызове и никогда не срабатывает сам, а вызов моделью для него отключён. Вы вызываете его с описанием, необязательным счётчиком x5 или командой riff или keep.

Prototype

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

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

Терминал
npx skills add https://github.com/emilkowalski/skills --skill prototype

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows