HeadlinesBriefing favicon HeadlinesBriefing.com

Гайд по согласованным дизайнам с Claude Code

Towards Data Science •
×

Создание согласованных дизайнов во всем вашем приложении кажется очень тривиальной задачей, которую можно достичь с помощью агентов кодирования. Однако, если большая часть вашего кода написана агентами кодирования, я считаю, что это может быстро превратиться в приложение со множеством разных элементов дизайна, если вы не уделяете пристальное внимание тому, как именно агент кодирования реализует вещи, и вы постоянно рефакторите и централизуете код для соблюдения принципа DRY (не повторяйся). Довольно долгое время, разрабатывая мое приложение, я боролся с сохранением дизайна согласованным. Просто казалось, что мой агент кодирования, будь то Claude Code или Codex, постоянно стремился не следовать предыдущему дизайну, который я использовал, или просто внедрял новые стандарты, которых я не хотел следовать.

Примеры этого: Разные размеры шрифтов по всему приложению. Кнопки с разными дизайнами в разных местах. В общем, элементы UI, такие как выпадающие списки, модули, появляющиеся при наведении и т.д., были несогласованными и никогда не следовали одному и тому же паттерну в отношении цвета, размера или стиля. Это, конечно, супер критично, потому что несогласованные дизайны заставляют ваше приложение выглядеть гораздо менее профессионально и чисто. Когда вещи в приложении выглядят по-разному, как UI выглядит по-разному во всем приложении, это дает очень непрофессиональное и неотполированное первое впечатление от вашего приложения, поэтому вы хотите этого избежать.

Проблема в основном исходит от того, как вы структурировали UI во всем вашем приложении. Если вы используете агентов кодирования для реализации всего без ручного указания агентам, как централизовать код и структурировать элементы UI во всем коде, они автоматически начнут использовать разные стандарты во всем приложении. Причина в том, что как только агенту кодирования просят реализовать что-то новое, например, реализовать новую функцию, они увидят, что нет установленного стандарта в другом месте в приложении, и таким образом просто создадут свои собственные паттерны дизайна. В общем, агенты кодирования — это распознаватели паттернов. Они следуют паттернам, уже предоставленным в кодовой базе, и просто следуют им. И если паттерн в кодовой базе раньше был таким, что нет структуры UI и общего стандарта дизайна для следования, то агенты кодирования продолжат этот паттерн и реализуют свою собственную систему дизайна для каждой новой функции, которую они реализуют или строят.

Учитывая то, о чем я говорю здесь, вы, вероятно, можете начать понимать, в чем решение этой проблемы, которое, конечно, заключается в централизации всех ваших элементов UI в одном месте. Однако это не тривиальная вещь, и не только исправить это не тривиально; я также думаю, что это то, над чем вам нужно продолжать работать, потому что агенты кодирования все еще имеют слабости и могут игнорировать существующие стандарты или вводить новые.