gpt-tasteавтор Leonxlnx

GPT Taste Skill.

Skill для Claude Code и Codex для UI-дизайна: редакционные раскладки, разнообразие компоновок и GSAP-анимации в одном frontend-skill.

Web и UI
UI-код

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

Leonxlnx/taste-skill · skills/gpt-tasteskill/SKILL.mdSKILL.md

--- name: gpt-taste description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. --- ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) ## 2. AIDA STRUCTURE & SPACING ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE ## 4. THE GAPLESS BENTO GRID ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS ## 6. COMPONENT ARSENAL & CREATIVITY

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 7 857 символов в полной версии

01 Что делает

Что делает skill gpt-taste в Claude Code и Codex

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

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

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

Этот skill обеспечивает премиальный уровень фронтенд-дизайн-инжиниринга, который ломает стандартные предубеждения LLM в вёрстке.

Он использует рандомизацию на основе Python для предотвращения повторяющихся макетов, требует структуру страницы AIDA с массивными отступами между секциями, ограничивает заголовки hero до 2-3 строк с помощью ультраширких контейнеров, строит математически безупречные bento-сетки без пробелов с grid-flow-dense, реализует продвинутые GSAP ScrollTrigger для закрепления, стекирования и скраббинг-анимаций, встраивает inline микро-изображения прямо в типографику и запрещает мета-метки вроде 'SECTION 01' и узкие контейнеры, вызывающие переносы текста на 6 строк. Каждая страница требует блок проверки design_plan перед выводом кода UI.

Что он выдаёт

Код React/UI с GSAP ScrollTrigger-анимациями и математически безупречными сетками

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

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

01
Симуляция рандомизации Python на основе seed из промпта
Перед написанием любого кода UI смоделируйте Python-скрипт, используя количество символов промпта пользователя для детерминированного выбора одной архитектуры hero, одного стека типографики, трёх архитектур компонентов и двух парадигм GSAP.
02
Структурирование страницы по фреймворку AIDA
Постройте страницу, следуя принципам Attention (кинематографичный hero), Interest (bento-сетка высокой плотности), Desire (эффекты скролла GSAP) и Action (массивный CTA и футер).
03
Создание bento-сеток без пробелов с математической точностью
Используйте grid-flow-dense из Tailwind в каждой bento-сетке и математически проверяйте, что значения col-span и row-span идеально соединяются без пустых зазоров и недостающих углов.
04
Реализация продвинутых GSAP ScrollTrigger-анимаций
Пишите реальный GSAP с ScrollTrigger для закрепления при скролле с разделёнными макетами, эффектов масштабирования и затухания изображений, скраббинг-раскрытия текста с последовательным изменением прозрачности и динамического стекирования карточек.
05
Вывод обязательной проверки Design_plan
Перед написанием любого кода React или UI выведите блок design_plan, содержащий выполнение Python RNG, проверку AIDA, математическую проверку hero на гарантию 2-3 строк, доказательство плотности bento и подтверждение проверки на отсутствие меток.

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

Когда использовать навык gpt-taste

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

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

Отмеченные наградами фронтенд-страницы, требующие кинематографичных, насыщенных движением GSAP-эффектов скролла
Редакционные макеты высокой плотности с математически безупречными bento-сетками
Проекты, нуждающиеся в разнообразии макетов для разрушения повторяющихся паттернов вывода LLM
Интерфейсы, требующие продвинутого закрепления, стекирования и скраббинга через GSAP ScrollTrigger

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

Статичные интерфейсы без движения строго запрещены

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

ТребуетсяGSAP — указана в SKILL.md как обязательная.

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

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

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

Заголовки hero ограничены максимум 2-3 строками
Используйте ультраширокие контейнеры, такие как max-w-5xl или max-w-6xl, для H1 и уменьшите размер шрифта с помощью clamp(3rem, 5vw, 5.5rem), чтобы заголовок никогда не превышал 2-3 строки.
Мета-метки навсегда запрещены
Метки вроде 'SECTION 01', 'SECTION 04', 'QUESTION 05' и 'ABOUT US' запрещены навсегда. Полностью удаляйте их, так как они выглядят дёшево и непрофессионально.
Стек типографики исключает шрифт Inter
Выбирайте из Satoshi, Cabinet Grotesk, Outfit или Geist. Шрифт Inter явно запрещён и никогда не должен использоваться.
Никаких эмодзи в коде или выводе
Соблюдайте строго профессиональное оформление: никогда не используйте эмодзи в коде, комментариях или любом выводе.
Как предотвратить горизонтальную прокрутку с помощью обёртки overflow
Оберните всю страницу в элемент main с классами overflow-x-hidden w-full max-w-full, чтобы полностью исключить появление горизонтальных полос прокрутки из-за анимаций, выходящих за пределы экрана.
Требуется идеальный контраст текста на кнопках
Кнопки должны быть идеально читаемы: тёмный фон — белый текст, светлый фон — тёмный текст. Невидимый текст — это провал.

