К материалам

Локальные данные загружаются.

← К ленте

Промпт

Референс в интерфейс

Разбери структуру изображения и реализуй проверяемый UI.

Запуск не проверенПроверка источника 02.10.2026 · редакция 15 клиентов

К промпту

Подробнее об инструменте

Преврати референс в рабочий экран.

Оригинальный prompt StackFeed связывает референс с экранами, действиями и браузерной проверкой. Нужен агент, который видит изображение и имеет доступ к коду; переносимость между моделями не испытана.

Изображение
Структура UI
Рабочий экран

Источники

Playwright: проверка результата UIplaywright.dev

Условия использования источника

Собственный обзор StackFeed со ссылкой на первоисточник. Код и медиа автора в приложение не перенесены; условия использования смотрите у автора.

Клиенты и условия

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

Codex · Запуск не проверенClaude Code · Запуск не проверенGemini · Запуск не проверенChatGPT · Запуск не проверенDeepSeek · Запуск не проверен

Версии и подробности

CodexЗапуск не проверен

Нужны работа с изображением, доступ к коду и браузерная проверка. Выполнение этим клиентом не проверено.

По условиям клиента · Версия клиента: не указана · Дата проверки не указана

Claude CodeЗапуск не проверен

Нужны работа с изображением, доступ к коду и браузерная проверка. Выполнение этим клиентом не проверено.

По условиям клиента · Версия клиента: не указана · Дата проверки не указана

GeminiЗапуск не проверен

Нужны работа с изображением, доступ к коду и браузерная проверка. Выполнение этим клиентом не проверено.

По условиям клиента · Версия клиента: не указана · Дата проверки не указана

ChatGPTЗапуск не проверен

Нужны работа с изображением, доступ к коду и браузерная проверка. Выполнение этим клиентом не проверено.

По условиям клиента · Версия клиента: не указана · Дата проверки не указана

DeepSeekЗапуск не проверен

Нужны работа с изображением, доступ к коду и браузерная проверка. Выполнение этим клиентом не проверено.

По условиям клиента · Версия клиента: не указана · Дата проверки не указана

Перед началом

Клиент с доступом к изображению и коду; для текстовой модели опишите референс вручную.

Риски и ограничения

Модель может неверно распознать детали. Сравните итоговый экран с оригиналом.

Готовый промпт

Подготовка

Приложите свой референс, скопируйте prompt и передайте агенту вместе с доступным проектом.

Текст промпта

Изучи приложенный референс до изменения кода.
1. Перечисли видимые экраны, блоки, состояния и действия пользователя. Не приписывай изображению скрытые функции.
2. Сверь их с текущим проектом. Реализуй навигацию, поиск, фильтры и действия карточек, которые видны на референсе.
3. Сохрани пропорции, цвет, плотность и мобильное поведение. Используй реальные данные; неизвестные счётчики не выдумывай.
4. Открой результат в браузере. Проверь основные действия, ширины 390 и 1440 px и клавиатуру. Сравни скриншот с исходным изображением.
5. Сообщи, что работает и какие функции зависят от внешних сервисов.

Как проверить результат

Попробуйте на отдельном тестовом проекте. Проверьте наблюдаемый результат, ошибки и список разрешений; результат модели не принимайте без проверки.

Твой опыт применения

Оцени пользу и результат для своей задачи.

Личная заметка

Только на этом устройстве. Заметки не публикуются и не синхронизируются.

Публичные комментарии

Текст увидят другие пользователи. Публикация доступна после входа и отдельного подтверждения.