admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
16 KiB
16 KiB
Design System Inspired by Cohere
Category: AI & LLM Piattaforma AI enterprise. Gradienti vivaci, estetica da dashboard ricca di dati.
1. Tema Visivo e Atmosfera
L'interfaccia di Cohere è un deck di comando enterprise rifinito — deciso, pulito, progettato per far percepire l'AI come un'infrastruttura seria piuttosto che un giocattolo consumer. L'esperienza vive su una tela bianco brillante dove i contenuti sono organizzati in card generosamente arrotondate (raggio 22px) che creano un linguaggio di contenimento organico, simile alle nuvole. È un sito che parla a CTO e architetti enterprise: professionale senza essere freddo, sofisticato senza essere intimidatorio.
Il linguaggio di design unisce due mondi con un sistema a doppio carattere tipografico: CohereText, un serif display personalizzato con tracking stretto, conferisce ai titoli il peso di un manifesto tecnologico, mentre Unica77 Cohere Web gestisce tutto il testo corpo e UI con precisione geometrica svizzera. Questo abbinamento serif/sans crea una personalità di "autorità sicura incontra chiarezza ingegneristica" che riflette perfettamente una piattaforma AI enterprise.
Il colore è usato con estrema moderazione — l'interfaccia è quasi interamente in bianco e nero con bordi grigio freddo (#d9d9dd, #e5e7eb). Il viola-violetto appare solo nelle bande hero fotografiche, nelle sezioni con gradienti e nell'interattivo blu (#1863dc) che segnala gli stati hover e focus. Questa moderazione cromatica significa che quando il colore APPARE — negli screenshot di prodotto, nelle fotografie enterprise e nella sezione viola profondo — porta il massimo peso visivo.
Caratteristiche Chiave:
- Tela bianco brillante con bordi di contenimento grigio freddo
- Raggio del bordo caratteristico di 22px — la distintiva "rotondità della card Cohere"
- Doppio carattere tipografico personalizzato: CohereText (serif display) + Unica77 (sans corpo)
- Moderazione cromatica di livello enterprise: nero, bianco, grigi freddi, accento viola-blu minimale
- Sezioni hero viola profondo/violetto che forniscono un contrasto drammatico
- Pulsanti ghost/trasparenti che virano al blu al passaggio del mouse
- Fotografia enterprise che mostra diverse applicazioni nel mondo reale
- CohereMono per codice ed etichette tecniche con trasformazioni maiuscole
2. Palette Colori e Ruoli
Primari
- Cohere Black (
#000000): Testo dei titoli principale ed elementi di massima enfasi. - Near Black (
#212121): Colore standard dei link del corpo — leggermente più morbido del nero puro. - Deep Dark (
#17171c): Un quasi-nero con sfumatura blu per la navigazione e il testo nelle sezioni scure.
Secondari e Accenti
- Interaction Blue (
#1863dc): L'accento interattivo primario — appare al passaggio del mouse sui pulsanti, negli stati focus e nei link attivi. L'unico colore d'azione cromatico. - Ring Blue (
#4c6ee6al 50%): Colore del ring Tailwind per gli indicatori di focus da tastiera. - Focus Purple (
#9b60aa): Colore del bordo di focus degli input — un violetto attenuato.
Superfici e Sfondi
- Pure White (
#ffffff): Lo sfondo principale della pagina e la superficie delle card. - Snow (
#fafafa): Superfici elevate sottili e sfondi delle sezioni chiare. - Lightest Gray (
#f2f2f2): Bordi delle card e le linee di contenimento più morbide.
Neutri e Testo
- Muted Slate (
#93939f): Link footer de-enfatizzati e testo terziario — un grigio dai toni freddi con una leggera sfumatura blu-violetto. - Border Cool (
#d9d9dd): Bordi standard di sezione e di elemento di lista — un grigio freddo con leggera sfumatura violacea. - Border Light (
#e5e7eb): Variante bordo più chiara — il gray-200 standard di Tailwind.
Sistema di Gradienti
- Banda Hero Viola-Violetto: Sezioni con gradiente viola profondo che creano un contrasto drammatico rispetto alla tela bianca. Appaiono come bande a piena larghezza che ospitano screenshot di prodotto e messaggi chiave.
- Gradiente Footer Scuro: La pagina transisce attraverso viola profondo/carbone fino al footer nero, creando un effetto "tramonto".
3. Regole Tipografiche
Famiglia di Caratteri
- Display:
CohereText, con fallback:Space Grotesk, Inter, ui-sans-serif, system-ui - Corpo / UI:
Unica77 Cohere Web, con fallback:Inter, Arial, ui-sans-serif, system-ui - Codice:
CohereMono, con fallback:Arial, ui-sans-serif, system-ui - Icone:
CohereIconDefault(font di icone personalizzato)
Gerarchia
| Ruolo | Font | Dimensione | Peso | Altezza Riga | Spaziatura Lettere | Note |
|---|---|---|---|---|---|---|
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (stretto) | -1.44px | Impatto massimo, autorità serif |
| Display Secondario | CohereText | 60px (3.75rem) | 400 | 1.00 (stretto) | -1.2px | Intestazioni di sezione grandi |
| Intestazione Sezione | Unica77 | 48px (3rem) | 400 | 1.20 (stretto) | -0.48px | Titoli sezione feature |
| Sotto-intestazione | Unica77 | 32px (2rem) | 400 | 1.20 (stretto) | -0.32px | Intestazioni card, nomi feature |
| Titolo Feature | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Titoli sezione più piccoli |
| Corpo Grande | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Paragrafi introduttivi |
| Corpo / Pulsante | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Corpo standard, testo pulsante |
| Pulsante Medio | Unica77 | 14px (0.88rem) | 500 | 1.71 (rilassato) | normal | Pulsanti più piccoli, etichette enfatizzate |
| Didascalia | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadati, descrizioni |
| Etichetta Maiuscola | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Etichette di sezione in maiuscolo |
| Piccolo | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Testo più piccolo, link footer |
| Codice Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Etichette codice in maiuscolo minuscolo |
Principi
- Serif per la dichiarazione, sans per l'utilità: CohereText porta la voce del brand alla scala display — le sue terminazioni serif danno ai titoli l'autorità della ricerca pubblicata. Unica77 gestisce tutto il funzionale con neutralità geometrico-svizzera.
- Tracking negativo alla scala: CohereText usa da -1.2px a -1.44px di spaziatura tra lettere a 60–72px, creando blocchi di testo densi e d'impatto.
- Peso corpo singolo: Quasi tutto l'uso di Unica77 è al peso 400. Il peso 500 appare solo per l'enfasi nei pulsanti piccoli. Il sistema si affida a dimensione e spaziatura, non al contrasto di peso.
- Etichette codice in maiuscolo: CohereMono usa il maiuscolo con spaziatura positiva tra lettere (0.16–0.28px) per tag tecnici e marcatori di sezione.
4. Stili dei Componenti
Pulsanti
Ghost / Trasparente
- Sfondo: trasparente (
rgba(255, 255, 255, 0)) - Testo: Cohere Black (
#000000) - Nessun bordo visibile
- Hover: il testo vira a Interaction Blue (
#1863dc), opacità 0.8 - Focus: contorno solido 2px in Interaction Blue
- Lo stile principale del pulsante — invisibile finché non si interagisce
Solido Scuro
- Sfondo: scuro/nero
- Testo: Pure White
- Per CTA su superfici chiare
- A forma di pillola o con raggio standard
Delineato
- Contenimento basato sul bordo
- Usato nelle azioni secondarie
Card e Contenitori
- Sfondo: Pure White (
#ffffff) - Bordo: sottile solido Lightest Gray (
1px solid #f2f2f2) per card sottili; Cool Border (#d9d9dd) per le enfatizzate - Raggio: 22px — il raggio caratteristico di Cohere per card primarie, immagini e contenitori di dialogo. Anche 4px, 8px, 16px, 20px per elementi più piccoli
- Ombra: minimale — Cohere si affida al colore di sfondo e ai bordi piuttosto che alle ombre
- Speciale: raggio
0px 0px 22px 22px(arrotondamento solo in basso) per i contenitori di sezione - Dialog: raggio 8px per le finestre modali/dialog
Input e Form
- Testo: bianco su input scuro, nero su chiaro
- Bordo focus: Focus Purple (
#9b60aa) con1px solid - Ombra focus: ring rosso (
rgb(179, 0, 0) 0px 0px 0px 2px) — probabilmente per indicazione di stato errore - Contorno focus: Interaction Blue solido 2px
Navigazione
- Nav orizzontale pulita su sfondo bianco o scuro
- Logo: wordmark Cohere (SVG personalizzato)
- Link: testo scuro a 16px Unica77
- CTA: pulsante solido scuro
- Mobile: collasso hamburger
Trattamento delle Immagini
- Fotografia enterprise con soggetti e ambienti diversificati
- Fotografia hero con tinta viola per le sezioni drammatiche
- Screenshot UI del prodotto su superfici scure
- Immagini con raggio 22px in linea con il sistema delle card
- Sezioni a gradiente viola a piena larghezza
Componenti Distintivi
Sistema Card 22px
- Il raggio del bordo di 22px è la firma visiva di Cohere
- Tutte le card, immagini e contenitori primari usano questo raggio
- Crea una morbidezza organica, simile alle nuvole, che è distintiva rispetto ai tipici 8–12px
Barra di Fiducia Enterprise
- Loghi aziendali visualizzati in una striscia orizzontale
- Dimostra l'adozione enterprise
- Trattamento logo pulito, monocromatico
Bande Hero Viola
- Sezioni viola profondo a piena larghezza che ospitano le vetrine del prodotto
- Creano pause visive drammatiche nel flusso della pagina bianca
- Gli screenshot del prodotto galleggiano nell'ambiente viola
Tag Codice Maiuscolo
- CohereMono in maiuscolo con spaziatura tra lettere
- Usato come marcatori di sezione ed etichette di categorizzazione
- Crea una gerarchia informativa tecnica e strutturata
5. Principi di Layout
Sistema di Spaziatura
- Unità base: 8px
- Scala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
- Il padding dei pulsanti varia per variante
- Padding interno delle card: circa 24–32px
- Spaziatura verticale delle sezioni: generosa (56–60px tra le sezioni)
Griglia e Contenitore
- Larghezza massima del contenitore: fino a 2560px (molto ampia) con ridimensionamento responsivo
- Hero: centrato con tipografia drammatica
- Sezioni feature: griglie di card multi-colonna
- Sezioni enterprise: bande viola a piena larghezza
- 26 breakpoint rilevati — sistema responsivo estremamente granulare
Filosofia dello Spazio Bianco
- Chiarezza enterprise: Ogni sezione presenta una proposta chiara con spazio di respiro tra le altre.
- La fotografia come hero: Le grandi sezioni fotografiche forniscono interesse visivo senza richiedere elementi di design decorativi.
- Raggruppamento a card: I contenuti correlati sono raggruppati in card con arrotondamento a 22px, creando cluster informativi naturali.
Scala dei Raggi dei Bordi
- Netto (4px): Elementi di navigazione, tag piccoli, paginazione
- Comodo (8px): Finestre dialog, contenitori secondari, card piccole
- Generoso (16px): Contenitori featured, card medie
- Grande (20px): Card feature grandi
- Caratteristico (22px): Card primarie, immagini hero, contenitori principali — IL raggio Cohere
- Pillola (9999px): Pulsanti, tag, indicatori di stato
6. Profondità ed Elevazione
| Livello | Trattamento | Uso |
|---|---|---|
| Piatto (Livello 0) | Nessuna ombra, nessun bordo | Sfondo pagina, blocchi di testo |
| Con bordo (Livello 1) | 1px solid #f2f2f2 o #d9d9dd |
Card standard, separatori di lista |
| Banda Viola (Livello 2) | Sfondo viola scuro a piena larghezza | Sezioni hero, vetrine feature |
Filosofia delle Ombre: Cohere è praticamente privo di ombre. La profondità è comunicata attraverso il contrasto del colore di sfondo (card bianche su bande viola, superficie bianca su neve), il contenimento con bordi (bordi grigio freddo), e la drammatica alternanza di sezioni chiare e scure. Quando gli elementi hanno bisogno di elevazione, la ottengono essendo bianco-su-scuro piuttosto che proiettando ombre.
7. Cosa Fare e Cosa Evitare
Da Fare
- Usare il raggio del bordo di 22px su tutte le card e i contenitori primari — è la firma visiva
- Usare CohereText per i titoli display (72px, 60px) con spaziatura tra lettere negativa
- Usare Unica77 per tutto il testo corpo e UI al peso 400
- Mantenere la palette in bianco e nero con bordi grigio freddo
- Usare Interaction Blue (#1863dc) solo per gli stati interattivi hover/focus
- Usare le sezioni viola profondo per pause visive drammatiche e vetrine di prodotto
- Applicare maiuscolo + spaziatura tra lettere su CohereMono per le etichette di sezione
- Mantenere fotografia appropriata al contesto enterprise con soggetti diversificati
Da Evitare
- Non usare raggi del bordo diversi da 22px sulle card primarie — il raggio caratteristico è importante
- Non introdurre colori caldi — la palette è rigorosamente dai toni freddi
- Non usare ombre pesanti — la profondità viene dal contrasto cromatico e dai bordi
- Non usare il peso grassetto (700+) sul testo corpo — l'intervallo è 400–500
- Non saltare la gerarchia serif/sans — CohereText per i titoli, Unica77 per il corpo
- Non usare il viola come colore di superficie per le card — il viola è riservato alle sezioni a piena larghezza
- Non ridurre la spaziatura delle sezioni sotto i 40px — i layout enterprise hanno bisogno di spazio di respiro
- Non usare decorazione sui pulsanti per impostazione predefinita — ghost/trasparente è lo stato base
8. Comportamento Responsivo
Breakpoint
| Nome | Larghezza | Cambiamenti Principali |
|---|---|---|
| Mobile Piccolo | <425px | Layout compatto, spaziatura minimale |
| Mobile | 425–640px | Colonna singola, card impilate |
| Mobile Grande | 640–768px | Aggiustamenti minori alla spaziatura |
| Tablet | 768–1024px | Inizio delle griglie a 2 colonne |
| Desktop | 1024–1440px | Layout multi-colonna completo |
| Desktop Grande | 1440–2560px | Larghezza massima del contenitore |
26 breakpoint rilevati — uno dei siti più granularmente responsivi nel dataset.
Target di Tocco
- Pulsanti adeguatamente dimensionati per l'interazione touch
- Link di navigazione con spaziatura comoda
- Superfici delle card come target di tocco
Strategia di Collasso
- Navigazione: La nav completa si riduce a hamburger
- Griglie feature: Multi-colonna → 2 colonne → colonna singola
- Testo hero: 72px → 48px → 32px ridimensionamento progressivo
- Sezioni viola: Mantengono la piena larghezza, il contenuto si impila
- Griglie card: 3 → 2 → 1 colonna
Comportamento delle Immagini
- La fotografia si ridimensiona proporzionalmente all'interno di contenitori con raggio 22px
- Gli screenshot del prodotto mantengono il rapporto d'aspetto
- Le sezioni viola ridimensionano lo sfondo proporzionalmente
9. Guida ai Prompt per Agenti
Riferimento Rapido ai Colori
- Testo Principale: "Cohere Black (#000000)"
- Sfondo Pagina: "Pure White (#ffffff)"
- Testo Secondario: "Near Black (#212121)"
- Accento Hover: "Interaction Blue (#1863dc)"
- Testo Attenuato: "Muted Slate (#93939f)"
- Bordi Card: "Lightest Gray (#f2f2f2)"
- Bordi Sezione: "Border Cool (#d9d9dd)"
Esempi di Prompt per Componenti
- "Crea una sezione hero su Pure White (#ffffff) con CohereText a 72px peso 400, line-height 1.0, letter-spacing -1.44px. Testo Cohere Black. Sottotitolo in Unica77 a 18px peso 400, line-height 1.4."
- "Progetta una card feature con raggio del bordo 22px, bordo 1px solid Lightest Gray (#f2f2f2) su bianco. Titolo in Unica77 a 32px, letter-spacing -0.32px. Corpo in Unica77 a 16px, Muted Slate (#93939f)."
- "Costruisci un pulsante ghost: sfondo trasparente, testo Cohere Black in Unica77 a 16px. Al hover, il testo vira a Interaction Blue (#1863dc) con opacità 0.8. Focus: contorno solido 2px Interaction Blue."
- "Crea una sezione a piena larghezza viola profondo con testo bianco. CohereText a 60px per il titolo. Lo screenshot del prodotto galleggia all'interno con raggio del bordo 22px."
- "Progetta un'etichetta di sezione usando CohereMono a 14px, maiuscolo, letter-spacing 0.28px. Testo Muted Slate (#93939f)."
Guida all'Iterazione
- Concentrarsi su UN componente alla volta
- Usare sempre il raggio 22px per le card primarie — "la rotondità della card Cohere"
- Specificare il carattere tipografico — CohereText per i titoli, Unica77 per il corpo, CohereMono per le etichette
- Gli elementi interattivi usano Interaction Blue (#1863dc) solo al hover
- Mantenere le superfici bianche con bordi grigio freddo — nessun tono caldo
- Il viola è per le sezioni a piena larghezza, mai per gli sfondi delle card