AI-дизайн без slop

Архивный неотредактированный исходник после извлечения текста из PDF. Это не учебная страница и не проверенная инструкция.

Страница 1

ГАЙД ДЛЯ БИЗНЕСА · ИЮЛЬ 2026

AI-дизайн без слопа. 22 инструмента и ресурса: 15

основных инструментов, 3 методологии и 4 источника вкуса — плюс 3 готовых стека.

Актуально на июль 2026

Один и тот же hero. Градиентный blob слева. Inter везде. Три карточки. Кнопка по центру. Так выглядит сайт, который сгенерировали Claude, Cursor и Lovable. Это AI-slop. Полный гайд с картой инструментов, первоисточниками методологии, ежедневными источниками вкуса и тремя готовыми стеками — с реальными цифрами, лицензиями и моими настройками с боевых клиентских проектов.

futuraai.ru Telegram @edvardgrishin27

00 · ЗАЧЕМ

AI-slop — почему Claude, Cursor и Lovable генерят один и тот же дизайн?

Откройте подряд десять лендингов, сгенерированных через Claude, Cursor, Lovable, v0. Вы не отличите их друг от друга. Один hero. Градиентный blob слева. Inter везде. Серый текст на белом. Три карточки с равным padding. Кнопка по центру. Тень с радиусом восемь пикселей. Это и есть AI-slop в дизайне 2026 года — и его генерят все модели одинаково. Почему так. Модели учились на медиане миллиона лендингов из интернета. Медиана — это шаблон. Вы пишете «сделай красивый сайт» — модель отдаёт медиану. Это не баг. Это математика. Без skills модель отдаёт slop. Со skills — отдаёт рабочий вариант. Это не про «AI убил дизайнеров» — это про то, что инструмент без правил всегда сваливается в среднее и безликое.

— Эдвард Гришин , Futura AI

Что делать. Заставить модель выбирать визуальное направление до того, как она написала первую строку кода. Brutalist. Editorial. Retro-futuristic. Glassmorphism. Swiss. Bento. «Clean minimal» — это не направление. Это слово, за которым прячется медиана.

Инструменты, которые я разобрал в этом гайде, делают одно из трёх:

Три механики anti-slop:

Запреты. Прямо банят слоповые паттерны на уровне правил. Anthropic Frontend Design Skill блокирует Inter, Roboto, Arial, Space Grotesk прямо в коде skill — это не рекомендация, это блок. Brief до кода. Подсовывают модели спецификацию и дизайн-систему до того, как написана первая строка. DESIGN.md, импорт design tokens, выбор направления из списка. Детерминированные детекторы. Сорок четыре правила Impeccable ловят dated easing, generic shadows, redundant cards. Не «модель сама поймёт» — а правила, которые ловят паттерны.

Страница 2

Banned-паттерны, которые узнаются с первого взгляда

— Эдвард Гришин , Futura AI · июль 2026

01 · КАРТА

Карта 15 инструментов и 3 методологий для AI-дизайна · июль 2026

Я разложил 15 инструментов и 3 первоисточника методологии на 5 категорий по формату: платформы с canvas, skills и плагины для CLI-агентов, standalone-шаблоны, библиотеки и компоненты, методологии и книги. Каждый я установил сам, прогнал на реальном проекте, проверил issue и звёзды на 7 июля 2026. Дальше в гайде — глубокие разборы каждой категории, плюс 4 источника вкуса и 3 готовых стека. Итого в гайде разобрано 22 инструмента и ресурса (15 основных + 3 методологии + 4 источника вкуса) плюс 3 готовых стека.

Зона 1 · Платформы — canvas + AI генерация

Инструменты с собственным canvas, дизайн-системой и handoff в код. Сюда же — OSS-альтернативы Figma.

ИНСТРУМЕНТ ЧТО ДЕЛАЕТ ЗВЁЗДЫ ЛИЦЕНЗИЯ

Claude Design Canvas + /design-sync + handoff в Figma/Vercel/Adobe — Closed beta

Open Design (nexu-

io)

Local-ﬁrst OSS-альтернатива, BYOK на 22+ CLI75,9K Apache 2.0

Open-pencil OSS-Figma с AI, открывает .ﬁg, headless CLI 6,7K MIT

SuperDesign Canvas внутри IDE — Cursor, Claude Code, VS Code 6,6K Open

source

Open Lovable

(Firecrawl)

