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).
1---2name: design-md-brands3description: Банк DESIGN.md брендов (Stripe, Linear, Vercel, Notion, Apple — 73+). Триггеры: «как у Linear», «эстетика Notion». НЕ стиль по URL → brand-extractor.4---56# DESIGN.md brands — банк дизайн-систем брендов78Reference-пак поверх открытого репо **[VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md)** (MIT). Не хранит копии брендов локально — тянет актуальный `DESIGN.md` по требованию. Комплементарен нашим дизайн-скиллам, ничего не заменяет.910## Что такое DESIGN.md1112Концепт **Google Stitch**: один plain-text markdown-файл в корне проекта, который ИИ-агент читает и по нему генерит консистентный UI. Без тулинга, без токен-JSON — просто разметка, которую понимает и человек, и модель. Репо awesome-design-md — курируемый банк таких файлов, снятых с сайтов известных брендов.1314**Когда это нужно нам:** пользователь говорит «сделай в стиле Stripe / как у Linear / эстетика Notion». Раньше выбор был: (а) угадать палитру, (б) `brand-extractor` скрейпит живой сайт (риск anti-bot). Теперь для популярных брендов есть готовая, вычищенная дизайн-система — забрать и применить.1516## Как достать DESIGN.md конкретного бренда1718Файлы лежат по схеме `design-md/<brand>/DESIGN.md`. Забирай raw-версию через WebFetch:1920```21https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md22```2324Примеры (проверенные пути): `.../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`.2526**Гоча — имя папки ≠ всегда чистое имя бренда.** Некоторые с доменом/суффиксом: `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.2728## Каталог брендов (73+, на момент аудита 100+ папок — репо растёт)2930| Категория | Бренды (имена ≈ папки) |31|---|---|32| **AI / LLM** | claude, cohere, elevenlabs, mistral.ai, minimax, together.ai, x.ai, ollama, replicate, runway ml, composio, opencode.ai |33| **Dev-tools** | cursor, vercel, warp, raycast, expo, lovable, resend, sentry, hashicorp, voltagent |34| **Backend / DB** | supabase, mongodb, posthog, sanity, clickhouse |35| **SaaS / Productivity** | linear.app, notion, cal, zapier, airtable, intercom, slack, superhuman, clay, miro |36| **Design / Content** | figma, framer, webflow, pinterest, theverge, wired |37| **Fintech / Crypto** | stripe, wise, coinbase, binance, kraken, mastercard, revolut |38| **Consumer / E-com** | airbnb, shopify, starbucks, spotify, uber, nike, meta |39| **Big Tech / Hardware** | apple, ibm, nvidia, hp, spacex, playstation, vodafone |40| **Automotive** | tesla, ferrari, bmw, bmw-m, lamborghini, bugatti, renault |41| **Ретро-веб (стилизация)** | dell-1996, nintendo-2001 |4243Список неполный и меняется — источник истины всегда листинг репо. Нет нужного бренда — см. «Брендов нет в банке» ниже.4445## Структура файла DESIGN.md (схема Stitch, 9 блоков)4647Заголовки чуть плавают от бренда к бренду, но каркас один (пример со Stripe):48491. **Overview** — визуальная тема, атмосфера, философия502. **Colors** — семантические роли + hex (Brand & Accent / Surface / Text / Semantic)513. **Typography** — семейства, иерархия, принципы, заметка о шрифтах-заменах524. **Layout** — spacing-шкала, grid/контейнер, философия воздуха535. **Elevation & Depth** — тени, слои поверхностей (обычно таблица)546. **Shapes** — border-radius шкала, геометрия фото/иллюстраций557. **Components** — buttons, cards, inputs/forms, nav, pills/tags, signature-компоненты (со стейтами)568. **Do's and Don'ts** — гардрейлы579. **Responsive Behavior** — брейкпоинты, тач-таргеты, стратегия схлопывания, поведение картинок58 (+ иногда финальный **Iteration / Agent Prompt Guide** — краткая шпаргалка цветов для промпта агенту)5960Формат цвета внутри — семантическое имя + токен + hex + где применять, напр.:61`**Indigo** (`{colors.primary}` — `#533afd`): signature CTA. Filled-pill button, link emphasis, gradient anchor.`6263## Как применять (workflow)64651. Пользователь назвал бренд-референс → определи имя папки (листинг репо при сомнении).662. WebFetch raw `DESIGN.md` → получил дизайн-систему.673. Отдай её как контекст в `design-orchestrator` / нужный артефакт-скилл (`slides`, `interactive-prototype`, `website-creation`). Дальше весь артефакт держи в этой системе — палитра, типографика, радиусы, тени берутся из файла, не выдумываются.684. Нужен один файл в корень проекта для другого ИИ-агента (Cursor/Stitch/Copilot) — просто положи `DESIGN.md` туда.6970## Брендов нет в банке / нужен свой7172- **Живой сайт по URL** → `brand-extractor` (Playwright, вытащит цвета/шрифты/копирайт), результат оформи по шаблону `references/design-md-template.md`.73- **С нуля / свой продукт** → `design-system-create` + `color-system-builder` + `type-scale`, финал — в тот же шаблон DESIGN.md.74- Авторский DESIGN.md пиши по `references/design-md-template.md` (9 блоков Stitch).7576## Этика / границы7778- Репо MIT, файлы существуют для генерации консистентного UI и НЕ передают права на чужую айдентику. Не выдавай брендированную систему чужого продукта за свою — см. `content-policy`.79- Для НАШЕГО бренда (Anthropic look-and-feel) — `brand-guidelines`, не этот скилл.80- Требует только сетевого доступа к github/raw.githubusercontent — прокси/ключи не нужны.8182## Соседние скиллы8384`design-orchestrator` (диспетчер) · `brand-extractor` (скрейп живого сайта) · `design-system-create` (генерация с нуля) · `color-system-builder` / `type-scale` (сборка палитры/шкалы) · `frontend-design` (выбор эстетики когда системы нет) · `brand-guidelines` (Anthropic).
JHamidun