0 Fork 0

Files

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

32 KiB

Raw Blame History

Дизайн-система, вдохновлённая Apple

Category: Медиа и потребительские товары Потребительская электроника. Премиальное «воздушное» пространство, SF Pro, кинематографичные изображения.

1. Визуальная тема и атмосфера

Веб-язык Apple — это выверенная редакторская система, чередующая галерейное спокойствие и плотные торговые информационные блоки. Визуальный тон остаётся сдержанным: широкие нейтральные полотна, тихий «хром» интерфейса, а почти вся выразительная нагрузка отдана изображениям продуктов. Интерфейс спроектирован так, чтобы исчезать, и тогда оборудование, материалы и варианты отделки выходят на повествовательный передний план.

На всех пяти проанализированных страницах ритм единообразен, но не монолитен. Маркетинговые поверхности (главная страница и Environment) используют кинематографичное чередование чёрного и света по «главам», тогда как коммерческие поверхности (Store и потоки покупки) вводят более плотные интервалы, больше утилитарных элементов управления и более насыщенные стопки карточек, не нарушая базовой грамматики бренда. В результате получается одна система с двумя передачами: режим витрины и режим транзакции.

Типографика выступает стабилизатором. SF Pro Display несёт иерархию героев и мерчандайзинга с компактной межстрочной высотой и контролируемым трекингом, а SF Pro Text обрабатывает метаданные продуктов, навигацию, фильтры и плотный интерфейс выбора. Типографика остаётся ненавязчивой, но диапазон масштаба достаточно широк, чтобы поддерживать как «биллбордные» героические сообщения, так и микроутилитарные подписи.

Key Characteristics:

