Раньше сложный интерфейс приходилось просить «одной страницей на чистом JavaScript» — и на второй сотне строк он превращался в кашу: обработчики цеплялись друг за друга, состояние жило в трёх местах сразу.
Теперь есть тип react: модель пишет обычный компонент, а сборка идёт прямо у вас в браузере. Ничего устанавливать не нужно.
Когда просить именно react
| Задача | Что просить |
|---|---|
| Форма с несколькими шагами и проверками | react |
| Таблица с фильтрами и сортировкой | react |
| Дашборд с переключателями периодов | react |
| Калькулятор с зависимыми полями | react |
| Статичная страница, лендинг | обычный html — легче и быстрее |
| Схема, блок-схема, диаграмма | mermaid или svg |
| Длинный текст, инструкция | markdown |
Как сформулировать, чтобы получилось с первого раза
Разница между «сделай дашборд» и рабочим запросом — в трёх вещах: данные, состояния, поведение.
Плохо
Сделай дашборд продаж.Хорошо
Сделай React-артефакт: дашборд продаж.
Данные — вшей в код как массив-заглушку из 24 записей за два года:
месяц, выручка, число сделок, канал (сайт / звонок / партнёр).
Нужно:
— переключатель периода: год / полгода / квартал;
— график выручки по месяцам и разбивка по каналам;
— четыре карточки сверху: выручка, сделки, средний чек, рост к прошлому периоду;
— таблица снизу с сортировкой по любому столбцу.
Всё на русском, деньги — в рублях с разделителем разрядов.
Данные потом заменю на свои: вынеси массив в самое начало файла с комментарием.Какие библиотеки доступны
В артефактах подключено около трёх десятков библиотек. Полезно знать, что просить по имени:
- Графики — ApexCharts: линии, столбцы, круговые, комбинированные.
- Таблицы уровня CRM — Tabulator и AG Grid: фильтры, сортировка, редактирование ячеек.
- Календари и расписания — FullCalendar.
- Расчёты — math.js, а для денег decimal.js: во float считать деньги нельзя, копейки разъезжаются.
- Отчёты в PDF с таблицами, QR-коды, диаграммы Mermaid, текстовый редактор Quill, иконки Font Awesome.
Если библиотека нужна по имени — так и напишите: «используй ApexCharts». Модель иначе может собрать график руками на холсте, и он будет хуже.
Что делать, когда артефакт не открылся
- Прочитайте сообщение об ошибке. Если компонент не найден, платформа так и пишет — обычно модель назвала его иначе. Достаточно попросить: «назови компонент App».
- Откройте вкладку «Консоль» в панели артефакта — там видно, на чём он споткнулся, и это можно просто переслать модели.
- Вернитесь к прежней версии, если сломалось то, что работало. Возврат создаёт новую версию с прежним содержимым, история не теряется.
Три приёма, которые сильно улучшают результат
- Просите правку точечно. «Поменяй только заголовки карточек» лучше, чем «поправь дашборд»: во втором случае модель перепишет всё и заодно потеряет то, что вам нравилось.
- Работайте в док-режиме. Панель встаёт рядом с чатом, а не поверх: видите превью и тут же пишете правку. Тумблер — в шапке панели.
- Сохраняйте удачное. У версий есть возврат, но проще сразу сказать «зафиксируй, дальше пробуем другое» — и знать номер версии, к которой возвращаться.
Дальше: артефакты в чате и режимы «Чат» и «Задачи».
