ochenstarik-ui 5c3565120e feat(skills): A49 subagents layout, skills tab, SkillDoctor, and Obsidian memory integration

2026-08-31 18:19:01 +07:00

29 KiB

Raw Permalink Blame History

Frontend Design Skill

Модульный скилл для ИИ-агентов, создающих веб-сайты и интерфейсы. Результат, который читается как работа старшего дизайнера — не как вывод LLM.

7 842 строки. 18 файлов. Ноль фиолетово-синих градиентов.

English version →

🎯 Проблема

Попросите любого ИИ-агента сделать лендинг. Вы получите:

🔮 Hero-секцию с фиолетово-синим градиентом
🎯 Центрированный заголовок, две CTA-кнопки, лого-бар «Trusted by 10,000+»
📦 Три одинаковые карточки фич в ряд, повторённые три раза
🎠 Карусель отзывов со стоковыми фотографиями
💬 Lorem-ipsum-уровень копирайтинга, который ничего не говорит

Это AI slop — визуальный маркер «это сгенерировано LLM». Это то, что выдаёт каждый ИИ по умолчанию, потому что это то, что каждый ИИ видел десять тысяч раз в обучающих данных. Это гравитационный центр генеративного вывода, и всё должно активно с ним бороться.

Скиллы в этом репозитории борются с ним.

✨ Решение

7 842 строки · 18 файлов · 22 подстиля · 0 фиолетово-синих градиентов

Файл	Строк	Что внутри
SKILL.md	212	Ядро: принципы, процесс, идентичность. Agent Skills frontmatter
aesthetics.md	320	7 высокоуровневых эстетик
minimal-ui-patterns.md	924	11 подстилей SaaS (Linear, Stripe, Vercel, ...)
editorial-patterns.md	476	6 editorial подстилей (Pentagram, NYT Mag, ...)
brutalist-patterns.md	437	5 brutalist подстилей (Bandcamp, Working Format, ...)
product-ui-patterns.md	1434	10 компонентов Linear-style с кодом
typography.md	351	Шрифты, шкала, пары, анти-паттерны
color.md	303	Токены, палитры, контраст, dark mode
layout.md	295	Контейнеры, spacing-шкала, сетки, адаптивность
anti-patterns.md	376	28 AI-slop паттернов с до/после
components.md	420	Кнопки, формы, карточки, состояния
motion.md	293	Анимация, easing, accessibility
content.md	272	Заголовки, копирайтинг, микрокопи
accessibility.md	269	Семантика, клавиатура, фокус, ARIA, тест-протокол
performance.md	210	Бюджеты, шрифты, картинки, Core Web Vitals
imagery.md	226	CSS/SVG-композиции, фото-арт-дирекшн, иконки, favicon/og
code-style.md	850	Качество кода, без GPT-slop, комментарии
checklist.md	174	Pre-ship QA

📸 Скриншоты примеров

Шесть сайтов, построенных с применением этих скиллов — от тёплой типографики до холодного dark SaaS, швейцарской сетки и сырого брутализма.

Демонстрационные превью (стилевые композиции)

Два первых — дизайн-композиции, демонстрирующие стили:

Пример 1: Дизайн-студия Halftone (Editorial / Warm / Light)

Создано с применением aesthetics.md §2 (Editorial) + editorial-patterns.md (Pentagram archive).

Что применено из скиллов:

Warm paper #FAF6F0 + ink #1A1714 + editorial red #C8281C (color.md)
Fraunces display + Inter text + JetBrains Mono kickers (typography.md)
Асимметричный hero, не centered-everything (anti-patterns.md §6)
Hero headline clamp(3.5rem, 9vw, 8.5rem) — массивный, не дефолтный (typography.md)
6 работ как magazine index, не «3-card grid» (anti-patterns.md §12)
Конкретные имена: «Mira Almeida», «Q3 2026», «14,000 shelves» (content.md)
Никаких emoji, никаких стоковых фото (anti-patterns.md §10)
Footer с colophon — реальный editorial паттерн (aesthetics.md §2)

