GSD-Pixso_Alexey_Andreev

1.

От макета до готового UI
GSD + Pixso для работы с LLM
Алексей Андреев • фронтенд-разработчик • NETA
Путь одной UI-задачи
01 · Макет / Pixso
02 · UI-контракт
03 · План / GSD
04 · Реализация
05 · Review / verify
Проверенный UI
“ Как дать LLM контекст, память и проверяемый
результат
01
GSD + Pixso для работы с LLM

2.

Всё подключено. Но где живёт сама задача?
“
Rules, Skills, Agents и MCP дают контекст и инструменты.
Но длинной UI-задаче ещё нужна собственная память.
Контекст
что известно
Состояние
что уже решено
Проверка
что доказано
Новый вопрос: не «может ли LLM написать код?», а «как не потерять смысл задачи?»
02
GSD + Pixso для работы с LLM

3.

Проблема
Длинный чат — плохая память проекта
Контекст из обсуждения?
→
теряется
Решения и ограничения?
→
забываются
Что уже сделано?
→
надо восстанавливать
Что проверено?
→
не доказано
“ Чат хранит разговор. Workstream хранит состояние задачи.
03
GSD + Pixso для работы с LLM

4.

GSD
GSD превращает задачу в инженерный процесс
Requirements
что должно быть
истинно
Plan
как дойдём до
результата
Verification
чем докажем
готовность
CONTEXT → REQUIREMENTS → PLAN → EXECUTION → REVIEW → VERIFY
GSD хранит путь задачи рядом с кодом — между сессиями и корректировками.
04
GSD + Pixso для работы с LLM

5.

GSD
GSD сначала понимает проект
Структура, технологии, команды и правила становятся общей памятью проекта.
.planning/
PROJECT.md
config.json
codebase/
ARCHITECTURE.md
STACK.md
STRUCTURE.md
CONVENTIONS.md
TESTING.md
INTEGRATIONS.md
research/
workstreams/
Проект
Цель, границы и ключевые
ограничения.
Архитектура
Модули, связи и структура
каталогов.
Стек
Фреймворки, зависимости и
команды запуска.
Правила
Соглашения, тестирование
и критерии качества.
Память
Research и Workstream
сохраняют контекст между
сессиями.
.planning создаёт GSD - это его рабочая память.
05
GSD + Pixso для работы с LLM

6.

GSD
Workstream изолирует контекст каждой задачи
Разные разработчики и агенты могут работать параллельно — планы и решения не смешиваются.
.planning/workstreams/
ws-feature-a/
REQUIREMENTS.md
ROADMAP.md
STATE.md
MILESTONES.md
phases/
PLAN • SUMMARY
VERIFICATION • evidence
ws-feature-b/
...
Требования
Что должно быть истинно в
результате.
Roadmap
Этапы и последовательность
работы.
State
Прогресс, решения и точка
продолжения.
Phases
Небольшие планы, summary и
verification.
Evidence
Скриншоты, тесты и
доказательства результата.
Workstream — planning-state задачи, а не Git-ветка.
06
GSD + Pixso для работы с LLM

7.

UI-задачи
В UI мало знать, какие файлы изменить
“ Главный риск — написать аккуратный код для
неправильно понятого интерфейса.
07
Состояния
Поведение
Визуальная точность
disabled
loading
error
success
переходы
● reset и retry
● динамические шаги
иерархия
порядок полей
тексты и parity
GSD + Pixso для работы с LLM

8.

Pixso
Pixso превращает макет в данные для агента
Сейчас: ссылка + персональный token → прямые HTTP MCP-методы. Секреты и raw DSL не сохраняем.
Как подключаем
Что получает агент
01 Ссылка на конкретный
СТРУКТУРА
item
СТИЛИ И ПЕРЕМЕННЫЕ
02 Персональный token
КОМПОНЕНТЫ И
03 Инициализация MCP-
VARIANTS
сессии
СОСТОЯНИЯ И
04 Вызов нужного
ЭКСПОРТЫ
инструмента
08
Что не попадает в
артефакты
TOKEN
не показываем
SESSION ID
не логируем
RAW DSL
не сохраняем
GSD + Pixso для работы с LLM

9.

Workflow
Задача проходит один понятный маршрут
1. Старт
Workstream
milestone
2. Контекст
API • Pixso • UIконтракт
3. Выполнение
plan • code
review • verify
WORKSTREAM → MILESTONE → API → PIXSO → UI-КОНТРАКТ → PLAN → CODE → REVIEW → VERIFY
План можно корректировать на каждом этапе; состояние и проверки остаются в Workstream.
09
GSD + Pixso для работы с LLM

10.

Реальный кейс:
GEO-сопряжение #496287
Результат
Проект NETA • сложный многошаговый UI-flow
“ 32 требования • 5 фаз • 21 план • 55 задач
10
проверенный UI
GSD + Pixso для работы с LLM

11.

Большая задача стала последовательностью маленьких
решений
11
1
2
3
Контракт данных
GEO-flow и выбор узлов
Доменный шаг
4
5
✓
SSW_N • payload
summary
Pixso parity
Проверяемый итог
GSD + Pixso для работы с LLM

12.

Состояния 1–2: домен и источник
1 · ДОМЕН
2 · SOURCE
Сначала выбираем домен и источник данных для нового сопряжения.
12
GSD + Pixso для работы с LLM

13.

Состояния 3–4: предзаполнение и IP-set
3 · PREFILLED
4 · MANUAL IP-SET
После выбора источника проверяем предзаполнение и ручную
настройку IP-set.
13
GSD + Pixso для работы с LLM

14.

Состояния 5–7: динамика и итог
ДИНАМИЧЕСКАЯ ФОРМА
5 · Dynamic — неполное
ИТОГОВОЕ СОСТОЯНИЕ
6 · Dynamic — готово
7 · Готово
Один сценарий превратился в семь проверяемых состояний интерфейса.
14
GSD + Pixso для работы с LLM

15.

Агенту было с чем сравнивать результат
PIXSO • целевое состояние
РЕАЛИЗАЦИЯ • browser evidence
Сравнение шло по конкретному состоянию, а не по памяти из чата.
15
GSD + Pixso для работы с LLM

16.

Процесс дал и скорость, и проверяемость
“
Моя оценка для аналогичной задачи сегодня:
API и макеты готовы, внешних согласований нет.
60+ ч
обычная оценка
опытного
разработчика
20–24 ч
с накопленным
опытом GSD +
Pixso
644
unit-теста в 54
suites
7 browser-сценариев • lint: PASS • build: PASS • оценка времени — личная, не измерение
16
GSD + Pixso для работы с LLM

17.

Эффект
На трёх проектах факт оказался на 34% ниже оценки
620 ч → 411 ч
60:00
VoIPMonitor
38:00
324:00
−209 ч
−34%
NETA
263:48
Elph-AdminPanel
236:00
КОНТЕКСТ
УПРАВЛЕНИЕ
ПРОВЕРКА
109:11
ИИ ускоряет путь к результату, когда есть контекст, управление и проверка.
17
GSD + Pixso для работы с LLM