design-first-ui-prompting
design-first-ui-prompting — навык Meng To для превращения расплывчатой идеи интерфейса в короткую спецификацию, которую легче стабильно интерпретировать при генерации UI. Его центральная мысль — формулировать промпт как дизайн-систему, а не как пожелание «сделать красиво». До генерации нужно зафиксировать цель экрана, аудиторию и критерий успеха, затем описать формат, размер и безопасные поля. После этого задаётся wireframe словами: сетка, расположение колонок, сторона текста и изображения и иерархия H1, подзаголовка, основного текста и CTA. Спецификация продолжает эту иерархию явным type system. В ней можно задать характер шрифта, веса, межстрочный интервал и tracking для отдельных элементов. Блок Color + Material фиксирует фон, цвет текста, один акцент и характер текстуры; отдельное ограничение на один акцент помогает не получить случайную радугу. В Imagery / UI Style описываются визуальный язык, свет, кадрирование, материалы и мягкость, если используется фотография или 3D. В разделе COPY указывается текст, который нужно отрисовать буквально. Такой порядок связывает визуальную задачу с проверяемыми параметрами и уменьшает число скрытых решений на стороне генератора. Важная часть метода — ограничения и итерации. В Constraints можно вынести компактную карточку с FONT, STYLE и MODE, чтобы модель получила мини-гайд со значениями, а не набор противоречивых эпитетов. Первый результат должен закрепить layout, иерархию и copy. Варианты следует делать по одному изменению: менять угол или crop, цвет акцента, расположение карточек или тон фона, но не всё одновременно. Так проще понять, какая правка дала эффект, и сохранить удачную основу. Для проблемной типографики рекомендуется двухпроходный сценарий: сначала создать композицию без текста, оставив чистую область, а затем набрать текст в Figma. Это не обещает безошибочную генерацию букв и честно учитывает ограничение визуальной модели. Навык предлагает также локальный reference pack: вкусы и примеры лучше сохранять в gitignored refs, чем просить модель «помнить» стиль. Для быстрой проверки результата полезны вопросы о единственном сообщении экрана, иерархии H1/sub/CTA, стиле — минималистичном editorial, playful 3D или glass UI — и обязательных ограничениях по шрифту, цвету, spacing и grid. Negative Prompt должен запрещать логотипы, водяные знаки, лишний текст и нечитаемую типографику. Метод особенно уместен для hero, onboarding, dashboard, carousel и других экранов, где важны повторяемость и управляемая итерация; он не заменяет пользовательское исследование, дизайн-ревью или ручную типографическую проверку.
Для чего подходит
- Подготовка спецификации экрана до генерации UI
- Фиксация layout, type system, цвета и copy
- Итерации по одному design-параметру
Установка
Сначала прочитайте SKILL.md и scripts в исходном репозитории. Затем выполните команду в каталоге проекта:
npx skills add https://github.com/MengTo/Skills/tree/main/agent-skills/ui/design-first-ui-prompting