| name | design-md-brands |
| description | Банк готовых DESIGN.md дизайн-систем брендов (формат Google Stitch): Stripe, Linear, Vercel, Notion, Apple — 73+, тянет по WebFetch. Триггеры: «как у Linear», «эстетика Notion». НЕ: стиль по URL→brand-extractor; система с нуля→design-system-create. |
| when_to_use | Пользователь называет реальный известный бренд как визуальный референс для артефакта
(лендинг, слайды, прототип, письмо) — «в стиле Stripe», «как Linear», «эстетика Notion»,
«фирменные цвета Apple/Tesla/Ferrari». Вместо угадывания палитры или скрейпинга живого
сайта (может лечь на Cloudflare) — забери готовый DESIGN.md из банка awesome-design-md.
Также: когда нужен сам ФОРМАТ DESIGN.md (Google Stitch) как способ передать дизайн-систему
ИИ-агенту в проект.
|
DESIGN.md brands — банк дизайн-систем брендов
Reference-пак поверх открытого репо VoltAgent/awesome-design-md (MIT). Не хранит копии брендов локально — тянет актуальный DESIGN.md по требованию. Комплементарен нашим дизайн-скиллам, ничего не заменяет.
Что такое DESIGN.md
Концепт Google Stitch: один plain-text markdown-файл в корне проекта, который ИИ-агент читает и по нему генерит консистентный UI. Без тулинга, без токен-JSON — просто разметка, которую понимает и человек, и модель. Репо awesome-design-md — курируемый банк таких файлов, снятых с сайтов известных брендов.
Когда это нужно нам: пользователь говорит «сделай в стиле Stripe / как у Linear / эстетика Notion». Раньше выбор был: (а) угадать палитру, (б) brand-extractor скрейпит живой сайт (риск anti-bot). Теперь для популярных брендов есть готовая, вычищенная дизайн-система — забрать и применить.
Как достать DESIGN.md конкретного бренда
Файлы лежат по схеме design-md/<brand>/DESIGN.md. Забирай raw-версию через WebFetch:
https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md
Примеры (проверенные пути): .../design-md/stripe/DESIGN.md, .../design-md/linear.app/DESIGN.md, .../design-md/vercel/DESIGN.md, .../design-md/notion/DESIGN.md, .../design-md/apple/DESIGN.md.
Гоча — имя папки ≠ всегда чистое имя бренда. Некоторые с доменом/суффиксом: linear.app, mistral.ai, x.ai, together.ai, opencode.ai, cal (не cal.com), bmw-m, dell-1996, nintendo-2001, runway ml. Если прямой путь дал 404 — сперва глянь листинг папок: WebFetch https://github.com/VoltAgent/awesome-design-md/tree/main/design-md, найди точное имя, потом тяни raw.
Каталог брендов (73+, на момент аудита 100+ папок — репо растёт)
| Категория | Бренды (имена ≈ папки) |
|---|
| AI / LLM | claude, cohere, elevenlabs, mistral.ai, minimax, together.ai, x.ai, ollama, replicate, runway ml, composio, opencode.ai |
| Dev-tools | cursor, vercel, warp, raycast, expo, lovable, resend, sentry, hashicorp, voltagent |
| Backend / DB | supabase, mongodb, posthog, sanity, clickhouse |
| SaaS / Productivity | linear.app, notion, cal, zapier, airtable, intercom, slack, superhuman, clay, miro |
| Design / Content | figma, framer, webflow, pinterest, theverge, wired |
| Fintech / Crypto | stripe, wise, coinbase, binance, kraken, mastercard, revolut |
| Consumer / E-com | airbnb, shopify, starbucks, spotify, uber, nike, meta |
| Big Tech / Hardware | apple, ibm, nvidia, hp, spacex, playstation, vodafone |
| Automotive | tesla, ferrari, bmw, bmw-m, lamborghini, bugatti, renault |
| Ретро-веб (стилизация) | dell-1996, nintendo-2001 |
Список неполный и меняется — источник истины всегда листинг репо. Нет нужного бренда — см. «Брендов нет в банке» ниже.
Структура файла DESIGN.md (схема Stitch, 9 блоков)
Заголовки чуть плавают от бренда к бренду, но каркас один (пример со Stripe):
- Overview — визуальная тема, атмосфера, философия
- Colors — семантические роли + hex (Brand & Accent / Surface / Text / Semantic)
- Typography — семейства, иерархия, принципы, заметка о шрифтах-заменах
- Layout — spacing-шкала, grid/контейнер, философия воздуха
- Elevation & Depth — тени, слои поверхностей (обычно таблица)
- Shapes — border-radius шкала, геометрия фото/иллюстраций
- Components — buttons, cards, inputs/forms, nav, pills/tags, signature-компоненты (со стейтами)
- Do's and Don'ts — гардрейлы
- Responsive Behavior — брейкпоинты, тач-таргеты, стратегия схлопывания, поведение картинок
(+ иногда финальный Iteration / Agent Prompt Guide — краткая шпаргалка цветов для промпта агенту)
Формат цвета внутри — семантическое имя + токен + hex + где применять, напр.:
**Indigo** ({colors.primary}—#533afd): signature CTA. Filled-pill button, link emphasis, gradient anchor.
Как применять (workflow)
- Пользователь назвал бренд-референс → определи имя папки (листинг репо при сомнении).
- WebFetch raw
DESIGN.md → получил дизайн-систему.
- Отдай её как контекст в
design-orchestrator / нужный артефакт-скилл (slides, interactive-prototype, website-creation). Дальше весь артефакт держи в этой системе — палитра, типографика, радиусы, тени берутся из файла, не выдумываются.
- Нужен один файл в корень проекта для другого ИИ-агента (Cursor/Stitch/Copilot) — просто положи
DESIGN.md туда.
Брендов нет в банке / нужен свой
- Живой сайт по URL →
brand-extractor (Playwright, вытащит цвета/шрифты/копирайт), результат оформи по шаблону references/design-md-template.md.
- С нуля / свой продукт →
design-system-create + color-system-builder + type-scale, финал — в тот же шаблон DESIGN.md.
- Авторский DESIGN.md пиши по
references/design-md-template.md (9 блоков Stitch).
Этика / границы
- Репо MIT, файлы существуют для генерации консистентного UI и НЕ передают права на чужую айдентику. Не выдавай брендированную систему чужого продукта за свою — см.
content-policy.
- Для НАШЕГО бренда (Anthropic look-and-feel) —
brand-guidelines, не этот скилл.
- Требует только сетевого доступа к github/raw.githubusercontent — прокси/ключи не нужны.
Соседние скиллы
design-orchestrator (диспетчер) · brand-extractor (скрейп живого сайта) · design-system-create (генерация с нуля) · color-system-builder / type-scale (сборка палитры/шкалы) · frontend-design (выбор эстетики когда системы нет) · brand-guidelines (Anthropic).
