Минималистичный интерфейс в стиле документа

Помогает сделать чистый сайт или интерфейс в редакционном стиле: тёплая монохромная палитра, строгая типографика, плоские карточки.

Скиллсообщество: LeonxlnxClaudeMITЗагрузить архив в ClaudeПроверено на безопасность

Скачать на русскомОригинал на английском (архив)Источник ↗

Что делает: Помогает сделать чистый сайт или интерфейс в редакционном стиле: тёплая монохромная палитра, строгая типографика, плоские карточки.
Когда брать: Когда нужен спокойный, аккуратный интерфейс для рабочих инструментов, базы знаний, портфолио или сервиса без ярких красок и эффектов.
Когда не брать: Если нужен яркий, эффектный или анимированный сайт с градиентами и стеклом.
Пример запроса: Сделай страницу сервиса для ведения заметок в стиле чистого документа: тёплые серые тона, крупные заголовки с засечками, без ярких цветов.
Работает лучше с: проект на React или Tailwind

Как включить

Скачайте архив.
В Claude откройте Настройки → Capabilities → Skills → Upload skill и выберите архив.
Включите скилл переключателем.

Для терминала

Распакуйте архив и положите папку minimalist-ui в ~/.claude/skills/. Файл SKILL.md должен лежать внутри этой папки.

Текст

---
name: minimalist-ui
description: Чистые интерфейсы в редакционном стиле. Тёплая монохромная палитра, типографический контраст, плоские бенто-сетки, приглушённые пастельные оттенки. Без градиентов и тяжёлых теней.
---

Протокол: архитектор UI в духе премиального утилитарного минимализма

1. Обзор протокола

Название: Premium Utilitarian Minimalism & Editorial UI («Премиальный утилитарный минимализм и редакционный интерфейс») Описание: продвинутая директива для фронтенд-разработки: создавать предельно выверенные, ультраминималистичные веб-интерфейсы «в стиле документа», похожие на ведущие платформы для работы. Протокол жёстко требует контрастную тёплую монохромную палитру, индивидуальную типографическую иерархию, продуманную структурную пустоту, вёрстку бенто-сеткой и сверхплоскую архитектуру компонентов с намеренными приглушёнными пастельными акцентами. Он активно отвергает стандартные шаблонные тренды SaaS-дизайна.

2. Абсолютные запреты (запрещённые элементы)

ИИ должен строго избегать следующих шаблонных умолчаний веб-разработки:

НЕ используй шрифты «Inter», «Roboto» и «Open Sans».
НЕ используй типовые библиотеки иконок с тонкой линией вроде «Lucide», «Feather» или стандартных «Heroicons».
НЕ используй тяжёлые падающие тени Tailwind по умолчанию (например, shadow-md, shadow-lg, shadow-xl). Теней практически не должно быть, либо они должны быть тщательно настроены: сверхрассеянные и с прозрачностью ниже 0,05.
НЕ используй основные яркие цвета для фона больших элементов или блоков (например, никаких ярко-синих, зелёных или красных главных экранов).
НЕ используй градиенты, неоновые цвета и объёмный глассморфизм (кроме лёгкого размытия панели навигации).
НЕ используй rounded-full («таблетки») для больших контейнеров, карточек и основных кнопок.
НЕ используй эмодзи нигде: ни в коде, ни в разметке, ни в тексте, ни в заголовках, ни в альтернативных текстах картинок. Заменяй их нормальными иконками или чистыми SVG-примитивами.
НЕ используй типовые заглушки вроде «John Doe», «Acme Corp» или «Lorem Ipsum». Пиши реалистичное содержимое по контексту.
НЕ используй ИИ-штампы в текстах: «Elevate», «Seamless», «Unleash», «Next-Gen», «Game-changer», «Delve». Пиши простым, конкретным языком.

3. Типографическая архитектура

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

