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

7.3 KiB

Raw Blame History

Ontwerpsysteem geïnspireerd door OpenAI

Category: AI & LLM Rustig, bijna-monochromatisch systeem verankerd in een diep teal-zwart met royale witruimte en redactionele typografie.

1. Visueel Thema & Sfeer

Het productoppervlak van OpenAI leest als een onderzoekslab dat zich klaar heeft gemaakt voor het publiek — klinisch, ingetogen, bewust stil. De pagina-achtergrond is een puur wit (#ffffff) gelaagd over een bijna-zwarte inkt (#0d0d0d) met een subtiele teal-ondertoon, zodat zelfs de tekst iets afgekoeld aanvoelt in plaats van agressief donker. Het resultaat is een chromatische neutraliteit die modeluitvoer, code en proza centraal stelt — niet de chrome eromheen.

De kenmerkende aanpak is het gebruik van Söhne (of de systeemvervanger inter) op ingetogen gewichten — 400 voor lopende tekst, 500 voor navigatie en labels, 600 voor nadruk — gecombineerd met Signifier, een hedendaags schreeflettertype dat wordt ingezet voor redactionele weergave. Waar de meeste AI-merken futuristisch neigen, geven de schreefkoppen van OpenAI het product een stilletjes literaire toon, alsof elk aankondiging een essay is.

Het vormsysteem is uniform zacht: 8px–12px radii, 9999px pills voor tags en chips, geen harde hoeken ergens. Sectieovergangen worden aangeduid met witruimte in plaats van scheidingslijnen; wanneer randen verschijnen zijn het #e5e5e5 haarlijnen die eerder als afwezigheid van kleur worden gelezen dan als aanwezigheid ervan.

Belangrijkste Kenmerken:

Puur wit canvas (#ffffff) met diep teal-zwarte inkt (#0d0d0d)
Söhne / Inter op bescheiden gewichten (400, 500, 600) — terughoudendheid boven assertiviteit
Signifier schreef voor redactionele weergavekoppen
Zachte 8–12px radii overal; 9999px pills voor chips
Haarlijnen (#e5e5e5) spaarzaam ingezet; witruimte als primaire verdeler
Eenkleurige illustraties in diep teal — geen kleurverlopen in merktekens
Royale regelafstand (1.55–1.65) en spatiëring nabij nul

2. Kleurenpalet & Rollen

Primair

Puur Wit (#ffffff): Primaire achtergrond, kaartoppervlak, knopachtergrond.
Inktezwart (#0d0d0d): Primaire tekst, merkteken, primaire CTA.
Zacht Zwart (#1a1a1a): Secundaire kop, alternatieve inkt voor niet-kritieke tekst.

Oppervlak & Achtergrond

Nevel (#fafafa): Sectie-achtergrond voor afwisseling, voettekstoppervlak.
Parels (#f5f5f5): Kaartoppervlak, verheven paneel.
Wolk (#ececec): Uitgeschakelde achtergrond, scheidingslijn-tint.

Merkaccent

OpenAI Teal (#10a37f): Merkprimair, link, markeringsbadge — de enige kleur in een verder neutraal systeem.
Diep Teal (#0a7a5e): Hover- en ingedrukte staat voor de merkkleur.
Zacht Teal (#e8f5f0): Oppervlaktint voor succesbadges, gemarkeerde uitroepen.

Neutraal & Tekst

Grafiet (#3c3c3c): Broodtekst, standaard leeskleur.
Leisteen (#6e6e6e): Secundaire tekst, bijschriften, metadata.
As (#9b9b9b): Tertiaire tekst, plaatshouder, uitgeschakeld label.
Steen (#c4c4c4): Decoratieve scheidingslijnen, vage iconen.

Semantisch & Rand

Randhaarlijn (#e5e5e5): Standaard haarlijnscheidingsteken.
Zachte Rand (#ededed): Kaartomlijning op wit oppervlak.
Fout (#ef4146): Validatie, destructieve actie.
Waarschuwing (#f5a623): Zacht amber voor adviestoestanden.
Info (#2563eb): Informatieve linktoon (spaarzaam gebruikt; teal heeft voorrang).

3. Typografieregels

Lettertypefamilie

Weergave / Redactioneel: Signifier, met terugval: 'Source Serif Pro', Georgia, serif
Broodtekst / UI: Söhne, met terugval: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
Code / Mono: Söhne Mono, met terugval: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

Hiërarchie

Rol	Lettertype	Grootte	Gewicht	Regelafstand	Letterspatiëring	Notities
Weergave	Signifier	56px (3.5rem)	400	1.08	-0.02em	Redactionele hero, aankondigingstitels
H1	Söhne	40px (2.5rem)	600	1.15	-0.01em	Paginakop
H2	Söhne	28px (1.75rem)	600	1.2	-0.005em	Sectiekop
H3	Söhne	20px (1.25rem)	600	1.3	normal	Subsectie
Grote Broodtekst	Söhne	18px (1.125rem)	400	1.6	normal	Inleidende alinea's
Broodtekst	Söhne	16px (1rem)	400	1.65	normal	Standaard leestekst
Kleine Broodtekst	Söhne	14px (0.875rem)	400	1.55	normal	Kaartinhoud, compacte UI
Bijschrift	Söhne	13px (0.8125rem)	500	1.4	0.01em	Metadata, badges
Label	Söhne	12px (0.75rem)	500	1.3	0.04em	Wenkbrauw, navigatielinks in hoofdletters
Code	Söhne Mono	14px (0.875rem)	400	1.55	normal	Codeblokken, terminaluitvoer

Principes

Terughoudendheid als identiteit: gewichten beperkt tot 600; 700+ voelt merkreemd aan. Hiërarchie komt van grootte en kleur, niet van gewicht.
Schreef voor ziel, schreefloos voor systeem: Signifier verschijnt alleen in redactionele weergavemomenten. De product-UI is uitsluitend schreefloos.
Negatieve spatiëring bij weergave: -0.02em bij weergaveformaten; spatiëring keert terug naar nul bij 16px.

4. Componentstijlen

Knoppen

Primair

Achtergrond: #0d0d0d
Tekst: #ffffff
Opvulling: 10px 18px
Radius: 9999px (volledige pill) voor chips, 12px voor rechthoekige CTA's
Hover: #1a1a1a achtergrond
Gebruik: Primaire CTA, "Try ChatGPT", "Sign in"

Secundair

Achtergrond: #ffffff
Tekst: #0d0d0d
Rand: 1px solid #e5e5e5
Opvulling: 10px 18px
Radius: 12px
Hover: achtergrond #fafafa, rand #d4d4d4

Merkaccent

Achtergrond: #10a37f
Tekst: #ffffff
Opvulling: 10px 18px
Radius: 12px
Hover: #0a7a5e
Gebruik: Gemarkeerde upgrade-CTA, succespad

Kaarten

Achtergrond: #ffffff
Rand: 1px solid #ededed
Radius: 16px
Opvulling: 24px–32px
Schaduw: standaard geen; bij hover 0 4px 16px rgba(13,13,13,0.06)

Invoervelden

Achtergrond: #ffffff
Rand: 1px solid #e5e5e5
Radius: 12px
Opvulling: 12px 14px
Focus: rand #10a37f, ring 0 0 0 3px rgba(16,163,127,0.12)

Pills & Tags

Achtergrond: #f5f5f5
Tekst: #3c3c3c
Opvulling: 4px 10px
Radius: 9999px
Lettertype: 12px / 500

5. Afstand & Lay-out

Basiseenheid: 4px. Schaal: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Container: max-width 1200px, 24px marge op mobiel, 48px op desktop.
Sectieritmiek: 96–128px verticaal tussen grote secties; 64px op mobiel.
Raster: 12 kolommen op desktop, 4 kolommen op mobiel, 24px tussenruimte.

6. Beweging

Duur: 150–220ms voor hover; 280–360ms voor lay-outtransities.
Versnelling: cubic-bezier(0.16, 1, 0.3, 1) (vloeiend uit) voor ingangen.
Terughoudendheid: geen parallax, geen scroll-jacking. Uitsluitend subtiele vervaging en verschuiving.

7. Gebruiksrichtlijnen

Behoud de neutrale redactionele ingetogenheid, zachte radius en spaarzaam accentgebruik samen; groene accenten alleen creëren geen OpenAI-achtig oppervlak.
Gebruik Signifier-stijl weergavemomenten alleen voor redactionele of aankondigingshiërarchie, en houd productbesturingen in het schreefloze systeem.
Vermijd ornamentele beweging, zware schaduwen en overmaatse decoratieve kaarten; het systeem moet rustig, leesbaar en doordacht aanvoelen.

7.3 KiB Raw Blame History Unescape Escape