Сайт в стиле Apple через Claude: дизайн-система одним файлом и аудит по ней

Просьба «сделай премиальнее» почти никогда не работает. У модели нет критерия, что такое «премиально», и она выдаёт что-то среднее: чуть больше воздуха, чуть мягче тени, градиент на кнопке. Результат выглядит как шаблон.

Работает другое: дать модели настоящие правила. Какие цвета и в какой роли, какие шрифты и размеры, какие отступы, какие тени. Всё это уже собрано в открытой коллекции.

Что это за файл

DESIGN.md придумали в Google Stitch: это обычный markdown, в котором описано, как должен выглядеть интерфейс. Никакого Figma и JSON. Кладёшь файл в корень проекта, и любой AI-агент понимает, по каким правилам рисовать.

В коллекции такие файлы собраны по реальным сайтам: Apple, Stripe, Linear, Notion, Airbnb, Vercel и ещё десятки. Файл Apple весит около 37 КБ и разбит на разделы:

Как подключить

1. Открой репозиторий, зайди в design-md/apple/ (или в папку нужного бренда).
2. Скачай DESIGN.md и положи его в корень своего проекта.
3. В CLAUDE.md проекта добавь строку: «Интерфейс делай по правилам из DESIGN.md».

Для claude.ai без Claude Code: прикрепи файл к проекту в разделе знаний, эффект тот же.

Главная ошибка: сразу начинать новый проект

Большинство ставит файл и просит «сделай мне лендинг как у Apple». Получается, но это самое слабое применение. Сильнее всего файл работает на аудите готового сайта: у тебя уже есть работающая страница, и Claude по правилам находит в ней мелочи, из-за которых она выглядит дёшево.

Типичные находки:

• у кнопок разные отступы и скругления;
• тени слишком жёсткие и тёмные;
• на странице больше двух-трёх шрифтов или начертаний;
• акцентный цвет используется в пяти ролях сразу;
• блоки стоят плотнее, чем позволяет сетка.

Каждую такую мелочь по отдельности не видно. Вместе они и дают ощущение «сделано на коленке».

Промпт для аудита

В корне проекта лежит DESIGN.md с дизайн-системой Apple.
Сверь с ним мой сайт: цвета, шрифты, отступы, тени, скругления, кнопки.
Сначала выдай список расхождений таблицей: где, что сейчас, что по правилам,
насколько заметно. Ничего не меняй, пока я не выберу пункты.
Готово, если каждый пункт привязан к конкретному правилу из DESIGN.md.

Последняя строка важна: без критерия готовности Claude начнёт «улучшать» всё подряд на свой вкус.

Где граница с копированием

Файл описывает принципы: пропорции, ритм, иерархию. Брать их нормально, так дизайнеры учатся всю жизнь. Копировать логотип, фирменные иллюстрации, тексты и узнаваемые элементы бренда нельзя. Хорошая практика: взять правила Apple, но оставить свои цвета бренда и свой голос. Сайт станет аккуратнее, но останется твоим.

Способ быстрее: отдай эту статью своему Claude

Вот статья: https://nextgenclub.ru/blog/dizain-sistema-apple-dlya-claude
Скачай DESIGN.md Apple из коллекции, положи в корень моего проекта и проведи
аудит сайта по промпту из статьи. Ничего не правь, пока я не выберу пункты.

Больше про Claude и AI-инструменты в работе - в моём Telegram-канале Виктор Дачников | NEXTGEN.