Разбирает скриншот интерфейса в детальный бриф для разработчика: JSONC-спецификация токенов и промпт на реализацию.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — UI-дизайнер, который передаёт макет разработчику. Скриншот: [прикрепи изображение] Тип экрана: [например: дашборд] Продукт: [например: приложение для аудита госзакупок] Название бренда: [название] Задача: максимально подробно проанализируй UI на скриншоте и опиши его для разработчика. Бриф должен покрывать светлую и тёмную тему и адаптивные брейкпоинты, совпадающие со значениями по умолчанию в Tailwind CSS (sm 640, md 768, lg 1024, xl 1280, 2xl 1536). Правила по цвету: извлеки примерную палитру, детально описывай только акценты и сложные элементы. Цель — две палитры в стиле Tailwind: primary и secondary. Дополнительно можно определить любое количество серых и акцентных цветов для сложного UI (градиенты, тени, SVG). Опиши также: сетку и раскладку, типографику, отступы, радиусы, тени, компоненты и их состояния, иконки, поведение на каждом брейкпоинте. Вывод — ровно два блока кода: 1. JSONC-спецификация дизайна с комментариями-пояснениями к токенам. 2. Markdown-промпт для разработчика: бриф того, что нужно реализовать, и правила использования токенов — без упоминания конкретных технологий.
```text Ты — UI-дизайнер, который передаёт макет разработчику. Скриншот: [прикрепи изображение] Тип экрана: [например: дашборд] Продукт: [например: приложение для аудита госзакупок] Название бренда: [название] Задача: максимально подробно проанализируй UI на скриншоте и опиши его для разработчика. Бриф должен покрывать светлую и тёмную тему и адаптивные брейкпоинты, совпадающие со значениями по умолчанию в Tailwind CSS (sm 640, md 768, lg 1024, xl 1280, 2xl 1536). Правила по цвету: извлеки примерную палитру, детально описывай только акценты и сложные элементы. Цель — две палитры в стиле Tailwind: primary и secondary. Дополнительно можно определить любое количество серых и акцентных цветов для сложного UI (градиенты, тени, SVG). Опиши также: сетку и раскладку, типографику, отступы, радиусы, тени, компоненты и их состояния, иконки, поведение на каждом брейкпоинте. Вывод — ровно два блока кода: 1. JSONC-спецификация дизайна с комментариями-пояснениями к токенам. 2. Markdown-промпт для разработчика: бриф того, что нужно реализовать, и правила использования токенов — без упоминания конкретных технологий. ```
{
"messages": [
{
"role": "user",
"content": "Ты — UI-дизайнер, который передаёт макет разработчику.\n\nСкриншот: [прикрепи изображение]\nТип экрана: [например: дашборд]\nПродукт: [например: приложение для аудита госзакупок]\nНазвание бренда: [название]\n\nЗадача: максимально подробно проанализируй UI на скриншоте и опиши его для разработчика. Бриф должен покрывать светлую и тёмную тему и адаптивные брейкпоинты, совпадающие со значениями по умолчанию в Tailwind CSS (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).\n\nПравила по цвету: извлеки примерную палитру, детально описывай только акценты и сложные элементы. Цель — две палитры в стиле Tailwind: primary и secondary. Дополнительно можно определить любое количество серых и акцентных цветов для сложного UI (градиенты, тени, SVG).\n\nОпиши также: сетку и раскладку, типографику, отступы, радиусы, тени, компоненты и их состояния, иконки, поведение на каждом брейкпоинте.\n\nВывод — ровно два блока кода:\n1. JSONC-спецификация дизайна с комментариями-пояснениями к токенам.\n2. Markdown-промпт для разработчика: бриф того, что нужно реализовать, и правила использования токенов — без упоминания конкретных технологий."
}
]
}