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。
7.8 KiB
7.8 KiB
OpenAI'dan İlham Alan Tasarım Sistemi
Category: Yapay Zeka & Büyük Dil Modelleri Derin teal-siyahına dayanan, geniş beyaz alan ve editoryal tipografiyle oluşturulmuş sakin, neredeyse tek renkli sistem.
1. Görsel Tema ve Atmosfer
OpenAI'ın ürün yüzeyi, kamuya açık bir araştırma laboratuvarı gibi okunur — klinik, kısıtlı ve kasıtlı olarak sessiz. Sayfa arka planı gerçek beyaz (#ffffff) üzerine hafif teal alt tonu taşıyan neredeyse siyah bir mürekkep (#0d0d0d) katmanıyla oluşturulmuştur; bu sayede metnin kendisi bile koyu yerine hafifçe soğuk bir izlenim bırakır. Sonuç, model çıktısını, kodu ve nesri ön plana taşıyan; onları çevreleyen kabuğu değil, içeriği ön plana çıkaran bir kromatik nötrlüktür.
Sistemin imza hamlesi, kısıtlı ağırlıklarda — gövde için 400, gezinti ve etiketler için 500, vurgu için 600 — Söhne (ya da sistem alternatifi inter) kullanımı ve bunun editoryal görüntü için kullanılan çağdaş bir serif olan Signifier ile eşleştirilmesidir. Pek çok yapay zeka markası fütüristik bir görünüme yönelirken, OpenAI'ın serif başlıkları ürüne sessiz sedasız edebi bir ton katar; sanki her duyuru bir denemeymiş gibi.
Şekil sistemi düzgün biçimde yumuşaktır: 8px–12px yarıçaplar, etiket ve yongalar için 9999px haplar, hiçbir yerde sert köşe yoktur. Bölüm geçişleri bölücüler yerine beyaz boşlukla belirtilir; kenarlıklar göründüğünde #e5e5e5 ince çizgilerdir ve bu çizgiler rengin varlığından çok yokluğunu çağrıştırır.
Temel Özellikler:
- Gerçek beyaz tuval (
#ffffff) ve derin teal-siyahı mürekkep (#0d0d0d) - Söhne / Inter mütevazı ağırlıklarda (400, 500, 600) — iddialılık değil, kısıtlılık
- Editoryal görüntü başlıkları için Signifier serif
- Her yerde yumuşak 8–12px yarıçaplar; yongalar için 9999px haplar
- İnce kenarlıklar (
#e5e5e5) tutumlu kullanım; birincil bölücü olarak beyaz boşluk - Derin teal rengiyle tek renkli illüstrasyonlar — markalarda gradyan yok
- Geniş satır yüksekliği (1.55–1.65) ve sıfıra yakın harf aralığı
2. Renk Paleti ve Rolleri
Birincil
- Saf Beyaz (
#ffffff): Birincil arka plan, kart yüzeyi, düğme arka planı. - Mürekkep Siyahı (
#0d0d0d): Birincil metin, marka işareti, birincil eylem çağrısı. - Yumuşak Siyah (
#1a1a1a): İkincil başlık, kritik olmayan metinler için alternatif mürekkep.
Yüzey ve Arka Plan
- Sis (
#fafafa): Bölüm arası arka plan, altbilgi yüzeyi. - İnci (
#f5f5f5): Kart yüzeyi, yükseltilmiş panel. - Bulut (
#ececec): Devre dışı arka plan, bölücü tonu.
Marka Vurgusu
- OpenAI Teal (
#10a37f): Marka birincil rengi, bağlantı, vurgulama rozeti — aksi hâlde nötr sistemde tek renk. - Teal Koyu (
#0a7a5e): Marka rengi için üzerine gelme ve basılma durumu. - Teal Açık (
#e8f5f0): Başarı rozetleri ve vurgulama belirtim kutuları için yüzey tonu.
Nötrler ve Metin
- Grafit (
#3c3c3c): Gövde metni, varsayılan okuma rengi. - Arduvaz (
#6e6e6e): İkincil metin, altyazılar, meta veri. - Kül (
#9b9b9b): Üçüncül metin, yer tutucu, devre dışı etiket. - Taş (
#c4c4c4): Dekoratif bölücüler, soluk simgeler.
Anlamsal ve Kenarlık
- Kenarlık İnce (
#e5e5e5): Standart ince çizgi ayırıcı. - Kenarlık Yumuşak (
#ededed): Beyaz yüzeyde kart ana hattı. - Hata (
#ef4146): Doğrulama, yıkıcı eylem. - Uyarı (
#f5a623): Danışma durumları için yumuşak kehribar. - Bilgi (
#2563eb): Bilgilendirici bağlantı tonu (tutumlu kullanılır; teal yine de öne çıkar).
3. Tipografi Kuralları
Yazı Ailesi
- Görüntü / Editoryal:
Signifier, geri dönüş:'Source Serif Pro', Georgia, serif - Gövde / Arayüz:
Söhne, geri dönüş:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif - Kod / Monospace:
Söhne Mono, geri dönüş:ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace
Hiyerarşi
| Rol | Yazı Tipi | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|---|---|---|---|---|---|---|
| Görüntü | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Editoryal kahraman, duyuru başlıkları |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Sayfa başlığı |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Bölüm başlığı |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Alt bölüm |
| Büyük Gövde | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Giriş paragrafları |
| Gövde | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standart okuma metni |
| Küçük Gövde | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Kart gövdesi, yoğun arayüz |
| Altyazı | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Meta veri, rozetler |
| Etiket | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Kaş metni, büyük harfli gezinti bağlantıları |
| Kod | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Kod blokları, terminal çıktısı |
İlkeler
- Kısıtlılık bir kimlik olarak: Ağırlıklar 600 ile sınırlıdır; 700 ve üzeri marka dışı hissettirır. Hiyerarşi ağırlıktan değil, boyut ve renkten gelir.
- Ruh için serif, sistem için sans-serif: Signifier yalnızca editoryal görüntü anlarında kullanılır. Ürün arayüzü tamamen sans-serif'tir.
- Görüntü boyutlarında negatif harf aralığı: Görüntü boyutlarında -0.02em; 16px'te harf aralığı sıfıra döner.
4. Bileşen Stilleri
Düğmeler
Birincil
- Arka plan:
#0d0d0d - Metin:
#ffffff - Dolgu: 10px 18px
- Yarıçap: Yongalarda 9999px (tam hap), dikdörtgen eylem çağrılarında 12px
- Üzerine gelme:
#1a1a1aarka plan - Kullanım: Birincil eylem çağrısı, "ChatGPT'yi Dene", "Giriş yap"
İkincil
- Arka plan:
#ffffff - Metin:
#0d0d0d - Kenarlık: 1px solid
#e5e5e5 - Dolgu: 10px 18px
- Yarıçap: 12px
- Üzerine gelme: arka plan
#fafafa, kenarlık#d4d4d4
Marka Vurgusu
- Arka plan:
#10a37f - Metin:
#ffffff - Dolgu: 10px 18px
- Yarıçap: 12px
- Üzerine gelme:
#0a7a5e - Kullanım: Öne çıkan yükseltme eylem çağrısı, başarı yolu
Kartlar
- Arka plan:
#ffffff - Kenarlık: 1px solid
#ededed - Yarıçap: 16px
- Dolgu: 24px–32px
- Gölge: Varsayılan olarak yok; üzerine gelindiğinde
0 4px 16px rgba(13,13,13,0.06)
Girdiler
- Arka plan:
#ffffff - Kenarlık: 1px solid
#e5e5e5 - Yarıçap: 12px
- Dolgu: 12px 14px
- Odak: kenarlık
#10a37f, halka0 0 0 3px rgba(16,163,127,0.12)
Haplar ve Etiketler
- Arka plan:
#f5f5f5 - Metin:
#3c3c3c - Dolgu: 4px 10px
- Yarıçap: 9999px
- Yazı tipi: 12px / 500
5. Boşluk ve Düzen
- Temel birim: 4px. Ölçek: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- Kapsayıcı: Maksimum genişlik 1200px, mobilde 24px oluk, masaüstünde 48px.
- Bölüm ritmi: Ana bölümler arasında dikey olarak 96–128px; mobilde 64px.
- Izgara: Masaüstünde 12 sütun, mobilde 4 sütun, 24px boşluk.
6. Hareket
- Süre: Üzerine gelme için 150–220ms; düzen geçişleri için 280–360ms.
- Yumuşatma: Girişler için
cubic-bezier(0.16, 1, 0.3, 1)(düzgün çıkış). - Kısıtlılık: Paralaks yok, kaydırma engeli yok. Yalnızca hafif solma ve öteleme.
7. Kullanım Yönergeleri
- Nötr editoryal kısıtlılığı, yumuşak yarıçapı ve seyrek vurgu kullanımını bir arada koruyun; yeşil vurgu renkler tek başına OpenAI benzeri bir yüzey oluşturmaz.
- Signifier tarzı görüntü anlarını yalnızca editoryal veya duyuru hiyerarşisi için kullanın; ürün kontrolleri sans-serif sisteminde kalsın.
- Süslü hareketlerden, ağır gölgelerden ve aşırı büyük dekoratif kartlardan kaçının; sistem sakin, okunabilir ve kasıtlı hissettirmelidir.