④段整套同步（六节＋ 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,249 @@
+# Sistema di Design Ispirato a Spotify
+
+> Category: Media e Consumer
+> Streaming musicale. Verde vibrante su sfondo scuro, tipografia decisa, guidato dall'arte degli album.
+
+## 1. Tema Visivo e Atmosfera
+
+L'interfaccia web di Spotify è un music player scuro e immersivo che avvolge gli ascoltatori in un bozzolo quasi nero (`#121212`, `#181818`, `#1f1f1f`), dove l'arte degli album e i contenuti diventano la principale fonte di colore. La filosofia di design è "content-first darkness" — l'interfaccia si ritira nell'ombra affinché musica, podcast e playlist possano risplendere. Ogni superficie è una tonalità di antracite, creando un ambiente teatrale in cui il solo vero colore proviene dall'iconico Spotify Green (`#1ed760`) e dalle copertine degli album stessi.
+
+La tipografia utilizza SpotifyMixUI e SpotifyMixUITitle — font proprietari della famiglia CircularSp (Circular di Lineto, personalizzato per Spotify) con un ampio stack di fallback che include font arabi, ebraici, cirillici, greci, Devanagari e CJK, a riflesso della portata globale di Spotify. Il sistema tipografico è compatto e funzionale: 700 (bold) per l'enfasi e la navigazione, 600 (semibold) per l'enfasi secondaria e 400 (regular) per il corpo del testo. I pulsanti usano il maiuscolo con letter-spacing positivo (1.4px–2px) per una qualità sistematica da etichetta.
+
+Ciò che distingue Spotify è la sua geometria a pillola e cerchio. I pulsanti primari usano un raggio da 500px a 9999px (pillola completa), i pulsanti circolari di play usano un raggio del 50%, e gli input di ricerca sono pillole da 500px. Combinando ombre pesanti (`rgba(0,0,0,0.5) 0px 8px 24px`) sugli elementi elevati con un'esclusiva combinazione di bordo inset-shadow (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), il risultato è un'interfaccia che ricorda un dispositivo audio premium — tattile, arrotondata e costruita per il tocco.
+
+**Caratteristiche Principali:**
+- Tema scuro immersivo quasi nero (`#121212`–`#1f1f1f`) — l'interfaccia scompare dietro al contenuto
+- Spotify Green (`#1ed760`) come unico accento di brand — mai decorativo, sempre funzionale
+- Famiglia di font SpotifyMixUI/CircularSp con supporto per scritture globali
+- Pulsanti a pillola (500px–9999px) e controlli circolari (50%) — arrotondati, ottimizzati per il tocco
+- Etichette dei pulsanti in maiuscolo con ampio letter-spacing (1.4px–2px)
+- Ombre pesanti sugli elementi elevati (`rgba(0,0,0,0.5) 0px 8px 24px`)
+- Colori semantici: rosso negativo (`#f3727f`), arancione di avviso (`#ffa42b`), blu di annuncio (`#539df5`)
+- L'arte degli album come fonte primaria di colore — l'interfaccia è acromatica per design
+
+## 2. Palette Colori e Ruoli
+
+### Brand Primario
+- **Spotify Green** (`#1ed760`): Accento primario del brand — pulsanti play, stati attivi, CTA
+- **Quasi Nero** (`#121212`): Superficie di sfondo più profonda
+- **Superficie Scura** (`#181818`): Card, contenitori, superfici elevate
+- **Medio Scuro** (`#1f1f1f`): Sfondi di pulsanti, superfici interattive
+
+### Testo
+- **Bianco** (`#ffffff`): `--text-base`, testo primario
+- **Argento** (`#b3b3b3`): Testo secondario, etichette attenuate, nav inattiva
+- **Quasi Bianco** (`#cbcbcb`): Testo secondario leggermente più luminoso
+- **Chiaro** (`#fdfdfd`): Quasi bianco puro per la massima enfasi
+
+### Semantici
+- **Rosso Negativo** (`#f3727f`): `--text-negative`, stati di errore
+- **Arancione di Avviso** (`#ffa42b`): `--text-warning`, stati di avviso
+- **Blu di Annuncio** (`#539df5`): `--text-announcement`, stati informativi
+
+### Superficie e Bordo
+- **Card Scura** (`#252525`): Superficie di card elevata
+- **Card Media** (`#272727`): Superficie di card alternativa
+- **Grigio Bordo** (`#4d4d4d`): Bordi dei pulsanti su sfondo scuro
+- **Bordo Chiaro** (`#7c7c7c`): Bordi di pulsanti con contorno, link attenuati
+- **Separatore** (`#b3b3b3`): Linee divisorie
+- **Superficie Chiara** (`#eeeeee`): Pulsanti in modalità chiara (raro)
+- **Bordo Spotify Green** (`#1db954`): Variante di bordo con accento verde
+
+### Ombre
+- **Pesante** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialoghi, menu, pannelli elevati
+- **Media** (`rgba(0,0,0,0.3) 0px 8px 8px`): Card, dropdown
+- **Bordo Inset** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Combinazione bordo-ombra per gli input
+
+## 3. Regole Tipografiche
+
+### Famiglie di Font
+- **Titolo**: `SpotifyMixUITitle`, fallback: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
+- **UI / Corpo**: `SpotifyMixUI`, stesso stack di fallback
+
+### Gerarchia
+
+| Ruolo | Font | Dimensione | Peso | Altezza Riga | Letter Spacing | Note |
+|------|------|------|--------|-------------|----------------|-------|
+| Titolo di Sezione | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Peso titolo bold |
+| Intestazione Feature | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (compatto) | normal | Intestazioni sezione semibold |
+| Corpo Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Testo enfatizzato |
+| Corpo | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Corpo standard |
+| Pulsante Maiuscolo | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (compatto) | 1.4px–2px | `text-transform: uppercase` |
+| Pulsante | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Pulsante standard |
+| Link Nav Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigazione |
+| Link Nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Nav inattiva |
+| Didascalia Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadati bold |
+| Didascalia | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadati |
+| Piccolo Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tag, contatori |
+| Piccolo | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Testo fine |
+| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
+| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Testo minimo |
+
+### Principi
+- **Binario bold/regular**: La maggior parte del testo è 700 (bold) o 400 (regular), con il 600 usato con parsimonia. Questo crea una chiara gerarchia visiva tramite il contrasto di peso piuttosto che la variazione di dimensione.
+- **Pulsanti in maiuscolo come sistema**: Le etichette dei pulsanti usano il maiuscolo + ampio letter-spacing (1.4px–2px), creando una voce "etichetta" sistematica distinta dal testo dei contenuti.
+- **Dimensioni compatte**: L'intervallo va da 10px a 24px — più ristretto della maggior parte dei sistemi. La tipografia di Spotify è compatta e funzionale, progettata per scorrere le playlist, non per leggere articoli.
+- **Supporto per scritture globali**: L'esteso stack di fallback (arabo, ebraico, cirillico, greco, Devanagari, CJK) riflette la presenza di Spotify in oltre 180 mercati.
+
+## 4. Stili dei Componenti
+
+### Pulsanti
+
+**Pillola Scura**
+- Background: `#1f1f1f`
+- Testo: `#ffffff` o `#b3b3b3`
+- Padding: 8px 16px
+- Raggio: 9999px (pillola completa)
+- Uso: Pillole di navigazione, azioni secondarie
+
+**Pillola Scura Grande**
+- Background: `#181818`
+- Testo: `#ffffff`
+- Padding: 0px 43px
+- Raggio: 500px
+- Uso: Pulsanti di navigazione principali dell'app
+
+**Pillola Chiara**
+- Background: `#eeeeee`
+- Testo: `#181818`
+- Raggio: 500px
+- Uso: CTA in modalità chiara (consenso cookie, marketing)
+
+**Pillola con Contorno**
+- Background: trasparente
+- Testo: `#ffffff`
+- Bordo: `1px solid #7c7c7c`
+- Padding: 4px 16px 4px 36px (asimmetrico per icona)
+- Raggio: 9999px
+- Uso: Pulsanti Segui, azioni secondarie
+
+**Play Circolare**
+- Background: `#1f1f1f`
+- Testo: `#ffffff`
+- Padding: 12px
+- Raggio: 50% (cerchio)
+- Uso: Controlli play/pausa
+
+### Card e Contenitori
+- Background: `#181818` o `#1f1f1f`
+- Raggio: 6px–8px
+- Nessun bordo visibile sulla maggior parte delle card
+- Hover: leggero schiarimento dello sfondo
+- Ombra: `rgba(0,0,0,0.3) 0px 8px 8px` sugli elementi elevati
+
+### Input
+- Input di ricerca: sfondo `#1f1f1f`, testo `#ffffff`
+- Raggio: 500px (pillola)
+- Padding: 12px 96px 12px 48px (consapevole dell'icona)
+- Focus: il bordo diventa `#000000`, outline `1px solid`
+
+### Navigazione
+- Barra laterale scura con SpotifyMixUI 14px peso 700 per gli elementi attivi, 400 per quelli inattivi
+- `#b3b3b3` colore attenuato per gli elementi inattivi, `#ffffff` per quelli attivi
+- Pulsanti icona circolari (raggio 50%)
+- Logo Spotify in alto a sinistra in verde
+
+## 5. Principi di Layout
+
+### Sistema di Spaziatura
+- Unità base: 8px
+- Scala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
+
+### Griglia e Contenitore
+- Barra laterale (fissa) + area contenuto principale
+- Card album/playlist basate su griglia
+- Barra "ora in riproduzione" a larghezza piena in basso
+- L'area contenuto responsive occupa lo spazio rimanente
+
+### Filosofia degli Spazi Bianchi
+- **Compressione scura**: Spotify addensa i contenuti — griglie di playlist, elenchi di tracce e navigazione sono tutti a spaziatura ravvicinata. Lo sfondo scuro fornisce riposo visivo tra gli elementi senza necessitare di grandi spazi.
+- **Densità dei contenuti prima del respiro**: Questa è un'app, non un sito di marketing. Ogni pixel serve l'esperienza di ascolto.
+
+### Scala dei Raggi dei Bordi
+- Minimo (2px): Badge, tag espliciti
+- Sottile (4px): Input, elementi piccoli
+- Standard (6px): Contenitori di copertine album, card
+- Confortevole (8px): Sezioni, dialoghi
+- Medio (10px–20px): Pannelli, elementi overlay
+- Grande (100px): Pulsanti a pillola grandi
+- Pillola (500px): Pulsanti primari, input di ricerca
+- Pillola Completa (9999px): Pillole di navigazione, ricerca
+- Cerchio (50%): Pulsanti play, avatar, icone
+
+## 6. Profondità ed Elevazione
+
+| Livello | Trattamento | Uso |
+|-------|-----------|-----|
+| Base (Livello 0) | Sfondo `#121212` | Strato più profondo, sfondo della pagina |
+| Superficie (Livello 1) | `#181818` o `#1f1f1f` | Card, barra laterale, contenitori |
+| Elevato (Livello 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menu a tendina, card al passaggio del mouse |
+| Dialogo (Livello 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modali, overlay, menu |
+| Inset (Bordo) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Bordi degli input |
+
+**Filosofia delle Ombre**: Spotify utilizza ombre notevolmente pesanti per un'app a tema scuro. L'ombra con opacità 0.5 a 24px di blur crea un effetto drammatico di "fluttuazione nel buio" per dialoghi e menu, mentre quella con opacità 0.3 a 8px di blur fornisce un sollevamento più sottile per le card. L'esclusiva combinazione di bordo inset-shadow sugli input crea una qualità tattile e incassata.
+
+## 7. Cosa Fare e Cosa Non Fare
+
+### Fare
+- Usare sfondi quasi neri (`#121212`–`#1f1f1f`) — profondità tramite variazione di tonalità
+- Applicare Spotify Green (`#1ed760`) solo per i controlli di riproduzione, gli stati attivi e le CTA primarie
+- Usare la forma a pillola (500px–9999px) per tutti i pulsanti — circolare (50%) per i controlli play
+- Applicare maiuscolo + ampio letter-spacing (1.4px–2px) sulle etichette dei pulsanti
+- Mantenere la tipografia compatta (intervallo 10px–24px) — questa è un'app, non una rivista
+- Usare ombre pesanti (opacità 0.3–0.5) per gli elementi elevati su sfondi scuri
+- Lasciare che l'arte degli album fornisca il colore — l'interfaccia stessa è acromatica
+
+### Non Fare
+- Non usare Spotify Green in modo decorativo o sugli sfondi — è solo funzionale
+- Non usare sfondi chiari per le superfici primarie — l'immersione nel buio è fondamentale
+- Non omettere la geometria a pillola/cerchio sui pulsanti — i pulsanti squadrati spezzano l'identità
+- Non usare ombre sottili/leggere — su sfondi scuri, le ombre devono essere pesanti per essere visibili
+- Non aggiungere ulteriori colori di brand — verde + grigi acromatici è la palette completa
+- Non usare interlinee rilassate — la tipografia di Spotify è compatta e densa
+- Non esporre bordi grigi grezzi — usare invece bordi basati su ombre o bordi inset
+
+## 8. Comportamento Responsive
+
+### Breakpoint
+| Nome | Larghezza | Modifiche Principali |
+|------|-------|-------------|
+| Mobile Piccolo | <425px | Layout mobile compatto |
+| Mobile | 425–576px | Mobile standard |
+| Tablet | 576–768px | Griglia a 2 colonne |
+| Tablet Grande | 768–896px | Layout espanso |
+| Desktop Piccolo | 896–1024px | Barra laterale visibile |
+| Desktop | 1024–1280px | Layout desktop completo |
+| Desktop Grande | >1280px | Griglia espansa |
+
+### Strategia di Collasso
+- Barra laterale: completa → ridotta → nascosta
+- Griglia album: 5 colonne → 3 → 2 → 1
+- Barra "ora in riproduzione": mantenuta a tutte le dimensioni
+- Ricerca: input a pillola mantenuto, la larghezza si adatta
+- Navigazione: barra laterale → barra inferiore su mobile
+
+## 9. Guida al Prompt per l'Agente
+
+### Riferimento Rapido ai Colori
+- Sfondo: Quasi Nero (`#121212`)
+- Superficie: Card Scura (`#181818`)
+- Testo: Bianco (`#ffffff`)
+- Testo secondario: Argento (`#b3b3b3`)
+- Accento: Spotify Green (`#1ed760`)
+- Bordo: `#4d4d4d`
+- Errore: Rosso Negativo (`#f3727f`)
+
+### Esempi di Prompt per Componenti
+- "Crea una card scura: sfondo `#181818`, raggio 8px. Titolo a 16px SpotifyMixUI peso 700, testo bianco. Sottotitolo a 14px peso 400, `#b3b3b3`. Ombra `rgba(0,0,0,0.3) 0px 8px 8px` al passaggio del mouse."
+- "Progetta un pulsante a pillola: sfondo `#1f1f1f`, testo bianco, raggio 9999px, padding 8px 16px. 14px SpotifyMixUI peso 700, maiuscolo, letter-spacing 1.4px."
+- "Costruisci un pulsante play circolare: sfondo Spotify Green (`#1ed760`), icona `#000000`, raggio 50%, padding 12px."
+- "Crea un input di ricerca: sfondo `#1f1f1f`, testo bianco, raggio 500px, padding 12px 48px. Bordo inset: `rgb(124,124,124) 0px 0px 0px 1px inset`."
+- "Progetta la barra laterale di navigazione: sfondo `#121212`. Elementi attivi: 14px peso 700, bianco. Inattivi: 14px peso 400, `#b3b3b3`."
+
+### Guida all'Iterazione
+1. Inizia con `#121212` — tutto vive nell'oscurità quasi nera
+2. Spotify Green solo per evidenziazioni funzionali (play, attivo, CTA)
+3. Usa la pillola ovunque — 500px per le grandi, 9999px per le piccole, 50% per le circolari
+4. Maiuscolo + ampia spaziatura sui pulsanti — la voce sistematica da etichetta
+5. Ombre pesanti (opacità 0.3–0.5) per l'elevazione — le ombre leggere sono invisibili sul scuro
+6. L'arte degli album fornisce tutto il colore — l'interfaccia rimane acromatica