Self-hosted OSS-альтернатива Lovable.dev — chat with AI

to build React apps

27,3K MIT

Платформы закрывают петлю «дизайн-система → canvas → код → деплой». Claude Design — флагман с подпиской. Open Design — local-ﬁrst без облака. Open-pencil — для тех, кто работает с .ﬁg от дизайнеров. SuperDesign — для тех, кто не выходит из IDE (репозиторий заморожен, развитие в веб-версии superdesign.dev). Open Lovable — OSS-замена Lovable.dev (того самого из хука) без vendor lock-in. Один hero на всю первую секцию с центрированным заголовком и одной кнопкой по центру — медиана медиан. Градиентный blob слева или сверху — паттерн повторяется у 90% AI-генераций, потому что был у медианного лендинга 2022 года. Inter, Roboto, Arial, Space Grotesk в продакшене — четыре шрифта, которые модель ставит по умолчанию. Три одинаковые карточки с равным padding и одной иконкой сверху — паттерн «фичи продукта в три колонки». Серый текст на белом вместо реальной палитры с semantic accents. Тень с радиусом 8 пикселей на всех элементах — generic shadows. Анимации width и height вместо compositor-friendly transform/opacity — slop в моушене. Центрированный CTA без визуальной иерархии — нет contrast, нет приоритета.

Страница 3

Зона 2 · Skills и плагины — anti-slop для Claude Code

Skills формата SKILL.md от Anthropic — открытый стандарт с lazy loading. Подключаются одной командой через skills.sh или вручную в .claude.

ИНСТРУМЕНТ ЧТО ДЕЛАЕТ ЗВЁЗДЫ /

УСТАНОВКИ ЛИЦЕНЗИЯ

Anthropic Frontend

Design

Базовая линия — банит Inter/Roboto/Arial, заставляет выбирать направление

1 млн+ установокMIT

Impeccable (pbakaus) 23 команды + 44 детерминированных

детектора слопа

44,1K ⭐ / 185K

установок

Apache

2.0

Taste Skill (Leonxlnx) Три крутилки VARIANCE / MOTION / DENSITY59,8K ⭐ MIT

Designer Skills (Owl-

Listener)

239 skills в 33 плагинах — самая большая библиотека

1,7K ⭐ MIT

ux-ui-agent-skills (plugin87) DTCG-токены, WCAG 2.2 AA/AAA автоаудит, 17 skills

442 ⭐ MIT

Skills — это форма знаний с lazy loading. Фронтматтер триггерит загрузку только когда нужно. Без раздувания контекста.

Зона 3 · Standalone-инструменты и шаблоны

Не skill — отдельные шаблоны, marketplace и MCP-серверы. Подключаются вне Claude Code или поверх него.

ИНСТРУМЕНТ ЧТО ДЕЛАЕТ ЗВЁЗДЫ /

ЦЕНА ЛИЦЕНЗИЯ

AI Website Cloner

(JCodesMore)

Через Chrome клонирует живые сайты, параллельные builder-агенты в git worktrees

26,4K ⭐ MIT

21st.dev Marketplace компонентов + Magic MCP для

Cursor/Windsurf

$8/мес

Builder

Proprietar

Зона 4 · Библиотеки и компоненты — анимации, чарты, TUI

Не AI-инструменты, но без них anti-slop не закрывается. Анимация — это половина слопа. Если её не делать правильно — вернётесь к медиане.

ИНСТРУМЕНТ ЧТО ДЕЛАЕТ ЗВЁЗДЫ /

ЦЕНА ЛИЦЕНЗИЯ

Motion (motion.dev) Фундамент анимаций для React/Vue/JS —

ребрендинг Framer Motion

32,7K ⭐ MIT + Motion+

£299

Transitions.dev (Jakub

Antalik)

21 продакшен-транзиция с prefers-reduced- motion из коробки

Claude Skill —

termcn (Shadcn Labs) terminal UI компоненты на Ink + OpenTUI— Open source

Страница 4

Зона 5 · Методологии и книги — первоисточники

То, на чём построены все skills. Без понимания методологии skills остаются «магией, которая иногда работает».

ИСТОЧНИК ЧТО ВНУТРИ ЦИФРЫ ЦЕНА

Refactoring UI (Wathan &

Schoger)

Канон-методология: иерархия, цвет, тени, spacing30K+

копий $99 / $149

Anthropic Skills

