Open Design - отличный инструмент, с которым очень легко начать строить интерфейсы, но со временем понимаешь, что для нового проекта просто нет подходящей дизайн-системы. Я тоже попадал в такую ситуацию, поэтому хочу рассказать, как в проекте использовать свою дизайн-систему.

Описать новую систему по документации Open Design

Это первый и логичный шаг, особенно, если у вас уже есть готовая система, нужно просто подстроить систему под формат, с которым работает инструмент. Формат описания подробно разбирается в документации и, вероятно, можно написать какой-то скилл, чтобы готовую дизайн-систему привести к такому формату с манифестом.

Можно еще построить свою систему при помощи общения с агентом в чате, но это очень долго.

У всего этого подхода есть очевидный плюс - первоклассная поддержка внутри инструмента, если полностью придерживаться манифеста, то для системы будет доступен предпросмотр с компонентами, а агент сможет самостоятельно выбрать систему исходя из задачи, если пользователь не выбрал ее самостоятельно. С другой стороны, если у вас нет полного описания или у вас есть только DESIGN.md, то для приведения системы к такому формату придется потратить очень много времени, поэтому стоит рассмотреть другие варианты.

Просто использовать DESIGN.md

Исходя из документации, инструмент поддерживает legacy-формат описания, когда в директории с системой лежит только DESIGN.md. Я этот способ не пробовал, по одной простой причине - в таком случае не создается превью и систему сложно выбрать, когда не видишь ее своими глазами.

Попросить агента описать дизайн-систему из короткого описания

Как оказалось, это самый простой, но самый эффективный для меня, способ. Можно просто создать проект без указания готовой дизайн-системы и в чате попросить агента построить ее, например, из готового DESIGN.md файла. В некоторых случаях агент может придумать то, чего просто нет, но это, на самом деле, не проблема. Если есть какие-то критичные замечания - можно просто дать указания агенту.

Теперь остается просто указать в инструкции к проекту, чтобы агент не забывал использовать систему, которая уже описана в проекте. Да, с таким способом дизайн-система не будет доступна внутри других проектов, но в таком случае нам доступны огромные библиотеки готовых дизайн-систем, например, Styles от Refero. Просто берешь понравившийся дизайн и при помощи простого промта добавляешь в свой проект.

Надеюсь, ты найдешь свой удобный способ, который поможет тебе быстро собирать классные интерфейсы.