Пример 2: SaaS-продукт Tempo (Refined Minimal / Dark / Linear-style)

Создано с применением minimal-ui-patterns.md §1 (Linear).

Что применено из скиллов:

Dark surface #0A0A0A + ink #F5F5F5 + Linear purple #7B85E6 (color.md §Dark Mode)
Не pure black, не pure white — скилл явно запрещает (color.md)
Accent purple слегка светлее в dark mode (color.md)
Асимметричный hero: текст слева, dashboard справа (anti-patterns.md §6)
Hero headline делает claim, не «Welcome to Tempo» (content.md)
Dashboard mockup в CSS/SVG — без стоковых скриншотов (anti-patterns.md §10)
Реальные метрики: P95 latency, конкретные commits с hash + impact (content.md)
3 фичи asymmetric: metrics / replay / install — три разных формата (anti-patterns.md §11/12)
Pricing: 2 честных tier'а, не 3 с middle highlighted (anti-patterns.md §13)
Footer с build info: v2.4.7 · build a3f9c2 · uptime 99.98% (aesthetics.md §6)

Рабочие примеры (готовые single-file сайты)

Четыре полноценных сайта в папке examples/. Каждый — single HTML файл с встроенным CSS и минимальным JS. Открывается в любом браузере без сборки.

#	Файл	Стиль	Применённые скиллы
1	`example-magazine.html`	Editorial (NYT Magazine)	`editorial-patterns.md` + `typography.md` + `color.md`
2	`example-saas.html`	Refined Minimal dark (Linear)	`minimal-ui-patterns.md` + `product-ui-patterns.md`
3	`example-brutalist.html`	Brutalist (Working Format)	`brutalist-patterns.md` + `typography.md`
4	`example-swiss.html`	Swiss (Müller-Brockmann)	`aesthetics.md` §3 + `layout.md` + `accessibility.md`

Пример 3: Литературный журнал The Common Review (Editorial)

Квартальный журнал эссе, критики и писем. Issue 14, Winter 2026, тема номера — «On Repair».

Что применено из скиллов:

✅ Source Serif 4 throughout (display + body — одна семья) (typography.md)
✅ JetBrains Mono для metadata (issue numbers, page numbers, dates) (typography.md)
✅ B/W minimal + editorial red #C8281C accent (color.md)
✅ Асимметричный hero с SVG cover-art «after Ruskin» (anti-patterns.md §10)
✅ Drop cap на lede параграфе — настоящий editorial паттерн (editorial-patterns.md §3)
✅ Pull quote с правилами сверху/снизу (editorial-patterns.md §3)
✅ Section markers (§01, §02, §03) с правилами (editorial-patterns.md §1)
✅ Real-feeling content: «Marta Bellucci spent three months with one of the youngest, who is sixty-three» (content.md)
✅ Colophon в footer (editorial-patterns.md §1)

Пример 4: Feature flag система Latch (SaaS / Linear-style)

Developer tool для product teams. Sub-стиль — Linear.

Что применено из скиллов:

✅ Dark surface #0A0A0B + ink #F4F4F5 (НЕ pure black/white — color.md явно запрещает)
✅ Mint accent #6EE7B7 — использован <10% пикселей (color.md §"How to Use the Accent")
✅ Hero asymmetric: текст слева, dashboard справа (anti-patterns.md §6)
✅ Hero headline: «Feature flags that don't get in the way.» — конкретный claim (content.md)
✅ Dashboard mockup в CSS-only: panel chrome, segmented control, flag rows с toggle (product-ui-patterns.md §1, §6)
✅ 3 фичи asymmetric: install (с code block) / targeting (с viz) / speed (с viz) (anti-patterns.md §11/12)
✅ Pricing: 2 честных tier'а (Hobby + Production) (anti-patterns.md §13)
✅ Footer с build info: v3.2.7 · build 8f4a12 · uptime 99.99% (aesthetics.md §6)
✅ Tabular numerals everywhere (font-variant-numeric) (typography.md)
✅ JavaScript: segmented control + interactive toggle (components.md)