Основной рубленый шрифт (основной текст, интерфейс, кнопки): используй чистые, геометричные или системные шрифты с характером. Цель: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
Редакционный шрифт с засечками (заголовки главного экрана и цитаты): цель: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Применяй плотный трекинг (letter-spacing: -0.02em — -0.04em) и плотный межстрочный интервал (1.1).
Моноширинный шрифт (код, сочетания клавиш, метаданные): цель: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
Цвета текста: основной текст никогда не должен быть абсолютно чёрным (#000000). Используй не совсем чёрный, угольный цвет (#111111 или #2F3437) и щедрый line-height 1.6 для читаемости. Второстепенный текст — приглушённый серый (#787774).

4. Цветовая палитра (тёплая монохромность + точечные пастельные оттенки)

Цвет — дефицитный ресурс, его используют только ради смысла или для тонких акцентов.

Холст / фон: чистый белый #FFFFFF или тёплый костяной / почти белый #F7F6F3 / #FBFBFA.
Основная поверхность (карточки): #FFFFFF или #F9F9F8.
Структурные рамки / разделители: сверхсветлый серый #EAEAEA или rgba(0,0,0,0.06).
Акцентные цвета: исключительно сильно обесцвеченные, выцветшие пастельные тона для тегов, фона встроенного кода или фона иконок.
Бледно-красный: #FDEBEC (текст: #9F2F2D)
Бледно-синий: #E1F3FE (текст: #1F6C9F)
Бледно-зелёный: #EDF3EC (текст: #346538)
Бледно-жёлтый: #FBF3DB (текст: #956400)

5. Спецификации компонентов

Сетки возможностей в виде бенто-коробок:
Используй асимметричные сетки CSS Grid.
У карточек должна быть ровно такая рамка: border: 1px solid #EAEAEA.
Радиус скругления должен быть чётким: не больше 8px или 12px.
Внутренние отступы должны быть щедрыми (например, от 24px до 40px).
Основной призыв к действию (кнопки):
Сплошной фон #111111, текст #FFFFFF.
Небольшой радиус скругления (от 4px до 6px). Без box-shadow.
При наведении — лёгкий сдвиг цвета к #333333 или микромасштаб transform: scale(0.98).
Теги и бейджи статуса:
В форме «таблетки» (border-radius: 9999px), очень мелкий шрифт (text-xs), прописные буквы с широким трекингом (letter-spacing: 0.05em).
Фон — только из заданных приглушённых пастельных оттенков.
Аккордеоны (FAQ):
Убери все рамки-контейнеры. Разделяй пункты только линией border-bottom: 1px solid #EAEAEA.
Для переключателя используй чёткие, острые значки + и -.
Микроинтерфейсы клавиш:
Отрисовывай сочетания клавиш как физические клавиши с помощью тегов <kbd>: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, моноширинный шрифт.
Имитация рамки окна операционной системы:
Когда делаешь макет программы, оберни его в минималистичный контейнер с белой верхней полосой, на которой три маленьких светло-серых кружка (имитация кнопок окна macOS).

6. Директивы по иконкам и изображениям

Системные иконки: используй «Phosphor Icons (начертания Bold или Fill)» или «Radix UI Icons» ради технического, слегка более плотного по линии стиля. Единая толщина линии у всех иконок.
Иллюстрации: монохромные, грубые эскизы тушью одной непрерывной линией на белом фоне, с одной смещённой геометрической фигурой, залитой приглушённым пастельным цветом.
Фотографии: используй качественные обесцвеченные изображения с тёплым тоном. Накладывай лёгкие оверлеи (opacity: 0.04, тёплое зерно), чтобы вписать фото в монохромную палитру. Никогда не используй пересыщенные стоковые фото. Когда реальных материалов нет, используй надёжные заглушки вроде https://picsum.photos/seed/{context}/1200/800.
Фоны главного экрана и блоков: блоки не должны ощущаться пустыми и плоскими. Используй неброские фоновые изображения на всю ширину с очень низкой прозрачностью, мягкие радиальные пятна света (radial-gradient в тёплых тонах при opacity: 0.03) или минимальные узоры из геометрических линий, чтобы добавить глубину и не нарушить чистую эстетику.

7. Тонкая анимация и микроанимации

Анимация должна казаться невидимой: она есть, но не отвлекает. Цель — тихая утончённость, а не зрелище.

Появление при прокрутке: элементы мягко проявляются, входя в область просмотра. Используй translateY(12px) + opacity: 0, переходящие за 600ms с cubic-bezier(0.16, 1, 0.3, 1). Используй IntersectionObserver, никогда не window.addEventListener('scroll').
Состояния при наведении: карточки приподнимаются с едва заметным изменением тени (box-shadow переходит от 0 0 0 к 0 2px 8px rgba(0,0,0,0.04) за 200ms). Кнопки реагируют на :active через scale(0.98).
Каскадное появление: списки и элементы сетки входят с каскадной задержкой (animation-delay: calc(var(--index) * 80ms)). Никогда не монтируй всё сразу.
Фоновая атмосферная анимация: необязательна. Одно очень медленно движущееся радиальное градиентное пятно (animation-duration: 20s+, opacity: 0.02-0.04), дрейфующее за главными экранами. Применять нужно к слою position: fixed; pointer-events: none. Никогда не к прокручиваемым контейнерам.
Производительность: анимируй исключительно через transform и opacity. Никаких свойств, вызывающих пересчёт вёрстки (top, left, width, height). will-change: transform применяй редко и только к тем элементам, которые анимируются прямо сейчас.

8. Протокол выполнения

Когда тебе поручено написать фронтенд-код (HTML, React, Tailwind, Vue) или спроектировать вёрстку:

Сначала задай макропустоту. Используй огромные вертикальные отступы между блоками (например, py-24 или py-32 в Tailwind).
Ограничь ширину основного типографического содержимого значением max-w-4xl или max-w-5xl.
Сразу примени собственную типографическую иерархию и переменные монохромных цветов.
Следи, чтобы каждая карточка, разделитель и рамка строго соответствовали правилу 1px solid #EAEAEA.
Добавь анимации появления при прокрутке ко всем основным блокам содержимого.
Следи, чтобы у блоков была визуальная глубина за счёт изображений, атмосферных градиентов или тонких текстур — никаких пустых плоских фонов.
Выдавай код, который сам по себе отражает эту дорогую, неперегруженную, редакционную эстетику и не требует ручных правок.

Перевод: iiuniversitet. Оригинал: https://github.com/leonxlnx/taste-skill/tree/main/skills/minimalist-skill, лицензия MIT. Изменения: перевод на русский язык.

Оригинал на английском

---
name: minimalist-ui
description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
---

# Protocol: Premium Utilitarian Minimalism UI Architect

## 1. Protocol Overview
Name: Premium Utilitarian Minimalism & Editorial UI
Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.

## 2. Absolute Negative Constraints (Banned Elements)
The AI must strictly avoid the following generic web development defaults:
- DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
- DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
- DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).
- DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).
- DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
- DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.
- DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.
- DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.
- DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.

