④段整套同步（六节＋ 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 @@
+# Sistema di design ispirato a Pinterest
+
+> Category: Media e consumatori
+> Scoperta visiva. Accento rosso, griglia a muratura, immagine prima.
+
+## 1. Tema visivo e atmosfera
+
+Il sito web di Pinterest è una tela calda e ricca di ispirazione che tratta la scoperta visiva come una rivista di lifestyle. Il design si basa su uno sfondo bianco morbido e leggermente caldo con il Rosso Pinterest (`#e60023`) come unico e audace accento del brand. A differenza dei blu freddi della maggior parte delle piattaforme tecnologiche, la scala di neutri di Pinterest ha un sottotono decisamente caldo — i grigi tendono verso l'oliva/sabbia (`#91918c`, `#62625b`, `#e5e5e0`) piuttosto che verso l'acciaio freddo, creando un'atmosfera accogliente e artigianale che invita alla navigazione.
+
+La tipografia usa Pin Sans — un carattere proprietario personalizzato con un'ampia pila di fallback che include caratteri giapponesi, a riflettere la portata globale di Pinterest. Alla scala display (70px, peso 600), Pin Sans crea titoli grandi e accoglienti. Nelle dimensioni più piccole, il sistema è compatto: bottoni a 12px, didascalie a 12–14px. Il sistema di denominazione delle variabili CSS (`--comp-*`, `--sema-*`, `--base-*`) rivela una sofisticata architettura di token di design a tre livelli: componente, semantico e base.
+
+Ciò che distingue Pinterest è il suo generoso sistema di raggi dei bordi (12px–40px, più 50% per i cerchi) e gli sfondi dei bottoni con tonalità calda. Il bottone secondario (`#e5e5e0`) ha una tonalità sabbia distintamente calda piuttosto che grigio freddo. Il bottone rosso primario usa un raggio di 16px — arrotondato ma non a forma di pillola. Combinato con gli sfondi caldi dei badge (`hsla(60,20%,98%,.5)` — un sottile lavaggio giallo-caldo) e i layout dominati dalla fotografia, il risultato è un design che sembra artigianale e personale, non aziendale e sterile.
+
+**Caratteristiche chiave:**
+- Tela bianca calda con neutri nelle tonalità oliva/sabbia — accogliente, non clinico
+- Rosso Pinterest (`#e60023`) come unico accento audace — mai sottile, sempre sicuro
+- Carattere personalizzato Pin Sans con pila di fallback globale (incluso CJK)
+- Architettura di token a tre livelli: `--comp-*` / `--sema-*` / `--base-*`
+- Superfici secondarie calde: grigio sabbia (`#e5e5e0`), badge caldo (`hsla(60,20%,98%,.5)`)
+- Raggio dei bordi generoso: 16px standard, fino a 40px per i contenitori grandi
+- Contenuto con fotografia prima — i pin/immagini sono l'elemento visivo principale
+- Testo quasi viola scuro (`#211922`) — caldo, con un tocco di prugna
+
+## 2. Tavolozza dei colori e ruoli
+
+### Brand principale
+- **Rosso Pinterest** (`#e60023`): CTA primario, accento del brand — rosso audace e sicuro
+- **Verde 700** (`#103c25`): `--base-color-green-700`, accento successo/natura
+- **Verde 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, verde premuto
+
+### Testo
+- **Nero prugna** (`#211922`): Testo principale — quasi nero caldo con sottotono prugna
+- **Nero** (`#000000`): Testo secondario, testo del bottone
+- **Grigio oliva** (`#62625b`): Descrizioni secondarie, testo attenuato
+- **Argento caldo** (`#91918c`): `--comp-button-color-text-transparent-disabled`, testo disabilitato, bordi di input
+- **Bianco** (`#ffffff`): Testo su superfici scure/colorate
+
+### Interattivo
+- **Blu focus** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, anelli di focus
+- **Viola performance** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, funzionalità di performance
+- **Viola raccomandazione** (`#7e238b`): `--sema-color-hover-text-recommendation`, raccomandazione IA
+- **Blu link** (`#2b48d4`): Colore del testo del link
+- **Blu Facebook** (`#0866ff`): `--facebook-background-color`, accesso social
+- **Blu premuto** (`#617bff`): `--base-color-pressed-blue-200`, stato premuto
+
+### Superficie e bordo
+- **Grigio sabbia** (`#e5e5e0`): Sfondo bottone secondario — caldo, artigianale
+- **Luce calda** (`#e0e0d9`): Sfondi bottoni circolari, badge
+- **Lavaggio caldo** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, sfondo badge caldo sottile
+- **Nebbia** (`#f6f6f3`): Superficie chiara (al 50% di opacità)
+- **Bordo disabilitato** (`#c8c8c1`): `--sema-color-border-disabled`, bordi disabilitati
+- **Grigio hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, bordo al passaggio del cursore
+- **Superficie scura** (`#33332e`): Sfondi delle sezioni scure
+
+### Semantico
+- **Rosso errore** (`#9e0a0a`): Stati di errore checkbox/modulo
+
+## 3. Regole tipografiche
+
+### Famiglia di caratteri
+- **Principale**: `Pin Sans`, fallback: `-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`
+
+### Gerarchia
+
+| Ruolo | Carattere | Dimensione | Peso | Altezza di riga | Spaziatura lettere | Note |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Impatto massimo |
+| Titolo sezione | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking negativo |
+| Corpo | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Lettura standard |
+| Didascalia grassetto | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Metadati forti |
+| Didascalia | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Testo piccolo, tag |
+| Bottone | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Etichette bottone |
+
+### Principi
+- **Scala tipografica compatta**: L'intervallo è 12px–70px con un salto drammatico — la maggior parte del testo funzionale è a 12–16px, creando una gerarchia di informazioni densa, simile a un'app.
+- **Distribuzione del peso calda**: 600–700 per i titoli, 400–500 per il corpo. Nessun peso ultrasottile — il tipo sembra sempre sostanziale.
+- **Tracking negativo nei titoli**: -1,2px nei titoli di 28px crea titoli di sezione accoglienti e intimi.
+- **Famiglia di caratteri singola**: Pin Sans gestisce tutto — nessun carattere display secondario o a spaziatura fissa rilevato.
+
+## 4. Stili dei componenti
+
+### Bottoni
+
+**Rosso primario**
+- Sfondo: `#e60023` (Rosso Pinterest)
+- Testo: `#000000` (nero — scelta insolita per il contrasto sul rosso)
+- Padding: 6px 14px
+- Raggio: 16px (generosamente arrotondato, non a pillola)
+- Bordo: `2px solid rgba(255, 255, 255, 0)` (trasparente)
+- Focus: bordo semantico + contorno tramite variabili CSS
+
+**Sabbia secondario**
+- Sfondo: `#e5e5e0` (grigio sabbia caldo)
+- Testo: `#000000`
+- Padding: 6px 14px
+- Raggio: 16px
+- Focus: stesso sistema di bordo semantico
+
+**Azione circolare**
+- Sfondo: `#e0e0d9` (luce calda)
+- Testo: `#211922` (nero prugna)
+- Raggio: 50% (cerchio)
+- Uso: azioni pin, controlli di navigazione
+
+**Ghost / Trasparente**
+- Sfondo: trasparente
+- Testo: `#000000`
+- Nessun bordo
+- Uso: azioni terziarie
+
+### Schede e contenitori
+- Schede pin con fotografia prima e raggio generoso (12px–20px)
+- Nessuna ombra box tradizionale sulla maggior parte delle schede
+- Sfondi bianchi o nebbia calda
+- Bordo bianco spesso di 8px su alcuni contenitori di immagini
+
+### Input
+- Input email: sfondo bianco, bordo `1px solid #91918c`, raggio 16px, padding 11px 15px
+- Focus: sistema di bordo semantico + contorno tramite variabili CSS
+
+### Navigazione
+- Intestazione pulita su sfondo bianco o caldo
+- Logo Pinterest + barra di ricerca centrati
+- Pin Sans 16px per i link di navigazione
+- Accenti Rosso Pinterest per gli stati attivi
+
+### Trattamento delle immagini
+- Griglia a muratura stile pin (layout caratteristico di Pinterest)
+- Angoli arrotondati: 12px–20px sulle immagini
+- Fotografia come contenuto principale — ogni pin è un'immagine
+- Bordi bianchi spessi (8px) sui contenitori delle immagini in evidenza
+
+## 5. Principi di layout
+
+### Sistema di spaziatura
+- Unità base: 8px
+- Scala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
+- Salti grandi: 32px → 80px → 100px per la spaziatura delle sezioni
+
+### Griglia e contenitore
+- Griglia a muratura per il contenuto dei pin (layout caratteristico)
+- Sezioni di contenuto centrate con larghezza massima generosa
+- Footer scuro a larghezza intera
+- Barra di ricerca come elemento di navigazione principale
+
+### Filosofia degli spazi bianchi
+- **Densità di ispirazione**: La griglia a muratura comprime i pin — la densità del contenuto È la proposta di valore. Lo spazio bianco esiste tra le sezioni, non all'interno della griglia.
+- **Respira sopra, densità sotto**: Le sezioni hero/in evidenza ricevono padding generoso; la griglia dei pin è compatta e immersiva.
+
+### Scala del raggio dei bordi
+- Standard (12px): Schede piccole, link
+- Bottone (16px): Bottoni, input, schede medie
+- Comodo (20px): Schede in evidenza
+- Grande (28px): Contenitori grandi
+- Sezione (32px): Elementi tab, pannelli grandi
+- Hero (40px): Contenitori hero, blocchi in evidenza grandi
+- Cerchio (50%): Bottoni di azione, indicatori tab
+
+## 6. Profondità ed elevazione
+
+| Livello | Trattamento | Uso |
+|-------|-----------|-----|
+| Piatto (Livello 0) | Nessuna ombra | Predefinito — i pin si affidano al contenuto, non all'ombra |
+| Sottile (Livello 1) | Ombra minimale (dai token) | Overlay elevati, menu a tendina |
+| Focus (Accessibilità) | Anello `--sema-color-border-focus-outer-default` | Stati di focus |
+
+**Filosofia delle ombre**: Pinterest usa ombre minimali. La griglia a muratura si affida al contenuto (fotografia) per creare interesse visivo piuttosto che agli effetti di elevazione. La profondità deriva dal calore dei colori delle superfici e dall'arrotondamento generoso dei contenitori.
+
+## 7. Da fare e da non fare
+
+### Da fare
+- Usare neutri caldi (`#e5e5e0`, `#e0e0d9`, `#91918c`) — il tono caldo oliva/sabbia è l'identità
+- Applicare il Rosso Pinterest (`#e60023`) solo per i CTA principali — è audace e singolare
+- Usare Pin Sans esclusivamente — un carattere per tutto
+- Applicare raggio dei bordi generoso: 16px per bottoni/input, 20px+ per schede
+- Mantenere la griglia a muratura densa — la densità del contenuto è il valore
+- Usare sfondi badge caldi (`hsla(60,20%,98%,.5)`) per lavaggi caldi sottili
+- Usare `#211922` (nero prugna) per il testo principale — più caldo del nero puro
+
+### Da non fare
+- Non usare neutri grigio freddi — sempre caldo/tonalità oliva
+- Non usare il nero puro (`#000000`) come testo principale — usare il nero prugna (`#211922`)
+- Non usare bottoni a forma di pillola — il raggio di 16px è arrotondato ma non a pillola
+- Non aggiungere ombre pesanti — Pinterest è piatto per design, la profondità viene dal contenuto
+- Non usare piccolo raggio dei bordi (<12px) sulle schede — l'arrotondamento generoso è essenziale
+- Non introdurre colori del brand aggiuntivi — rosso + neutri caldi è la tavolozza completa
+- Non usare pesi del carattere sottili — Pin Sans minimo 400
+
+## 8. Comportamento responsivo
+
+### Punti di interruzione
+| Nome | Larghezza | Cambiamenti chiave |
+|------|-------|-------------|
+| Mobile | <576px | Colonna singola, layout compatto |
+| Mobile grande | 576–768px | Griglia pin a 2 colonne |
+| Tablet | 768–890px | Griglia espansa |
+| Desktop piccolo | 890–1312px | Griglia a muratura standard |
+| Desktop | 1312–1440px | Layout completo |
+| Desktop grande | 1440–1680px | Colonne griglia espanse |
+| Ultra wide | >1680px | Densità massima della griglia |
+
+### Strategia di riduzione
+- Griglia pin: 5+ colonne → 3 → 2 → 1
+- Navigazione: barra di ricerca + icone → nav mobile semplificata
+- Sezioni in evidenza: fianco a fianco → impilate
+- Hero: 70px → scala proporzionalmente verso il basso
+- Footer: scuro multicolonna → impilato
+
+## 9. Guida ai prompt per agenti
+
+### Riferimento rapido dei colori
+- Brand: Rosso Pinterest (`#e60023`)
+- Sfondo: Bianco (`#ffffff`)
+- Testo: Nero prugna (`#211922`)
+- Testo secondario: Grigio oliva (`#62625b`)
+- Superficie bottone: Grigio sabbia (`#e5e5e0`)
+- Bordo: Argento caldo (`#91918c`)
+- Focus: Blu focus (`#435ee5`)
+
+### Esempi di prompt per componenti
+- "Creare un hero: sfondo bianco. Titolo a 70px Pin Sans peso 600, nero prugna (#211922). Bottone CTA rosso (#e60023, raggio 16px, padding 6px 14px). Bottone sabbia secondario (#e5e5e0, raggio 16px)."
+- "Progettare una scheda pin: sfondo bianco, raggio 16px, nessuna ombra. La fotografia riempie la parte superiore, descrizione 16px Pin Sans peso 400 sotto in #62625b."
+- "Costruire un bottone di azione circolare: sfondo #e0e0d9, raggio 50%, icona #211922."
+- "Creare un campo di input: sfondo bianco, 1px solid #91918c, raggio 16px, padding 11px 15px. Focus: contorno blu tramite token semantici."
+- "Progettare il footer scuro: sfondo #33332e. Logo script Pinterest in bianco. Link 12px Pin Sans in #91918c."
+
+### Guida all'iterazione
+1. Neutri caldi ovunque — grigi oliva/sabbia, mai acciaio freddo
+2. Rosso Pinterest solo per i CTA — audace e singolare
+3. Raggio di 16px su bottoni/input, 20px+ su schede — generoso ma non a pillola
+4. Pin Sans è l'unico carattere — compatto a 12px per l'interfaccia, 70px per il display
+5. La fotografia porta il design — l'interfaccia rimane calda e minimale
+6. Nero prugna (#211922) per il testo — più caldo del nero puro