Как получить более сильный интерфейс

Как получить более сильный интерфейс

Прошлая неделька по контенту была сложной. Признаю, но зато я не поленилась, а вы, надеюсь, поняли целую тему. Попробуем как в школе повторить последовательно. Что делать, если дизайнера нет, а сделать красиво сайт, приложение, визуал хочется. Ну и, конечно, мы слишком умные, что повторять одно и тоже, добавлю про skills, автоматизировать - так по максимуму!

1️⃣ Шаг 1. Найдите визуальное направление и подготовьте DESIGN.md

Не начинайте с запроса «сделай красивый сайт». Сначала найдите два или три интерфейса, которые подходят вашему проекту по настроению и структуре. Для поиска референсов можно использовать готовые сайты. Дальше подготовьте DESIGN.md. Это файл, в котором описаны визуальные правила проекта: цвета, типографика, отступы, скругления, сетка, стиль кнопок, карточек, навигации и анимаций. Можно описать правила самостоятельно или взять готовую основу на сайтах, которые я собрала тут. На них есть дизайн системы, собранные на основе реальных продуктов. Можно искать по бренду, стилю, цвету и типографике. Выберите подходящий пример, сохраните на компьютер или в папку проекта и передайте файл своему AI агенту.

Референсы показывают, какое визуальное направление вам нравится, а DESIGN.md переводит его в конкретные правила, которые агент сможет использовать при создании интерфейса.

2️⃣ Шаг 2. Подключите Taste Skill

DESIGN.md объясняет агенту, как должен выглядеть конкретный проект. Но он не всегда объясняет, как правильно работать над самим интерфейсом.

Для этого можно использовать Taste Skill.

Это набор SKILL.md инструкций для AI кодинг агентов. Перед началом работы агент читает их и понимает, как строить сетку, выбирать типографику, сохранять визуальную иерархию, работать с отступами, состояниями элементов и motion дизайном.

Ссылка на сайт:

Внутри есть несколько режимов:

🖊 taste skill Основной вариант для лендингов, портфолио и редизайнов. Агент сначала анализирует задачу, аудиторию, стиль и ограничения, а потом переходит к интерфейсу.

🖊 gpt taste Более жесткий режим для GPT и Codex. Подходит для выразительных промо страниц, сложной композиции и motion дизайна.

🖊 redesign skill Для готового сайта, который выглядит сыро. Агент сначала проводит аудит, затем предлагает и вносит изменения.

🖊 soft skill Для мягкого премиального стиля, аккуратной типографики и плавных анимаций.

🖊 minimalist skill Для строгой сетки, чистой структуры и минимального количества визуальных элементов.

🖊 brutalist skill Для контрастного, характерного и экспериментального дизайна.

🖊 output skill Чтобы агент не оставлял заглушки, недописанные секции и незавершенные компоненты.

SKILL.md и DESIGN.md лучше использовать одновременно. SKILL.md объясняет агенту, как работать над дизайном. DESIGN.md объясняет, какие визуальные правила нужно соблюдать в вашем проекте.

3️⃣ Шаг 3. Выберите режим под задачу

🖊 Для спокойного экспертного сайта vожно использовать soft skill.

🖊 Для SaaS продукта подойдет minimalist skill или основной taste skill.

🖊 Для промо страницы можно использовать gpt taste.

🖊 Для творческого проекта подойдет контрастный стиль brutalist skill.

Шаг 4 4️⃣ смотрим 🔽

#этостоитпротестить