admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ea02f186a59d88b880ea032066638dabc5d20364
workbuddy_skills/open-design/design-systems/ibm/DESIGN-ru.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

336 lines
32 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Design System Inspired by IBM
> Category: Медиа и потребительский сектор
> Корпоративные технологии. Дизайн-система Carbon, структурированная синяя палитра.
## 1. Визуальная тема и атмосфера
Сайт IBM — это цифровое воплощение корпоративного авторитета, выстроенного на дизайн-системе Carbon: настолько методично структурированном языке дизайна, что он читается как инженерная спецификация, отрендеренная в виде веб-страницы. Страница строится на жёстком дуализме: яркий белый (`#ffffff`) холст с почти чёрным (`#161616`) текстом, пронизанный единственным неизменным акцентом — IBM Blue 60 (`#0f62fe`). Это не игривый минимализм технологического стартапа; это корпоративная точность, дистиллированная в пиксели. Каждый элемент существует внутри жёсткой сетки Carbon 2x, каждый цвет привязан к семантическому токену, каждое значение отступа привязывается к базовой единице 8px.
Шрифтовое семейство IBM Plex — основа системы. IBM Plex Sans с начертанием Light (300) для заголовков создаёт неожиданно лёгкое, почти изысканное качество при больших размерах — намеренный контрапункт корпоративной серьёзности IBM. При размерах основного текста начертание Regular (400) с межбуквенным интервалом 0.16px в подписях 14px вводит педантичный микроинтервал, благодаря которому текст Carbon ощущается скорее инженерным, чем дизайнерским. IBM Plex Mono обслуживает код, данные и технические метки, завершая трио семейства наряду с редко используемым IBM Plex Serif.
Что определяет визуальную идентичность IBM за пределами монохромности плюс синий — это опора на систему компонентных токенов Carbon. Каждое интерактивное состояние сопоставляется с CSS-свойством с префиксом `--cds-` (Carbon Design System). Кнопки не имеют жёстко заданных цветов; они ссылаются на `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. Эта токенизированная архитектура означает, что весь визуальный слой — тонкая оболочка над глубоко систематизированным фундаментом: дизайнерский эквивалент хорошо типизированного API.
**Ключевые характеристики:**
- IBM Plex Sans с весом 300 (Light) для дисплейного использования — корпоративная весомость через типографическую сдержанность
- IBM Plex Mono для кода и технического контента с последовательным межбуквенным интервалом 0.16px при малых размерах
- Единственный акцентный цвет: IBM Blue 60 (`#0f62fe`) — каждый интерактивный элемент, каждый CTA, каждая ссылка
- Система токенов Carbon (`--cds-*`), управляющая всеми семантическими цветами и позволяющая переключать темы на уровне переменных
- Сетка отступов 8px со строгим соблюдением — никаких произвольных значений, всё выровнено
- Плоские карточки без рамок на поверхности `#f4f4f4` Gray 10 — глубина через наслоение цветов фона, а не тени
- Поля ввода с нижней рамкой (не в рамке) — фирменный паттерн форм Carbon
- Радиус скругления 0px у основных кнопок — подчёркнуто прямоугольные, без смягчения
## 2. Цветовая палитра и роли
### Основные цвета
- **IBM Blue 60** (`#0f62fe`): Единственный интерактивный цвет. Основные кнопки, ссылки, состояния фокуса, активные индикаторы. Это единственный хроматический оттенок в основной UI-палитре.
- **White** (`#ffffff`): Фон страницы, поверхности карточек, текст кнопок на синем фоне, `--cds-background`.
- **Gray 100** (`#161616`): Основной текст, заголовки, тёмные фоны поверхностей, навбар, подвал. `--cds-text-primary`.
### Нейтральная шкала (семейство Gray)
- **Gray 100** (`#161616`): Основной текст, заголовки, тёмный UI-chrome, фон подвала.
- **Gray 90** (`#262626`): Второстепенные тёмные поверхности, состояния hover на тёмных фонах.
- **Gray 80** (`#393939`): Третичный тёмный, активные состояния.
- **Gray 70** (`#525252`): Второстепенный текст, вспомогательный текст, описания. `--cds-text-secondary`.
- **Gray 60** (`#6f6f6f`): Текст-заглушка, отключённый текст.
- **Gray 50** (`#8d8d8d`): Отключённые иконки, приглушённые метки.
- **Gray 30** (`#c6c6c6`): Рамки, разделительные линии, нижние рамки полей ввода. `--cds-border-subtle`.
- **Gray 20** (`#e0e0e0`): Тонкие рамки, контуры карточек.
- **Gray 10** (`#f4f4f4`): Второстепенный фон поверхности, заливка карточек, чередующиеся строки. `--cds-layer-01`.
- **Gray 10 Hover** (`#e8e8e8`): Состояние hover для поверхностей Gray 10.
### Интерактивные цвета
- **Blue 60** (`#0f62fe`): Основные интерактивные — кнопки, ссылки, фокус. `--cds-link-primary`, `--cds-button-primary`.
- **Blue 70** (`#0043ce`): Состояние hover для ссылок. `--cds-link-primary-hover`.
- **Blue 80** (`#002d9c`): Активное/нажатое состояние синих элементов.
- **Blue 10** (`#edf5ff`): Синяя тонированная поверхность, фон выбранной строки.
- **Focus Blue** (`#0f62fe`): `--cds-focus` — рамка 2px inset на элементах в фокусе.
- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — белое внутреннее кольцо для фокуса на тёмных фонах.
### Поддержка и статусы
- **Red 60** (`#da1e28`): Ошибка, опасность. `--cds-support-error`.
- **Green 50** (`#24a148`): Успех. `--cds-support-success`.
- **Yellow 30** (`#f1c21b`): Предупреждение. `--cds-support-warning`.
- **Blue 60** (`#0f62fe`): Информационный. `--cds-support-info`.
### Тёмная тема (тема Gray 100)
- **Background**: Gray 100 (`#161616`). `--cds-background`.
- **Layer 01**: Gray 90 (`#262626`). Поверхности карточек и контейнеров.
- **Layer 02**: Gray 80 (`#393939`). Приподнятые поверхности.
- **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
- **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
- **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.
- **Interactive**: Blue 40 (`#78a9ff`). Ссылки и интерактивные элементы становятся светлее для контрастности.
## 3. Правила типографики
### Семейство шрифтов
- **Основной**: `IBM Plex Sans`, с запасными вариантами: `Helvetica Neue, Arial, sans-serif`
- **Моноширинный**: `IBM Plex Mono`, с запасными вариантами: `Menlo, Courier, monospace`
- **Serif** (ограниченное использование): `IBM Plex Serif`, для редакционных и выразительных контекстов
- **Иконочный шрифт**: `ibm_icons` — проприетарные иконочные глифы размером 20px
### Иерархия
| Роль | Шрифт | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Максимальный эффект, лёгкое начертание для элегантности |
| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Второстепенный hero, адаптивный резерв |
| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Выразительный заголовок |
| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Заголовки разделов |
| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Заголовки подразделов |
| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Заголовки карточек, заголовки функций |
| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Более лёгкие заголовки карточек |
| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Стандартный текст для чтения |
| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Выделенный основной текст, метки |
| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Компактный текст, подписи |
| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Жирные подписи, элементы навигации |
| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Метаданные, временные метки |
| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Встроенный код, терминал |
| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Блоки кода |
| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Декоративный mono в hero-секции |
### Принципы
- **Лёгкое начертание для дисплейных размеров**: Выразительный типовой набор Carbon использует насыщенность 300 (Light) при 42px и выше. Это создаёт характерное напряжение — контент говорит с корпоративным авторитетом, тогда как сами буквы шепчут с типографической лёгкостью.
- **Микроинтервал при малых размерах**: Межбуквенный интервал 0.16px при 14px и 0.32px при 12px. Эти кажущиеся незначительными значения — секретное оружие Carbon для удобочитаемости при компактных размерах: они слегка открывают плотные буквы IBM Plex.
- **Три функциональных насыщенности**: 300 (дисплейный/выразительный), 400 (основной текст/чтение), 600 (акцент/UI-метки). Насыщенность 700 намеренно отсутствует в производственной типографической шкале.
- **Продуктивный vs. Выразительный**: Продуктивные наборы используют более тесные межстрочные интервалы (1.29) для насыщенного UI. Выразительные наборы дышат свободнее (1.40–1.50) для маркетинга и редакционного контента.
## 4. Стилизация компонентов
### Кнопки
**Основная кнопка (синяя)**
- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
- Text: `#ffffff` (White)
- Padding: 14px 63px 14px 15px (асимметричный — место для иконки в конце)
- Border: 1px solid transparent
- Border-radius: 0px (чёткий прямоугольник — фирменный знак Carbon)
- Height: 48px (по умолчанию), 40px (компактный), 64px (выразительный)
- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner
**Вторичная кнопка (серая)**
- Background: `#393939` (Gray 80)
- Text: `#ffffff`
- Hover: `#4c4c4c` (Gray 70)
- Active: `#6f6f6f` (Gray 60)
- Те же padding и radius, что у основной
**Третичная кнопка (Ghost Blue)**
- Background: transparent
- Text: `#0f62fe` (Blue 60)
- Border: 1px solid `#0f62fe`
- Hover: `#0353e9` текст + Blue 10 тонированный фон
- Border-radius: 0px
**Ghost-кнопка**
- Background: transparent
- Text: `#0f62fe` (Blue 60)
- Padding: 14px 16px
- Border: none
- Hover: `#e8e8e8` тонированный фон
**Кнопка опасности**
- Background: `#da1e28` (Red 60)
- Text: `#ffffff`
- Hover: `#b81921` (Red 70)
### Карточки и контейнеры
- Background: `#ffffff` на белой теме, `#f4f4f4` (Gray 10) для приподнятых карточек
- Border: none (плоский дизайн — без рамки или тени на большинстве карточек)
- Border-radius: 0px (соответствует прямоугольной эстетике кнопок)
- Hover: фон смещается к `#e8e8e8` (Gray 10 Hover) для кликабельных карточек
- Content padding: 16px
- Разделение: наслоение цветов фона (white → gray 10 → white) вместо теней
### Поля ввода и формы
- Background: `#f4f4f4` (Gray 10) — `--cds-field`
- Text: `#161616` (Gray 100)
- Padding: 0px 16px (только горизонтальный)
- Height: 40px (по умолчанию), 48px (большой)
- Border: нет на боках/сверху — `2px solid transparent` снизу
- Bottom-border active: `2px solid #161616` (Gray 100)
- Focus: `2px solid #0f62fe` (Blue 60) нижняя рамка — `--cds-focus`
- Error: `2px solid #da1e28` (Red 60) нижняя рамка
- Label: 12px IBM Plex Sans, межбуквенный интервал 0.32px, Gray 70
- Вспомогательный текст: 12px, Gray 60
- Placeholder: Gray 60 (`#6f6f6f`)
- Border-radius: 0px (сверху) — поля ввода с острыми углами
### Навигация
- Background: `#161616` (Gray 100) — тёмная шапка на всю ширину
- Height: 48px
- Логотип: логотип IBM из 8 полос, белый на тёмном, выровнен по левому краю
- Ссылки: 14px IBM Plex Sans, насыщенность 400, `#c6c6c6` (Gray 30) по умолчанию
- Link hover: `#ffffff` текст
- Активная ссылка: `#ffffff` с индикатором нижней рамки
- Переключатель платформ: горизонтальные вкладки, выровненные по левому краю
- Поиск: поле поиска с выдвижением по клику на иконку
- Мобильный: гамбургер с панелью, выезжающей слева
### Ссылки
- По умолчанию: `#0f62fe` (Blue 60) без подчёркивания
- Hover: `#0043ce` (Blue 70) с подчёркиванием
- Посещённые: остаются Blue 60 (состояние посещённой ссылки не меняется)
- Встроенные ссылки: подчёркнуты по умолчанию в основном тексте
### Характерные компоненты
**Блок контента (Hero/Feature)**
- Чередующиеся полосы фона white/gray-10 на всю ширину
- Заголовок выровнен по левому краю с дисплейным шрифтом 60px или 48px
- CTA как синяя основная кнопка со стрелочной иконкой
- Изображение/иллюстрация выровнены по правому краю или располагаются ниже на мобильных
**Tile (кликабельная карточка)**
- Background: `#f4f4f4` или `#ffffff`
- Нижняя рамка на всю ширину или смена фона при hover
- Иконка стрелки в правом нижнем углу при hover
- Без тени — плоскость и есть идентичность
**Tag / Label**
- Background: контекстный цвет с непрозрачностью 10% (например, Blue 10, Red 10)
- Text: соответствующий цвет 60-го оттенка
- Padding: 4px 8px
- Border-radius: 24px (таблетка — исключение из правила 0px)
- Font: 12px насыщенность 400
**Баннер уведомления**
- Полоса на всю ширину, обычно фон Blue 60 или Gray 100
- Белый текст, 14px
- Иконка закрытия выровнена по правому краю
## 5. Принципы компоновки
### Система отступов
- Базовая единица: 8px (сетка Carbon 2x)
- Шкала отступов компонентов: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
- Шкала отступов компоновки: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
- Мини-единица: 8px (минимально используемый отступ)
- Внутренний padding компонентов: обычно 16px
- Зазор между карточками/тайлами: 1px (волосяная линия) или 16px (стандартный)
### Сетка и контейнер
- 16-колоночная сетка (система Carbon 2x)
- Максимальная ширина контента: 1584px (максимальная точка останова)
- Межколоночные отступы: 32px (16px на мобильных)
- Поля: 16px (мобильные), 32px (планшеты+)
- Контент обычно занимает 8–12 колонок для комфортной длины строки
- Секции на всю ширину чередуются с ограниченным контентом
### Философия пустого пространства
- **Функциональная плотность**: Carbon предпочитает продуктивную плотность обширному белому пространству. Секции упакованы плотнее по сравнению с потребительскими дизайн-системами — это отражает корпоративную ДНК IBM.
- **Зонирование цветом фона**: Вместо массивных отступов между секциями IBM использует чередующиеся цвета фона (white → gray 10 → white) для создания визуального разделения при минимальном вертикальном пространстве.
- **Постоянный ритм 48px**: Переходы между основными секциями используют вертикальный отступ 48px. Hero-секции могут использовать 80px–96px.
### Шкала радиусов скругления
- **0px**: Основные кнопки, поля ввода, тайлы, карточки — доминирующая обработка. Carbon фундаментально прямоугольный.
- **2px**: Иногда для небольших интерактивных элементов (теги)
- **24px**: Теги/метки (форма таблетки — единственное скруглённое исключение)
- **50%**: Круги аватаров, контейнеры иконок
## 6. Глубина и приподнятость
| Уровень | Обработка | Применение |
|-------|-----------|-----|
| Flat (Level 0) | Без тени, фон `#ffffff` | Стандартная поверхность страницы |
| Layer 01 | Без тени, фон `#f4f4f4` | Карточки, тайлы, чередующиеся секции |
| Layer 02 | Без тени, фон `#e0e0e0` | Приподнятые панели внутри Layer 01 |
| Raised | `0 2px 6px rgba(0,0,0,0.3)` | Выпадающие меню, подсказки, меню переполнения |
| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + тёмная подложка | Модальные диалоги, боковые панели |
| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Кольцо фокуса клавиатуры |
| Bottom-border | `2px solid #161616` по нижнему краю | Активное поле ввода, индикатор активной вкладки |
**Философия теней**: Carbon намеренно избегает теней. IBM добиваетсяглубины прежде всего через наслоение цветов фона — укладывая поверхности с прогрессивно темнеющими серыми вместо добавления box-shadow. Это создаёт плоскую, вдохновлённую печатью эстетику, где иерархия передаётся значением цвета, а не имитацией света. Тени зарезервированы исключительно для плавающих элементов (выпадающие меню, подсказки, модалки), где элемент действительно перекрывает контент. Такая сдержанность придаёт редкой тени значимый эффект — когда что-то парит в Carbon, это имеет значение.
## 7. Что делать и чего не делать
### Делать
- Использовать IBM Plex Sans с насыщенностью 300 для дисплейных размеров (42px+) — лёгкость намеренна
- Применять межбуквенный интервал 0.16px к основному тексту 14px и 0.32px к подписям 12px
- Использовать border-radius 0px для кнопок, полей ввода, карточек и тайлов — прямоугольники и есть система
- Ссылаться на имена токенов `--cds-*` при реализации (например, `--cds-button-primary`, `--cds-text-primary`)
- Использовать наслоение цветов фона (white → gray 10 → gray 20) для глубины вместо теней
- Использовать нижнюю рамку (не рамку вокруг) для индикаторов полей ввода
- Сохранять высоту кнопки по умолчанию 48px и асимметричный padding для размещения иконки
- Применять Blue 60 (`#0f62fe`) как единственный акцент — один синий, чтобы управлять всем
### Не делать
- Не скруглять углы кнопок — радиус 0px является идентичностью Carbon
- Не использовать тени на карточках или тайлах — плоскость и есть суть
- Не вводить дополнительные акцентные цвета — система IBM монохромна плюс синий
- Не использовать насыщенность 700 (Bold) — шкала останавливается на 600 (Semibold)
- Не добавлять межбуквенный интервал к тексту дисплейного размера — интервал только для 14px и ниже
- Не обрамлять поля ввода полными рамками — поля ввода Carbon используют только нижнюю рамку
- Не использовать градиентные фоны — поверхности IBM плоские, однотонные
- Не отклоняться от сетки отступов 8px — каждое значение должно делиться на 8 (с 2px и 4px для микрокорректировок)
## 8. Адаптивное поведение
### Точки останова
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Small (sm) | 320px | Одна колонка, навигация-гамбургер, поля 16px |
| Medium (md) | 672px | Начинаются двухколоночные сетки, расширенный контент |
| Large (lg) | 1056px | Полная навигация видна, сетки 3–4 колонки |
| X-Large (xlg) | 1312px | Максимальная плотность контента, широкие макеты |
| Max | 1584px | Максимальная ширина контента, центрирование с полями |
### Целевые области касания
- Высота кнопки: 48px по умолчанию, минимум 40px (компактный)
- Ссылки навигации: высота строки 48px для касания
- Высота поля ввода: 40px по умолчанию, 48px большой
- Кнопки-иконки: область касания 48px квадрат
- Пункты мобильного меню: строки на всю ширину по 48px
### Стратегия сворачивания
- Hero: дисплейный шрифт 60px → 42px → заголовок 32px по мере сужения viewport
- Навигация: полная горизонтальная шапка → гамбургер с выдвигающейся панелью
- Сетка: 4 колонки → 2 колонки → одна колонка
- Тайлы/карточки: горизонтальная сетка → вертикальный стек
- Изображения: сохранение соотношения сторон, max-width 100%
- Подвал: многоколоночные группы ссылок → единый столбец в стеке
- Отступы секций: 48px → 32px → 16px
### Поведение изображений
- Адаптивные изображения с `max-width: 100%`
- Иллюстрации продукта масштабируются пропорционально
- Hero-изображения могут переходить от расположения бок о бок к размещению в стек ниже
- Визуализации данных сохраняют соотношение сторон с горизонтальной прокруткой на мобильных
## 9. Руководство по промптам для агента
### Быстрый справочник цветов
- Основной CTA: IBM Blue 60 (`#0f62fe`)
- Background: White (`#ffffff`)
- Текст заголовков: Gray 100 (`#161616`)
- Основной текст: Gray 100 (`#161616`)
- Второстепенный текст: Gray 70 (`#525252`)
- Поверхность/карточка: Gray 10 (`#f4f4f4`)
- Рамка: Gray 30 (`#c6c6c6`)
- Ссылка: Blue 60 (`#0f62fe`)
- Ссылка hover: Blue 70 (`#0043ce`)
- Кольцо фокуса: Blue 60 (`#0f62fe`)
- Ошибка: Red 60 (`#da1e28`)
- Успех: Green 50 (`#24a148`)
### Примеры промптов для компонентов
- "Создай hero-секцию на белом фоне. Заголовок 60px IBM Plex Sans насыщенность 300, line-height 1.17, цвет #161616. Подзаголовок 16px насыщенность 400, line-height 1.50, цвет #525252, max-width 640px. Синяя CTA-кнопка (фон #0f62fe, текст #ffffff, border-radius 0px, высота 48px, padding 14px 63px 14px 15px)."
- "Спроектируй карточку-тайл: фон #f4f4f4, border-radius 0px, padding 16px. Заголовок 20px IBM Plex Sans насыщенность 600, line-height 1.40, цвет #161616. Основной текст 14px насыщенность 400, letter-spacing 0.16px, line-height 1.29, цвет #525252. Hover: фон меняется на #e8e8e8."
- "Создай поле формы: фон #f4f4f4, border-radius 0px, высота 40px, горизонтальный padding 16px. Метка сверху 12px насыщенность 400, letter-spacing 0.32px, цвет #525252. Нижняя рамка: 2px solid transparent по умолчанию, 2px solid #0f62fe при фокусе. Placeholder: #6f6f6f."
- "Создай тёмную панель навигации: фон #161616, высота 48px. Логотип IBM белый выровнен по левому краю. Ссылки 14px IBM Plex Sans насыщенность 400, цвет #c6c6c6. Hover: текст #ffffff. Активный: #ffffff с нижней рамкой 2px."
- "Создай компонент тега: фон Blue 10 (#edf5ff), текст Blue 60 (#0f62fe), padding 4px 8px, border-radius 24px, 12px IBM Plex Sans насыщенность 400."
### Руководство по итерации
1. Всегда используй border-radius 0px для кнопок, полей ввода и карточек — в Carbon это обязательно
2. Межбуквенный интервал только при малых размерах: 0.16px при 14px, 0.32px при 12px — никогда для дисплейного текста
3. Три насыщенности: 300 (дисплейный), 400 (основной текст), 600 (акцент) — без жирного
4. Blue 60 — единственный акцентный цвет — не вводи вторичные акцентные оттенки
5. Глубина достигается через наслоение цветов фона (white → #f4f4f4 → #e0e0e0), а не тени
6. Поля ввода имеют только нижнюю рамку, никогда полное обрамление
7. Используй префикс `--cds-` для именования токенов, чтобы оставаться совместимым с Carbon
8. 48px — универсальная высота интерактивных элементов
Reference in new issue View Git Blame Copy Permalink