Перепроектированный системный промпт Claude для AI-агентов UI без "слэпа"

Большинство «дизайн-ассистентов» выдают шаблонные SaaS-решения: агрессивные градиенты, эмодзи-украшения, карточки со скруглёнными углами и повсеместный Inter. Промпт дизайн-системы Claude от Trystan-SA явно отвергает эти шаблоны. Это обратно разработанный системный промпт (лицензия MIT), превращающий LLM в требовательного, ориентированного на доступность и устойчивого к AI-клише соавтора дизайна.

Что включено

• claude/system-prompt.md — 20 глав, охватывающих дисциплину контента, эстетическую дисциплину, визуальную иерархию, доступность WCAG, состояния взаимодействия, системное мышление (компоненты + токены) и уважение к среде (настоящий CSS Grid, oklch(), text-wrap: pretty).
• claude/skills/ — 14 вызываемых процедур, сгруппированных в Продакшн (discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, generate-variations), Систему (design-system-extract, component-extract) и Ревью (accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, polish-pass).
• Вариант codex/, адаптированный для OpenAI Codex (один цикл, без подагентов).

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

Вставьте содержимое system-prompt.md как системный промпт для любой LLM (Claude, GPT, Gemini, локальные модели). Агент следует философии дизайна и использует навыки по имени в соответствующих задачах. Навыки можно объединять в цепочки — типичный поток для нового проекта: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass. Поток с учётом бренда: design-system-extract → generate-variations → make-tweakable → polish-pass.

Принципы дизайна

Промпт обеспечивает дисциплину контента (никакого мусора, каждый элемент заслуживает своё место), эстетическую дисциплину (избегайте AI-клише, придерживайтесь палитры и тона), визуальную иерархию и ритм (размер, цвет, вес, позиция, плотность, шкалы интервалов), доступность (WCAG, семантический HTML, навигация с клавиатуры, фокусные кольца, настройки движения), обратную связь при взаимодействии (состояния наведения, активное, отключённое, фокус, загрузка, валидация) и системное мышление (компоненты и токены вместо одноразовых страниц).

Для кого это

Разработчики, использующие AI-кодинг-агентов, которые хотят получать требовательный, доступный дизайн без шаблонных SaaS-решений.