admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
224 lines
21 KiB
Markdown
224 lines
21 KiB
Markdown
# Дизайн-система, вдохновлённая Figma
|
||
|
||
> Категория: Дизайн и творчество
|
||
> Инструмент для совместного дизайна. Яркая многоцветная палитра, игривый и одновременно профессиональный стиль.
|
||
|
||
## 1. Визуальная тема и атмосфера
|
||
|
||
Интерфейс Figma — это дизайн-инструмент, создавший сам себя: мастер-класс по типографической изощрённости, где кастомный вариативный шрифт (figmaSans) плавно меняет вес от почти невесомого (320) до жирного (700) с остановками на нетипичных промежуточных значениях (330, 340, 450, 480, 540), которые большинство типографических систем никогда не используют. Такой точный контроль над насыщенностью шрифта даёт каждому текстовому элементу тщательно откалиброванный визуальный вес, выстраивая иерархию через микроразличия, а не грубым инструментом «обычный vs жирный».
|
||
|
||
Страница представляет захватывающую двойственность: хром интерфейса строго чёрно-белый (буквально только `#000000` и `#ffffff` в качестве цветов), тогда как секция hero и витрины продукта взрываются яркими многоцветными градиентами — электрический зелёный, насыщенный жёлтый, глубокий фиолетовый, горячий розовый. Такое разделение означает, что сама дизайн-система бесцветна — красочный результат работы продукта выступает главным героем. Маркетинговая страница Figma — это, по сути, белая галерейная стена, на которой развешены яркие полотна.
|
||
|
||
Помимо вариативного шрифта, Figma выделяет геометрия окружностей и «таблеток». Кнопки используют радиус 50px (таблетка) или 50% (идеальный круг для кнопок-иконок), создавая органичный вид, напоминающий палитру инструментов. Пунктирный индикатор фокуса (`dashed 2px`) — намеренное дизайнерское решение, отсылающее к маркерам выделения в самом редакторе Figma: язык UI сайта цитирует язык UI продукта.
|
||
|
||
**Ключевые характеристики:**
|
||
- Кастомный вариативный шрифт (figmaSans) с нетипичными насыщенностями: 320, 330, 340, 450, 480, 540, 700
|
||
- Строго чёрно-белый хром интерфейса — цвет присутствует только в контенте продукта
|
||
- figmaMono для технических меток в верхнем регистре с увеличенным межбуквенным интервалом
|
||
- Геометрия таблетки (50px) и круга (50%) для кнопок
|
||
- Пунктирные контуры фокуса, отсылающие к маркерам выделения редактора Figma
|
||
- Яркие многоцветные градиенты hero (зелёный, жёлтый, фиолетовый, розовый)
|
||
- Функция OpenType `"kern"` включена глобально
|
||
- Отрицательный трекинг повсюду — даже основной текст имеет значения от -0.14px до -0.26px
|
||
|
||
## 2. Цветовая палитра и роли
|
||
|
||
### Основные цвета
|
||
- **Чистый чёрный** (`#000000`): весь текст, все сплошные кнопки, все границы. Единственный «цвет» интерфейса.
|
||
- **Чистый белый** (`#ffffff`): все фоны, белые кнопки, текст на тёмных поверхностях. Вторая половина бинарной системы.
|
||
|
||
*Примечание: маркетинговый сайт Figma использует ТОЛЬКО эти два цвета для слоя интерфейса. Все яркие цвета появляются исключительно на скриншотах продукта, в градиентах hero и во встроенном контенте.*
|
||
|
||
### Поверхности и фоны
|
||
- **Чистый белый** (`#ffffff`): основной фон страницы и поверхности карточек.
|
||
- **Стеклянный чёрный** (`rgba(0, 0, 0, 0.08)`): тонкое тёмное наложение для вторичных круглых кнопок и стеклянных эффектов.
|
||
- **Стеклянный белый** (`rgba(255, 255, 255, 0.16)`): матовое стеклянное наложение для кнопок на тёмных/цветных поверхностях.
|
||
|
||
### Система градиентов
|
||
- **Градиент Hero**: яркий многоцветный градиент с несколькими точками остановки, использующий электрический зелёный, насыщенный жёлтый, глубокий фиолетовый и горячий розовый. Этот градиент — визуальная подпись секции hero, воплощающая творческие возможности инструмента.
|
||
- **Градиенты разделов продукта**: отдельные области продукта (Design, Dev Mode, Prototyping) могут использовать отдельные цветовые темы в своих витринах.
|
||
|
||
## 3. Правила типографики
|
||
|
||
### Семейство шрифтов
|
||
- **Основной**: `figmaSans`, запасные: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
|
||
- **Моноширинный / Метки**: `figmaMono`, запасные: `figmaMono Fallback, SF Mono, menlo`
|
||
|
||
### Иерархия
|
||
|
||
| Роль | Шрифт | Размер | Насыщенность | Высота строки | Трекинг | Примечания |
|
||
|------|-------|--------|--------------|---------------|---------|------------|
|
||
| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (плотный) | -1.72px | Максимальный эффект, экстремальный трекинг |
|
||
| Заголовок раздела | figmaSans | 64px (4rem) | 400 | 1.10 (плотный) | -0.96px | Заголовки функциональных разделов |
|
||
| Подзаголовок | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Акцентированный текст раздела |
|
||
| Подзаголовок лёгкий | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Лёгкий текст раздела |
|
||
| Заголовок функции | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Жирные заголовки карточек |
|
||
| Основной крупный | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Описания, вводный текст |
|
||
| Основной / Кнопка | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Стандартный текст, навигация, кнопки |
|
||
| Основной лёгкий | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Лёгкий основной текст |
|
||
| Метка Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (плотный) | 0.54px | Метки разделов в верхнем регистре |
|
||
| Метка Mono мелкая | figmaMono | 12px (0.75rem) | 400 | 1.00 (плотный) | 0.6px | Крошечные теги в верхнем регистре |
|
||
|
||
### Принципы
|
||
- **Точность вариативного шрифта**: figmaSans использует насыщенности, которых большинство систем никогда не касается — 320, 330, 340, 450, 480, 540. Это создаёт иерархию через тонкие различия в весе, а не через резкие скачки. Разница между 330 и 340 почти неощутима, но структурно значима.
|
||
- **Лёгкость как основа**: большинство основного текста использует 320–340 (легче, чем типичное «обычное» 400), создавая воздушное, лёгкое восприятие, соответствующее эстетике дизайн-инструмента.
|
||
- **Кернинг везде**: каждый текстовый элемент включает функцию OpenType `"kern"` — кернинг не опционален, он структурен.
|
||
- **Отрицательный трекинг по умолчанию**: даже основной текст использует от -0.1px до -0.26px межбуквенного интервала, создавая универсально плотный текст. Дисплейный текст сжимается ещё сильнее — до -0.96px и -1.72px.
|
||
- **Mono для структуры**: figmaMono в верхнем регистре с положительным трекингом (0.54px–0.6px) создаёт технические метки-ориентиры.
|
||
|
||
## 4. Стили компонентов
|
||
|
||
### Кнопки
|
||
|
||
**Чёрная сплошная (таблетка)**
|
||
- Фон: чистый чёрный (`#000000`)
|
||
- Текст: чистый белый (`#ffffff`)
|
||
- Радиус: круг (50%) для кнопок-иконок
|
||
- Фокус: пунктирный контур 2px
|
||
- Максимальный акцент
|
||
|
||
**Белая таблетка**
|
||
- Фон: чистый белый (`#ffffff`)
|
||
- Текст: чистый чёрный (`#000000`)
|
||
- Отступы: 8px 18px 10px (асимметричный по вертикали)
|
||
- Радиус: таблетка (50px)
|
||
- Фокус: пунктирный контур 2px
|
||
- Стандартный CTA на тёмных/цветных поверхностях
|
||
|
||
**Стеклянная тёмная**
|
||
- Фон: `rgba(0, 0, 0, 0.08)` (тонкое тёмное наложение)
|
||
- Текст: чистый чёрный
|
||
- Радиус: круг (50%)
|
||
- Фокус: пунктирный контур 2px
|
||
- Вторичное действие на светлых поверхностях
|
||
|
||
**Стеклянная светлая**
|
||
- Фон: `rgba(255, 255, 255, 0.16)` (матовое стекло)
|
||
- Текст: чистый белый
|
||
- Радиус: круг (50%)
|
||
- Фокус: пунктирный контур 2px
|
||
- Вторичное действие на тёмных/цветных поверхностях
|
||
|
||
### Карточки и контейнеры
|
||
- Фон: чистый белый
|
||
- Граница: отсутствует или минимальная
|
||
- Радиус: 6px (малые контейнеры), 8px (изображения, карточки, диалоги)
|
||
- Тень: эффекты тонкого и среднего подъёма
|
||
- Скриншоты продукта в качестве контента карточек
|
||
|
||
### Навигация
|
||
- Чистая горизонтальная навигация на белом
|
||
- Логотип: Figma wordmark в чёрном
|
||
- Вкладки продукта: навигация по вкладкам в форме таблетки (50px)
|
||
- Ссылки: чёрный текст, декорация подчёркивания 1px
|
||
- CTA: чёрная кнопка-таблетка
|
||
- Наведение: цвет текста через CSS-переменную
|
||
|
||
### Характерные компоненты
|
||
|
||
**Панель вкладок продукта**
|
||
- Горизонтальные вкладки в форме таблетки (радиус 50px)
|
||
- Каждая вкладка представляет область продукта Figma (Design, Dev Mode, Prototyping и т.д.)
|
||
- Активная вкладка выделена
|
||
|
||
**Секция с градиентом Hero**
|
||
- Яркий многоцветный градиентный фон на всю ширину
|
||
- Белый текст поверх с дисплейным заголовком 86px
|
||
- Скриншоты продукта, «плавающие» внутри градиента
|
||
|
||
**Пунктирные индикаторы фокуса**
|
||
- Все интерактивные элементы используют контур `dashed 2px` при фокусе
|
||
- Отсылка к маркерам выделения в редакторе Figma
|
||
- Мета-дизайнерское решение, связывающее сайт и продукт
|
||
|
||
## 5. Принципы вёрстки
|
||
|
||
### Система отступов
|
||
- Базовая единица: 8px
|
||
- Шкала: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
|
||
|
||
### Сетка и контейнер
|
||
- Максимальная ширина контейнера: до 1920px
|
||
- Hero: градиент на всю ширину с центрированным контентом
|
||
- Разделы продукта: чередующиеся витрины
|
||
- Подвал: тёмная секция на всю ширину
|
||
- Адаптивность от 559px до 1920px
|
||
|
||
### Философия пустого пространства
|
||
- **Галерейный ритм**: щедрые отступы дают каждому разделу продукта «дышать» как самостоятельному экспонату.
|
||
- **Цветовые разделы как визуальное дыхание**: градиентный hero и витрины продуктов обеспечивают хроматическую разрядку между монохромными секциями интерфейса.
|
||
|
||
### Шкала скругления углов
|
||
- Минимальное (2px): малые элементы-ссылки
|
||
- Тонкое (6px): малые контейнеры, разделители
|
||
- Умеренное (8px): карточки, изображения, диалоги
|
||
- Таблетка (50px): кнопки-вкладки, CTA
|
||
- Круг (50%): кнопки-иконки, круглые элементы
|
||
|
||
## 6. Глубина и подъём
|
||
|
||
| Уровень | Обработка | Использование |
|
||
|---------|-----------|---------------|
|
||
| Плоский (Уровень 0) | Без тени | Фон страницы, большинство текста |
|
||
| Поверхность (Уровень 1) | Белая карточка на градиентном/тёмном разделе | Карточки, витрины продукта |
|
||
| Приподнятый (Уровень 2) | Тонкая тень | Плавающие карточки, состояния наведения |
|
||
|
||
**Философия теней**: Figma использует тени экономно. Основные механизмы создания глубины — **контраст фона** (белый контент на цветных/тёмных разделах) и врождённая объёмность самих скриншотов продукта.
|
||
|
||
## 7. Что делать и чего не делать
|
||
|
||
### Делать
|
||
- Использовать figmaSans с точными вариативными насыщенностями (320–540) — гранулярный контроль веса И ЕСТЬ дизайн
|
||
- Поддерживать строго чёрно-белый интерфейс — цвет исходит только из контента продукта
|
||
- Использовать геометрию таблетки (50px) и круга (50%) для всех интерактивных элементов
|
||
- Применять пунктирные контуры фокуса 2px — фирменный паттерн доступности
|
||
- Включать функцию `"kern"` для всего текста
|
||
- Использовать figmaMono в верхнем регистре с положительным трекингом для меток
|
||
- Применять отрицательный трекинг повсюду (от -0.1px до -1.72px)
|
||
|
||
### Не делать
|
||
- Не добавлять цвета интерфейса — монохромная палитра абсолютна
|
||
- Не использовать стандартные насыщенности шрифта (400, 500, 600, 700) — используйте уникальные значения вариативного шрифта (320, 330, 340, 450, 480, 540)
|
||
- Не использовать острые углы на кнопках — только геометрия таблетки и круга
|
||
- Не использовать сплошные контуры фокуса — пунктир является фирменным стилем
|
||
- Не увеличивать насыщенность основного шрифта выше 450 — лёгкая эстетика является основой
|
||
- Не использовать положительный трекинг для основного текста — он всегда отрицательный
|
||
|
||
## 8. Адаптивное поведение
|
||
|
||
### Контрольные точки
|
||
| Название | Ширина | Ключевые изменения |
|
||
|----------|--------|--------------------|
|
||
| Малый мобильный | <560px | Компактная вёрстка, стопка |
|
||
| Планшет | 560–768px | Незначительные корректировки |
|
||
| Малый десктоп | 768–960px | Двухколоночная вёрстка |
|
||
| Десктоп | 960–1280px | Стандартная вёрстка |
|
||
| Большой десктоп | 1280–1440px | Расширенная |
|
||
| Ультраширокий | 1440–1920px | Максимальная ширина |
|
||
|
||
### Стратегия свёртки
|
||
- Текст hero: 86px → 64px → 48px
|
||
- Вкладки продукта: горизонтальная прокрутка на мобильных
|
||
- Функциональные разделы: одна колонка, стопка
|
||
- Подвал: несколько колонок → стопка
|
||
|
||
## 9. Руководство для агентных промптов
|
||
|
||
### Быстрый справочник по цветам
|
||
- Всё: «чистый чёрный (#000000)» и «чистый белый (#ffffff)»
|
||
- Стеклянный тёмный: «rgba(0, 0, 0, 0.08)»
|
||
- Стеклянный светлый: «rgba(255, 255, 255, 0.16)»
|
||
|
||
### Примеры промптов для компонентов
|
||
- «Создай hero на ярком многоцветном градиенте (зелёный, жёлтый, фиолетовый, розовый). Заголовок 86px figmaSans насыщенность 400, line-height 1.0, letter-spacing -1.72px. Белый текст. Белая кнопка CTA-таблетка (радиус 50px, отступы 8px 18px).»
|
||
- «Разработай панель вкладок продукта с кнопками в форме таблетки (радиус 50px). Активная: чёрный фон, белый текст. Неактивная: прозрачный фон, чёрный текст. figmaSans 20px насыщенность 480.»
|
||
- «Создай метку раздела: figmaMono 18px, верхний регистр, letter-spacing 0.54px, чёрный текст. Kern включён.»
|
||
- «Создай основной текст 20px figmaSans насыщенность 330, line-height 1.40, letter-spacing -0.14px. Чистый чёрный на белом.»
|
||
|
||
### Руководство по итерациям
|
||
1. Используй точные значения вариативного шрифта: 320, 330, 340, 450, 480, 540, 700
|
||
2. Интерфейс — всегда чёрный + белый, никогда не добавляй цвета в хром
|
||
3. Пунктирные контуры фокуса, не сплошные
|
||
4. Трекинг всегда отрицательный для основного текста, всегда положительный для меток mono
|
||
5. Таблетка (50px) для кнопок/вкладок, круг (50%) для кнопок-иконок
|