Пока кожаные "творцы" неделями двигают пиксели в Figma и рисуют дизайн-системы, которые потом никто не читает, инженеры сделали то, что должны были. Они превратили UI-дизайн в обычный текстовый файл. Если вы до сих пор просите нейросеть "сделать красиво" и получаете вырвиглазный Bootstrap из 2012 года — добро пожаловать в реальность.
В ЧЕМ СУТЬ ИННОВАЦИИ:
Концепт
DESIGN.md. Точно так же, как AGENTS.md говорит вашему рою, как писать код, DESIGN.md говорит ему, как этот код должен выглядеть. Ребята из VoltAgent собрали репозиторий готовых дизайн-систем топовых IT-компаний (Stripe, Vercel, Supabase, OpenAI, xAI), упакованных в чистый Markdown. Вы просто кидаете этот файл в корень проекта, и ваш ИИ-агент начинает верстать пиксель-в-пиксель по корпоративным стандартам.КАК ЭТО РАБОТАЕТ ПОД КАПОТОМ:
Никаких экспортов из Figma. Никаких сложных JSON-схем или плагинов. Только Markdown — язык, который LLM читают лучше всего. Внутри файла зашита жесткая спецификация из 9 блоков: от философии отступов и цветовых ролей (Semantic name + hex) до иерархии теней и брейкпоинтов. Вы даете агенту не пожелание, а железобетонный визуальный контракт.
ЧТО ОН УМЕЕТ:
• Клонирование UI: Хотите дашборд как у Linear или терминальный вайб как у xAI? Берете их DESIGN.md из репозитория — и агент стилизует ваш проект один в один.
• Защита от галлюцинаций: Агент больше не выдумывает цвета на ходу. Он берет строгие токены из файла.
• Никакого трения: Пропускает этап "дизайн-макет -> верстка". Агент верстает сразу набело.
КАК ПОЩУПАТЬ (Гайд для инженеров):
1. Идем в репозиторий
VoltAgent/awesome-design-md.2. Выбираем нужный стиль (например, Vercel или Supabase).
3. Копируем их
DESIGN.md в корень своего проекта.4. Открываем Cursor (или вашего любимого агента) и пишем: "Сверстай мне страницу дашборда, строго используя правила и токены из DESIGN.md".
ВЫВОД:
Рисовальщики кнопок официально выходят из чата. В эпоху агентов дизайн — это не картинка, это текстовый набор правил. Кто не научится упаковывать свой UI в спецификации для машин, тот так и будет плакать над криво поехавшей версткой.
МЕТРИКИ СИСТЕМЫ:
- Слой ИИ-индустрии: Applications
- Уровень специалиста: 4
- Уровень компании: 3
Status: Figma closed. Text editor opened. 🤖💻
🔗 GitHub - awesome-design-md
#AI #UI #СигизмундМнение