04 Применение

Установить gpt-taste в Claude Code или Codex

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

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

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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste

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

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

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

Starter prompt

Build a landing page for [product name] showcasing [three key features]. Use a cinematic hero with inline typography images, a gapless bento grid for the feature cards, GSAP scroll pinning to reveal testimonials as the user scrolls, and horizontal accordion components for the FAQ section. Include a massive CTA section at the bottom.

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

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

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

Проверьте, что заголовок героя занимает 2–3 строки, используя сверхширокие контейнеры, такие как max-w-5xl или max-w-6xl
Убедитесь, что bento-сетка использует grid-flow-dense и математически стыкуется без пустых промежутков
Проверьте, что все мета-метки, такие как SECTION 01 или QUESTION 05, удалены
Убедитесь, что контраст текста кнопок идеален: белый текст на тёмном фоне и тёмный текст на светлом фоне
Подтвердите, что структура страницы следует фреймворку AIDA: навигация, героический блок внимания, bento-блок интереса, GSAP-блок желания и футер действия
Проверьте, что в героическом блоке нет иконок штампов или спам-тегов

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

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

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

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

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

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Ветка main
Файл skill: skills/gpt-tasteskill/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит ccbc156
License: MIT Из LICENSE.
Звёзды репозитория: 86 946 Снимок GitHub сделан 14.09.2026 для всего репозитория Leonxlnx/taste-skill, который содержит 11 скиллов в этом каталоге. Не является рейтингом или счётчиком использования для gpt-taste.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

ОСНОВНАЯ ДИРЕКТИВА: ДИЗАЙН-ИНЖЕНЕРИЯ УРОВНЯ AWWWARDSПозиционирует skill как элитную дизайн-инженерию, ломающую статистические смещения LLM при генерации макетов
ИСТИННАЯ РАНДОМИЗАЦИЯ НА PYTHON (РАЗРЫВ ЦИКЛА)Требует имитированного скрипта на Python, который использует количество символов в промпте для детерминированного выбора макетов и предотвращения повторов
СТРУКТУРА AIDA И ОТСТУПЫТребует фреймворк Attention, Interest, Desire, Action с массивными вертикальными отступами py-32 md:py-48 между секциями
АРХИТЕКТУРА ГЕРОЯ И ЖЕЛЕЗНОЕ ПРАВИЛО 2 СТРОКТребует сверхширокие контейнеры и максимум 2–3 строки для заголовков, запрещает узкие контейнеры, приводящие к переносу на 6 строк
БЕСШОВНАЯ BENTO-СЕТКАТребует grid-flow-dense и математическую проверку того, что значения col-span и row-span не оставляют пустых пустот
ПРОДВИНУТОЕ ДВИЖЕНИЕ GSAP И ФИЗИКА HOVERОпределяет закрепление при скролле, масштабирование-затухание изображений, текстовые раскрытия с прокруткой, стекирование карточек и эффекты трансформации при наведении
АРСЕНАЛ КОМПОНЕНТОВ И КРЕАТИВНОСТЬПеречисляет встроенные типографические изображения, горизонтальные аккордеоны, бесконечные марквизы и карусели отзывов для случайного выбора
КОНТЕНТ, АССЕТЫ И СТРОГИЕ ЗАПРЕТЫНавсегда запрещает мета-метки, указывает использование изображений picsum с CSS-фильтрами для сидирования и требует обёртку overflow-x-hidden
ОБЯЗАТЕЛЬНЫЙ ПРЕДПОЛЁТНЫЙ <design_plan>Требует блок проверки перед любым кодом UI с Python RNG, проверкой AIDA, расчётом героя, доказательством плотности bento

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

«Элитный UX/UI инженер и эксперт по продвинутой GSAP-анимации. Обеспечивает Python-управляемую истинную рандомизацию для вариативности раскладки, строгую структуру страницы AIDA, широкую редакционную типографику (запрещает 6-строчный перенос), бенто-гриды без пробелов, строгие GSAP ScrollTriggers (закрепление, наложение, прокрутка), встроенные микроизображения и массивные интервалы между секциями.»

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

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

Вопросы о skill gpt-taste

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

Почему этот skill использует Python-рандомизацию перед генерацией кода UI?

LLM по своей природе ленивы и всегда выбирают первый вариант макета из-за статистических смещений. Skill имитирует Python-скрипт, используя количество символов вашего запроса как детерминированный seed, чтобы принудительно выбирать разные архитектуры героя, стеки типографики, компоненты и GSAP-анимации, предотвращая повторяющийся результат.

GPT Taste

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

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

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

Терминал

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste