admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ea02f186a59d88b880ea032066638dabc5d20364
workbuddy_skills/open-design/design-systems/github/DESIGN-it.md
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

162 lines
8.3 KiB
Markdown
Raw Blame History

# Design System Inspired by GitHub
> Category: Strumenti per sviluppatori
> Piattaforma orientata al codice. Densità funzionale, precisione blu su bianco, fondamenta Primer.
## 1. Tema Visivo e Atmosfera
La superficie di GitHub è ingegnerizzata, non decorata. Ogni pixel dichiara una posizione: questo è uno strumento per chi si preoccupa di diff, build e pull request. Lo sfondo della pagina è un pulito `#ffffff` (tema chiaro) o `#0d1117` (tema scuro), con i contenuti disposti su riquadri rettangolari densi separati da bordi sottilissimi anziché dallo spazio negativo. La densità delle informazioni è il marchio — righe di elenco, righe di codice, intestazioni dei repository e schede delle notifiche sono tutte ravvicinate, così un utente esperto può scorrere centinaia di elementi senza scorrerli tutti.
Gli accenti caratteristici sono il **blu Primer** (`#0969da`) per i link e le azioni primarie, e il **verde GitHub** (`#1a7f37`) per gli stati di unione, il successo e il pulsante di merge stesso. Entrambi appaiono leggermente smorzati rispetto ai blu e verdi dei prodotti consumer — sufficientemente saturi da distinguersi sul testo grigio denso, abbastanza contenuti da scomparire nello sfondo quando più elementi appaiono nello stesso viewport.
La tipografia usa lo stack **system-ui** in tutto il prodotto, così il testo si renderizza nitidamente su ogni sistema operativo, abbinato a **SFMono / Menlo / Consolas** per il codice. Non esiste un carattere editoriale display; la voce di GitHub è la voce del sistema su cui ti trovi già.
**Caratteristiche Principali:**
- Tela bianca pura (`#ffffff`) o nero-blu profondo (`#0d1117`) — nessun calore, nessuna tinta
- Bordi grigi sottilissimi (`#d0d7de`) definiscono ogni riquadro e pannello
- Blu Primer (`#0969da`) per link/primario; verde GitHub (`#1a7f37`) per successo/merge
- system-ui per la prosa; SFMono per il codice — nessun carattere personalizzato
- Righe di elenco dense con spaziatura minima; lo spazio bianco è raro
- Iconografia Octicon a 16px / 24px — tratto singolo, geometrica, coerente
- Badge di stato a forma di pillola con semantica cromatica forte
## 2. Palette Colori e Ruoli
### Primario
- **Canvas Default** (`#ffffff`): Sfondo principale della pagina, tema chiaro.
- **Canvas Subtle** (`#f6f8fa`): Superficie secondaria, barra laterale, sfondo degli input, striscia dell'intestazione.
- **Canvas Inset** (`#eaeef2`): Sfondo dei blocchi di codice, superficie incassata in profondità.
- **Fg Default** (`#1f2328`): Testo primario, titoli, inchiostro.
- **Fg Muted** (`#656d76`): Testo secondario, didascalie, percorsi dei file.
### Accento del Brand
- **Primer Blue** (`#0969da`): Link, CTA primarie, base dell'anello di focus — il colore interattivo universale.
- **Primer Blue Hover** (`#0550ae`): Hover/pressione per il blu primario.
- **Accent Subtle** (`#ddf4ff`): Superficie blu tenue per callout, banner informativi.
### Semantico
- **Success / Merge Green** (`#1a7f37`): PR unite, badge di successo, pulsante di merge.
- **Success Subtle** (`#dafbe1`): Tinta superficie di successo.
- **Open Green** (`#1a7f37`): Stato "Aperto" di issue/PR.
- **Closed / Danger Red** (`#cf222e`): PR chiuse, azione distruttiva, errore di validazione.
- **Danger Subtle** (`#ffebe9`): Superficie del banner di errore.
- **Attention / Warning Yellow** (`#9a6700`): Testo di avviso su superficie ambrata.
- **Attention Subtle** (`#fff8c5`): Superficie del banner di avviso.
- **Done Purple** (`#8250df`): Unito e archiviato, stato "fatto", badge premium.
- **Sponsor Pink** (`#bf3989`): Cuore degli sponsor, brand di GitHub Sponsors.
### Bordo e Divisore
- **Border Default** (`#d0d7de`): Bordo sottile standard, contorno del pannello.
- **Border Muted** (`#d8dee4`): Divisori interni all'interno di un pannello.
- **Border Subtle** (`#eaeef2`): Divisori tenue tra le righe della tabella.
### Tema Scuro
- **Dark Canvas** (`#0d1117`): Sfondo della pagina scura.
- **Dark Surface** (`#161b22`): Barra laterale, intestazione, superficie secondaria.
- **Dark Border** (`#30363d`): Bordo standard in modalità scura.
- **Dark Fg** (`#e6edf3`): Testo primario su sfondo scuro.
## 3. Regole Tipografiche
### Famiglia di Caratteri
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
### Gerarchia
| Ruolo | Carattere | Dimensione | Peso | Altezza Riga | Spaziatura Lettere | Note |
|------|------|------|--------|-------------|----------------|-------|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Intestazione repository, hero marketing |
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Titolo della pagina |
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Titolo di sezione |
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sottosezione, intestazione del pannello |
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Dimensione testo predefinita — non 16px |
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Didascalie, metadati dei file |
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blocchi di codice, diff |
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Span `code` inline |
### Principi
- **Body a 14px, non 16px**: La densità della prosa di GitHub è la sua identità. Il prodotto si legge a 14px per far rientrare più righe in un viewport.
- **Peso binario**: 400 per tutto di default; 600 per i titoli e l'enfasi. Nessun 500, nessun 700.
- **Sempre font di sistema**: non caricare mai un webfont per il chrome — il testo deve renderizzarsi istantaneamente su connessioni lente.
## 4. Stili dei Componenti
### Pulsanti
**Primario (Verde)**
- Background: `#1f883d`
- Testo: `#ffffff`
- Bordo: 1px solid `rgba(31, 35, 40, 0.15)`
- Padding: 5px 16px
- Radius: 6px
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
- Hover: background `#1a7f37`
- Utilizzo: "Crea repository", "Unisci pull request"
**Default**
- Background: `#f6f8fa`
- Testo: `#1f2328`
- Bordo: 1px solid `#d0d7de`
- Padding: 5px 16px
- Radius: 6px
- Hover: background `#f3f4f6`, bordo `#d0d7de`
**Outline (Stile Link Blu)**
- Background: `#ffffff`
- Testo: `#0969da`
- Bordo: 1px solid `#d0d7de`
- Hover: background `#0969da`, testo `#ffffff`
**Danger**
- Background: `#ffffff`
- Testo: `#cf222e`
- Bordo: 1px solid `#d0d7de`
- Hover: background `#a40e26`, testo `#ffffff`, bordo `#a40e26`
### Card / Box
- Background: `#ffffff`
- Bordo: 1px solid `#d0d7de`
- Radius: 6px
- Padding: 16px (intestazione) + 16px (corpo)
- L'intestazione ha una striscia `#f6f8fa` con bordo inferiore.
### Input
- Background: `#ffffff`
- Bordo: 1px solid `#d0d7de`
- Radius: 6px
- Padding: 5px 12px
- Focus: bordo `#0969da`, anello `0 0 0 3px rgba(9,105,218,0.3)`
### Pillole di Stato (Issue / PR)
- **Aperto**: background `#1a7f37`, testo bianco, padding 4px 10px, radius 9999px.
- **Chiuso**: background `#cf222e`, testo bianco.
- **Unito**: background `#8250df`, testo bianco.
- **Bozza**: background `#6e7781`, testo bianco.
### Etichette (Tag su Issue/PR)
- Padding: 0 7px
- Radius: 9999px
- Font: 12px / 500
- Background e testo sono programmatici (colore etichetta → testo calcolato per contrasto).
## 5. Spaziatura e Layout
- **Unità base**: 4px. Scala di spaziatura: 4, 8, 12, 16, 24, 32, 40, 48.
- **Larghezza massima della pagina**: 1280px (`Container-xl`).
- **Barra laterale**: 296px su desktop, si riduce sotto 1012px.
- **Padding delle righe**: 16px orizzontale, 12px verticale (le liste sono dense per design).
## 6. Movimento
- **Durata**: 80ms per l'hover; 200ms per l'apertura di menu/popover.
- **Easing**: `ease-out` per le aperture, `ease-in` per le chiusure.
- **Evitato**: animazione al caricamento della pagina, parallax, micro-interazioni persistenti. Le cose appaiono; non eseguono.
## 7. Linee Guida d'Uso
- Mantenere insieme le liste dense, i box con bordo e la tipografia di sistema; i pulsanti verdi isolati non bastano a creare una superficie prodotto simile a GitHub.
- Usare il verde per le azioni costruttive del repository, il blu per i link e il focus, e rosso/viola/grigio solo per gli stati di issue, PR e workflow.
- Preferire un chrome discreto, bordi espliciti e spaziatura compatta rispetto a ombre decorative o card di grandi dimensioni in stile marketing.
Reference in new issue View Git Blame Copy Permalink