Staksy
М
Загружаем твои данные…
← К ленте
ДизайнПромпт

Агент превратит референс-картинку в рабочий экран

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

Можно быстро попробовать

Как это работает · схема
  1. Изображение
  2. Структура UI
  3. Рабочий экран
Инструмент

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

Обновлено 5 клиентов
К промпту

Агент сверит требования с источниками и спросит разрешение до установки. Staksy ничего не устанавливает и не запускает.

Открыть версию для агента

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

Агент превратит референс-картинку в рабочий экран

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

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

CodexClaude CodeGeminiChatGPTDeepSeek
Версии и подробности
Codex

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

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

Claude Code

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

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

Gemini

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

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

ChatGPT

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

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

DeepSeek

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

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

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

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

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

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

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

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

Получилось? Расскажи другим: твой опыт поможет выбрать решение.

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

Подготовка

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

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

Попробовал?

Подробности и источники

Playwright: проверка результата UIplaywright.dev
Условия использования источника

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

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

Хранится на этом устройстве, не публикуется и не синхронизируется.

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

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

Продолжить изучение

Похожие материалы

ДизайнСкиллАгент сначала выберет характер интерфейса, а потом соберёт компонентыПомоги агенту принять конкретные решения о дизайне интерфейса.ОтладкаПромптАгент сначала воспроизведёт баг, потом исправит и проверит ещё разВоспроизведи ошибку, исправь причину и проверь тот же сценарий.Веб-разработкаMCPТвой ИИ может открыть сайт и проверить, что на нём работаетБраузерные действия и состояние страницы прямо в контексте агента.

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

Личная оценка сохраняется в этом браузере и не публикуется.

Был ли инструмент полезен?
Удалось решить задачу?

Этот вопрос можно пропустить.

Войти в Staksy

Сохраняй открытия и продолжай работу на любом устройстве.

или по email

Вход через Google, GitHub или Яндекс передаёт Staksy подтверждённый email: по нему мы находим твой аккаунт. Заметки и оценки остаются на устройстве. Конфиденциальность · Условия

Первый вход

Этим способом в Staksy ещё не входили. Если аккаунт у тебя уже есть, войди в него привычным способом, и новый способ привяжется к нему. Если аккаунта нет, мы его создадим.

или новый

Проверь почту

Мы отправили письмо со ссылкой. Перейди по ней, чтобы подтвердить адрес, и откроется твой профиль. Письма нет - загляни в «Спам».

Восстановить доступ

Укажи подтверждённый адрес своего аккаунта. Ссылка для нового пароля действует 30 минут.

Удалить аккаунт?

Мы удалим с сервера профиль, закладки, коллекции, реакции, комментарии и предложения, а также резервную копию. Данные в этом браузере останутся. Отменить удаление нельзя.

Фильтры

Что интересует?
Сложность

Зависит от типа материала, а не от конкретного обзора.

Тип материала

Можно не выбирать

Перенести из браузера

Профиль в аккаунте заменится профилем из браузера. Закладки, коллекции, скрытые материалы, стек и реакции объединятся. Личные заметки, ответы, черновики и исходный текст останутся на этом устройстве.

Ручное копирование

Подбери ленту за 10 секунд

Три вопроса. Остальное можно уточнить позже в профиле.

С чем ты работаешь?
Как давно работаешь с ИИ-инструментами?
Что хочешь делать с ИИ?

Поделиться

Комментарии

Как прошёл эксперимент?

Получилось?
С каким агентом?

Без ключей, паролей и приватного кода. Опыт публикуется под именем профиля (или как «Аноним», если отметишь ниже) с пометкой «со слов автора»; удалить его можно в обсуждении.

Заметка

Видна только тебе: хранится на этом устройстве, не публикуется и не синхронизируется.

Текст сохраняется сам, пока ты пишешь.

Находка

Обратная связь

Рекомендации

Не показывать, потому что:

В коллекцию

Новая коллекция

Предложить инструмент