Я сделал скилл для делания прототипов. С ним ваш клод или кодекс соберет более удобный кликабельный прототип, а вы сможете легко его потом доработать

Скринкаст:

Зачем

Иногда проще не тащить реальную дизайн-систему и не писать сразу на свифте, котлине или реакт нейтиве. Клод быстрее соберет отдельный изолированный хтмл-файл, и успеет его три раза поправить, пока нпм ставит все зависимости вашей дизайн-системы.

Всё лежит в одном файле: экраны, логика, комментарии, картинки, иконки. Его можно кинуть коллегам, он откроется у них в браузере так же, как у вас.

Что в скилле

Главное в скилле — не сами экраны, а обвязка, в которой их удобно смотреть и обсуждать. Она одинаковая во всех прототипах. Агент её не трогает и пишет только экраны.

• Браузерная рамка с прототипом, чтобы отделить его от обертки
• Переключатели шагов и состояний. По горизонтали — шаги, по вертикали состояния этих шагов. Удобно обозреть целиком, а не искать переходы.
• Карта этих же экранов и переходов, иногда удобнее смотреть её
• Варианты прототипы (грид или карточки) или параметры: десктоп-мобайл, ориентация планшет и прочее. Если вопрос в том, какое решение выбрать, агент делает 2—3 варианта, которые отличаются структурой, а не цветом кнопок.
• Комментарии агент. Агент может подписать тонкости для вас.

Правочки

Отдельное внимание уделил тому, как вы будете отдавать правочки клоду. Зажимаете Альт (Опшен на маке), кликаете в элемент и пишете комментарий. Он привязывается к конкретному элементу на конкретном экране в конкретном состоянии. Потом нажимаете «Копировать все» и получаете текст для агента. Пара таких итераций, и у вас уже вполне кликабельная штука.

Сам прототип

В теории клод должен не бросаться сразу рисовать галерею экранов, а разобраться как сделать прототип под конкретное решение. До того, как писать код он должен будет:

• выяснить, кто пользователь и какую задачу решает;
• сформулировать, что команда должна решить по прототипу;
• расписать сценарий от начала до результата, не уходят во все ненужные ответвления

Если продукт уже есть, агент возьмет навигацию из него. Экраны на пути к ответу он сделает кликабельными, остальное нет, но можно попросить всё.

Скачать

https://github.com/mikeozornin/skills

npx skills add mikeozornin/skills --skill mo-build-html-prototype

Если есть что, пишите. Интересно посмотреть на чужой опыт.