④段整套同步（六节＋ 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
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,233 @@
+# Ontwerpsysteem Geïnspireerd door Pinterest
+
+> Category: Media & Consumer
+> Visuele ontdekking. Rood accent, masonry-raster, afbeelding staat centraal.
+
+## 1. Visueel Thema & Sfeer
+
+De website van Pinterest is een warm, inspirerend canvas dat visuele ontdekking behandelt als een lifestylemagazine. Het ontwerp werkt op een zachte, licht warme witte achtergrond met Pinterest Red (`#e60023`) als het enige, gedurfde merkaccent. In tegenstelling tot de koele blauwtinten van de meeste techplatforms heeft de neutrale schaal van Pinterest een duidelijk warme ondertoon — grijstinten neigen naar olijf/zand (`#91918c`, `#62625b`, `#e5e5e0`) in plaats van koel staal, wat een gezellige, ambachtelijke sfeer creëert die uitnodigt tot browsen.
+
+De typografie maakt gebruik van Pin Sans — een aangepast propriëtair lettertype met een brede fallback-stack inclusief Japanse lettertypen, wat de wereldwijde reikwijdte van Pinterest weerspiegelt. Op displayschaal (70px, gewicht 600) creëert Pin Sans grote, uitnodigende koppen. Op kleinere formaten is het systeem compact: knoppen op 12px, onderschriften op 12–14px. Het CSS-variabelennaamgevingssysteem (`--comp-*`, `--sema-*`, `--base-*`) onthult een verfijnde drielaagse ontwerptokenarchitectuur: tokens op component-, semantisch en basisniveau.
+
+Wat Pinterest onderscheidt, is zijn genereuze border-radius-systeem (12px–40px, plus 50% voor cirkels) en warm getinte knopachtergronden. De secundaire knop (`#e5e5e0`) heeft een duidelijk warme, zandachtige toon in plaats van koud grijs. De primaire rode knop gebruikt een radius van 16px — afgerond maar niet pilvormig. Gecombineerd met warme badge-achtergronden (`hsla(60,20%,98%,.5)` — een subtiele geel-warme waas) en door fotografie gedomineerde layouts, resulteert dit in een ontwerp dat handgemaakt en persoonlijk aanvoelt, niet zakelijk en steriel.
+
+**Kernkenmerken:**
+- Warm wit canvas met olijf/zandkleurige neutrale tinten — gezellig, niet klinisch
+- Pinterest Red (`#e60023`) als enig gedurfd accent — nooit subtiel, altijd zelfverzekerd
+- Aangepast lettertype Pin Sans met wereldwijde fallback-stack (inclusief CJK)
+- Drielaagse tokenarchitectuur: `--comp-*` / `--sema-*` / `--base-*`
+- Warme secundaire oppervlakken: zandgrijs (`#e5e5e0`), warme badge (`hsla(60,20%,98%,.5)`)
+- Genereuze border-radius: 16px standaard, tot 40px voor grote containers
+- Fotografie-eerste inhoud — pins/afbeeldingen zijn het primaire visuele element
+- Donker bijna-paars tekst (`#211922`) — warm, met een vleugje pruim
+
+## 2. Kleurenpalet & Rollen
+
+### Primair Merk
+- **Pinterest Red** (`#e60023`): Primaire CTA, merkaccent — gedurfd, zelfverzekerd rood
+- **Green 700** (`#103c25`): `--base-color-green-700`, succes-/natuuraccent
+- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, ingedrukt groen
+
+### Tekst
+- **Pruimzwart** (`#211922`): Primaire tekst — warme bijna-zwart met pruimondertoon
+- **Zwart** (`#000000`): Secundaire tekst, knoptekst
+- **Olijfgrijs** (`#62625b`): Secundaire beschrijvingen, gedempte tekst
+- **Warm Zilver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, uitgeschakelde tekst, invoergransen
+- **Wit** (`#ffffff`): Tekst op donkere/gekleurde oppervlakken
+
+### Interactief
+- **Focusblauw** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focusringen
+- **Prestatiepaars** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, prestatiefuncties
+- **Aanbevelingspaars** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI-aanbeveling
+- **Linkblauw** (`#2b48d4`): Linktekstkleur
+- **Facebookblauw** (`#0866ff`): `--facebook-background-color`, sociale login
+- **Ingedrukt Blauw** (`#617bff`): `--base-color-pressed-blue-200`, ingedrukte toestand
+
+### Oppervlak & Rand
+- **Zandgrijs** (`#e5e5e0`): Achtergrond secundaire knop — warm, ambachtelijk
+- **Warm Licht** (`#e0e0d9`): Achtergronden cirkelvormige knoppen, badges
+- **Warme Waas** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtiele warme badge-achtergrond
+- **Mist** (`#f6f6f3`): Licht oppervlak (bij 50% dekking)
+- **Uitgeschakelde Rand** (`#c8c8c1`): `--sema-color-border-disabled`, uitgeschakelde randen
+- **Hovergrijs** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hoverrand
+- **Donker Oppervlak** (`#33332e`): Achtergronden donkere secties
+
+### Semantisch
+- **Foutrood** (`#9e0a0a`): Foutstatus voor selectievakjes/formulieren
+
+## 3. Typografieregels
+
+### Lettertypefamilie
+- **Primair**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
+
+### Hiërarchie
+
+| Rol | Lettertype | Grootte | Gewicht | Regelhoogte | Letterafstand | Notities |
+|-----|-----------|---------|---------|-------------|---------------|---------|
+| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normaal | normaal | Maximale impact |
+| Sectiekop | Pin Sans | 28px (1.75rem) | 700 | normaal | -1.2px | Negatieve tracking |
+| Hoofdtekst | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normaal | Standaard lezen |
+| Vet onderschrift | Pin Sans | 14px (0.88rem) | 700 | normaal | normaal | Sterke metadata |
+| Onderschrift | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normaal | Kleine tekst, tags |
+| Knop | Pin Sans | 12px (0.75rem) | 400 | normaal | normaal | Knoplabels |
+
+### Principes
+- **Compacte typeschaal**: Het bereik is 12px–70px met een dramatische sprong — de meeste functionele tekst is 12–16px, waardoor een dichte, app-achtige informatiehiërarchie ontstaat.
+- **Warme gewichtsverdeling**: 600–700 voor koppen, 400–500 voor hoofdtekst. Geen ultra-lichte gewichten — de typografie voelt altijd substantieel aan.
+- **Negatieve tracking op koppen**: -1.2px op 28px-koppen creëert gezellige, intieme sectietitels.
+- **Enkele lettertypefamilie**: Pin Sans verzorgt alles — geen secundair display- of monospace-lettertype gedetecteerd.
+
+## 4. Componentstijlen
+
+### Knoppen
+
+**Primair Rood**
+- Achtergrond: `#e60023` (Pinterest Red)
+- Tekst: `#000000` (zwart — ongebruikelijke keuze voor contrast op rood)
+- Opvulling: 6px 14px
+- Radius: 16px (royaal afgerond, niet pilvormig)
+- Rand: `2px solid rgba(255, 255, 255, 0)` (transparant)
+- Focus: semantische rand + omtrek via CSS-variabelen
+
+**Secundair Zand**
+- Achtergrond: `#e5e5e0` (warm zandgrijs)
+- Tekst: `#000000`
+- Opvulling: 6px 14px
+- Radius: 16px
+- Focus: hetzelfde semantische randsysteem
+
+**Cirkelvormige Actie**
+- Achtergrond: `#e0e0d9` (warm licht)
+- Tekst: `#211922` (pruimzwart)
+- Radius: 50% (cirkel)
+- Gebruik: Pinacties, navigatiecontroles
+
+**Ghost / Transparant**
+- Achtergrond: transparant
+- Tekst: `#000000`
+- Geen rand
+- Gebruik: Tertiaire acties
+
+### Kaarten & Containers
+- Fotografie-eerste pinkaarten met royale radius (12px–20px)
+- Geen traditionele box-shadow op de meeste kaarten
+- Witte of warme mistige achtergronden
+- Witte dikke rand van 8px op sommige afbeeldingscontainers
+
+### Invoervelden
+- E-mailinvoer: witte achtergrond, `1px solid #91918c` rand, radius 16px, opvulling 11px 15px
+- Focus: semantisch rand- en omtreksysteem via CSS-variabelen
+
+### Navigatie
+- Schone koptekst op witte of warme achtergrond
+- Pinterest-logo + zoekbalk gecentreerd
+- Pin Sans 16px voor navigatielinks
+- Pinterest Red-accenten voor actieve toestanden
+
+### Beeldbehandeling
+- Masonry-raster in pinstijl (kenmerkende Pinterest-layout)
+- Afgeronde hoeken: 12px–20px op afbeeldingen
+- Fotografie als primaire inhoud — elke pin is een afbeelding
+- Dikke witte randen (8px) op uitgelichte afbeeldingscontainers
+
+## 5. Layoutprincipes
+
+### Spaatsysteem
+- Basiseenheid: 8px
+- Schaal: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
+- Grote sprongen: 32px → 80px → 100px voor sectie-spatiëring
+
+### Raster & Container
+- Masonry-raster voor pin-inhoud (kenmerkende layout)
+- Gecentreerde inhoudssecties met royale maximale breedte
+- Donkere voettekst op volledige breedte
+- Zoekbalk als primair navigatie-element
+
+### Witruimtefilosofie
+- **Inspiratiedichtheid**: Het masonry-raster pakt pins dicht op elkaar — de inhoudsdichtheid IS de waardepropositie. Witruimte bestaat tussen secties, niet binnen het raster.
+- **Adem boven, dichtheid onder**: Hero-/functiesecties krijgen royale opvulling; het pinraster is compact en immersief.
+
+### Border Radius-schaal
+- Standaard (12px): Kleine kaarten, links
+- Knop (16px): Knoppen, invoervelden, middelgrote kaarten
+- Comfortabel (20px): Functiekaarten
+- Groot (28px): Grote containers
+- Sectie (32px): Tabelementen, grote panelen
+- Hero (40px): Hero-containers, grote functieblokken
+- Cirkel (50%): Actieknoppen, tabindicatoren
+
+## 6. Diepte & Elevatie
+
+| Niveau | Behandeling | Gebruik |
+|--------|-------------|---------|
+| Vlak (Niveau 0) | Geen schaduw | Standaard — pins vertrouwen op inhoud, niet op schaduw |
+| Subtiel (Niveau 1) | Minimale schaduw (van tokens) | Verhoogde overlays, dropdowns |
+| Focus (Toegankelijkheid) | `--sema-color-border-focus-outer-default` ring | Focustoestanden |
+
+**Schaduwfilosofie**: Pinterest gebruikt minimale schaduwen. Het masonry-raster vertrouwt op inhoud (fotografie) om visuele interesse te creëren in plaats van elevatie-effecten. Diepte komt van de warmte van oppervlakkleuren en de royale afronding van containers.
+
+## 7. Do's en Don'ts
+
+### Doen
+- Gebruik warme neutralen (`#e5e5e0`, `#e0e0d9`, `#91918c`) — de warme olijf-/zandtoon is de identiteit
+- Pas Pinterest Red (`#e60023`) alleen toe voor primaire CTA's — het is gedurfd en enkelvoudig
+- Gebruik Pin Sans uitsluitend — één lettertype voor alles
+- Pas royale border-radius toe: 16px voor knoppen/invoervelden, 20px+ voor kaarten
+- Houd het masonry-raster dicht — inhoudsdichtheid is de waarde
+- Gebruik warme badge-achtergronden (`hsla(60,20%,98%,.5)`) voor subtiele warme wazen
+- Gebruik `#211922` (pruimzwart) voor primaire tekst — het is warmer dan puur zwart
+
+### Niet Doen
+- Gebruik geen koele grijze neutralen — altijd warm/olijfgetint
+- Gebruik geen puur zwart (`#000000`) als primaire tekst — gebruik pruimzwart (`#211922`)
+- Gebruik geen pilvormige knoppen — een radius van 16px is afgerond maar niet pilvormig
+- Voeg geen zware schaduwen toe — Pinterest is plat by design, diepte komt van inhoud
+- Gebruik geen kleine border-radius (<12px) op kaarten — de royale afronding is essentieel
+- Introduceer geen extra merkkleuren — rood + warme neutralen is het complete palet
+- Gebruik geen dunne lettergewichten — Pin Sans minimaal 400
+
+## 8. Responsief Gedrag
+
+### Breekpunten
+| Naam | Breedte | Belangrijke Wijzigingen |
+|------|---------|------------------------|
+| Mobiel | <576px | Enkele kolom, compact layout |
+| Groot Mobiel | 576–768px | 2-koloms pinraster |
+| Tablet | 768–890px | Uitgebreid raster |
+| Klein Bureau | 890–1312px | Standaard masonry-raster |
+| Bureau | 1312–1440px | Volledige layout |
+| Groot Bureau | 1440–1680px | Uitgebreide rasterkolommen |
+| Ultrabreed | >1680px | Maximale rasterdichtheid |
+
+### Samenvouwstrategie
+- Pinraster: 5+ kolommen → 3 → 2 → 1
+- Navigatie: zoekbalk + pictogrammen → vereenvoudigde mobiele navigatie
+- Functiesecties: naast elkaar → gestapeld
+- Hero: 70px → schaalt proportioneel omlaag
+- Voettekst: donkere meerdere kolommen → gestapeld
+
+## 9. Agentpromptgids
+
+### Snelle Kleurverwijzing
+- Merk: Pinterest Red (`#e60023`)
+- Achtergrond: Wit (`#ffffff`)
+- Tekst: Pruimzwart (`#211922`)
+- Secundaire tekst: Olijfgrijs (`#62625b`)
+- Knopoppervlak: Zandgrijs (`#e5e5e0`)
+- Rand: Warm Zilver (`#91918c`)
+- Focus: Focusblauw (`#435ee5`)
+
+### Voorbeeldcomponentprompts
+- "Maak een hero: witte achtergrond. Kop van 70px Pin Sans gewicht 600, pruimzwart (#211922). Rode CTA-knop (#e60023, radius 16px, opvulling 6px 14px). Secundaire zandknop (#e5e5e0, radius 16px)."
+- "Ontwerp een pinkaart: witte achtergrond, radius 16px, geen schaduw. Fotografie vult de bovenkant, beschrijving van 16px Pin Sans gewicht 400 eronder in #62625b."
+- "Bouw een cirkelvormige actieknop: achtergrond #e0e0d9, radius 50%, pictogram #211922."
+- "Maak een invoerveld: witte achtergrond, 1px solid #91918c, radius 16px, opvulling 11px 15px. Focus: blauwe omtrek via semantische tokens."
+- "Ontwerp de donkere voettekst: achtergrond #33332e. Pinterest-scriptlogo in wit. Links van 12px Pin Sans in #91918c."
+
+### Iteratiegids
+1. Warme neutralen overal — olijf-/zandgrijzen, nooit koel staal
+2. Pinterest Red alleen voor CTA's — gedurfd en enkelvoudig
+3. Radius 16px op knoppen/invoervelden, 20px+ op kaarten — royaal maar niet pilvormig
+4. Pin Sans is het enige lettertype — compact op 12px voor UI, 70px voor display
+5. Fotografie draagt het ontwerp — de UI blijft warm en minimaal
+6. Pruimzwart (#211922) voor tekst — warmer dan puur zwart