Скиллы для Codex, с которыми сайты выглядят дорого
Связка из пяти скиллов для Codex — Figma, Product Design, Taste-Skill, GSAP и Impeccable, — с которой фронтенд перестаёт выглядеть шаблонно.
Codex отлично пишет код, но с дизайном по умолчанию беда: типовые отступы, скучные цвета, ощущение дешёвого шаблона. Вот ещё одна связка из пяти скиллов, после которой сайты из Codex перестают быть на одно лицо.
Figma рядом с кодом. Плагин читает ваш макет, брендбук и компоненты и переносит их в адаптивную вёрстку почти пиксель в пиксель. Codex перестаёт выдумывать дизайн из головы и опирается на готовый визуальный источник.
Product Design до вёрстки. Сначала определяется структура продукта и направление, потом генерируются варианты интерфейса в разных стилях. Вы утверждаете картинку, и только потом пишется код. Это экономит кучу переделок вслепую.
Taste-Skill для вкуса. Отдельный скилл следит за шрифтами, палитрой, отступами, скруглениями и пропорциями компонентов. Умеет пройтись по готовой странице и переверстать её так, чтобы ушёл тот самый эффект «ИИ-пластика». Ссылка: github.com/leonxlnx/taste-skill
GSAP Skills для анимации. Закрывает движение на странице: Timeline, ScrollTrigger, Flip, SplitText, SVG-анимация. Интерфейс оживает без ручной возни с таймингами. Ссылка: github.com/greensock/gsap-skills
Impeccable для дисциплины. Открытый дизайн-скилл, который ставится прямо в Codex и другие агенты. Даёт справочник по типографике, цветам, отступам и пропорциям, а его детектор превращает расплывчатое «выглядит дёшево» в конкретный список нарушений. Удобно держать его как гейт перед публикацией. Ссылка: github.com/pbakaus/impeccable
По отдельности ни один из них не делает чудо. Но вместе с более сильными дизайн-решениями свежего ChatGPT они складываются в цельный фронтенд-контур: от макета до анимации. Я собираю на этом рабочие лендинги и вижу разницу — раньше приличный вид приходилось долго вылизывать руками.
По теме
Статья: Как два ИИ-агента и один человек собрали этот сайт за ночь
Блог: Не гонитесь за инструментами — гонитесь за пониманием
База знаний: Impeccable — открытый дизайн-скилл, который учит AI-инструменты понимать дизайн
Если вы собираете сайты или интерфейсы через Codex и хотите, чтобы результат выглядел дорого и продуманно, такую связку скиллов можно настроить под ваши задачи.
Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov
Если хотите разобрать свою задачу — напишите мне Если хотите разобрать свою задачу — напишите мне.
Можно прийти с идеей, черновым контекстом или уже живой задачей. Помогу быстро понять, где реальный следующий шаг, а где лишний шум.
Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.