Пример 5: Инди-лейбл Constellation Records (Brutalist)

Independent record label из Монреаля. Sub-стиль — Working Format + Bandcamp.

Что применено из скиллов:

✅ Marquee с announcements (60s loop, respects prefers-reduced-motion) (motion.md)
✅ Pure black #0A0A0A + warm cream #F4F1EB + electric red #FF2400 (brutalist-patterns.md §2)
✅ Sharp corners everywhere (border-radius: 0) (brutalist-patterns.md §"Anti-patterns")
✅ Hero с massive display type, italic accent в красном (brutalist-patterns.md §"Hallmarks")
✅ Hero meta column в inverted color (ink background, surface text) (brutalist-patterns.md §2)
✅ Album covers как CSS-only abstract compositions (concentric circles, squares) (anti-patterns.md §10)
✅ Catalog: 8 релизов, hover shifts padding + title color (components.md)
✅ Manifesto section с большой typography, italic emphasis в accent (editorial-patterns.md §1 + brutalist merge)
✅ Tour dates с status indicators (ON SALE / SOLD OUT) (components.md §"Status indicators")
✅ Footer в inverted color, маркеры в accent color (brutalist-patterns.md §2)

Пример 6: Выставка Ordnung в Haus der Form (Swiss)

Музейная выставка швейцарского графдизайна 1950–1980. Sub-стиль — Müller-Brockmann / International Typographic.

Что применено из скиллов:

✅ Ноль JavaScript — чистые HTML + CSS (performance.md §"JavaScript — Ship None If You Can")
✅ Один гротеск Archivo throughout + IBM Plex Mono для metadata (aesthetics.md §3, typography.md)
✅ Hero меньше ожидаемого — clamp(2.75rem, 6vw, 4.5rem), швейцарская сдержанность (aesthetics.md §3)
✅ Type as image: гигантские «1950→1980» с tabular-nums как визуальный якорь (typography.md §Numerals)
✅ White/pure black/один красный #D62828 — «Surface: white or black, nothing in between» (aesthetics.md §3)
✅ Meta-column паттерн 200px + 1fr во всех секциях (layout.md §"The meta-column pattern")
✅ Кнопок нет, hover у таблицы — инверсия: чёрный фон, белый текст, красный номер (layout.md, components.md)
✅ Реальный каталог: Müller-Brockmann «Beethoven» 1955, Neue Grafik 1–46, Ruder «Typographie» 1967 (content.md)
✅ Skip-link, semantic таблица с caption, :focus-visible, prefers-reduced-motion (accessibility.md)
✅ Карта на CSS grid-artifact вместо стоковой карты (imagery.md §"The vocabulary")

🚀 Быстрый старт

1. Клонировать

git clone https://github.com/AkyRayy/Frontend-Design-SKILLS-for-AI.git
cd Frontend-Design-SKILLS-for-AI

2. Положить в контекст агента

Зависит от платформы:

Платформа	Куда положить
Claude Code / Cursor	`.claude/skills/frontend-design/` — `SKILL.md` содержит Agent Skills frontmatter (`name` + `description`), так что скилл подхватывается автоматически
Continue	`.continue/skills/frontend-design/`
Cline / Roo Code	`.roo/skills/frontend-design/`
Custom agent	Скопировать нужные `.md` файлы в system prompt

3. Использовать

[контекст: SKILL.md + aesthetics.md + minimal-ui-patterns.md]

Пользователь: Сделай мне лендинг для SaaS-стартапа в сфере observability.

Агент: [читает SKILL.md, выбирает эстетику "Refined Minimal" → под-стиль "Linear"]
       [определяет job страницы]
       [строит токен-систему из color.md]
       [пишет типографику из typography.md]
       [избегает 28 паттернов из anti-patterns.md]
       [пишет код в стиле code-style.md]
       → выдаёт дизайн, который читается как работа старшего дизайнера

📘 Гайд по использованию

Шаг 0 — Перед началом

Прочитайте SKILL.md полностью. Это ядро. Всё остальное — детали.