документация Открытый стандарт SKILL.md, lazy loading, agentskills.io

— Free

awesome-design-md

(VoltAgent)

73 готовых DESIGN.md из реальных брендов —

Claude, Stripe, Apple, Figma, Tesla

96,5K ⭐ MIT

Три первоисточника методологии. Refactoring UI — теория иерархии и палитры. Anthropic Skills docs — формат знаний с lazy loading. awesome-design-md — как должен выглядеть brief, чтобы AI строил, а не угадывал.

02 · ПЛАТФОРМЫ

Claude Design + Open Design — подробный разбор

Две платформы, две философии. Claude Design — закрытая бета внутри подписки. Open Design — local-ﬁrst OSS под Apache 2.0. Самое интересное — обе выпустили мажорный апдейт 17 июня 2026. В один день. Это не совпадение.

Claude Design · июньский апдейт 2026

Семнадцатого июня 2026 Anthropic переделали Claude Design. До этого он был мокапом для генерации макетов. После — это первый раз, когда Anthropic закрывает петлю «дизайн-система → canvas → код → деплой» внутри одного стека.

Что внутри — 6 пунктов июньского апдейта

1. Слэш-команда /design-sync прямо в Claude Code. Раньше — ручной handoff из дизайна в код. Теперь — одна команда. Дизайн-система подтягивается в Claude Code сама. 2. Импорт дизайн-систем из GitHub-репозитория, файлов или сырых аплоадов. Попадает в design tokens. Не угадывает — читает. 3. Прямое редактирование на canvas. Drag. Resize. Align. Это был главный пробел старого Claude Design. Закрыт. 4. Экспорт в Adobe, Canva, Figma, Lovable, Miro, Replit, Vercel, Wix. Реальный handoff, а не «скопируйте код руками». 5. Снижена стоимость токенов за ход. Общий лимит теперь делится с chat, Claude Code, Cowork. Отдельно не платить. 6. Brand compliance для команд. Enterprise-контроль над визуальным языком.

Wedge-преимущество

Первый раз, когда Anthropic закрывает design-to-code петлю внутри одного стека: дизайн-система → canvas → код → деплой. До июньского апдейта Claude Design был мокапом. Сейчас — рабочий инструмент. Но только внутри Claude.

Минусы

Закрытая бета. Нет публичных API. Нет self-host. Vendor lock-in полный.

Страница 5

У Enterprise по умолчанию выключен. Админ должен включить руками. Output живёт в экосистеме Claude. Без подписки не работает.

Кому подходит / не подходит

ПОДХОДИТ НЕ ПОДХОДИТ

Команды на Claude Pro / Max / Team / Enterprise с дизайн-системой в

GitHub

Вам нужен local-ﬁrst или self-

host

Соло-разработчики, которым нужен handoff в Figma или Vercel Вы не платите за Claude

Внутренние клиенты с требованием brand compliance Вам нужен open source

Вердикт. Открытое видео по апрельскому релизу Claude Design на канале — там полный разбор стартовой версии. Июньский апдейт превратил мокап в рабочий инструмент. Но только для тех, кто внутри подписки.

Open Design (nexu-io) · OSS-альтернатива

Семьдесят одна тысяча пятьсот звёзд. Apache 2.0. Релиз десктоп-версии — семнадцатого июня 2026. В тот же день, что и апдейт Claude Design.

Что внутри — 6 пунктов

1. 259 skills из коробки. Установка через CLI, не через подписку. 2. 142 дизайн-системы как референсы. Не угадывает — выбирает из живых. 3. BYOK — bring your own key — на 22+ CLI-агентах. Claude Code, Cursor, Codex, Aider, всё что есть на рынке. 4. Local-ﬁrst. Работает на ноутбуке без интернета. 5. Свой API-ключ. Платите только за токены, не за подписку. 6. Apache 2.0. Форкаете и поднимаете свой инстанс под клиента — без лицензионных вопросов.

Wedge-преимущество

Не привязан к Claude. Можно гонять через GPT, Gemini, локальные модели. 75,9K звёзд за полгода — валидация комьюнити. Apache 2.0 — форкаете и поднимаете свой инстанс под клиента.

Минусы

UX сырее, чем у Claude Design. Настройка под Codex заняла полчаса. Документация догоняет код. Issue по setup открыты. Brand compliance для команд из коробки нет — придётся писать руками.

Кому подходит / не подходит

