DESIGN.md — плагин
Плагин и npx CLI, которые создают DESIGN.md по спецификации google-labs-code/design.md из официальных шаблонов
- 9 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает npm-пакет через npx
- Скачивает примеры шаблонов из сети
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/design-mdОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает npm-пакет через npx
- Скачивает примеры шаблонов из сети
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Команда /design-md:create создает в проекте DESIGN.md: YAML-токены дизайна и текстовое обоснование, которые любой агент может прочитать перед версткой интерфейса. Можно взять пустой стартовый шаблон или один из трех официальных примеров. Тот же функционал доступен через npx claude-plugin-design-md для агентов, умеющих запускать shell-команды.
Для кого. Для дизайнеров и фронтенд-разработчиков, которые хотят зафиксировать визуальный стиль продукта в формате, понятном агентам.
Подходит, если
- Нужно завести дизайн-систему в формате DESIGN.md
- Агент верстает интерфейс, и нужно, чтобы он держался единых токенов
- Нужны YAML-токены для экспорта в Tailwind или DTCG
Не подходит, если
- В проекте уже есть своя дизайн-система в другом формате и переходить на DESIGN.md не планируется
Пример запроса к агенту
Создай DESIGN.md на основе примера atmospheric-glassОграничения
Создает только файл-заготовку, содержимое под продукт нужно дописать самостоятельно. Нужен Node 18+. Официальные примеры скачиваются из сети.
Как отключить. Удалите плагин design-md через /plugin в Claude Code. Для других агентов удалите добавленное правило или секцию в AGENTS.md.
Частые вопросы
Какие шаблоны доступны?
blank по умолчанию, а также официальные примеры atmospheric-glass, paws-and-paths и totality-festival.
Как проверить готовый файл?
Командой npx @google/design.md lint DESIGN.md. Тот же пакет умеет экспортировать токены в Tailwind и DTCG.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныDESIGN.md от Google Labs
DESIGN.md
Формат DESIGN.md для агентов и CLI: проверка контраста и ссылок, сравнение версий, экспорт токенов в Tailwind и DTCG
Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Awesome Claude Design
awesome-claude-design
Подборка готовых файлов DESIGN.md, которые Claude Design разворачивает в каркас интерфейса: цвета, шрифты, компоненты. Брать как вдохновение
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Коротко о README
Проект содержит плагин Claude Code со слеш-командой create, универсальный скилл-файл и npx CLI. README показывает, как подключить инструкцию в Cursor, Cline, Windsurf, OpenCode и через AGENTS.md для Codex, Gemini CLI и других. Флаги --out и --force задают путь и перезапись. Пакет публикуется в npm через GitHub Actions по тегу версии.
Бейдж для README
Исходный SKILL.md
--- name: create-design-md description: Use when the user asks to create a DESIGN.md, scaffold a design system spec for AI coding agents, add YAML design tokens, or set up the google-labs-code/design.md format in a project. Runs the claude-plugin-design-md npx CLI so the file is written verbatim from the official templates, not rewritten from memory. --- # Scaffold a DESIGN.md via `claude-plugin-design-md` A `DESIGN.md` is a design-system specification AI coding agents can read to produce UI that matches an intended visual identity. It follows the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) spec: YAML front matter with design tokens plus markdown prose that explains the rationale. ## When to activate Trigger this skill when the user asks for any of: - a `DESIGN.md` file - a design system spec that AI agents can read - design tokens in YAML form - the `google-labs-code/design.md` format - a visual-identity brief that an AI coding agent can consume ## Do not write the file from scratch Templates are versioned upstream by Google Labs. Rewriting them from memory drifts from the spec. Always delegate to the packaged CLI. ## How to run ```bash npx -y claude-plugin-design-md [source] [--out path] [--force] ``` Requires Node 18+. No install needed — `npx` caches the package.