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.4 KiB

Raw Blame History

Design System Inspired by OpenAI

Category: AI & LLM Sistema calmo e quasi monocromatico, ancorato a un teal-nero profondo con ampio spazio bianco e tipografia editoriale.

1. Visual Theme & Atmosphere

La superficie prodotto di OpenAI si legge come un laboratorio di ricerca vestito per il pubblico — clinico, contenuto, deliberatamente silenzioso. Lo sfondo della pagina è un bianco puro (#ffffff) sovrapposto a un inchiostro quasi nero (#0d0d0d) con una sottile sfumatura teal, così che persino il testo appaia leggermente freddo piuttosto che aggressivamente scuro. Il risultato è una neutralità cromatica che mette al centro l'output del modello, il codice e la prosa, non gli elementi decorativi intorno a essi.

La mossa distintiva è l'uso di Söhne (o il suo sostituto di sistema inter) con pesi contenuti — 400 per il corpo, 500 per navigazione ed etichette, 600 per l'enfasi — abbinato a Signifier, un serif contemporaneo usato per i titoli editoriali di grande formato. Mentre la maggior parte dei brand AI punta al futuristico, i titoli serif di OpenAI conferiscono al prodotto un tono discretamente letterario, come se ogni annuncio fosse un saggio.

Il sistema delle forme è uniformemente morbido: raggi da 8px a 12px, pillole da 9999px per tag e chip, nessun angolo netto. Le transizioni tra sezioni sono indicate dallo spazio bianco piuttosto che da divisori; quando i bordi compaiono sono linee sottilissime #e5e5e5 che si leggono come assenza di colore piuttosto che come sua presenza.

Key Characteristics:

Tela bianco puro (#ffffff) con inchiostro teal-nero profondo (#0d0d0d)
Söhne / Inter a pesi moderati (400, 500, 600) — contenimento rispetto all'affermazione
Serif Signifier per i titoli editoriali di grande formato
Raggi morbidi da 8–12px ovunque; pillole da 9999px per i chip
Bordi a linea sottile (#e5e5e5) usati con parsimonia; lo spazio bianco come divisore principale
Illustrazioni monocromatiche in teal profondo — nessun gradiente nei segni grafici
Interlinea generosa (1.55–1.65) e tracking prossimo allo zero

2. Color Palette & Roles

Primary

Pure White (#ffffff): Sfondo primario, superficie della card, sfondo del pulsante.
Ink Black (#0d0d0d): Testo primario, marchio, CTA primaria.
Soft Black (#1a1a1a): Intestazione secondaria, inchiostro alternativo per testo non critico.

Surface & Background

Mist (#fafafa): Sfondo di separazione sezione, superficie del footer.
Pearl (#f5f5f5): Superficie della card, pannello elevato.
Cloud (#ececec): Sfondo disabilitato, tonalità divisore.

Brand Accent

OpenAI Teal (#10a37f): Brand primario, link, badge in evidenza — l'unico colore in un sistema altrimenti neutro.
Teal Deep (#0a7a5e): Stato hover e premuto per il colore brand.
Teal Soft (#e8f5f0): Tinta di superficie per badge di successo, callout in evidenza.

Neutrals & Text

Graphite (#3c3c3c): Testo corpo, colore di lettura predefinito.
Slate (#6e6e6e): Testo secondario, didascalie, metadati.
Ash (#9b9b9b): Testo terziario, segnaposto, etichetta disabilitata.
Stone (#c4c4c4): Divisori decorativi, icone tenui.

Semantic & Border

Border Hairline (#e5e5e5): Separatore a linea sottile standard.
Border Soft (#ededed): Contorno della card su superficie bianca.
Error (#ef4146): Validazione, azione distruttiva.
Warning (#f5a623): Ambra tenue per stati di avviso.
Info (#2563eb): Tono link informativo (usato con parsimonia; il teal ha comunque la precedenza).

3. Typography Rules

Font Family

Display / Editorial: Signifier, con fallback: 'Source Serif Pro', Georgia, serif
Body / UI: Söhne, con fallback: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
Code / Mono: Söhne Mono, con fallback: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Signifier	56px (3.5rem)	400	1.08	-0.02em	Hero editoriale, titoli di annuncio
H1	Söhne	40px (2.5rem)	600	1.15	-0.01em	Intestazione pagina
H2	Söhne	28px (1.75rem)	600	1.2	-0.005em	Intestazione sezione
H3	Söhne	20px (1.25rem)	600	1.3	normal	Sottosezione
Body Large	Söhne	18px (1.125rem)	400	1.6	normal	Paragrafi di apertura
Body	Söhne	16px (1rem)	400	1.65	normal	Testo di lettura standard
Body Small	Söhne	14px (0.875rem)	400	1.55	normal	Corpo card, UI densa
Caption	Söhne	13px (0.8125rem)	500	1.4	0.01em	Metadati, badge
Label	Söhne	12px (0.75rem)	500	1.3	0.04em	Eyebrow, link nav maiuscoli
Code	Söhne Mono	14px (0.875rem)	400	1.55	normal	Blocchi di codice, output terminale

Principles

Il contenimento come identità: i pesi si fermano a 600; il 700+ è fuori brand. La gerarchia deriva da dimensione e colore, non dal peso.
Serif per l'anima, sans per il sistema: Signifier appare solo nei momenti editoriali di grande formato. L'interfaccia prodotto è esclusivamente sans.
Tracking negativo per il display: -0.02em sulle dimensioni display; il tracking torna a zero a partire da 16px.

4. Component Stylings

Buttons

Primary

Background: #0d0d0d
Text: #ffffff
Padding: 10px 18px
Radius: 9999px (pillola intera) sui chip, 12px sulle CTA rettangolari
Hover: sfondo #1a1a1a
Use: CTA primaria, "Try ChatGPT", "Sign in"

Secondary

Background: #ffffff
Text: #0d0d0d
Border: 1px solid #e5e5e5
Padding: 10px 18px
Radius: 12px
Hover: sfondo #fafafa, bordo #d4d4d4

Brand Accent

Background: #10a37f
Text: #ffffff
Padding: 10px 18px
Radius: 12px
Hover: #0a7a5e
Use: CTA upgrade in evidenza, percorso di successo

Cards

Background: #ffffff
Border: 1px solid #ededed
Radius: 16px
Padding: 24px–32px
Shadow: nessuna per impostazione predefinita; al hover 0 4px 16px rgba(13,13,13,0.06)

Inputs

Background: #ffffff
Border: 1px solid #e5e5e5
Radius: 12px
Padding: 12px 14px
Focus: bordo #10a37f, anello 0 0 0 3px rgba(16,163,127,0.12)

Pills & Tags

Background: #f5f5f5
Text: #3c3c3c
Padding: 4px 10px
Radius: 9999px
Font: 12px / 500

5. Spacing & Layout

Unità base: 4px. Scala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Container: max-width 1200px, gutter 24px su mobile, 48px su desktop.
Ritmo delle sezioni: 96–128px verticali tra le sezioni principali; 64px su mobile.
Griglia: 12 colonne desktop, 4 colonne mobile, gap 24px.

6. Motion

Durata: 150–220ms per hover; 280–360ms per le transizioni di layout.
Easing: cubic-bezier(0.16, 1, 0.3, 1) (uscita fluida) per gli ingressi.
Contenimento: nessun parallax, nessuno scroll-jacking. Solo sottile fade e translate.

7. Usage Guardrails

Preservare insieme il contenimento editoriale neutro, il raggio morbido e l'uso scarso dell'accento; gli accenti verdi da soli non creano una superficie simile a OpenAI.
Usare i momenti display in stile Signifier solo per la gerarchia editoriale o degli annunci, mantenendo i controlli prodotto nel sistema sans.
Evitare motion ornamentali, ombre pesanti e card decorative sovradimensionate; il sistema deve sembrare calmo, leggibile e deliberato.

7.4 KiB Raw Blame History Unescape Escape