ПОДХОДИТ НЕ ПОДХОДИТ

OSS-маньяки с API-ключом Anthropic или OpenAI Нужен «нажал кнопку — заработало»

подход

Те, кто не хочет класть дизайн-систему клиента в чужое

облако

Час настройки — слишком много

Privacy-ﬁrst проекты с requirements на локальный data ﬂowКоманда без CLI-опыта

Страница 6

44,1K ⭐

59,8K ⭐

Вердикт. Правильный контраст к Claude Design. Закрытая платформа против local-ﬁrst. Подписка против BYOK. Я держу оба и переключаюсь по проекту — клиентские проекты с NDA уходят на Open Design, внутренние эксперименты на Claude Design. Почему 17 июня — не совпадение: релиз Open Design десктопа в тот же день, что и Claude Design апдейт — это позиционирование. Open Design прямо заявляет, что они альтернатива. И когда Anthropic делает мажорный шаг — комьюнити получает контраст в тот же день. Это здоровое противостояние, которого не было в дизайн-инструментах до 2026 года.

03 · SKILLS

Skills и плагины — 5 инструментов anti-slop для Claude Code

Skills формата SKILL.md — открытый стандарт Anthropic с lazy loading. Фронтматтер описывает, когда skill подключается. Контекст не раздувается. Это технология, на которой стоят все пять инструментов ниже. Без skills модель отдаёт slop — со skills отдаёт работу.

ФЛАГМАН ANTI-SLOP · #1

Impeccable от Paul Bakaus

Сорок одна тысяча шестьсот звёзд. Сто шестьдесят тысяч установок через skills.sh. Автор — Пол Бакаус, создатель jQuery UI, бывший Google. Seed-раунд от a16z. Не one-man-band — серьёзный заход в anti-slop. Что внутри: 23 команды — /audit , /polish , /critique и другие. И 44 детерминированных детектора. Не «модель сама поймёт» — а правила, которые ловят паттерны: dated easing, redundant cards, generic shadows с радиусом 8, Inter в продакшене, центрированные CTA без иерархии. Wedge: детерминированные правила. Модель не может «забыть» — детектор всегда сработает. /critique даёт честный отзыв, не «выглядит круто». Минус: 23 команды — кривая обучения. За день не освоить. /polish иногда переусердствует — убирает то, что было задумано.

github.com/pbakaus/impeccable · Skill 3.9.1 от 1 июля 2026 · Apache 2.0

САМЫЙ ЗВЁЗДНЫЙ SKILL · #2

Taste Skill от Leon Lin

Пятьдесят одна тысяча триста звёзд. Три с половиной тысячи форков. Запущен 19 февраля 2026. Спонсор — Vercel OSS Program. Главный конкурент Impeccable и самый звёздный anti-slop skill вообще. Что внутри — три крутилки: VARIANCE (насколько сильно ломать сетку — ноль одинаковые карточки, десять bento с разными размерами). MOTION (сколько анимаций — от статики до scrollytelling). DENSITY (плотность — от воздуха до Bloomberg). Wedge: освоить за полчаса. Три параметра — три оси. Понятно, что крутить. MIT и Vercel-спонсорство — не умрёт завтра. Минус: меньше глубины, чем у Impeccable. Детерминированных детекторов нет. Три dials не закрывают типографику — Inter всё равно может пролезть.

github.com/Leonxlnx/taste-skill · MIT · Vercel OSS sponsor

Страница 7

1 млн + установок

1,7K ⭐

442 ⭐

БАЗОВАЯ ЛИНИЯ · #3

Anthropic Frontend Design Skill

Двести семьдесят семь тысяч установок. Базовая линия для всех, кто работает в Claude Code. MIT. Восемь стеков. Пятьдесят стилей. Двадцать одна палитра. Что делает: прямо банит Inter. Roboto. Arial. Space Grotesk. Это в коде skill — не рекомендация, а блок. Заставляет коммититься к визуальному направлению до кода: brutalist, editorial, retro-futuristic, glassmorphism, swiss. Wedge: официальный — Anthropic не бросит. Базовая гигиена бесплатно. 1 млн+ установок — самый большой бенчмарк среди skills вообще. Минус: только базовая линия. Глубокого audit нет. Восемь стеков — для Vue или Svelte отдельно придётся допиливать. Палитры из коробки симпатичные, но узнаваемые.

github.com/anthropics/skills · MIT · официальный от Anthropic

