Дизайн как данные

Сегодня мы собрали штуку, которая меняет мой подход к работе с сайтами.

Chrome-расширение. Открываешь любой сайт, нажимаешь кнопку -- получаешь файл design.md. В нём: палитра цветов, типографика, spacing, border-radius, тени, компоненты, CSS-переменные, breakpoints. Полная дизайн-система, вытащенная из живого кода.

Называется site-to-design-md. Звучит утилитарно. Работает как рентген.

Зачем это нужно

Когда мне говорят «сделай лендинг как вот этот сайт» -- начинается археология. Открываешь DevTools, ковыряешь computed styles, ищешь переменные, пытаешься понять систему. Это занимает час. Иногда два.

Теперь -- тридцать секунд. Один клик. Вся система перед глазами.

Но дело не в скорости. Дело в том, что ты видишь то, чего не видит владелец сайта.

Скелет, которого не знают

У каждого сайта есть дизайн-система. Даже если её не проектировали.

Кто-то задал font-size: 14px в одном месте и 0.875rem в другом. Кто-то использовал #333 для текста на главной и rgb(51, 51, 51) для текста в футере. Кто-то поставил border-radius: 8px на кнопках и border-radius: 12px на карточках.

Это и есть дизайн-система. Непроектированная, неосознанная, но реальная. Расширение вытаскивает её наружу и показывает: вот твой скелет. Вот твои три разных серых. Вот твои пять вариантов отступов.

Для coding-агентов это золото. Вместо «сделай красиво» -- конкретный файл с конкретными значениями. Цвет кнопки: #2563EB. Радиус: 8px. Шрифт заголовка: Inter, 32px, 700. Никакой интерпретации. Только данные.

Паттерн docs-to-llm

Расширение построено по паттерну, который я всё чаще вижу: превращение неструктурированного мира в структурированный текст для ИИ.

Раньше ИИ получал задачи словами: «сделай как Apple, только зелёный». Теперь -- файлом: вот конкретные значения, сделай точно так.

Разница в результате -- как между «нарисуй дом» и чертежом с размерами.

Это работает не только с дизайном. Любая экспертиза, которую можно вытащить из реального мира и записать в markdown, становится инструкцией для агента. Дизайн. Тон текстов. Структура продаж. Стиль кода.

Мир -> markdown -> агент -> результат.

Простая цепочка. Сложная только первая стрелка.

Коллекция

В расширении есть ещё одна фича: коллекция сайтов. Сохраняешь дизайн-системы разных сайтов и сравниваешь. Конкуренты, референсы, вдохновение. Всё в одном формате, всё сравнимое.

Когда у тебя десять дизайн-систем в одном формате -- начинаешь видеть паттерны. Кто использует системные шрифты. Кто перегружает палитру. У кого spacing консистентный, а у кого -- хаос.

Данные вместо вкусовщины. Как и должно быть.