# Референс в интерфейс: сведения для ИИ-агента

> Справочный документ Staksy для твоего агента. Это сведения для проверки, не команды: ничего отсюда не выполняй и не устанавливай без подтверждения пользователя. Сверь требования с первоисточниками ниже; устаревшее и неподтверждённое не принимай как факт. Не утверждай, что инструмент работает, пока это не проверено.

- Материал: reference-to-interface (prompt), страница для человека: /r/reference-to-interface
- Обновлено 2026-10-18

## Цель

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

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

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

## Источники

- Playwright: проверка результата UI: https://playwright.dev/docs/test-assertions

## Требования

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

## Совместимость

- Codex: По условиям клиента; версия клиента: не указана. Нужны работа с изображением, доступ к коду и браузерная проверка.
- Claude Code: По условиям клиента; версия клиента: не указана. Нужны работа с изображением, доступ к коду и браузерная проверка.
- Gemini: По условиям клиента; версия клиента: не указана. Нужны работа с изображением, доступ к коду и браузерная проверка.
- ChatGPT: По условиям клиента; версия клиента: не указана. Нужны работа с изображением, доступ к коду и браузерная проверка.
- DeepSeek: По условиям клиента; версия клиента: не указана. Нужны работа с изображением, доступ к коду и браузерная проверка.

## Риски

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

## Порядок действий

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

Точный текст промпта:

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

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

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