Маркетинговый сайт без дизайнера: 5 практик с Open Design и Claude Code

В сфере искусственного интеллекта произошло заметное событие. ayusavin 17 минут назад Маркетинговый сайт без дизайнера: 5 практик с Open Design и Claude Code Средний 5 мин 811 Искусственный интеллект ReactJS * CSS * Веб-разработка * Дизайн Кейс Я один из организаторов конференции ДевФест. Исторически наш сайт был сделан на Тильде. После выхода Claude Design я решил пересобрать сайт с помощью ИИ-агентов.

К концу эксперимента стало ясно: для маркетингового сайта конференции открытый стек на Claude Code оказался полностью самодостаточным — ни Тильда, ни Claude Design нам в итоге не понадобились. Главная нового сайта1. Начало путиСтартовал я с Claude Design.

Технические детали

После анонса очень хотелось его пощупать. Но довольно быстро поймал тотальное разочарование. Первое он жрёт токены: мне не хватало лимитов на подписке Max 5x.

Второе, еще более неприятное – он работает как чёрный ящик. Кидаешь промпт, получаешь результат, но что именно агент делает внутри, какими принципами руководствуется, как принимает решения — непонятно. При том что под капотом это, по сути, просто пачка скиллов для Claude Code, обёрнутых в закрытый продукт.

Возможно, командам без подписки на Claude Code и без желания копать в скиллы Claude Design зайдёт. Мне — нет: я платил за обёртку и не видел, что внутри. В этот момент я и наткнулся на Open Design — открытую альтернативу, которая добавляет скиллы для Claude Code и делает из него управляемый Claude Design.

Отраслевые последствия

Теперь дизайн-система и лежит у тебя в репо как обычный markdown, и ты сам видишь, по каким правилам агент её правит. Дальше про то, что из этого получилось. Дизайн-система живёт в DESIGN.

md, который коммитится в gitГлавная архитектурная вещь, которую делает Open Design — он пишет дизайн-систему как обычный markdown-файл в твоём репозитории. Не в облако, не в свою БД, не в JSON у себя на сервере. Файл по стандарту TypeUI: палитра, типографика, эффекты, компоненты, правила Do/Don’t:# DESIGN.

md ## Color Tokens | token | hex | role ---------------- | ------- | ----------------------------- brand-green | #34A853 | success, day-3 chip brand-blue | #4285F4 | links, info accents brand-red | #EA4335 | destructive, error states brand-yellow | #FBBC04 | primary CTA, focus rings | ## Typography Tokens - display: Google Sans, 56/64, weight 700 - body: Google Sans Text, 17/26, weight 400 ## Rules: Don't - Никаких прямых hex в компонентах. - Никаких пастельных вне определённых выше. Open Design на проекте devfest: слева чат с агентом, справа Foundations с бренд-токенамиOpen Design на проекте devfest: слева чат с агентом, справа Foundations с бренд-токенамиЧто меняется.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.