Промпт от Anthropic, который отучает модель от безликих интерфейсов: шрифты, цвет, движение и фон с характером.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
<frontend_aesthetics> Ты склонен выдавать усреднённые, «типичные» решения. Во фронтенде из-за этого получается то, что пользователи называют «ИИ-шаблоном». Избегай этого: делай выразительные интерфейсы, которые удивляют и радуют. Задача: [ЧТО СДЕЛАТЬ — например, лендинг сервиса доставки цветов] Стек: [HTML и CSS / React + Tailwind / Next.js] Обрати внимание на четыре вещи. Типографика. Выбирай красивые, необычные шрифты. Не используй Arial, Inter, Roboto и системные шрифты по умолчанию — возьми шрифт, который поднимает уровень всего интерфейса. Цвет и тема. Выбери цельную эстетику и держись её. Все цвета — через CSS-переменные. Один доминирующий цвет с резкими акцентами работает лучше робкой палитры, где всего понемногу. Вдохновляйся темами редакторов кода и культурными стилями. Движение. Добавь анимации для эффектов и микровзаимодействий. В HTML — по возможности только CSS, в React — библиотека Motion. Сосредоточься на главных моментах: одна продуманная загрузка страницы с поэтапным появлением элементов (animation-delay) радует сильнее, чем россыпь мелких эффектов. Фон. Создавай атмосферу и глубину вместо сплошной заливки: слои CSS-градиентов, геометрические узоры или эффекты, подходящие к стилю. Чего избегать: - заезженных шрифтов (Inter, Roboto, Arial, системные); - клише в цвете, особенно фиолетовых градиентов на белом фоне; - предсказуемых раскладок и шаблонных компонентов; - дизайна «под копирку» без характера, привязанного к задаче. Интерпретируй задачу творчески и делай неожиданный выбор, который выглядит придуманным именно для этого контекста. Чередуй светлые и тёмные темы, разные шрифты и стили. Ты всё равно тянешься к одним и тем же вариантам (например, Space Grotesk) — не делай так, думай шире. </frontend_aesthetics>
```text <frontend_aesthetics> Ты склонен выдавать усреднённые, «типичные» решения. Во фронтенде из-за этого получается то, что пользователи называют «ИИ-шаблоном». Избегай этого: делай выразительные интерфейсы, которые удивляют и радуют. Задача: [ЧТО СДЕЛАТЬ — например, лендинг сервиса доставки цветов] Стек: [HTML и CSS / React + Tailwind / Next.js] Обрати внимание на четыре вещи. Типографика. Выбирай красивые, необычные шрифты. Не используй Arial, Inter, Roboto и системные шрифты по умолчанию — возьми шрифт, который поднимает уровень всего интерфейса. Цвет и тема. Выбери цельную эстетику и держись её. Все цвета — через CSS-переменные. Один доминирующий цвет с резкими акцентами работает лучше робкой палитры, где всего понемногу. Вдохновляйся темами редакторов кода и культурными стилями. Движение. Добавь анимации для эффектов и микровзаимодействий. В HTML — по возможности только CSS, в React — библиотека Motion. Сосредоточься на главных моментах: одна продуманная загрузка страницы с поэтапным появлением элементов (animation-delay) радует сильнее, чем россыпь мелких эффектов. Фон. Создавай атмосферу и глубину вместо сплошной заливки: слои CSS-градиентов, геометрические узоры или эффекты, подходящие к стилю. Чего избегать: - заезженных шрифтов (Inter, Roboto, Arial, системные); - клише в цвете, особенно фиолетовых градиентов на белом фоне; - предсказуемых раскладок и шаблонных компонентов; - дизайна «под копирку» без характера, привязанного к задаче. Интерпретируй задачу творчески и делай неожиданный выбор, который выглядит придуманным именно для этого контекста. Чередуй светлые и тёмные темы, разные шрифты и стили. Ты всё равно тянешься к одним и тем же вариантам (например, Space Grotesk) — не делай так, думай шире. </frontend_aesthetics> ```
{
"messages": [
{
"role": "user",
"content": "<frontend_aesthetics>\nТы склонен выдавать усреднённые, «типичные» решения. Во фронтенде из-за этого получается то, что пользователи называют «ИИ-шаблоном». Избегай этого: делай выразительные интерфейсы, которые удивляют и радуют.\n\nЗадача: [ЧТО СДЕЛАТЬ — например, лендинг сервиса доставки цветов]\nСтек: [HTML и CSS / React + Tailwind / Next.js]\n\nОбрати внимание на четыре вещи.\n\nТипографика. Выбирай красивые, необычные шрифты. Не используй Arial, Inter, Roboto и системные шрифты по умолчанию — возьми шрифт, который поднимает уровень всего интерфейса.\n\nЦвет и тема. Выбери цельную эстетику и держись её. Все цвета — через CSS-переменные. Один доминирующий цвет с резкими акцентами работает лучше робкой палитры, где всего понемногу. Вдохновляйся темами редакторов кода и культурными стилями.\n\nДвижение. Добавь анимации для эффектов и микровзаимодействий. В HTML — по возможности только CSS, в React — библиотека Motion. Сосредоточься на главных моментах: одна продуманная загрузка страницы с поэтапным появлением элементов (animation-delay) радует сильнее, чем россыпь мелких эффектов.\n\nФон. Создавай атмосферу и глубину вместо сплошной заливки: слои CSS-градиентов, геометрические узоры или эффекты, подходящие к стилю.\n\nЧего избегать:\n- заезженных шрифтов (Inter, Roboto, Arial, системные);\n- клише в цвете, особенно фиолетовых градиентов на белом фоне;\n- предсказуемых раскладок и шаблонных компонентов;\n- дизайна «под копирку» без характера, привязанного к задаче.\n\nИнтерпретируй задачу творчески и делай неожиданный выбор, который выглядит придуманным именно для этого контекста. Чередуй светлые и тёмные темы, разные шрифты и стили. Ты всё равно тянешься к одним и тем же вариантам (например, Space Grotesk) — не делай так, думай шире.\n</frontend_aesthetics>"
}
]
}