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。
14 KiB
14 KiB
Design System Inspired by Spotify
Category: Medien & Konsumenten Musik-Streaming. Lebendiges Grün auf Dunkel, markante Typografie, albumcover-getrieben.
1. Visuelles Thema & Atmosphäre
Spotifys Web-Interface ist ein dunkler, immersiver Musik-Player, der Hörerinnen und Hörer in einen fastschwarzen Kokon hüllt (#121212, #181818, #1f1f1f), in dem Albumcover und Inhalte zur primären Farbquelle werden. Die Designphilosophie lautet „Content-First-Dunkelheit" — die UI tritt in den Schatten zurück, damit Musik, Podcasts und Playlists leuchten können. Jede Fläche ist ein Anthrazit-Ton, was eine theaterartige Umgebung schafft, in der die einzige echte Farbe vom ikonischen Spotify Green (#1ed760) und den Albumcovern selbst stammt.
Die Typografie verwendet SpotifyMixUI und SpotifyMixUITitle — proprietäre Schriften aus der CircularSp-Familie (Circular von Lineto, für Spotify angepasst) mit einem umfangreichen Fallback-Stack, der arabische, hebräische, kyrillische, griechische, Devanagari- und CJK-Schriften umfasst — ein Spiegelbild von Spotifys globaler Reichweite. Das Typsystem ist kompakt und funktional: 700 (Bold) für Hervorhebung und Navigation, 600 (Semibold) für sekundäre Akzente und 400 (Regular) für Fließtext. Buttons verwenden Großschreibung mit positivem Buchstabenabstand (1,4 px–2 px) für eine systematische, etikettartige Qualität.
Was Spotify auszeichnet, ist seine Pille-und-Kreis-Geometrie. Primäre Buttons verwenden einen Radius von 500 px–9999 px (volle Pille), runde Play-Buttons verwenden 50 % Radius, und Sucheingaben sind 500-px-Pillen. Kombiniert mit starken Schatten (rgba(0,0,0,0.5) 0px 8px 24px) auf erhöhten Elementen und einer einzigartigen Inset-Border-Shadow-Kombination (rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset) entsteht ein Interface, das wie ein hochwertiges Audiogerät wirkt — taktil, abgerundet und für Touch konzipiert.
Wesentliche Merkmale:
- Fastschwarzes, immersives Dunkelthema (
#121212–#1f1f1f) — die UI verschwindet hinter dem Inhalt - Spotify Green (
#1ed760) als einzelner Markenakzent — niemals dekorativ, stets funktional - SpotifyMixUI/CircularSp-Schriftfamilie mit globaler Schriftunterstützung
- Pille-Buttons (500 px–9999 px) und kreisförmige Steuerelemente (50 %) — abgerundet, touch-optimiert
- Großgeschriebene Button-Beschriftungen mit breitem Buchstabenabstand (1,4 px–2 px)
- Starke Schatten auf erhöhten Elementen (
rgba(0,0,0,0.5) 0px 8px 24px) - Semantische Farben: Negativ-Rot (
#f3727f), Warn-Orange (#ffa42b), Hinweis-Blau (#539df5) - Albumcover als primäre Farbquelle — die UI ist von Natur aus achromatisch
2. Farbpalette & Rollen
Primäre Markenfarben
- Spotify Green (
#1ed760): Primärer Markenakzent — Play-Buttons, aktive Zustände, CTAs - Fastschwarz (
#121212): Tiefste Hintergrundfläche - Dunkle Fläche (
#181818): Karten, Container, erhöhte Flächen - Mitteldunkel (
#1f1f1f): Button-Hintergründe, interaktive Flächen
Text
- Weiß (
#ffffff):--text-base, primärer Text - Silber (
#b3b3b3): Sekundärer Text, gedämpfte Beschriftungen, inaktive Navigation - Nahweiß (
#cbcbcb): Etwas hellerer sekundärer Text - Hell (
#fdfdfd): Nahreines Weiß für maximale Betonung
Semantisch
- Negativ-Rot (
#f3727f):--text-negative, Fehlerzustände - Warn-Orange (
#ffa42b):--text-warning, Warnzustände - Hinweis-Blau (
#539df5):--text-announcement, Informationszustände
Flächen & Rahmen
- Dunkle Karte (
#252525): Erhöhte Kartenfläche - Mittlere Karte (
#272727): Alternative Kartenfläche - Rahmen-Grau (
#4d4d4d): Button-Rahmen auf Dunkel - Heller Rahmen (
#7c7c7c): Umrissene Button-Rahmen, gedämpfte Links - Trennlinie (
#b3b3b3): Trennlinien - Helle Fläche (
#eeeeee): Hellmodus-Buttons (selten) - Spotify Green Rahmen (
#1db954): Grüne Akzent-Rahmen-Variante
Schatten
- Stark (
rgba(0,0,0,0.5) 0px 8px 24px): Dialoge, Menüs, erhöhte Panels - Mittel (
rgba(0,0,0,0.3) 0px 8px 8px): Karten, Dropdowns - Inset-Rahmen (
rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset): Eingabefeld-Rahmen-Shadow-Kombination
3. Typografie-Regeln
Schriftfamilien
- Titel:
SpotifyMixUITitle, Fallbacks:CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic - UI / Body:
SpotifyMixUI, gleicher Fallback-Stack
Hierarchie
| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Buchstabenabstand | Hinweise |
|---|---|---|---|---|---|---|
| Abschnittstitel | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Fettes Titelgewicht |
| Feature-Überschrift | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (eng) | normal | Semibold-Abschnittsköpfe |
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Betonter Text |
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard-Fließtext |
| Button Großschrift | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (eng) | 1.4px–2px | text-transform: uppercase |
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard-Button |
| Nav-Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
| Nav-Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inaktive Navigation |
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Fette Metadaten |
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadaten |
| Klein Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, Zählungen |
| Klein | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Kleingedrucktes |
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | text-transform: capitalize |
| Mikro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Kleinster Text |
Grundsätze
- Binäres Bold/Regular: Der meiste Text ist entweder 700 (Bold) oder 400 (Regular), wobei 600 sparsam eingesetzt wird. Dies schafft eine klare visuelle Hierarchie durch Gewichtskontrast statt Größenvariation.
- Großgeschriebene Buttons als System: Button-Beschriftungen verwenden Großschrift + breiten Buchstabenabstand (1,4 px–2 px) und schaffen damit eine systematische „Beschriftungs"-Stimme, die sich vom Inhaltstext abhebt.
- Kompakte Größen: Die Spanne reicht von 10 px bis 24 px — enger als die meisten Systeme. Spotifys Typografie ist kompakt und funktional, konzipiert zum Scannen von Playlists, nicht zum Lesen von Artikeln.
- Globale Schriftunterstützung: Der umfangreiche Fallback-Stack (Arabisch, Hebräisch, Kyrillisch, Griechisch, Devanagari, CJK) spiegelt Spotifys Reichweite in über 180 Märkten wider.
4. Komponenten-Stile
Buttons
Dunkle Pille
- Background:
#1f1f1f - Text:
#ffffffoder#b3b3b3 - Padding: 8px 16px
- Radius: 9999px (volle Pille)
- Verwendung: Navigations-Pillen, sekundäre Aktionen
Dunkle große Pille
- Background:
#181818 - Text:
#ffffff - Padding: 0px 43px
- Radius: 500px
- Verwendung: Primäre App-Navigationsbuttons
Helle Pille
- Background:
#eeeeee - Text:
#181818 - Radius: 500px
- Verwendung: Hellmodus-CTAs (Cookie-Einwilligung, Marketing)
Umrissene Pille
- Background: transparent
- Text:
#ffffff - Border:
1px solid #7c7c7c - Padding: 4px 16px 4px 36px (asymmetrisch für Icon)
- Radius: 9999px
- Verwendung: Folgen-Buttons, sekundäre Aktionen
Kreisförmiger Play
- Background:
#1f1f1f - Text:
#ffffff - Padding: 12px
- Radius: 50% (Kreis)
- Verwendung: Play/Pause-Steuerung
Karten & Container
- Background:
#181818oder#1f1f1f - Radius: 6px–8px
- Keine sichtbaren Rahmen bei den meisten Karten
- Hover: leichte Aufhellung des Hintergrunds
- Shadow:
rgba(0,0,0,0.3) 0px 8px 8pxauf erhöhten Elementen
Eingabefelder
- Sucheingabe:
#1f1f1fHintergrund,#ffffffText - Radius: 500px (Pille)
- Padding: 12px 96px 12px 48px (icon-bewusst)
- Fokus: Rahmen wird
#000000, Outline1px solid
Navigation
- Dunkle Seitenleiste mit SpotifyMixUI 14px Gewicht 700 für aktiv, 400 für inaktiv
#b3b3b3gedämpfte Farbe für inaktive Einträge,#fffffffür aktive- Kreisförmige Icon-Buttons (50 % Radius)
- Spotify-Logo oben links in Grün
5. Layout-Grundsätze
Abstands-System
- Basiseinheit: 8px
- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
Raster & Container
- Seitenleiste (fest) + Hauptinhaltsbereich
- Rasterbasierte Album-/Playlist-Karten
- Vollbreite Now-Playing-Leiste am unteren Rand
- Responsiver Inhaltsbereich füllt den verbleibenden Platz
Weißraum-Philosophie
- Dunkle Verdichtung: Spotify packt Inhalte dicht — Playlist-Raster, Track-Listen und Navigation sind alle eng gesetzt. Der dunkle Hintergrund schafft visuellen Abstand zwischen Elementen, ohne große Lücken zu benötigen.
- Inhaltsdichte vor Atemraum: Dies ist eine App, keine Marketing-Website. Jedes Pixel dient dem Hörerlebnis.
Rahmenradius-Skala
- Minimal (2px): Badges, explizite Tags
- Subtil (4px): Eingabefelder, kleine Elemente
- Standard (6px): Albumcover-Container, Karten
- Komfortabel (8px): Abschnitte, Dialoge
- Mittel (10px–20px): Panels, Overlay-Elemente
- Groß (100px): Große Pille-Buttons
- Pille (500px): Primäre Buttons, Sucheingabe
- Volle Pille (9999px): Navigations-Pillen, Suche
- Kreis (50%): Play-Buttons, Avatare, Icons
6. Tiefe & Erhöhung
| Ebene | Behandlung | Verwendung |
|---|---|---|
| Basis (Ebene 0) | #121212 Hintergrund |
Tiefste Schicht, Seitenhintergrund |
| Fläche (Ebene 1) | #181818 oder #1f1f1f |
Karten, Seitenleiste, Container |
| Erhöht (Ebene 2) | rgba(0,0,0,0.3) 0px 8px 8px |
Dropdown-Menüs, Hover-Karten |
| Dialog (Ebene 3) | rgba(0,0,0,0.5) 0px 8px 24px |
Modals, Overlays, Menüs |
| Inset (Rahmen) | rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset |
Eingabefeld-Rahmen |
Schatten-Philosophie: Spotify verwendet für eine dunkel-themed App auffallend starke Schatten. Der Schatten mit 0,5 Deckkraft bei 24 px Weichzeichnung erzeugt einen dramatischen „Schweben in der Dunkelheit"-Effekt für Dialoge und Menüs, während 0,3 Deckkraft bei 8 px Weichzeichnung eine subtilere Karten-Hebung bietet. Die einzigartige Inset-Rahmen-Shadow-Kombination bei Eingabefeldern erzeugt eine versenkte, taktile Qualität.
7. Empfehlungen & Warnhinweise
Empfohlen
- Fastschwarze Hintergründe verwenden (
#121212–#1f1f1f) — Tiefe durch Schattierungsvariation - Spotify Green (
#1ed760) ausschließlich für Play-Steuerung, aktive Zustände und primäre CTAs einsetzen - Pillenform (500 px–9999 px) für alle Buttons — Kreisform (50 %) für Play-Steuerung
- Großschrift + breiten Buchstabenabstand (1,4 px–2 px) auf Button-Beschriftungen anwenden
- Typografie kompakt halten (10 px–24 px-Bereich) — dies ist eine App, kein Magazin
- Starke Schatten (
0,3–0,5 Deckkraft) für erhöhte Elemente auf dunklen Hintergründen verwenden - Albumcover für Farbe sorgen lassen — die UI selbst bleibt achromatisch
Nicht empfohlen
- Spotify Green nicht dekorativ oder auf Hintergründen einsetzen — es ist ausschließlich funktional
- Keine hellen Hintergründe für primäre Flächen — die dunkle Immersion ist das Kernkonzept
- Keine Pille-/Kreis-Geometrie bei Buttons weglassen — eckige Buttons brechen die Identität
- Keine dünnen/subtilen Schatten verwenden — auf dunklen Hintergründen müssen Schatten stark sein, um sichtbar zu sein
- Keine zusätzlichen Markenfarben hinzufügen — Grün + achromatische Grautöne sind die vollständige Palette
- Keine lockeren Zeilenhöhen verwenden — Spotifys Typografie ist kompakt und dicht
- Keine rohen grauen Rahmen freilegen — stattdessen schatten- oder inset-basierte Rahmen verwenden
8. Responsives Verhalten
Haltepunkte
| Name | Breite | Wesentliche Änderungen |
|---|---|---|
| Mobile Klein | <425px | Kompaktes mobiles Layout |
| Mobile | 425–576px | Standard-Mobile |
| Tablet | 576–768px | 2-spaltiges Raster |
| Tablet Groß | 768–896px | Erweitertes Layout |
| Desktop Klein | 896–1024px | Seitenleiste sichtbar |
| Desktop | 1024–1280px | Vollständiges Desktop-Layout |
| Großer Desktop | >1280px | Erweitertes Raster |
Kollaps-Strategie
- Seitenleiste: vollständig → eingeklappt → ausgeblendet
- Album-Raster: 5 Spalten → 3 → 2 → 1
- Now-Playing-Leiste: in allen Größen erhalten
- Suche: Pille-Eingabe erhalten, Breite passt sich an
- Navigation: Seitenleiste → untere Leiste auf Mobile
9. Agent-Prompt-Leitfaden
Schnelle Farbreferenz
- Hintergrund: Fastschwarz (
#121212) - Fläche: Dunkle Karte (
#181818) - Text: Weiß (
#ffffff) - Sekundärer Text: Silber (
#b3b3b3) - Akzent: Spotify Green (
#1ed760) - Rahmen:
#4d4d4d - Fehler: Negativ-Rot (
#f3727f)
Beispiel-Komponenten-Prompts
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
Iterations-Leitfaden
- Mit
#121212beginnen — alles lebt in fastschwarzer Dunkelheit - Spotify Green nur für funktionale Hervorhebungen (Play, aktiv, CTA)
- Alles als Pille gestalten — 500 px für groß, 9999 px für klein, 50 % für kreisförmig
- Großschrift + breiter Tracking auf Buttons — die systematische Beschriftungs-Stimme
- Starke Schatten (0,3–0,5 Deckkraft) für Erhöhung — helle Schatten sind auf Dunkel unsichtbar
- Albumcover liefern alle Farbe — die UI bleibt achromatisch