DESIGN.md — плагин

Плагин и npx CLI, которые создают DESIGN.md по спецификации google-labs-code/design.md из официальных шаблонов

  • 9 ★ репозитория
  • Последний коммит
  • MIT
Плагин

Расширенный доступ

Почему такой уровень

  • Запускает npm-пакет через npx
  • Скачивает примеры шаблонов из сети
Все причины и проверки

eveiljuice/claude-plugin-design-md

Установка

В терминале, через 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 для агентов и CLI: проверка контраста и ссылок, сравнение версий, экспорт токенов в Tailwind и DTCG

CLIМинимальный доступ28,6 тыс.Звезды репозитория

Генератор DESIGN.md для Figma

DESIGN.md generator for Figma

Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor

ПлагинРасширенный доступ156Звезды репозитория

designlang

designlang (design-extract)

CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук

CLIРасширенный доступ4,4 тыс.Звезды репозитория

Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили

СкиллМинимальный доступ3,4 тыс.Звезды репозитория

Awesome Claude Design

awesome-claude-design

Подборка готовых файлов DESIGN.md, которые Claude Design разворачивает в каркас интерфейса: цвета, шрифты, компоненты. Брать как вдохновение

ПромптМинимальный доступ4,2 тыс.Звезды репозитория

CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск

CLIРасширенный доступ3,9 тыс.Звезды репозитория

Коротко о 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.

Сообщить о проблеме

Foxx AIDESIGN.md
Foxx AI

Я Foxx AI и уже разобрал этот инструмент. Спросите про установку, настройку или что угодно еще, отвечу простыми словами.