claude-design-system-prompt

Реконструкция системного промпта, лежащего в основе Claude Design от Anthropic, опубликованная в виде обычного markdown под лицензией MIT. Вставка system-prompt.md в любую LLM, принимающую системный промпт, превращает модель в партнёра по дизайну с чётким мнением вместо генератора шаблонного SaaS-вывода. Репозиторий поставляет два варианта: claude/ для Claude Code и Claude.ai, а также codex/ для OpenAI Codex с AGENTS.md в качестве автоматически обнаруживаемой точки входа и последовательными review вместо параллельных субагентов.

Что на самом деле содержит промпт

Двадцать глав, и их главная польза в том, что они называют конкретных врагов, а не просто рассуждают о качестве. Отвергаемый дефолт - агрессивные градиенты, украшательства эмодзи, карточки со скруглёнными углами и левой границей, а также повсеместный Inter. Вместо них: контентная дисциплина, где каждый элемент обязан заслужить своё место, выверенная палитра и тональность, явная иерархия через размер, насыщенность, цвет и плотность, соответствие WCAG, семантический HTML, клавиатурная навигация и учёт предпочтений по анимации, полные состояния интерактивности, компоненты и токены вместо одноразовых страниц, а также честный CSS Grid, oklch() и text-wrap: pretty вместо их имитаций.

Рядом лежат четырнадцать skill'ов в виде автономных поэтапных процедур, каждая из которых запускается по совпадению имени с запросом. Они делятся на три группы. Производственные skill'ы создают артефакты: discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, generate-variations. Системные skill'ы извлекают структуру из существующего: design-system-extract, component-extract. Skill'ы ревизии проводят аудит и исправления: accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, polish-pass.

Skill'ы объединяются в цепочки. С нуля рабочий процесс выглядит как discovery-questions -> frontend-aesthetic-direction -> wireframe -> make-a-prototype -> polish-pass; при наличии готового бренда он превращается в design-system-extract -> generate-variations -> make-tweakable -> polish-pass.

Заметки о калибровке - самая интересная часть

Раздел "Model calibration" в README заслуживает прочтения, даже если вы никогда не будете использовать сам промпт, потому что он документирует, как изменились правила составления промптов для современных передовых моделей.

Квоты уступили место условиям. Никаких "задай как минимум N вопросов", никаких "CRITICAL: YOU MUST" - современные модели воспринимают квоту как буквальный контракт и чрезмерно усердствуют с её выполнением. Поэтому промпт описывает условия, при которых нужно действовать, и добавляет пункт об автономности, предписывающий модели выбирать разумный вариант в мелких решениях и фиксировать выбор в примечании вместо лишних вопросов. Противоположная корректировка касается опциональных возможностей: современные модели неохотно обращаются к skill'ам и субагентам, поэтому каждое описание skill'а фиксирует, когда именно его вызывать, а делегирование проверяющему имеет явный триггер ("после каждого существенного визуального изменения").

Инструкции по review инвертировали по той же причине. Указание "сообщай только о важных проблемах" современная модель исполняет буквально и молча замалчивает находки. Поэтому агенты ревизии сообщают обо всём с оценками уверенности и критичности, а отдельный шаг агрегации выполняет фильтрацию.

Четвёртая заметка - самая острая. У современных моделей Anthropic есть собственная эстетика по умолчанию: кремовый фон, антиквенные акцидентные шрифты, терракотовые и янтарные акценты. Промпт относится к ней как к такому же slop-паттерну. Правило 9 в ai-slop-check выявляет её постфактум, а протокол четырёх направлений в frontend-aesthetic-direction предотвращает заранее. Поскольку параметр temperature в этих моделях больше не поддерживается, визуальное разнообразие приходится задавать явно для каждого варианта, а не полагаться на сэмплирование.

Ограничения

Промпт рассчитан на среду с генерацией HTML, похожую на инструмент дизайна в Claude.ai. Применение его к плагину Figma, ассистенту только для кода или текстовому дизайн-консультанту потребует переписать главы о рабочих процессах и упоминания инструментов; принципы из глав с 5 по 16 переносятся без изменений. На более старых моделях спокойные формулировки могут срабатывать реже положенного, и README рекомендует вернуть повелительное наклонение, если раунды вопросов или review пропускаются. Вариант codex/ поддерживается отдельно, и заметки о калибровке к нему не относятся.

Кроме того, по самой своей сути это чужая реконструкция промпта, оригиналом которого автор не располагает. Относитесь к нему как к хорошо структурированному взгляду на дизайн, а не как к официальному артефакту от Anthropic.

Связанные страницы

vamp-ai-frontend приводит дополняющий аргумент со стороны кода: неявность фреймворков - именно то, что делает генерируемый ИИ фронтенд плохим, а явный минималистичный паттерн выигрывает у фреймворка. credibility-as-slop-test - обобщённая версия ai-slop-check: поверхностные признаки - слабая проверка, а этот промпт по сути представляет собой длинный список поверхностных признаков, коррелирующих с качеством. О том, как skill'ы работают в качестве механизма: mcp-vs-skills; об инструментах вокруг них: library-skills и agent-skill-linter. claude-code - основной хост для варианта claude/. toolcraft воплощает то же намерение в коде, а не в промпте - React-стартер, предоставляющий агенту готовую архитектуру дизайн-приложения, так что принципу "компоненты и токены вместо одноразовых страниц" есть куда приземлиться.

Репозиторий: Trystan-SA/claude-design-system-prompt, MIT. Количество звёзд на момент добавления не зафиксировано.