Дизайнер Лилло и Stitch, или как навести мосты между разработкой и UI. В двух словах. Google Stitch (тот самый вайб-дизайн) придумал новый стандарт DESIGN.md. Представлен открытый GitHub-репозиторий с готовыми примерами, чтобы начать пользоваться этим стандартом без лишних усилий и побыстрее. 🤙 🧐 Что такое Google Stitch DESIGN.md? DESIGN.md — это единый Markdown-файл, который содержит всю информацию о визуальном языке проекта: цвета, типографику, отступы, правила оформления компонентов и даже примеры того, что можно и чего нельзя делать. Раньше передать дизайн от дизайнера к разработчику или объяснить AI ваши визуальные предпочтения было непросто. Теперь вы просто кладёте файл DESIGN.md в корень проекта, и любой AI-агент (Google Stitch, Claude Code, Cursor, Gemini и другие) сможет прочитать его и создавать интерфейсы, строго следующие заданным правилам. 🚀 Чем полезен для Google Stitch DESIGN.md? · Единый источник обмена: Файл становится главным документом, который одновременно понимают и дизайнеры, и разработчики, и AI. · AI-нативный формат: AI отлично понимает Markdown, поэтому ему не нужно разбирать сложные JSON-схемы или экспорты из Figma. · Мгновенное применение: Вы просто копируете файл в проект и указываете AI его использовать. Ваш любимый редактор сразу начнёт генерировать UI в нужной стилистике. 🛠️ Чем полезен Awesome DESIGN.md от VoltAgent? Этот репозиторий – готовая библиотека таких файлов, собранная с реально существующих сайтов. Он позволяет вам не создавать дизайн-систему с нуля, а взять за основу уже проверенные решения от ведущих IT-компаний. · Повышение качества MVP. Вы можете скопировать стиль проверенного продукта (например, Stripe или Linear) и быть уверенными, что ваш прототип будет выглядеть профессионально. · Обучение на примерах. Изучая эти файлы, вы можете понять, как устроены визуальные языки лучших продуктов, и создать свой на основе этих знаний. · Быстрый старт и A/B-тесты. Вы можете моментально переключаться между разными визуальными стилями, просто заменяя файл DESIGN.md и заново генерируя интерфейс. 💎 Как это работает вместе и с чего начать? Схема работы выглядит так: 1. Вы идёте на GitHub-репозиторий VoltAgent и выбираете стиль, который вам нравится. 2. Копируете файл DESIGN.md из папки этого стиля в корень вашего проекта. 3. Запускаете вашего AI-ассистента (например, с помощью Google Stitch или Claude Code) и просите его «создать страницу, используя стиль из DESIGN.md». 4. AI анализирует файл и генерирует код, который идеально соответствует заданным правилам. Вуаля. Вы получили эскиз, проверили, подвайб-редактили, ну или вручную, и го брр на прод.😮💨 В общем, тема. Ускоряемся. 👍