САМАЯ БОЛЬШАЯ БИБЛИОТЕКА · #4

Designer Skills от Marie Claire Dean

Тысяча семьсот звёзд. Двести девяносто форков. Двести тридцать девять skills. Восемьдесят восемь команд. Тридцать три плагина. MIT. Запущен 9 марта 2026. Автор — практикующий дизайнер, не разработчик. Что внутри: самая большая community-библиотека дизайн-skills. Не флагман — marketplace. Wedge: широта покрытия. 239 skills под разные задачи. Автор-дизайнер — вкус, а не инженерия. 33 плагина — подключаешь только нужное. Минус: 1,7K звёзд — нишево. Сообщество маленькое. 239 skills — никто не пользуется всеми. Качество skills неровное.

github.com/Owl-Listener/designer-skills · MIT

ИНЖЕНЕРНЫЙ ПОЛЮС · #5

ux-ui-agent-skills от plugin87 Триста восемьдесят два звезды. Версия v2.4.0 от 22 июня 2026. MIT. 17 skills. 138 дизайн-систем как референсы. 42 компонента. Что внутри: DTCG-токены (Design Tokens Community Group — индустриальный стандарт) и WCAG 2.2 автоаудит на уровнях AA и AAA. Wedge: стандарты вместо самопальных переменных. WCAG автоаудит — accessibility как часть процесса, не отдельный шаг. 138 дизайн-систем как живые референсы. Минус: 442 звезды — маленькое сообщество. 17 skills — узкий набор. Инженерная подача — если не знаете DTCG, придётся сначала прочитать спеку.

github.com/plugin87/ux-ui-agent-skills · MIT · v2.4.0 от 22 июня 2026

Пара skills — главная стратегия: Impeccable + Taste — это не конкуренты. Это пара. Taste для скорости и быстрого старта (три dials — освоить за полчаса). Impeccable для глубины (23 команды и 44 детектора). Я держу оба — они не конфликтуют. Anthropic Frontend Design — базовая линия снизу. ux-ui-agent-skills — для энтерпрайз-проектов с требованиями к accessibility.

04 · STANDALONE

Страница 8

Standalone-инструменты и библиотеки — 7 единиц

Не skills и не платформы. Отдельные шаблоны, marketplace, библиотеки для анимаций и компонентов. Подключаются вне Claude Code или поверх него. Каждый закрывает узкую задачу — клонирование живых сайтов, готовые компоненты, анимация, terminal UI.

#6 · STANDALONE TEMPLATE · 26,4K ⭐ · MIT

AI Website Cloner Template (JCodesMore)

Версия v0.3.1 от 30 марта 2026. Стек: Next.js 16, React 19, Shadcn, Tailwind v4. Через реальный Chrome инспектирует живой сайт. Читает DOM. Читает computed styles. Параллельные builder-агенты в git worktrees собирают секции одновременно. Не парсит HTML вслепую — видит то, что видит пользователь.

github.com/JCodesMore/ai-website-cloner-template

#7 · OSS FIGMA · 6,7K ⭐ · MIT

Open-pencil

Версия v0.13.2 от 30 мая 2026. Стек: Tauri v2, Skia WASM, Yoga, Vue, TypeScript. OSS-Figma с AI внутри. Реально открывает файлы .ﬁg — редкость. Headless CLI. P2P collaboration через WebRTC. Экспорт в JSX и Tailwind. Самый визуально-впечатляющий не-skill инструмент в списке, но пока альфа-территория. github.com/open-pencil/open-pencil

#8 · IDE CANVAS · 6,6K ⭐ · 718 FORKS

SuperDesign

Canvas-based AI design agent. Живёт прямо внутри IDE — Cursor, Claude Code, VS Code. Поддерживает Anthropic, OpenAI, OpenRouter — не залочены на одного провайдера. Есть Chrome-расширение для клонирования живых сайтов прямо в canvas. Альтернативный формат — не skill, а canvas. На июль 2026 GitHub-репозиторий помечен как более не поддерживаемый активно — развитие переехало в веб- версию superdesign.dev. Инструмент рабочий, но обновления идут там. github.com/superdesign-dev/superdesign

#9 · ANIMATION FOUNDATION · 32,7K ⭐ · MIT + MOTION+ £299

Motion (motion.dev)

