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。
10 KiB
10 KiB
نظام تصميم مستوحى من OpenAI
Category: ذكاء اصطناعي ونماذج لغوية كبيرة نظام هادئ شبه أحادي اللون يرتكز على أسود-فيروزي عميق مع مساحة بيضاء سخية وطباعة تحريرية.
1. الطابع البصري والأجواء العامة
تبدو واجهة منتجات OpenAI كمختبر بحثي ارتدى حلّته للجمهور — دقيقة ومقيّدة وصامتة بتعمّد. خلفية الصفحة بيضاء نقية (#ffffff) تتطبّق فوق حبر قريب من الأسود (#0d0d0d) مع نبرة فيروزية خفية، بحيث يبدو حتى النص مبرّدًا قليلًا لا داكنًا بشكل صارخ. والنتيجة حيادية لونية تضع مخرجات النماذج والأكواد البرمجية والنصوص في الصدارة، لا الإطار المحيط بها.
السمة المميّزة هي استخدام Söhne (أو بديلها النظامي inter) بأوزان مقيّدة — 400 للنص الأساسي، 500 للتنقل والتسميات، 600 للتأكيد — مقترنةً بـ Signifier، وهو خط مَزيفي معاصر يُستخدم للعناوين التحريرية. بينما تميل معظم علامات الذكاء الاصطناعي نحو المستقبلية، تمنح عناوين OpenAI المزيفية المنتجَ نبرةً أدبيةً هادئة، كأن كل إعلان مقالٌ رصين.
نظام الأشكال موحّد الليونة: نصف قطر 8–12 بكسل، وحبوب 9999 بكسل للعلامات والشرائح، ولا زوايا حادة في أي مكان. تُشار إلى انتقالات الأقسام بالمساحة البيضاء لا بالفواصل؛ وحين تظهر الحدود فهي خطوط #e5e5e5 بعرض شعرة تُقرأ كغياب اللون لا حضوره.
الخصائص الجوهرية:
- لوحة بيضاء نقية (
#ffffff) مع حبر أسود-فيروزي عميق (#0d0d0d) - Söhne / Inter بأوزان متواضعة (400، 500، 600) — التهذيب على التأكيد
- خط Signifier المزيفي للعناوين التحريرية
- نصف قطر لين 8–12 بكسل في كل مكان؛ حبوب 9999 بكسل للشرائح
- حدود شعرية (
#e5e5e5) تُستخدم بتقتير؛ المساحة البيضاء هي الفاصل الأساسي - رسومات أحادية اللون بالفيروزي العميق — لا تدرجات في الشعارات
- ارتفاع سطر سخي (1.55–1.65) وتباعد أحرف يكاد يكون صفرًا
2. لوحة الألوان وأدوارها
الألوان الأساسية
- أبيض نقي (
#ffffff): خلفية أساسية، سطح البطاقات، خلفية الأزرار. - أسود الحبر (
#0d0d0d): النص الأساسي، الشعار، زر الدعوة إلى الإجراء الأساسي. - أسود ناعم (
#1a1a1a): العناوين الثانوية، حبر بديل للنصوص غير الحرجة.
أسطح الخلفية
- الضباب (
#fafafa): خلفية فاصل الأقسام، سطح التذييل. - اللؤلؤ (
#f5f5f5): سطح البطاقات، اللوح المرتفع. - السحاب (
#ececec): خلفية العناصر المعطّلة، درجة الفاصل.
لون العلامة التجارية
- الفيروزي لـ OpenAI (
#10a37f): اللون الأساسي للعلامة التجارية، الروابط، شارة التمييز — اللون الوحيد في نظام محايد. - الفيروزي العميق (
#0a7a5e): حالة التحويم والضغط للون العلامة التجارية. - الفيروزي الناعم (
#e8f5f0): درجة السطح لشارات النجاح والمقتبسات المميّزة.
الألوان المحايدة والنصوص
- الجرافيت (
#3c3c3c): نص الجسم، لون القراءة الافتراضي. - الأردوازي (
#6e6e6e): النص الثانوي، التعليقات التوضيحية، البيانات الوصفية. - الرماد (
#9b9b9b): النص الثالثي، النص النائب، التسمية المعطّلة. - الحجر (
#c4c4c4): الفواصل الزخرفية، الأيقونات الباهتة.
الألوان الدلالية والحدودية
- حد شعرة (
#e5e5e5): فاصل الخط الشعري المعياري. - حد ناعم (
#ededed): مخطط البطاقة على السطح الأبيض. - الخطأ (
#ef4146): التحقق، الإجراء التدميري. - التحذير (
#f5a623): عنبر ناعم لحالات الإشعار. - المعلومات (
#2563eb): نبرة رابط معلوماتي (يُستخدم بتقتير؛ الفيروزي يبقى المسيطر).
3. قواعد الطباعة
مجموعة الخطوط
- العناوين / التحرير:
Signifier، مع احتياطي:'Source Serif Pro', Georgia, serif - الجسم / الواجهة:
Söhne، مع احتياطي:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif - الكود / العرض الثابت:
Söhne Mono، مع احتياطي:ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace
التسلسل الهرمي
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
|---|---|---|---|---|---|---|
| عنوان كبير | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | أبطال تحريريون، عناوين الإعلانات |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | عنوان الصفحة |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | عنوان القسم |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | القسم الفرعي |
| نص كبير | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | فقرات المقدمة |
| نص أساسي | Söhne | 16px (1rem) | 400 | 1.65 | normal | نص القراءة القياسي |
| نص صغير | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | جسم البطاقة، واجهة مكثّفة |
| تعليق | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | البيانات الوصفية، الشارات |
| تسمية | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | حاجب، روابط التنقل بالأحرف الكبيرة |
| كود | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | كتل الكود، مخرجات الطرفية |
المبادئ
- التهذيب هوية: تقف الأوزان عند 600؛ فوق 700 يخرج عن روح العلامة. يأتي التسلسل الهرمي من الحجم واللون لا الوزن.
- المزيفي للروح، واللا-مزيفي للنظام: يظهر Signifier فقط في اللحظات التحريرية. واجهة المنتج خالية تمامًا من المزيفي.
- التباعد السالب على العناوين الكبيرة: -0.02em على الأحجام الكبيرة؛ يعود التباعد إلى الصفر عند 16px.
4. أسلوب المكونات
الأزرار
أساسي
- الخلفية:
#0d0d0d - النص:
#ffffff - الحشو: 10px 18px
- نصف القطر: 9999px (حبة كاملة) للشرائح، 12px للأزرار المستطيلة
- التحويم: خلفية
#1a1a1a - الاستخدام: دعوة أساسية، "جرّب ChatGPT"، "تسجيل الدخول"
ثانوي
- الخلفية:
#ffffff - النص:
#0d0d0d - الحد: 1px solid
#e5e5e5 - الحشو: 10px 18px
- نصف القطر: 12px
- التحويم: خلفية
#fafafa، حد#d4d4d4
لون العلامة التجارية
- الخلفية:
#10a37f - النص:
#ffffff - الحشو: 10px 18px
- نصف القطر: 12px
- التحويم:
#0a7a5e - الاستخدام: دعوة الترقية المميّزة، مسار النجاح
البطاقات
- الخلفية:
#ffffff - الحد: 1px solid
#ededed - نصف القطر: 16px
- الحشو: 24px–32px
- الظل: لا شيء بشكل افتراضي؛ عند التحويم
0 4px 16px rgba(13,13,13,0.06)
حقول الإدخال
- الخلفية:
#ffffff - الحد: 1px solid
#e5e5e5 - نصف القطر: 12px
- الحشو: 12px 14px
- التركيز: حد
#10a37f، حلقة0 0 0 3px rgba(16,163,127,0.12)
الحبوب والعلامات
- الخلفية:
#f5f5f5 - النص:
#3c3c3c - الحشو: 4px 10px
- نصف القطر: 9999px
- الخط: 12px / 500
5. التباعد والتخطيط
- الوحدة الأساسية: 4px. السلّم: 4، 8، 12، 16، 24، 32، 48، 64، 96، 128.
- الحاوية: عرض أقصى 1200px، هامش 24px على الجوّال، 48px على سطح المكتب.
- إيقاع الأقسام: 96–128px عمودي بين الأقسام الرئيسية؛ 64px على الجوّال.
- الشبكة: 12 عمودًا على سطح المكتب، 4 أعمدة على الجوّال، فجوة 24px.
6. الحركة
- المدة: 150–220ms للتحويم؛ 280–360ms لانتقالات التخطيط.
- التخفيف:
cubic-bezier(0.16, 1, 0.3, 1)(خروج ناعم) للمداخل. - التهذيب: لا تأثير توازي، لا اختطاف للتمرير. تلاشٍ خفيف وإزاحة فقط.
7. ضوابط الاستخدام
- احتفظ بالتهذيب التحريري المحايد ونصف القطر اللين والاستخدام النادر للون في آنٍ معًا؛ اللهجات الخضراء وحدها لا تصنع سطحًا بمستوى OpenAI.
- استخدم لحظات العناوين الكبيرة بأسلوب Signifier فقط في التسلسلات التحريرية أو الإعلانية، مع إبقاء عناصر التحكم في النظام على الخط غير المزيفي.
- تجنّب الحركة الزخرفية والظلال الثقيلة والبطاقات الزخرفية المفرطة في الحجم؛ يجب أن يبدو النظام هادئًا وقابلًا للقراءة ومتعمَّدًا.