Запомните три вопроса, которые агент должен задать себе на каждом этапе:

Какая работа этой страницы? (одно предложение)
В какой я эстетике? (одна, не смесь)
Что должно доминировать? (один элемент, не пять)

Шаг 1 — Определите работу страницы

Без этого шага всё остальное — slop. Спросите себя: зачем пользователь сюда пришёл и что должен сделать?

❌ "Лендинг для нашего SaaS"          → непонятно что делать
✅ "Убедить frontend engineer попробовать продукт → получить email"
✅ "Получить pre-orders для книги за $40"
✅ "Собрать заявки на работу в студию"

Запишите одно предложение. Все секции страницы должны служить этой работе.

Шаг 2 — Выберите эстетику

Откройте aesthetics.md. Семь высокоуровневых эстетик:

Эстетика	Когда выбирать
Refined Minimal	SaaS, fintech, dev tools, B2B
Editorial / Magazine	Publishing, premium content, манифесты
Swiss / Typographic	Galleries, museums, архивы
Brutalist / Raw	Music, fashion, art, counterculture
Soft / Hand-crafted	Lifestyle, hospitality, indie SaaS
Technical / Mono	Dev tools, API, документация
Playful / Geometric	Consumer, kids, gaming, creative

Зафиксируйте выбор. Не смешивайте два.

Шаг 3 — Углубитесь в подстиль

Откройте соответствующий файл подстилей:

Refined Minimal → minimal-ui-patterns.md (11 подстилей)
Editorial → editorial-patterns.md (6 подстилей)
Brutalist → brutalist-patterns.md (5 подстилей)

Выберите конкретный подстиль (Linear, Stripe, Vercel, NYT Magazine, Bandcamp, ...) и зафиксируйте его. Не смешивайте два.

Шаг 4 — Соберите систему токенов

Откройте color.md и typography.md. Установите:

:root {
  /* Палитра из color.md, конкретные hex */
  --surface: ...
  --ink: ...
  --accent: ...

  /* Типографика из typography.md */
  --font-display: ...
  --font-text: ...
  --font-mono: ...

  /* Шкала 1.25 или 1.333 */
  --text-base: 1rem;
  --text-2xl: 1.953rem;
  /* ... */
}

Никаких raw hex в компонентах. Все цвета через токены.

Шаг 4½ — Задайте скелет страницы

Откройте layout.md. Контейнер (1200–1280px), spacing-шкала (4/8/12/16/24/32/48/64/96/128), асимметричные сплиты (5/7, 3/9 — не равные трети), мета-колонка, брейкпоинты 480/768/1024. Сетка и отступы решаются до первой компоненты.

Шаг 5 — Избегайте slop

Откройте anti-patterns.md. 28 конкретных паттернов, которые нужно отвергнуть. Каждый с примером «до» и «после».

Перед тем как писать очередную секцию, проверьте: не повторяю ли я один из этих 28 паттернов?

Шаг 6 — Стройте компоненты правильно

Что строим	Где правила
Кнопки, формы, навигация	components.md
Product chrome (sidebar, command palette)	product-ui-patterns.md
Иконки, изображения, favicon/og	imagery.md
Анимации	motion.md

Каждый компонент должен иметь 8 состояний: default, hover, focus-visible, active, disabled, loading, empty, error. Без них дизайн ломается на границах.

Шаг 7 — Пишите конкретный контент

Откройте content.md. Главные правила:

❌ Slop	✅ Конкретно
«Welcome to [Brand]»	«Design that doesn't need explaining.»
«Empowering businesses to thrive»	«Ship features 3x faster»
«Trusted by 10,000+»	«Used by Linear, Vercel, Stripe»
«Lorem ipsum»	Реальные имена, даты, цифры

Шаг 8 — Пишите качественный код

Откройте code-style.md. Это скилл про код — без GPT-slop в комментариях, без раздутых функций, без any, без магических чисел.

Главное правило: имена — это дизайн. Потратьте на имя больше времени, чем на саму строку кода.

Шаг 8½ — Доступность и скорость

Откройте accessibility.md и performance.md.