## 3. Typographic Architecture
The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.
- Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`.
- Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Apply tight tracking (`letter-spacing: -0.02em` to `-0.04em`) and tight line-height (`1.1`).
- Monospace (Code, Keystrokes, Meta-data): Target: `font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`.
- Text Colors: Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous `line-height` of `1.6` for legibility. Secondary text should be muted gray (`#787774`).

## 4. Color Palette (Warm Monochrome + Spot Pastels)
Color is a scarce resource, utilized only for semantic meaning or subtle accents.
- Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
- Primary Surface (Cards): `#FFFFFF` or `#F9F9F8`.
- Structural Borders / Dividers: Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.
- Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds.
  - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)
  - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)
  - Pale Green: `#EDF3EC` (Text: `#346538`)
  - Pale Yellow: `#FBF3DB` (Text: `#956400`)

## 5. Component Specifications
- Bento Box Feature Grids:
  - Utilize asymmetrical CSS Grid layouts.
  - Cards must have exactly `border: 1px solid #EAEAEA`.
  - Border-radius must be crisp: `8px` or `12px` maximum.
  - Internal padding must be generous (e.g., `24px` to `40px`).
- Primary Call-To-Action (Buttons):
  - Solid background `#111111`, text `#FFFFFF`. 
  - Slight border-radius (`4px` to `6px`). No box-shadow. 
  - Hover state should be a subtle color shift to `#333333` or a micro-scale `transform: scale(0.98)`.
