Новый экран в стиле существующего по скриншоту

20 сентября 2026

Прикладываете скриншот приложения — модель делает новую страницу, повторяя тему, сетку, шрифты и компоненты.

Описание

РазработкаБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

скриншот
фронтенд
дизайн-система

Название

Новый экран в стиле существующего по скриншоту

Категория

Разработка

Источник

OpenAI Cookbook — Frontend with GPT-5, пример со скриншотом дашборда · MIT

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

18 строк · 132 слова · 852 символа

Переменные

Значения сразу появятся в превью, коде и при копировании.

[НОВЫЙ ЭКРАН — например, страницу входа]

[HTML и CSS / React + Tailwind / Next.js + shadcn/ui]

[ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.

Стек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].

Сначала по скриншоту выпиши, что ты видишь:
- цвета фона, поверхностей, текста и акцентов (примерные hex);
- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;
- радиусы, тени, обводки, плотность и шаг отступов;
- стиль кнопок, полей ввода, карточек и иконок.

Затем сверстай новый экран:
- используй только найденные значения — не придумывай новую палитру и новые компоненты;
- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];
- состояния: hover, focus, disabled, загрузка, ошибка;
- мобильная и десктопная версии;
- код целиком, без заглушек.

В конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой.

```text
К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.

Стек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].

Сначала по скриншоту выпиши, что ты видишь:
- цвета фона, поверхностей, текста и акцентов (примерные hex);
- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;
- радиусы, тени, обводки, плотность и шаг отступов;
- стиль кнопок, полей ввода, карточек и иконок.

Затем сверстай новый экран:
- используй только найденные значения — не придумывай новую палитру и новые компоненты;
- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];
- состояния: hover, focus, disabled, загрузка, ошибка;
- мобильная и десктопная версии;
- код целиком, без заглушек.

В конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой.
```

{
  "messages": [
    {
      "role": "user",
      "content": "К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.\n\nСтек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].\n\nСначала по скриншоту выпиши, что ты видишь:\n- цвета фона, поверхностей, текста и акцентов (примерные hex);\n- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;\n- радиусы, тени, обводки, плотность и шаг отступов;\n- стиль кнопок, полей ввода, карточек и иконок.\n\nЗатем сверстай новый экран:\n- используй только найденные значения — не придумывай новую палитру и новые компоненты;\n- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];\n- состояния: hover, focus, disabled, загрузка, ошибка;\n- мобильная и десктопная версии;\n- код целиком, без заглушек.\n\nВ конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой."
    }
  ]
}

Действия

prompt.txt· заполнено 0 из 3

К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.
Стек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].
Сначала по скриншоту выпиши, что ты видишь:
- цвета фона, поверхностей, текста и акцентов (примерные hex);
- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;
- радиусы, тени, обводки, плотность и шаг отступов;
- стиль кнопок, полей ввода, карточек и иконок.
Затем сверстай новый экран:
- используй только найденные значения — не придумывай новую палитру и новые компоненты;
- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];
- состояния: hover, focus, disabled, загрузка, ошибка;
- мобильная и десктопная версии;
- код целиком, без заглушек.
В конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой.

Описание

РазработкаБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

скриншот
фронтенд
дизайн-система

Название

Новый экран в стиле существующего по скриншоту

Категория

Разработка

Источник

OpenAI Cookbook — Frontend with GPT-5, пример со скриншотом дашборда · MIT

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

18 строк · 132 слова · 852 символа

Переменные

Значения сразу появятся в превью, коде и при копировании.

[НОВЫЙ ЭКРАН — например, страницу входа]

[HTML и CSS / React + Tailwind / Next.js + shadcn/ui]

[ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.

Стек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].

Сначала по скриншоту выпиши, что ты видишь:
- цвета фона, поверхностей, текста и акцентов (примерные hex);
- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;
- радиусы, тени, обводки, плотность и шаг отступов;
- стиль кнопок, полей ввода, карточек и иконок.

Затем сверстай новый экран:
- используй только найденные значения — не придумывай новую палитру и новые компоненты;
- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];
- состояния: hover, focus, disabled, загрузка, ошибка;
- мобильная и десктопная версии;
- код целиком, без заглушек.

В конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой.

```text
К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.

Стек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].

Сначала по скриншоту выпиши, что ты видишь:
- цвета фона, поверхностей, текста и акцентов (примерные hex);
- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;
- радиусы, тени, обводки, плотность и шаг отступов;
- стиль кнопок, полей ввода, карточек и иконок.

Затем сверстай новый экран:
- используй только найденные значения — не придумывай новую палитру и новые компоненты;
- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];
- состояния: hover, focus, disabled, загрузка, ошибка;
- мобильная и десктопная версии;
- код целиком, без заглушек.

В конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой.
```

{
  "messages": [
    {
      "role": "user",
      "content": "К сообщению приложен скриншот моего приложения. Сделай для него [НОВЫЙ ЭКРАН — например, страницу входа], сохранив ту же тему и настроение.\n\nСтек: [HTML и CSS / React + Tailwind / Next.js + shadcn/ui].\n\nСначала по скриншоту выпиши, что ты видишь:\n- цвета фона, поверхностей, текста и акцентов (примерные hex);\n- шрифты или ближайшие аналоги, размеры и начертания заголовков и текста;\n- радиусы, тени, обводки, плотность и шаг отступов;\n- стиль кнопок, полей ввода, карточек и иконок.\n\nЗатем сверстай новый экран:\n- используй только найденные значения — не придумывай новую палитру и новые компоненты;\n- состав экрана: [ЧТО ДОЛЖНО БЫТЬ НА ЭКРАНЕ];\n- состояния: hover, focus, disabled, загрузка, ошибка;\n- мобильная и десктопная версии;\n- код целиком, без заглушек.\n\nВ конце — список значений, которые ты угадал неточно и стоит сверить с дизайн-системой."
    }
  ]
}