Ребрендинг Framer Motion. Тридцать тысяч двести звёзд. Импорт через motion/react. Compositor-friendly properties по умолчанию — никаких анимаций width и height. Поддержка React, Vue, vanilla JS. Без Motion любой scrollytelling — это slop. Motion+ за £299 lifetime — спорная модель, но платформа не остановится. motion.dev

#10 · CURATED TRANSITIONS · 21 TRANSITIONS · CLAUDE SKILL

Transitions.dev (Jakub Antalik)

Двадцать одна продакшен-транзиция. С prefers-reduced-motion из коробки — accessibility встроена. Куратор- дизайнер, не AI-генерация — реальный вкус. Узкий, отобранный набор. Доступна как Claude Skill: npx skills add jakubantalik/transitions.dev . Эталон «не AI, а живой вкус». transitions.dev

Страница 9

#13 · MARKETPLACE + MCP · $8/ МЕС BUILDER · #1 PRODUCT OF THE DAY

21st.dev Номер один Product of the Day на Product Hunt 11 января 2025 года. 713 апвоутов. Free-тариф есть. Платный Builder — восемь долларов в месяц (прежний план Pro за $20 закрыт). Marketplace компонентов + Magic MCP для Cursor и Windsurf. Компонент попадает прямо в проект через protocol. Реальные компоненты от дизайнеров, не AI-генерация. 21st.dev

#14 · TERMINAL UI · 648 ★ · INK + OPENTUI

termcn (Shadcn Labs)

Сто с лишним компонентов. Стек Ink + OpenTUI. Это shadcn, но для терминала. Зачем дизайн в терминале — затем, что AI-агенты теперь живут в CLI. И их интерфейс — тоже дизайн. Реальный anti-slop для CLI- инструментов. Узкая ниша, но если строите AI-агента с CLI или dev-tool с TUI — обязательно. github.com/shadcn-labs/termcn

05 · МЕТОДОЛОГИЯ

Refactoring UI + Anthropic Skills — первоисточники

Все skills, которые я разобрал, опираются на два первоисточника: книгу Refactoring UI как методологию дизайна и документацию Anthropic Skills как открытый стандарт формата. Без понимания этих двух источников skills остаются «магией, которая иногда работает».

Refactoring UI (Adam Wathan + Steve Schoger)

Книга от создателей Tailwind Labs. Девяносто девять долларов за Essentials. Сто сорок девять за Complete. Тридцать с лишним тысяч проданных копий. Восемнадцатый год выпуска. Первоисточник методологии, на которой построены три community-skills из этого гайда.

Официальный сайт и покупка книги: refactoringui.com

Что внутри

Иерархия через scale contrast. Не равный размер всех элементов — а целенаправленная разница, которая ведёт глаз. Реальная цветовая палитра. Не «серый-на-белом» с одним accent. Полная палитра с semantic значениями. Тени с интенцией. Не «тень 8px на всём» — а разные тени для разных уровней elevation. Spacing с ритмом. Не равный padding везде — а целевой ритм, который создаёт визуальный поток. Типографика с характером. Не Inter везде — а реальная стратегия pairing. Hover, focus, active states. Часть дизайна, не afterthought.

Wedge

Авторы — Tailwind Labs. Не теория из университета — практика, которая стала каноном. 30K копий за 8 лет — валидация рынком. Прочитал один раз — пользуешься всю карьеру.

Минусы

99 долларов за вход — не каждому подъёмно. 2018 год — некоторые скриншоты устарели. Принципы — нет.

Страница 10

Мой вердикт. Читайте оригинал, а не только порты в skills. Skills — это применение методологии. Книга — это понимание, почему методология работает. Без понимания вы будете применять правила в неправильных местах.

Anthropic Skills документация · открытый стандарт

Документация формата SKILL.md от Anthropic. Открытый стандарт agentskills.io. Не привязан к Claude — работает с любыми CLI-агентами, которые поддерживают skills формат.

Главный механизм — lazy loading

Skills работают, потому что фронтматтер триггерит загрузку только когда нужно — без раздувания контекста. Это не «прочитай все skills сразу», а «прочитай skill только если задача подходит под его описание». В этом и есть отличие от обычных промптов или системных инструкций.

Что даёт открытый стандарт