A11y: семантика, клавиатурный проход, :focus-visible, ARIA-минимализм, контраст AA — 15-минутный тест-протокол перед шипом.
Perf: бюджеты (LCP < 2.5s, CLS < 0.1, ≤ 4 font-файла, ноль блокирующего JS). Страница на HTML+CSS без JS — норма, не подвиг.

Шаг 9 — Прогоните чеклист

Откройте checklist.md. 70+ пунктов по типографике, цвету, layout, компонентам, motion, accessibility, edge cases.

Финальные тесты:

Would Massimo Vignelli approve?
Could you ship this at Linear / Pentagram / NYT?
Would you screenshot this for design inspiration?
Would you be proud to put your name on this?

Если 6+ ответов «нет» — продолжайте итерировать.

🎯 Стратегии загрузки

Минимальная загрузка (быстро, минимум токенов)

1. SKILL.md           ← ядро
2. aesthetics.md      ← выбор эстетики
3. checklist.md       ← перед релизом

Стандартная загрузка (рекомендуется)

1. SKILL.md
2. aesthetics.md
3. typography.md
4. color.md
5. layout.md
6. checklist.md

B2B SaaS (Linear / Stripe / Vercel)

1. SKILL.md
2. minimal-ui-patterns.md   ← вместо aesthetics.md §1
3. typography.md
4. color.md
5. layout.md
6. product-ui-patterns.md   ← для sidebar, command palette и т.д.
7. accessibility.md         ← интерактивный продукт поднимает планку a11y
8. checklist.md

Editorial (Pentagram / NYT Mag)

1. SKILL.md
2. editorial-patterns.md    ← вместо aesthetics.md §2
3. typography.md
4. color.md
5. layout.md
6. checklist.md

Brutalist (Bandcamp / Working Format)

1. SKILL.md
2. brutalist-patterns.md    ← вместо aesthetics.md §4
3. typography.md
4. checklist.md

Продукт / интерактивное приложение

1. SKILL.md
2. minimal-ui-patterns.md
3. typography.md + color.md + layout.md
4. product-ui-patterns.md   ← chrome: sidebar, ⌘K, list items, modals
5. accessibility.md         ← фокус-трапы, ARIA, клавиатура
6. performance.md           ← INP/CLS под нагрузкой
7. checklist.md

Полная загрузка (глубокая работа)

Все 18 файлов. Используется когда проект требует максимальной проработки.

💎 Качество кода

Кроме дизайна, репозиторий включает code-style.md — скилл для качества кода, который ИИ-агенты пишут.

Главные принципы:

Принцип	Антипаттерн
Имена — это дизайн	`processData`, `doSomething`, `result` — всё это сломано
Комментарии объясняют ПОЧЕМУ, не ЧТО	`// This function adds two numbers` над `add(a, b)`
Ошибки — это значения	`catch (e) {}` молчаливо проглатывает ошибки
Маленькие функции	Функция на 200 строк с 8 параметрами
Никакого `any`	TypeScript лжёт сам себе
Удаляй первым	Прежде чем добавить код, спроси — можно ли удалить

GPT-slop в коде (catalog из 30+ паттернов):

Комментарии «This function does X» (код уже это делает)
Пустые catch {}
any, as any, @ts-ignore без обоснования
Магические числа (0.5, 3600, 100) без имён
Функции с булевыми флагами: doThing(x, true, false)
Зависимости для одной функции

Полный каталог и правила → code-style.md

👥 Кто это использует

Разработчики ИИ-агентов — чтобы поднять качество выхода
Дизайнеры, использующие ИИ — чтобы перестать чинить одни и те же 5 паттернов
Разработчики без дизайнера — чтобы AI-генерируемые сайты выглядели достойно
Стартаперы, которые шлют быстро — чтобы не отправлять уродливое

Это не для: дизайнеров, которые уже делают отличную работу — вы не нуждаетесь. Это для всех, кто работает downstream от LLM и хочет улучшить результат.

🚫 Что это НЕ

