Извлеките визуальные токены дизайна в готовые к ИИ файлы DESIGN.md
Экстрактор DESIGN.md, созданный Витором М. М. в сотрудничестве с ibe.IA, является расширением Chrome, которое преобразует визуальную идентичность сайта в стандартизированную ссылку DESIGN.md для кода пользовательского интерфейса с поддержкой ИИ. Оно анализирует страницы и захватывает цвет, типографику, отступы и другие токенизированные правила для формирования документа, читаемого машиной. Расширение использует компактную боковую панель для быстрой экстракции и нацелено на фронтенд-разработчиков, дизайнеров UI/UX и инженеров по запросам, которым нужно последовательное визуальное руководство для интерфейсов, управляемых LLM.
Он преобразует стили на странице в структурированный файл токенов дизайна
Расширение извлекает конкретные данные стиля из любой активной вкладки и записывает их в файл DESIGN.md. Экстрактор определяет цвета, шкалы типографии, единицы расстояния, стили границ и тени и форматирует их как ссылку на токен. Вывод соответствует спецификации W3C Design Tokens Community Group (DTCG), так что команды получают стандартизированную модель токенов, а не произвольный список цветов. Это помогает инструментам на downstream интерпретировать токены надежно.
Он интегрируется в браузинг, не покидая страницу
Извлечение происходит из боковой панели, построенной на API боковой панели Chrome, позволяя пользователям инициировать захват одним щелчком, просматривая живой сайт. Дизайн панели сохраняет рабочий процесс компактным и ненавязчивым, так что дизайнеры могут инспектировать компоненты и инициировать извлечения, не открывая отдельное окно. Многостраничные захваты консолидируют токены по навигированным страницам в один файл ссылки для согласованности на уровне проекта.
Он сохраняет обработку локально в браузере для конфиденциальности
Вся аналитика происходит в браузере пользователя; расширение документирует, что оно не передает и не хранит данные внешне и не требует учетной записи. Эта локальная обработка подходит для профессиональных сред с строгими правилами конфиденциальности, поскольку извлеченные токены и сгенерированный DESIGN.md остаются в клиентской среде и могут быть экспортированы напрямую для внутреннего использования.
Он подготавливает файлы токенов для AI-редакторов и программного использования
Инструмент производит артефакты, готовые для AI, включая AI Consolidation Prompt и экспортируемый файл Markdown с YAML frontmatter, подходящий для программного ввода. Подсказка представлена, чтобы помочь LLM, таким как Claude и Cursor, применить набор токенов, в то время как вывод Markdown отформатирован для интеграции в конвейеры разработчиков. Расширение работает на Chrome и других браузерах на основе Chromium из-за своей зависимости от API.
Лучше всего подходит для команд, которые хотят воспроизводимые рекомендации по дизайну для кода с поддержкой ИИ
Расширение является практичным вариантом для фронтенд-команд и инженеров по запросам, которым нужна повторяемая, читаемая машиной ссылка на дизайн, чтобы сократить визуальные отклонения в пользовательском интерфейсе, сгенерированном LLM. Одним из компромиссов является то, что его принятие требует небольшого изменения рабочего процесса для импорта и версионирования файлов токенов в существующих процессах сборки или проверки. Для проектов, которые обеспечивают соблюдение дизайна, расширение предлагает сосредоточенный, ориентированный на конфиденциальность способ кодификации визуальных правил.