Бинарный ритм секций: глубокие чёрные сцены (#000000), чередующиеся с бледными нейтральными полями (#f5f5f7)
Единое синее акцентное семейство для семантики действий и ссылок (#0071e3, #0066cc, #2997ff)
Два режима работы в одной системе: кинематографичные модули-витрины и плотные коммерческие конфигураторы
Сильная опора на изображения и материальные отделки; «хром» интерфейса остаётся визуально тонким
Плотные заголовочные метрики (SF Pro Display, semibold) в паре с компактной типографикой текста/ссылок (SF Pro Text)
Геометрия «пилюль» и капсул как фирменный язык действий (18px до 980px и круглые элементы управления)
Глубина используется экономно; контраст и разделение поверхностей выполняют большую часть работы по наслоению
Многостраничный ритм цветовых блоков: чёрные героические главы -> бледные нейтральные мерчандайзинговые поля -> утилитарные белые торговые поверхности -> тёмные микроповерхности для элементов управления

2. Цветовая палитра и роли

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

Primary

Absolute Black (#000000): Иммерсивные героические полотна, высокодраматичные продуктовые главы, глубокие интерфейсные опоры.
Pale Apple Gray (#f5f5f7): Основная светлая поверхность для функциональных полос, блоков сравнения и редакторских переходов.
Near-Black Ink (#1d1d1f): Цвет основного текста и тёмной заливки элементов управления на светлых полотнах.

Secondary & Accent

Apple Action Blue (#0071e3): Заливка основного действия и брендовый акцент, сигнализирующий о фокусе.
Body Link Blue (#0066cc): Цвет встроенных ссылок, оптимизированный для читаемости длинных текстов.
High-Luminance Link Blue (#2997ff): Яркое оформление ссылок на тёмных сценах, где требуется более сильный контраст.

Surface & Background

Pure White Canvas (#ffffff): Фоны торговых/продуктовых списков и плотные транзакционные секции.
Graphite Surface A (#272729): Контекстный слой тёмных карточек и медиаэлементов управления.
Graphite Surface B (#262629): Чуть более глубокий тёмный утилитарный слой для группировок элементов управления.
Graphite Surface C (#28282b): Приподнятые тёмные вспомогательные поверхности.
Graphite Surface D (#2a2a2c): Самая тёмная приподнятая ступень, используемая для разделения в более насыщенных тёмных сценах.

Neutrals & Text

Secondary Neutral Gray (#6e6e73): Второстепенный основной текст, вспомогательные описания, третичные метаданные.
Soft Border Gray (#d2d2d7): Разделители, тонкие контуры и приглушённое утилитарное обрамление.
Mid Border Gray (#86868b): Более выраженные контуры полей в контекстах конфигурации продуктов и фильтров.
Utility Dark Gray (#424245): Переходный тёмно-нейтральный текст/поверхность в контекстах магазина.

Semantic & Accent

Selection/Focus Signal (#0071e3): Общий сигнал фокуса и выбранного состояния в маркетинговых и коммерческих контекстах.
Error/Warning/Success: В извлечённом наборе поверхностей не было последовательно видимой отдельной семантической палитры.

Gradient System

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

3. Правила типографики

Font Family

Display Family: SF Pro Display, запасные варианты SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Text Family: SF Pro Text, запасные варианты SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Usage Split: Семейство Display отвечает за героические/продуктовые заголовки и мерчандайзинговые заголовки; семейство Text отвечает за навигацию, элементы управления, подписи и плотный коммерческий текст.

Hierarchy

Role	Size	Weight	Line Height	Letter Spacing	Notes
Hero Display XL	80px	600	1.00-1.05	-1.2px	Героический масштаб Environment/store
Hero Display L	56px	600	1.07	-0.28px	Героические моменты главной страницы
Section Display	48px	500-600	1.08	-0.144px	Заголовки крупных глав
Product Heading	40px	600	1.10	normal	Заголовки секций продуктов и кампаний
Feature Display	38px	600	1.21	0.152px	Выноски устройств и мерчандайзинга
Promo Display	32px	300-600	1.09-1.13	0.128px to 0.352px	Подгерои уровня модуля
Card/Product Title	28px	600	1.14	0.196px	Названия уровня плитки и ключевой текст
Utility Heading	24px	600	1.17	0.216px / -0.2px	Заголовки конфигуратора и сгруппированного контента
Link/Action Heading	21px	600	1.14-1.38	0.231px	Более крупные промоссылки
Subhead	19px	600	1.21	0.228px	Компактные вступления секций
Body Primary	17px	400	1.47	-0.374px	Стандартный основной текст и торговые описания
Body Emphasis	17px	600	1.24	-0.374px	Выделенные подписи и ключевые значения
Control Label	14px	400-600	1.29-1.47	-0.224px	Кнопки, вспомогательные подписи, компактный навигационный текст
Micro UI	12px	400-600	1.00-1.33	-0.12px	Мелкий шрифт, микроподписи
Legal/Meta	10px	400	1.30-1.47	-0.08px	Плотные метаданные и юридический вспомогательный текст

Principles

Преемственность между типами страниц: Одна и та же типографическая ДНК охватывает кинематографичные запуски и потоки покупки продуктов, предотвращая раскол бренда между маркетингом и коммерцией.
Компрессия при масштабировании: Уровни Display используют плотный интерлиньяж и контролируемый трекинг, чтобы ощущаться машинными и ориентированными на продукт.
Читаемая плотность на торговой глубине: SF Pro Text балансирует компактность с достаточным вертикальным ритмом для длинных списков продуктов и матриц опций.
Выверенная лестница насыщенности: 600 — доминирующий вес выделения; 700 появляется выборочно; 300 используется экономно для контраста в более крупных строках.

Note on Font Substitutes

Ближайшие свободно доступные замены: Inter для текстоёмкой реализации и метрики, похожие на SF Pro Display-like, аппроксимированные Inter Tight для заголовков.
При замене слегка увеличивайте межстрочную высоту (+0.02 до +0.06) на размерах основного текста и снижайте интенсивность отрицательного трекинга, чтобы сохранить читаемость.

4. Стилизация компонентов

Buttons

Primary Fill Action: фон #0071e3, текст #ffffff, радиус 8px, компактные горизонтальные отступы (обычно 8px 15px). Используется для решительных действий покупки/продвижения.
Dark Fill Action: фон #1d1d1f, текст #ffffff, радиус 8px. Используется, когда светлым поверхностям нужно сдержанное высококонтрастное основное действие.
Pill/Capsule Action Family: крупные капсульные действия с радиусами 18px-56px и крайние «пилюльные» ссылки на 980px. Задаёт мягкий, но точный силуэт призыва к действию Apple.
Utility Filter/Button Shells: светлые оболочки (#fafafc или полупрозрачный белый) с тонкими серыми границами (#d2d2d7 / #86868b) для плотных контекстов конфигурации.
Pressed Behavior: активные элементы управления обычно слегка уменьшают масштаб или сдвигают заливку, чтобы обозначить физическое подтверждение нажатия.

Cards & Containers

Editorial/Product Cards: светлые карточки на полях #f5f5f7 или белых с минимальным обрамлением и композицией «изображение в первую очередь».
Dark Utility Cards: графитовые ступени (#272729 до #2a2a2c), используемые для оверлеев, медиаэлементов управления и модулей в тёмном контексте.
Configurator Panels: скруглённые контейнеры (часто 12px-18px) с чётким, но сдержанным определением границ.
Carousel/Spotlight Modules: более крупные скруглённые оболочки (28px-36px) для дорожек избранного контента.

Inputs & Forms

Retail Input Fields: полупрозрачные или белые фоны, тёмный текст (#1d1d1f), обрамление, ведомое границами (#86868b).
Selection Controls: круглая/тумблероподобная геометрия элементов управления часто встречается в интерфейсах выбора продуктов.
Density Strategy: поля форм остаются визуально тихими, чтобы изображения устройств и иерархия цен оставались доминирующими.

Global Marketing Nav: компактная тёмная полупрозрачная панель с мелким текстом ссылок и сдержанной иконографикой.
Store/Sub-shop Nav Layers: дополнительные утилитарные панели, чипы и сегментированные элементы управления для сужения категорий и продуктов.
Link Hierarchy: синие цвета ссылок остаются основным интерактивным сигналом, а нейтральный текст поддерживает плотные навигационные наборы.

Image Treatment

Object-First Photography: оборудование и аксессуары выводятся на передний план на контролируемых сплошных поверхностях.
High-fidelity finish rendering: отражающие/материальные детали являются центральными для визуального убеждения.
Mixed framing: полноэкранные героические сцены сосуществуют со скруглёнными торговыми карточками и плотно кадрированными мерчандайзинговыми миниатюрами.

Other Distinctive Components

Product Configurator Matrix: стопки опций и селекторы, сочетающие чипы, элементы управления в стиле радиокнопок и контекстные блоки цены/сводки.
Carousel Control Dots/Arrows: круглая лексика элементов управления в приглушённых оверлеях для продвижения по галерее.
Environment Story Panels: повествовательные главы, сочетающие редакторскую типографику с кинематографичными визуальными образами продукта/окружения.

5. Принципы компоновки

Spacing System

Базовая единица фактически равна 8px, но система поддерживает плотные микрошаги для точного выравнивания.
Часто повторно используемые значения интервалов на страницах: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
Универсальные константы ритма, видимые как в маркетинговых, так и в торговых потоках: каркас на единице 8px с утилитарными интервалами 14-20px для отступов компонентов и интервалов в списках.

Grid & Container

Showcase pages: крупные центральные колонки с широким горизонтальным «дыханием» и полноширинными цветовыми главами.
Commerce pages: более плотные многоколоночные сетки продуктов и элементов управления с частым модульным наслоением.
Container behavior: ограниченное читаемое ядро с щедрыми внешними полями при настольных ширинах.

Whitespace Philosophy

Scene pacing: крупные визуальные главы используют широкое верхнее/нижнее «дыхание».
Information compaction where needed: торговые страницы намеренно сжимают интервалы, чтобы показать больше действенной информации на один экран.
Contrast-led separation: переходы между секциями опираются больше на смену поверхностей, чем на декоративные разделители.

Border Radius Scale

5px: крошечные утилитарные ссылки/теги и мелкие небольшие оболочки.
8px-12px: стандартные элементы управления и компактные поля.
16px-18px: карточки, рамки модулей и коммерческие панели.
28px-36px: более крупные модульные и «прожекторные» контейнеры.
56px / 100px / 980px: капсулы, крупные «пилюли» и фирменные удлинённые формы CTA.
50%: круглые медиа- и селекционные элементы управления.

6. Глубина и возвышение

Level	Treatment	Use
Level 0	Плоские нейтральные поверхности (`#ffffff`, `#f5f5f7`, `#000000`)	Основное повествование и продуктовые сцены
Level 1	Тонкое обрамление границей (`#d2d2d7`, `#86868b`)	Фильтры, поля ввода, утилитарные карточки
Level 2	Мягкая тень (`rgba(0,0,0,0.08)` до `rgba(0,0,0,0.22)`, где присутствует)	Выделенные карточки и приподнятые мерчандайзинговые модули
Level 3	Ступенчатость тёмных поверхностей (`#272729` -> `#2a2a2c`)	Оверлеи, медиаэлементы управления, тёмные утилитарные кластеры
Accessibility	Синий сигнал фокуса (`#0071e3`)	Выделение для клавиатуры и выбора

Глубина намеренно сдержанна. Apple предпочитает тональный контраст, ступенчатость поверхностей и композиционную иерархию вместо тяжёлых нагромождений теней.

Decorative Depth

Декоративная глубина создаётся главным образом фотографическим реализмом и рендерингом материалов, а не синтетическими эффектами интерфейса.
Полупрозрачные оверлеи и стеклоподобные утилитарные панели обеспечивают лёгкое атмосферное наслоение в навигации и элементах управления.

7. Что делать и чего не делать

Do

Используйте нейтральную триаду (#000000, #f5f5f7, #ffffff) как структурную основу.
Резервируйте синие акценты для подлинной семантики действий и навигации.
Держите типографику плотной и выверенной, особенно на масштабах Display.
Поддерживайте язык геометрии капсулы/круга для элементов управления и ключевых действий.
Позвольте изображениям продуктов нести визуальную драму; держите «хром» ненавязчивым.
Используйте обрамление, ведомое границами, в плотных торговых контекстах вместо тяжёлого декора карточек.
Сохраняйте чёткое разделение между модулями-витринами и транзакционными модулями, удерживая общие базовые токены.

Don't

Не вводите широкие вторичные акцентные палитры, конкурирующие с синим Apple.
Не злоупотребляйте тенями, эффектами свечения или декоративными градиентами в основном «хроме» интерфейса.
Не смешивайте несвязанные семейства шрифтов и не ослабляйте трекинг без разбора.
Не выравнивайте все углы до единого радиуса; Apple использует целенаправленные уровни радиуса.
Не перегружайте коммерческие модули толстыми границами или громкими визуальными эффектами.
Не убирайте нейтральную контрастную каденцию между тёмными и светлыми главами.
Не рассматривайте маркетинговые и покупочные потоки как отдельные дизайн-системы.

8. Адаптивное поведение

Breakpoints

Name	Width	Key Changes
Small Mobile	374px and below	Сжатые торговые элементы управления, одноколоночные стопки продуктов
Mobile	375px-640px	Одноколоночные модули, компактные ряды действий, уплотнённые селекторы
Tablet	641px-833px	Расширенные карточки и смешанные переходы между 1-2 колонками
Tablet Wide	834px-1023px	Более стабильный многоколоночный мерчандайзинг, более крупные текстовые блоки
Desktop	1024px-1240px	Полные торговые компоновки и структуры сравнения продуктов
Desktop Wide	1241px-1440px	Расширение героического маркетинга и более широкие интервалы секций
Large Desktop	1441px+	Максимальное «дыхание» глав и широкая редакторская композиция

Touch Targets

Основные и второстепенные действия обычно представлены в удобной для нажатия геометрии «пилюль»/кнопок.
Круглые медиа- и селекционные элементы управления соответствуют минимальной нажимаемой цели в мобильных контекстах.
Плотный коммерческий интерфейс использует компактные подписи, но сохраняет чёткие области попадания за счёт окружающих отступов формы.

Collapsing Strategy

Типографика героического маркетинга масштабируется вниз дискретными уровнями, сохраняя контраст иерархии.
Сетки продуктов и коммерции сворачиваются из многоколоночных в стопки карточек с сохранением видимости селекторов.
Утилитарная навигация сжимается в более простые группировки ссылок/элементов управления, сохраняя ключевые действия.
Кластеры опций/конфигурации становятся вертикально последовательными, чтобы поток покупки оставался линейным на малых экранах.

Image Behavior

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

9. Руководство по подсказкам для агента

Quick Color Reference

Синий основного действия: Apple Action Blue (#0071e3)
Синий встроенных ссылок: Body Link Blue (#0066cc)
Полотно тёмной главы: Absolute Black (#000000)
Полотно светлой главы: Pale Apple Gray (#f5f5f7)
Основной текст на светлом: Near-Black Ink (#1d1d1f)
Второстепенный текст: Secondary Neutral Gray (#6e6e73)
Мягкая торговая граница: Soft Border Gray (#d2d2d7)
Сильная торговая граница: Mid Border Gray (#86868b)

Example Component Prompts

"Спроектируйте героический блок продукта в стиле Apple на чёрном полотне (#000000) с заголовком SF Pro Display semibold (48-56px), лаконичным вспомогательным текстом и двумя капсульными CTA с использованием #0071e3 и #1d1d1f."
"Создайте коммерческую панель конфигурации на белом (#ffffff) с карточками со скруглением 18px, полями границ #86868b, основным текстом SF Pro Text 17px и компактными селекторами опций."
"Постройте сетку мерчандайзинговых карточек, чередующую поверхности #f5f5f7 и белые, с карточками «изображение в первую очередь», сдержанными тенями и метаданными SF Pro Text 14-17px."
"Сгенерируйте кластер элементов управления каруселью с использованием круглых кнопок (радиус 50%), приглушённых серых оверлеев и чёткой обратной связи об активном состоянии для навигации по галерее."
"Скомпонуйте смешанный ритм маркетинговой + торговой страницы: тёмная глава-витрина -> светлая функциональная глава -> плотный модуль списка продуктов, сохраняя синие акценты только для действий и ссылок."

Iteration Guide

Сначала зафиксируйте нейтральную основу (#000000, #f5f5f7, #ffffff), прежде чем настраивать акценты.
Держите синие акценты редкими и целенаправленными; если всё синее, иерархия рушится.
Настраивайте типографику в таком порядке: масштаб Display, читаемость основного текста, затем микроподписи.
Сопоставляйте радиус по классу компонента (поле, карточка, капсула, круг), а не одно универсальное скругление для всех.
Постепенно увеличивайте плотность при переходе от секций-витрин к коммерческим секциям.
Проверяйте, что изображения продуктов остаются сильнейшим визуальным слоем после каждой ревизии.

Known Gaps

Отдельные семантические цвета статуса (error/warning/success) не были последовательно видимы в извлечённом наборе страниц.
Некоторые интерактивные микросостояния различаются по модулям и не представлены как универсальные системные токены.
Несколько торговых модулей раскрывают контекстно-специфичные переопределения типографики, которые не встречаются на всех пяти страницах.

32 KiB Raw Blame History