Совместимость. Skill, написанный для Claude Code, работает в Cursor, Codex, Aider — везде, где поддерживается стандарт. Композиция. Подключаете 5 skills одновременно — они не мешают друг другу. Lazy loading решает конфликты. Версионирование. Skills имеют версии, можно фиксировать конкретную и не зависеть от обновлений. Community-driven. Anthropic не контролирует registry. Любой может опубликовать skill. Мой вердикт. Главный тезис: skill — это не магия, это форма знаний с lazy loading. Скиллы работают, потому что фронтматтер триггерит загрузку только когда нужно. Без раздувания контекста. Со skills модель отдаёт работу. Без skills — slop.

awesome-design-md от VoltAgent · готовые DESIGN.md от Stripe, Apple, Tesla

Готовая подборка 73 файлов DESIGN.md из реальных брендов: Claude, Stripe, Apple, Figma, Tesla. Не каталог ссылок — а готовые шаблоны, которые скачиваешь и кидаешь в Claude Code или Cursor.

ПАРАМЕТР ЗНАЧЕНИЕ

Звёзды / форки 96,5K ⭐ / 11,2K форков

Лицензия MIT

Содержимое 73 реальных DESIGN.md из больших брендов + HTML-каталоги с превью палитр

Структура файловЦветовые палитры, типографика, компоненты, layout-правила, depth-системы

GitHub github.com/VoltAgent/awesome-design-md

Как использовать

Сценарий: скачиваете DESIGN.md от Stripe, кидаете в проект Claude Code, говорите «сделай страницу в стиле Stripe» — модель строит. Не «придумай красивый дизайн», а «вот спецификация бренда, который мне нравится, повтори логику». Это и есть механика brief до кода в чистом виде.

Wedge

94K звёзд — outlier для awesome-list репозитория. Народ голосует за подход «реальный design-spec вместо JSON-схем и Figma-экспортов». Шаблоны от Stripe и Apple — это уровень доступа к design-thinking больших команд, который вы получаете бесплатно.

Страница 11

Минусы

Требует ручного извлечения данных с сайтов брендов — спецификация ограничена тем, что можно собрать публично. Не отслеживает обновления брендов — DESIGN.md от Apple 2026 года через год устареет. Мой вердикт. Это третий первоисточник методологии — после Refactoring UI (книга) и Anthropic Skills docs (формат). awesome-design-md показывает, как именно brief должен выглядеть, чтобы AI строил а не угадывал. Без него skills работают на 60%, с ним — на 95%.

06 · СТЕКИ

Стек 1 · Соло-фронтендер на Claude Code

Anthropic Frontend Design Skill как база — установить и забыть. Поверх — Impeccable для audit и polish. Motion для анимаций — компонентов и переходов. Книга Refactoring UI на столе как настольная. Почему именно этот стек: вы один. Времени на ручную сборку дизайн-системы нет. Anthropic frontend-design даёт базовую гигиену бесплатно. Impeccable ловит то, что вы пропустите. Motion закрывает анимации без скатывания в width/height. Refactoring UI — фундамент, на который всё опирается.

Стек 2 · Команда на Claude Pro / Max / Team / Enterprise

Claude Design с июньским апдейтом 2026. /design-sync для импорта дизайн-системы. Brand compliance для команды. Поверх — Impeccable для ревью каждого мерж-реквеста. Transitions.dev для переходов как anti- slop эталон. Почему именно этот стек: у команды уже есть дизайн-система в GitHub. Claude Design её читает, не угадывает. Brand compliance работает на уровне платформы. Impeccable ловит slop в PR до того, как он попал в main. Transitions.dev даёт 21 транзицию от живого дизайнера — не AI-генерация.

Стек 3 · OSS-маньяк / privacy-ﬁrst

Open Design от nexu-io — local-ﬁrst, на ноутбуке без интернета. Taste Skill с тремя крутилками VARIANCE / MOTION / DENSITY. ux-ui-agent-skills с DTCG-токенами и WCAG 2.2 — для проектов с требованиями accessibility. BYOK везде — свой API-ключ. Почему именно этот стек: у вас NDA с клиентом. Дизайн-систему нельзя класть в чужое облако. Open Design работает локально. Taste Skill даёт быстрый старт без 23 команд. ux-ui-agent-skills закрывает энтерпрайз-требования по accessibility. Платите только за токены, не за подписку. Главная мысль трёх стеков: skill — не магия. Это форма знаний с lazy loading. Skills работают, потому что фронтматтер тригерит загрузку только когда нужно — без раздувания контекста. Без skills модель отдаёт slop. Со skills — отдаёт работу. Я это видел и в Маркете, и на клиентских проектах.

