← Все инструменты DESIGN.md preview

Онлайн предпросмотр DESIGN.md

Загрузите DESIGN.md и увидьте дизайн-систему как визуальный интерфейс: палитру, типографику, отступы, скругления, компоненты, markdown-guidance и проверки структуры по open spec.

D

Ожидаю DESIGN.md

Палитры, шрифты и компоненты появятся здесь после загрузки файла.

Формат

Что такое DESIGN.md и зачем нужен предпросмотр

DESIGN.md — это открытый текстовый формат для описания дизайн-системы продукта. Он объединяет машинно-читаемые дизайн-токены в YAML frontmatter и человекочитаемые markdown-разделы: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts.

Такой файл помогает AI-агентам и разработчикам строить интерфейсы в едином стиле. Вместо того чтобы заново объяснять цветовую палитру, шрифты, радиусы, spacing, кнопки и правила композиции, команда хранит дизайн-контракт в одном понятном документе.

Наш DESIGN.md Preview превращает этот документ в визуальный обзор: показывает swatches цветов, примеры типографики, шкалы отступов и скруглений, демо-компоненты и текстовые рекомендации. Это удобно перед передачей файла в Codex, Cursor, Claude Code, Gemini CLI или другой инструмент, который генерирует интерфейсы по дизайн-системе.

Проверки

Что показывает инструмент

Предпросмотр не заменяет полноценный CI-линтер, но быстро подсвечивает частые ошибки в DESIGN.md прямо в браузере.

Design tokens

Проверяет наличие и визуализирует группы colors, typography, spacing, rounded и components из YAML-frontmatter.

Section order

Сверяет порядок markdown-разделов с рекомендуемой структурой open spec и предупреждает о дубликатах.

Token references

Проверяет ссылки вида {colors.primary} или {rounded.full}, чтобы компонентные токены не указывали в пустоту.