Войти
AI Skills
FRONTENDDESIGN verified

Frontend Design

by Anthropic

Роль в графе: IMPLEMENTATION — собрать UI по выбранному направлению

Репозиторий / источник

ЧТО ДЕЛАЕТ

Перед вёрсткой агент фиксирует визуальное направление (editorial, brutalist, product-minimal и т.д.), типографику и якорь экрана. Снимает дефолты вроде Inter/Roboto, фиолетовых градиентов и сетки из одинаковых карточек.

КОГДА ИСПОЛЬЗОВАТЬ

  • Landing и маркетинговые страницы
  • SaaS marketing site
  • Первый экран продукта
  • Любой UI «с нуля», где важен характер, а не только layout

INSTALL

# Claude Code / skills CLI
npx skills add anthropics/skills --skill frontend-design

# Cursor: Skills → Add from repo anthropics/skills → frontend-design
# либо скопируйте папку skill в .cursor/skills/frontend-design/

PROMPT / INSTRUCTION

Сначала подключи Skill Frontend Design (Anthropic).

Задача: [опиши экран]
Контекст продукта: [для кого / что продаём]
Эстетическое направление: [выбери одно: editorial / product-minimal / bold-marketing / …]
Ограничения: без Inter/Roboto/Arial; один визуальный якорь; без сетки «4 одинаковые карточки» как hero.
Стек: [Next.js / React / …]
Дизайн-система: читай DESIGN.md (если есть). Соблюдай токены проекта — не выдумывай цвета/радиусы/шрифты вне токенов.

Сначала зафиксируй направление и типографику в 5 буллетах, потом код.

КАК ПРАВИЛЬНО ПИСАТЬ

ПЛОХО

Сделай красивый лендинг

ХОРОШО

Сделай лендинг SaaS для AI-инженеров. Направление: editorial, тёмный фон, один акцентный цвет, full-bleed hero. Без Inter и без фиолетового градиента. Используй токены из DESIGN.md.

Почему: «Красивый» агент заменит средним вкусом из обучения. Направление + запреты + токены = управляемый результат.
ПЛОХО

Нарисуй дашборд как у Linear

ХОРОШО

Собери product UI: боковая навигация, таблица задач, спокойная плотность. Направление product-minimal. Не копируй чужой бренд — возьми принципы плотности и иерархии. Цвета только из токенов дизайн-системы.

Почему: Копирование бренда даёт шум. Принципы + токены + роль экрана дают повторяемый результат.

EXAMPLES · BEFORE → AFTER

BEFORE

Hero с Inter, фиолетовый градиент, 3 feature-карточки, кнопка Get Started — типичный AI-шаблон.

AFTER

Одно выбранное направление, сильная типографика, один якорь (фото/диаграмма/продукт), иерархия CTA без «карточного склада».

РЕЗУЛЬТАТ

Интерфейс с явным характером: видно, что направление выбрано до кода, а не «как получилось».

ОГРАНИЧЕНИЯ

  • Не заменяет дизайн-систему продукта
  • На внутренних admin/dashboard может быть слишком «маркетинговым» — тогда держите product-minimal
  • Не аудитит a11y сам по себе — для этого web-design-guidelines

СОВМЕСТИМОСТЬ

Claude CodeCursorCodexGemini CLI

RELATED SKILLS

taste-skill Web Design Guidelines Impeccable

ДИЗАЙН-СИСТЕМА

Skill усиливает агента. Токены и DESIGN.md задают язык продукта — не ломайте их ради «вкуса Skill».

Гайд по дизайн-системе →Шаблон DESIGN.md →

STACK · RECIPE

Входит в Premium Landing Stack. Практический порядок — Recipe «Создать качественный SaaS-интерфейс».

Открыть Recipe на хабе →