❌ Не Figma-плагин. Это markdown-скилл для ИИ-агентов, не дизайн-инструмент для людей.
❌ Не CSS-фреймворк. Не производит код; формирует код, который пишет агент.
❌ Не замена вкусу. Скилл поднимает пол. Потолок — всё ещё ваш.
❌ Не магия. Скилл — это инструкции. Если агент их не следует, вывод всё равно slop.

🤝 Contributing

PRы приветствуются. Особенно:

Новые anti-patterns с примерами до/после (формат в CONTRIBUTING.md)
Новые подстили в minimal-ui-patterns.md / editorial-patterns.md / brutalist-patterns.md
Новые компоненты в product-ui-patterns.md (HTML + CSS + все состояния)
Переводы — репозиторий сейчас English-first, но Russian (этот README), Chinese, Spanish, Japanese — всё приветствуется

Что мы НЕ принимаем: общие советы («используйте whitespace»), паттерны без примеров, маркетинговый язык.

Подробности: CONTRIBUTING.md

📜 Лицензия

MIT — используйте, изменяйте, распространяйте. Если отправите с этим что-то хорошее — это и есть благодарность.

🙏 Credits

Паттерны взяты из работ:

Продуктовый дизайн: Linear, Stripe, Vercel, Arc, Cron, Mercury, Pitch, Height, Figma, Notion, Sublime

Студийная работа: Pentagram, &Walsh, DIA Studio, Manual, Working Format, Locomotive, Bureau Mirko Borsche, Studio Dumbar

Editorial: NYT Magazine, Bloomberg Businessweek, It's Nice That, Wallpaper*, Apartamento, The Gentlewoman, Kinfolk

Swiss / International Typographic: Müller-Brockmann, Massimo Vignelli, Jan Tschichold, Wim Crouwel, Erik Spiekermann

Type design: Stefan Sagmeister, Paula Scher, Tibor Kalman, Michael Bierut

Если узнаёте паттерны — это и есть цель. Если нет — прочитайте референсы, потом прочитайте код.

Если дизайн хороший, вы его не замечаете. Если плохой — замечаете сразу.

Ваша работа — первое. Slop — второе.

29 KiB Raw Permalink Blame History Unescape Escape

Frontend Design Skill

📖 Содержание

🎯 Проблема

✨ Решение

📸 Скриншоты примеров

Демонстрационные превью (стилевые композиции)

Пример 1: Дизайн-студия Halftone (Editorial / Warm / Light)

Пример 2: SaaS-продукт Tempo (Refined Minimal / Dark / Linear-style)

Рабочие примеры (готовые single-file сайты)

Пример 3: Литературный журнал The Common Review (Editorial)

Пример 4: Feature flag система Latch (SaaS / Linear-style)

Пример 5: Инди-лейбл Constellation Records (Brutalist)

Пример 6: Выставка Ordnung в Haus der Form (Swiss)

🚀 Быстрый старт

1. Клонировать

2. Положить в контекст агента

3. Использовать

📘 Гайд по использованию

Шаг 0 — Перед началом

Шаг 1 — Определите работу страницы

Шаг 2 — Выберите эстетику

Шаг 3 — Углубитесь в подстиль

Шаг 4 — Соберите систему токенов

Шаг 4½ — Задайте скелет страницы

Шаг 5 — Избегайте slop

Шаг 6 — Стройте компоненты правильно

Шаг 7 — Пишите конкретный контент

Шаг 8 — Пишите качественный код

Шаг 8½ — Доступность и скорость

Шаг 9 — Прогоните чеклист

🎯 Стратегии загрузки

Минимальная загрузка (быстро, минимум токенов)

Стандартная загрузка (рекомендуется)

B2B SaaS (Linear / Stripe / Vercel)

Editorial (Pentagram / NYT Mag)

Brutalist (Bandcamp / Working Format)

Продукт / интерактивное приложение

Полная загрузка (глубокая работа)

💎 Качество кода

👥 Кто это использует

🚫 Что это НЕ

🤝 Contributing

📜 Лицензия

🙏 Credits

29 KiB

Raw Permalink Blame History