07 · АЛЬТЕРНАТИВЫ И OSS- ЗАМЕНЫ

Страница 12

OSS-альтернативы платным платформам

Если основные платформы не подходят по цене, vendor lock-in или privacy — есть достойные open-source альтернативы. Self-hosted, MIT-лицензия, встраиваются в pipeline.

Open Lovable

Open-source альтернатива Lovable.dev — того самого инструмента, который в хук-сегменте видео генерил одинаковые сайты с Claude и Cursor. Команда Firecrawl сделала свой self-hosted клон.

ПАРАМЕТР ЗНАЧЕНИЕ

Звёзд / форков 27.2K ⭐ / 5.2K форков

Лицензия MIT

Стек Next.js + React + TypeScript (94.9%)

Что делает Chat with AI to build React apps instantly — генерация React-приложений через AI- диалог

Главный wedge Self-hosted, встраивается в свой pipeline, без облака

Кто стоит за

проектом

Команда Firecrawl (известны по open-source web-scraping)

GitHub github.com/ﬁrecrawl/open-lovable

Когда брать: вам нужна Lovable-логика, но без подписки и без отправки кода клиента в чужое облако. Или вы хотите модифицировать саму платформу под свой workﬂow.

08 · ТРЕНИРОВКА ВКУСА

Anti-slop источники — где тренировать глаз ежедневно

Skills и плагины ловят слоп-паттерны автоматически. Но настоящая защита от слопа — насмотренность. Чем больше хороших дизайнов вы видите ежедневно, тем быстрее замечаете шаблонность в своих и AI- генерированных макетах. Три источника для ежедневной насмотренности — и четвёртый, из которого дизайн- вкус можно отдать прямо в руки AI. recent.design Ежедневная подборка лучшего недавнего дизайна с разных площадок. Не один автор-куратор, а агрегация — поэтому шире охват направлений. Как использовать: 5 минут с утренним кофе. Смотрите 10-15 свежих работ, отмечайте что цепляет — это и есть тренировка вкуса. Через месяц сами начнёте замечать AI-slop в чужих проектах за 2 секунды. recent.design bestdesignsonx.com Почасовые подборки сильных дизайнеров и работ из X (бывший Twitter). Альтернатива хаотичной ленте — отфильтрованные сигналы. Оговорка на июль 2026: на момент проверки лента работ была пустой — проверьте перед использованием, ресурс может быть на паузе.

Страница 13

Как использовать: вместо листания X-ленты — заходите сюда. Подписывайтесь на 3-5 авторов, которые выделяются. Это формирует pull-канал хорошего вкуса вместо push-канала случайностей. bestdesignsonx.com hano.so 3D-mockups устройств прямо в браузере — iPhone, MacBook, Apple Watch, iPad. Не AI-инструмент, но ставит готовый дизайн в реалистичный контекст за 30 секунд. Как использовать: сделали лендинг или мобильный экран — закиньте в hano. Получите 3D-mockup для презентации клиенту или для портфолио. Хорошо ловит ошибки композиции: если макет «не садится» на устройство — нужно переделать иерархию. hano.so

Refero Styles (styles.refero.design)

2000+ дизайн-систем реальных продуктов — Apple, Notion, Anthropic и другие — в формате, который читает AI. Для каждого стиля: палитра, типографика, spacing, компоненты и готовый DESIGN.md для копирования. Это не просто галерея для глаз — это тот самый «brief до кода», которым вы кормите модель, чтобы она не свалилась в slop. Как использовать: нашли продукт с нужным вкусом — забираете его DESIGN.md и отдаёте Cursor, Claude Code, v0 или Lovable ДО генерации. Модель теперь опирается на реальную систему Apple или Notion, а не на «среднее по интернету». Для живой интеграции есть Refero MCP — подключается к IDE и даёт агенту вкус прямо в процессе работы. Сортировка по Trending / Popular / Newest. styles.refero.design Skills фильтруют слоп на выходе. Насмотренность фильтрует его в голове до того, как написан промпт. Это разные слои защиты — нужны оба.

— Эдвард Гришин , Futura AI

futuraai.ru · @edvardgrishin27 Все цифры по звёздам , установкам и релизам проверены 7 июля 2026 года через GitHub API, npm и официальные блоги Anthropic, Vercel, Tailwind Labs.