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

12 KiB

Raw Blame History

Система дизайну, натхненна GitHub

Category: Інструменти для розробників Платформа з акцентом на код. Функціональна щільність, точність синього на білому, основи Primer.

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

Поверхня GitHub спроєктована, а не прикрашена. Кожен піксель виражає позицію: це інструмент для людей, які дбають про дифи, збірки та пул-реквести. Фон сторінки — чистий #ffffff (світла тема) або #0d1117 (темна), де вміст розташований на щільних прямокутних панелях, розділених тонкими рамками, а не відступами. Інформаційна щільність — це і є бренд: рядки списків, рядки коду, заголовки репозиторіїв і картки сповіщень стоять впритул, щоб досвідчений користувач міг переглянути сотню елементів без прокрутки.

Характерні акценти — синій Primer (#0969da) для посилань і основних дій та зелений GitHub (#1a7f37) для злитих станів, успіху та самої кнопки злиття. Обидва виглядають дещо приглушено порівняно з синіми та зеленими кольорами споживчих продуктів — достатньо насичені, щоб читатися на тлі щільного сірого тексту, і достатньо стримані, щоб зникати у фоні, коли кілька з них з'являються в одному вікні перегляду.

Типографіка використовує стек system-ui в усьому продукті, щоб текст чітко відображався в будь-якій ОС, у поєднанні з SFMono / Menlo / Consolas для коду. Тут немає редакторського шрифту для заголовків; голос GitHub — це голос системи, яку ви вже використовуєте.

Ключові характеристики:

Справді білий холст (#ffffff) або глибокий темно-синій-чорний (#0d1117) — без тепла, без відтінку
Тонкі сірі рамки (#d0d7de) визначають кожну панель і блок
Синій Primer (#0969da) для посилань/основних дій; зелений GitHub (#1a7f37) для успіху/злиття
system-ui для прозового тексту; SFMono для коду — жодного власного шрифту
Щільні рядки списків із мінімальними відступами; відстань між елементами — рідкість
Іконографія Octicon 16px / 24px — одинарний штрих, геометрична, послідовна
Значки статусу у вигляді таблеток із чіткою колірною семантикою

2. Кольорова палітра та ролі

Основні

Canvas Default (#ffffff): Основний фон сторінки, світла тема.
Canvas Subtle (#f6f8fa): Вторинна поверхня, бічна панель, фон поля введення, смуга заголовка.
Canvas Inset (#eaeef2): Фон блоку коду, глибоко вкладена поверхня.
Fg Default (#1f2328): Основний текст, заголовки, чорнило.
Fg Muted (#656d76): Другорядний текст, підписи, шляхи до файлів.

Акцент бренду

Primer Blue (#0969da): Посилання, основні CTA, базове кільце фокусу — універсальний інтерактивний колір.
Primer Blue Hover (#0550ae): Стан наведення/натискання для основного синього.
Accent Subtle (#ddf4ff): М'яка синя поверхня для виносок, інформаційних банерів.

Семантичні

Success / Merge Green (#1a7f37): Злиті PR, значки успіху, кнопка злиття.
Success Subtle (#dafbe1): Відтінок поверхні успіху.
Open Green (#1a7f37): Стан «відкрито» для задачі/PR.
Closed / Danger Red (#cf222e): Закриті PR, деструктивна дія, помилка валідації.
Danger Subtle (#ffebe9): Поверхня банера помилки.
Attention / Warning Yellow (#9a6700): Текст попередження на бурштиновому фоні.
Attention Subtle (#fff8c5): Поверхня банера попередження.
Done Purple (#8250df): Злито й заархівовано, стан «виконано», преміум-значок.
Sponsor Pink (#bf3989): Серце спонсорів, бренд GitHub Sponsors.

Рамки та розділювачі

Border Default (#d0d7de): Стандартна тонка рамка, контур панелі.
Border Muted (#d8dee4): Внутрішні розділювачі всередині панелі.
Border Subtle (#eaeef2): Ледь помітні розділювачі рядків таблиці.

Темна тема

Dark Canvas (#0d1117): Фон сторінки в темній темі.
Dark Surface (#161b22): Бічна панель, заголовок, вторинна поверхня.
Dark Border (#30363d): Стандартна рамка в темному режимі.
Dark Fg (#e6edf3): Основний текст на темному фоні.

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

Сімейство шрифтів

Основний текст / UI: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
Код / Моноширинний: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
Emoji: "Apple Color Emoji", "Segoe UI Emoji"

Ієрархія

Роль	Шрифт	Розмір	Насиченість	Міжрядковий інтервал	Міжлітерний інтервал	Примітки
Display	system-ui	32px (2rem)	600	1.25	-0.01em	Заголовок репозиторію, маркетинговий герой
H1	system-ui	24px (1.5rem)	600	1.25	normal	Заголовок сторінки
H2	system-ui	20px (1.25rem)	600	1.25	normal	Заголовок розділу
H3	system-ui	16px (1rem)	600	1.25	normal	Підрозділ, заголовок панелі
Body	system-ui	14px (0.875rem)	400	1.5	normal	Розмір тексту за замовчуванням — не 16px
Body Small	system-ui	12px (0.75rem)	400	1.4	normal	Підписи, метадані файлів
Code	SFMono	12px (0.75rem)	400	1.45	normal	Блоки коду, дифи
Code Inline	SFMono	0.85em	400	inherit	normal	Вбудовані `code` фрагменти

Принципи

14px для основного тексту, не 16px: Щільність прозового тексту GitHub — це його ідентичність. Продукт відображається при 14px, щоб вмістити більше рядків у вікні перегляду.
Бінарна насиченість: 400 для всього за замовчуванням; 600 для заголовків і виділення. Ніяких 500 або 700.
Системні шрифти завжди: ніколи не завантажуйте веб-шрифт для інтерфейсу — текст повинен відображатися миттєво на повільних з'єднаннях.

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

Кнопки

Основна (зелена)

Background: #1f883d
Text: #ffffff
Border: 1px solid rgba(31, 35, 40, 0.15)
Padding: 5px 16px
Radius: 6px
Shadow: 0 1px 0 rgba(31,35,40,0.1)
Hover: background #1a7f37
Використання: «Створити репозиторій», «Злити пул-реквест»

Стандартна

Background: #f6f8fa
Text: #1f2328
Border: 1px solid #d0d7de
Padding: 5px 16px
Radius: 6px
Hover: background #f3f4f6, border #d0d7de

Контурна (стиль синього посилання)

Background: #ffffff
Text: #0969da
Border: 1px solid #d0d7de
Hover: background #0969da, text #ffffff

Небезпечна

Background: #ffffff
Text: #cf222e
Border: 1px solid #d0d7de
Hover: background #a40e26, text #ffffff, border #a40e26

Картки / Блоки

Background: #ffffff
Border: 1px solid #d0d7de
Radius: 6px
Padding: 16px (заголовок) + 16px (тіло)
Заголовок має смугу #f6f8fa з нижньою рамкою.

Поля введення

Background: #ffffff
Border: 1px solid #d0d7de
Radius: 6px
Padding: 5px 12px
Focus: border #0969da, ring 0 0 0 3px rgba(9,105,218,0.3)

Таблетки статусу (задача / PR)

Відкрито: background #1a7f37, текст білий, padding 4px 10px, radius 9999px.
Закрито: background #cf222e, текст білий.
Злито: background #8250df, текст білий.
Чернетка: background #6e7781, текст білий.

Мітки (теги на задачах/PR)

Padding: 0 7px
Radius: 9999px
Font: 12px / 500
Фон і текст визначаються програмно (колір мітки → текст обчислюється для контрастності).

5. Відступи та макет

Базова одиниця: 4px. Шкала відступів: 4, 8, 12, 16, 24, 32, 40, 48.
Максимальна ширина сторінки: 1280px (Container-xl).
Бічна панель: 296px на десктопі, згортається нижче 1012px.
Відступ рядка: 16px горизонтальний, 12px вертикальний (списки щільні за задумом).

6. Анімація

Тривалість: 80ms для наведення; 200ms для відкриття меню/поповера.
Прискорення: ease-out для відкриття, ease-in для закриття.
Уникається: анімація при завантаженні сторінки, ефект паралаксу, постійні мікровзаємодії. Елементи з'являються; вони не виступають.

7. Обмеження використання

Тримайте щільні списки, блоки з рамками та системну типографіку разом; одних зелених кнопок недостатньо, щоб створити поверхню, схожу на GitHub.
Використовуйте зелений для конструктивних дій у репозиторії, синій — для посилань і фокусу, а червоний/фіолетовий/сірий — лише для станів задач, PR і робочих процесів.
Надавайте перевагу тихому інтерфейсу, чітким рамкам і компактним відступам, а не декоративним тіням або великим картками у маркетинговому стилі.

12 KiB Raw Blame History