admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
749c0e3d5d6bf84a05fce1a76775f87eaf2ed8d3
workbuddy_skills/open-design/design-systems/figma/DESIGN-uk.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

20 KiB
Raw Blame History

Дизайн-система натхненна Figma

Категорія: Дизайн і творчість Інструмент для колаборативного дизайну. Яскрава багатоколірність, грайливий і водночас професійний стиль.

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

Інтерфейс Figma — це дизайн-інструмент, який спроектував сам себе: справжній майстер-клас типографічної витонченості, де кастомний варіативний шрифт (figmaSans) модулює вагу від гострої тонкої (weight 320) до жирної (weight 700) із зупинками на незвичних проміжних значеннях (330, 340, 450, 480, 540), які більшість типографічних систем ніколи не досліджує. Такий точний контроль ваги дає кожному текстовому елементу ретельно відкалібровану візуальну вагу — ієрархія будується на мікровідмінностях, а не на грубому розподілі «звичайний — жирний».

Сторінка демонструє захопливу двоїстість: хром інтерфейсу суворо чорно-білий (буквально лише #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, яка уособлює творчі можливості інструменту.
  • Градієнти секцій продукту: окремі зони продукту (Дизайн, Dev Mode, Прототипування) можуть мати власні кольорові теми у своїх вітринах.

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 Легкий основний текст
Моно-мітка figmaMono 18px (1.13rem) 400 1.30 (тісно) 0.54px Мітки секцій у верхньому регістрі
Моно маленький figmaMono 12px (0.75rem) 400 1.00 (тісно) 0.6px Дрібні теги у верхньому регістрі

Принципи

  • Точність варіативного шрифту: figmaSans використовує значення ваги, яких більшість систем ніколи не торкається — 320, 330, 340, 450, 480, 540. Це створює ієрархію через тонкі різниці ваги, а не різкі стрибки. Різниця між 330 і 340 майже непомітна, але структурно значуща.
  • Легкість як основа: більшість основного тексту використовує 320–340 (легше за типові 400 «regular»), створюючи ефірний, повітряний досвід читання, що відповідає естетиці дизайн-інструменту.
  • Кернінг скрізь: кожен текстовий елемент вмикає OpenType-функцію "kern" — кернінг не є опціональним, він структурний.
  • Негативний трекінг за замовчуванням: навіть основний текст використовує міжлітерний інтервал від -0.1px до -0.26px, що створює універсально щільний текст. Текст типу Display стискається далі — до -0.96px та -1.72px.
  • Моно для структури: 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 (зображення, картки, діалоги)
  • Тінь: тонкі та середні ефекти підняття
  • Скриншоти продукту як вміст карток

Навігація

  • Чиста горизонтальна навігація на білому
  • Логотип: wordmark Figma чорним кольором
  • Вкладки продукту: навігація у формі пілюль (50px)
  • Посилання: чорний текст, підкреслення 1px
  • CTA: чорна кнопка-пілюля
  • Hover: колір тексту через CSS-змінну

Унікальні компоненти

Панель вкладок продукту

  • Горизонтальні вкладки у формі пілюль (радіус 50px)
  • Кожна вкладка представляє окрему зону продукту Figma (Дизайн, Dev Mode, Прототипування тощо)
  • Активна вкладка підсвічена

Секція з градієнтом hero

  • Яскравий багатоколірний градієнт на всю ширину
  • Накладення білого тексту з заголовком Display 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) Тонка тінь Плаваючі картки, стани hover

Філософія тіней: 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. Посібник із запитів для агентів

Швидкий довідник кольорів

  • Все: «Pure Black (#000000)» і «Pure White (#ffffff)»
  • Glass Dark: «rgba(0, 0, 0, 0.08)»
  • Glass Light: «rgba(255, 255, 255, 0.16)»

Приклади запитів для компонентів

  • "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
  • "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
  • "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
  • "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."

Посібник з ітерацій

  1. Використовуйте значення ваги варіативного шрифту точно: 320, 330, 340, 450, 480, 540, 700
  2. Інтерфейс — завжди чорний + білий, ніколи не додавайте кольорів до хрому
  3. Штрихові контури фокусу, не суцільні
  4. Міжлітерний інтервал основного тексту — завжди негативний, моно-міток — завжди позитивний
  5. Пілюля (50px) для кнопок/вкладок, коло (50%) для кнопок з іконками
Reference in new issue View Git Blame Copy Permalink