- Tags & Status Badges:
  - Pill-shaped (`border-radius: 9999px`), very small typography (`text-xs`), uppercase with wide tracking (`letter-spacing: 0.05em`).
  - Background must use the defined Muted Pastels.
- Accordions (FAQ):
  - Strip all container boxes. Separate items only with a `border-bottom: 1px solid #EAEAEA`.
  - Use a clean, sharp `+` and `-` icon for the toggle state.
- Keystroke Micro-UIs:
  - Render shortcuts as physical keys using `<kbd>` tags: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, using the Monospace font.
- Faux-OS Window Chrome:
  - When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls).

## 6. Iconography & Imagery Directives
- System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons.
- Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color.
- Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (`opacity: 0.04` warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like `https://picsum.photos/seed/{context}/1200/800` when real assets are unavailable.
- Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (`radial-gradient` with warm tones at `opacity: 0.03`), or minimal geometric line patterns to add depth without breaking the clean aesthetic.

## 7. Subtle Motion & Micro-Animations
Motion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle.
- Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
- Hover States: Cards lift with an ultra-subtle shadow shift (`box-shadow` transitioning from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`). Buttons respond with `scale(0.98)` on `:active`.
- Staggered Reveals: Lists and grid items enter with a cascade delay (`animation-delay: calc(var(--index) * 80ms)`). Never mount everything at once.
- Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (`animation-duration: 20s+`, `opacity: 0.02-0.04`) drifting behind hero sections. Must be applied to a `position: fixed; pointer-events: none` layer. Never on scrolling containers.
- Performance: Animate exclusively via `transform` and `opacity`. No layout-triggering properties (`top`, `left`, `width`, `height`). Use `will-change: transform` sparingly and only on actively animating elements.

## 8. Execution Protocol
When tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout:
1. Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., `py-24` or `py-32` in Tailwind).
2. Constrain the main typography content width to `max-w-4xl` or `max-w-5xl`.
3. Apply the custom typographic hierarchy and monochromatic color variables immediately.
4. Ensure every card, divider, and border adheres strictly to the `1px solid #EAEAEA` rule.
5. Add scroll-entry animations to all major content blocks.
6. Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.
7. Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.

Источник: taste-skill / minimalist-ui ↗. Ссылка проверена 2026-10-11.

---
name: minimalist-ui
description: Чистые интерфейсы в редакционном стиле. Тёплая монохромная палитра, типографический контраст, плоские бенто-сетки, приглушённые пастельные оттенки. Без градиентов и тяжёлых теней.
---

# Протокол: архитектор UI в духе премиального утилитарного минимализма

## 1. Обзор протокола
Название: Premium Utilitarian Minimalism & Editorial UI («Премиальный утилитарный минимализм и редакционный интерфейс»)
Описание: продвинутая директива для фронтенд-разработки: создавать предельно выверенные, ультраминималистичные веб-интерфейсы «в стиле документа», похожие на ведущие платформы для работы. Протокол жёстко требует контрастную тёплую монохромную палитру, индивидуальную типографическую иерархию, продуманную структурную пустоту, вёрстку бенто-сеткой и сверхплоскую архитектуру компонентов с намеренными приглушёнными пастельными акцентами. Он активно отвергает стандартные шаблонные тренды SaaS-дизайна.

## 2. Абсолютные запреты (запрещённые элементы)
ИИ должен строго избегать следующих шаблонных умолчаний веб-разработки:
- НЕ используй шрифты «Inter», «Roboto» и «Open Sans».
- НЕ используй типовые библиотеки иконок с тонкой линией вроде «Lucide», «Feather» или стандартных «Heroicons».
- НЕ используй тяжёлые падающие тени Tailwind по умолчанию (например, `shadow-md`, `shadow-lg`, `shadow-xl`). Теней практически не должно быть, либо они должны быть тщательно настроены: сверхрассеянные и с прозрачностью ниже 0,05.
- НЕ используй основные яркие цвета для фона больших элементов или блоков (например, никаких ярко-синих, зелёных или красных главных экранов).
- НЕ используй градиенты, неоновые цвета и объёмный глассморфизм (кроме лёгкого размытия панели навигации).
- НЕ используй `rounded-full` («таблетки») для больших контейнеров, карточек и основных кнопок.
- НЕ используй эмодзи нигде: ни в коде, ни в разметке, ни в тексте, ни в заголовках, ни в альтернативных текстах картинок. Заменяй их нормальными иконками или чистыми SVG-примитивами.
- НЕ используй типовые заглушки вроде «John Doe», «Acme Corp» или «Lorem Ipsum». Пиши реалистичное содержимое по контексту.
- НЕ используй ИИ-штампы в текстах: «Elevate», «Seamless», «Unleash», «Next-Gen», «Game-changer», «Delve». Пиши простым, конкретным языком.

## 3. Типографическая архитектура
Интерфейс должен опираться на предельный типографический контраст и выбор премиальных шрифтов, чтобы создать редакционное ощущение.
- Основной рубленый шрифт (основной текст, интерфейс, кнопки): используй чистые, геометричные или системные шрифты с характером. Цель: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`.
- Редакционный шрифт с засечками (заголовки главного экрана и цитаты): цель: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Применяй плотный трекинг (`letter-spacing: -0.02em` — `-0.04em`) и плотный межстрочный интервал (`1.1`).
- Моноширинный шрифт (код, сочетания клавиш, метаданные): цель: `font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`.
- Цвета текста: основной текст никогда не должен быть абсолютно чёрным (`#000000`). Используй не совсем чёрный, угольный цвет (`#111111` или `#2F3437`) и щедрый `line-height` `1.6` для читаемости. Второстепенный текст — приглушённый серый (`#787774`).

## 4. Цветовая палитра (тёплая монохромность + точечные пастельные оттенки)
Цвет — дефицитный ресурс, его используют только ради смысла или для тонких акцентов.
- Холст / фон: чистый белый `#FFFFFF` или тёплый костяной / почти белый `#F7F6F3` / `#FBFBFA`.
- Основная поверхность (карточки): `#FFFFFF` или `#F9F9F8`.
- Структурные рамки / разделители: сверхсветлый серый `#EAEAEA` или `rgba(0,0,0,0.06)`.
- Акцентные цвета: исключительно сильно обесцвеченные, выцветшие пастельные тона для тегов, фона встроенного кода или фона иконок.
  - Бледно-красный: `#FDEBEC` (текст: `#9F2F2D`)
  - Бледно-синий: `#E1F3FE` (текст: `#1F6C9F`)
  - Бледно-зелёный: `#EDF3EC` (текст: `#346538`)
  - Бледно-жёлтый: `#FBF3DB` (текст: `#956400`)

## 5. Спецификации компонентов
- Сетки возможностей в виде бенто-коробок:
  - Используй асимметричные сетки CSS Grid.
  - У карточек должна быть ровно такая рамка: `border: 1px solid #EAEAEA`.
  - Радиус скругления должен быть чётким: не больше `8px` или `12px`.
  - Внутренние отступы должны быть щедрыми (например, от `24px` до `40px`).
- Основной призыв к действию (кнопки):
  - Сплошной фон `#111111`, текст `#FFFFFF`.
  - Небольшой радиус скругления (от `4px` до `6px`). Без box-shadow.
  - При наведении — лёгкий сдвиг цвета к `#333333` или микромасштаб `transform: scale(0.98)`.
- Теги и бейджи статуса:
  - В форме «таблетки» (`border-radius: 9999px`), очень мелкий шрифт (`text-xs`), прописные буквы с широким трекингом (`letter-spacing: 0.05em`).
  - Фон — только из заданных приглушённых пастельных оттенков.
- Аккордеоны (FAQ):
  - Убери все рамки-контейнеры. Разделяй пункты только линией `border-bottom: 1px solid #EAEAEA`.
  - Для переключателя используй чёткие, острые значки `+` и `-`.
- Микроинтерфейсы клавиш:
  - Отрисовывай сочетания клавиш как физические клавиши с помощью тегов `<kbd>`: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, моноширинный шрифт.
- Имитация рамки окна операционной системы:
  - Когда делаешь макет программы, оберни его в минималистичный контейнер с белой верхней полосой, на которой три маленьких светло-серых кружка (имитация кнопок окна macOS).

## 6. Директивы по иконкам и изображениям
- Системные иконки: используй «Phosphor Icons (начертания Bold или Fill)» или «Radix UI Icons» ради технического, слегка более плотного по линии стиля. Единая толщина линии у всех иконок.
- Иллюстрации: монохромные, грубые эскизы тушью одной непрерывной линией на белом фоне, с одной смещённой геометрической фигурой, залитой приглушённым пастельным цветом.
- Фотографии: используй качественные обесцвеченные изображения с тёплым тоном. Накладывай лёгкие оверлеи (`opacity: 0.04`, тёплое зерно), чтобы вписать фото в монохромную палитру. Никогда не используй пересыщенные стоковые фото. Когда реальных материалов нет, используй надёжные заглушки вроде `https://picsum.photos/seed/{context}/1200/800`.
- Фоны главного экрана и блоков: блоки не должны ощущаться пустыми и плоскими. Используй неброские фоновые изображения на всю ширину с очень низкой прозрачностью, мягкие радиальные пятна света (`radial-gradient` в тёплых тонах при `opacity: 0.03`) или минимальные узоры из геометрических линий, чтобы добавить глубину и не нарушить чистую эстетику.

## 7. Тонкая анимация и микроанимации
Анимация должна казаться невидимой: она есть, но не отвлекает. Цель — тихая утончённость, а не зрелище.
- Появление при прокрутке: элементы мягко проявляются, входя в область просмотра. Используй `translateY(12px)` + `opacity: 0`, переходящие за `600ms` с `cubic-bezier(0.16, 1, 0.3, 1)`. Используй `IntersectionObserver`, никогда не `window.addEventListener('scroll')`.
- Состояния при наведении: карточки приподнимаются с едва заметным изменением тени (`box-shadow` переходит от `0 0 0` к `0 2px 8px rgba(0,0,0,0.04)` за `200ms`). Кнопки реагируют на `:active` через `scale(0.98)`.
- Каскадное появление: списки и элементы сетки входят с каскадной задержкой (`animation-delay: calc(var(--index) * 80ms)`). Никогда не монтируй всё сразу.
- Фоновая атмосферная анимация: необязательна. Одно очень медленно движущееся радиальное градиентное пятно (`animation-duration: 20s+`, `opacity: 0.02-0.04`), дрейфующее за главными экранами. Применять нужно к слою `position: fixed; pointer-events: none`. Никогда не к прокручиваемым контейнерам.
- Производительность: анимируй исключительно через `transform` и `opacity`. Никаких свойств, вызывающих пересчёт вёрстки (`top`, `left`, `width`, `height`). `will-change: transform` применяй редко и только к тем элементам, которые анимируются прямо сейчас.

## 8. Протокол выполнения
Когда тебе поручено написать фронтенд-код (HTML, React, Tailwind, Vue) или спроектировать вёрстку:
1. Сначала задай макропустоту. Используй огромные вертикальные отступы между блоками (например, `py-24` или `py-32` в Tailwind).
2. Ограничь ширину основного типографического содержимого значением `max-w-4xl` или `max-w-5xl`.
3. Сразу примени собственную типографическую иерархию и переменные монохромных цветов.
4. Следи, чтобы каждая карточка, разделитель и рамка строго соответствовали правилу `1px solid #EAEAEA`.
5. Добавь анимации появления при прокрутке ко всем основным блокам содержимого.
6. Следи, чтобы у блоков была визуальная глубина за счёт изображений, атмосферных градиентов или тонких текстур — никаких пустых плоских фонов.
7. Выдавай код, который сам по себе отражает эту дорогую, неперегруженную, редакционную эстетику и не требует ручных правок.

Перевод: iiuniversitet. Оригинал: https://github.com/leonxlnx/taste-skill/tree/main/skills/minimalist-skill, лицензия MIT. Изменения: перевод на русский язык.