0 Fork 0

Files

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

11 KiB

Raw Blame History

نظام تصميم مستوحى من GitHub

Category: أدوات المطورين منصة تُقدّم الكود في المقام الأول. كثافة وظيفية، ودقة الأزرق على الأبيض، وأسس Primer.

1. الطابع البصري والأجواء العامة

سطح GitHub مُهندَس لا مُزيَّن. كل بكسل يُعلن موقفاً صريحاً: هذه أداة لمن يهتم بالفروقات والبنى وطلبات السحب. خلفية الصفحة هي #ffffff نظيفة (الوضع الفاتح) أو #0d1117 (الوضع الداكن)، وتُرتَّب المحتويات على ألواح مستطيلة كثيفة تفصل بينها حدود رفيعة كالشعرة لا فراغات سلبية. كثافة المعلومات هي العلامة التجارية — صفوف القوائم وأسطر الكود ورؤوس المستودعات وبطاقات الإشعارات كلها متقاربة حتى يتمكن المستخدم المتمرس من مسح مئة عنصر دون تمرير.

النبرة البصرية المميزة هي الأزرق Primer (#0969da) للروابط والإجراءات الرئيسية، والأخضر GitHub (#1a7f37) للحالات المدمجة والنجاح وزر الدمج ذاته. كلاهما يبدو خافتاً نسبياً مقارنةً بأزرق وأخضر منتجات المستهلكين — مشبعٌ بما يكفي للتمييز على خلفية النص الرمادي الكثيف، ومكبوحٌ بما يكفي ليختفي في الخلفية حين تظهر عدة نسخ في إطار عرض واحد.

تستخدم الطباعة مكدس system-ui عبر المنتج بأكمله لعرض النصوص بوضوح على كل نظام تشغيل، إلى جانب SFMono / Menlo / Consolas للكود. لا يوجد خط عرض تحريري؛ صوت GitHub هو صوت النظام الذي أنت عليه بالفعل.

الخصائص الجوهرية:

لوحة بيضاء حقيقية (#ffffff) أو أسود-كحلي غامق (#0d1117) — بلا دفء ولا تدرج
حدود رمادية رفيعة (#d0d7de) تُحدد كل لوح وحاوية
الأزرق Primer (#0969da) للروابط والإجراءات الرئيسية؛ الأخضر GitHub (#1a7f37) للنجاح والدمج
system-ui للنصوص؛ SFMono للكود — لا خط ويب مخصص
صفوف قائمة كثيفة بحشو أدنى؛ المسافات البيضاء نادرة
أيقونات Octicon بحجم 16px / 24px — أحادية الضربة، هندسية، متسقة
شارات حالة على شكل حبة دواء ذات دلالات لونية قوية

2. لوحة الألوان والأدوار

الألوان الأساسية

Canvas Default (#ffffff): خلفية الصفحة الرئيسية، الوضع الفاتح.
Canvas Subtle (#f6f8fa): السطح الثانوي، الشريط الجانبي، خلفية الإدخال، شريط الرأس.
Canvas Inset (#eaeef2): خلفية كتلة الكود، السطح الغائر.
Fg Default (#1f2328): النص الرئيسي، العناوين، الحبر.
Fg Muted (#656d76): النص الثانوي، التعليقات التوضيحية، مسارات الملفات.

لون العلامة التجارية المميز

Primer Blue (#0969da): الروابط، الدعوات للإجراء الرئيسية، حلقة التركيز — اللون التفاعلي الشامل.
Primer Blue Hover (#0550ae): حالة التمرير/الضغط للأزرق الرئيسي.
Accent Subtle (#ddf4ff): سطح أزرق ناعم للتنبيهات وبانرات المعلومات.

الألوان الدلالية

Success / Merge Green (#1a7f37): طلبات السحب المدمجة، شارات النجاح، زر الدمج.
Success Subtle (#dafbe1): تدرج سطح النجاح.
Open Green (#1a7f37): حالة "مفتوح" للمشكلة/طلب السحب.
Closed / Danger Red (#cf222e): طلبات السحب المغلقة، الإجراء التدميري، خطأ التحقق.
Danger Subtle (#ffebe9): سطح بانر الخطأ.
Attention / Warning Yellow (#9a6700): نص التحذير على سطح كهرماني.
Attention Subtle (#fff8c5): سطح بانر التحذير.
Done Purple (#8250df): مدمج ومؤرشف، حالة "منجز"، شارة مميزة.
Sponsor Pink (#bf3989): قلب الرعاة، علامة GitHub Sponsors التجارية.

الحدود والفواصل

Border Default (#d0d7de): الحد الرفيع القياسي، محيط اللوح.
Border Muted (#d8dee4): الفواصل الداخلية داخل اللوح.
Border Subtle (#eaeef2): فواصل صفوف الجدول الخافتة.

الوضع الداكن

Dark Canvas (#0d1117): خلفية الصفحة الداكنة.
Dark Surface (#161b22): الشريط الجانبي، الرأس، السطح الثانوي.
Dark Border (#30363d): الحد القياسي في الوضع الداكن.
Dark Fg (#e6edf3): النص الرئيسي على الداكن.

3. قواعد الطباعة

عائلة الخطوط

النص الأساسي / الواجهة: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
الكود / أحادي العرض: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
الرموز التعبيرية: "Apple Color Emoji", "Segoe UI Emoji"

التسلسل الهرمي

الدور	الخط	الحجم	الوزن	ارتفاع السطر	تباعد الحروف	ملاحظات
Display	system-ui	32px (2rem)	600	1.25	-0.01em	رأس المستودع، عنوان التسويق الرئيسي
H1	system-ui	24px (1.5rem)	600	1.25	normal	عنوان الصفحة
H2	system-ui	20px (1.25rem)	600	1.25	normal	عنوان القسم
H3	system-ui	16px (1rem)	600	1.25	normal	عنوان القسم الفرعي، رأس اللوح
Body	system-ui	14px (0.875rem)	400	1.5	normal	حجم النص الافتراضي — ليس 16px
Body Small	system-ui	12px (0.75rem)	400	1.4	normal	التعليقات التوضيحية، بيانات الملف
Code	SFMono	12px (0.75rem)	400	1.45	normal	كتل الكود، الفروق
Code Inline	SFMono	0.85em	400	inherit	normal	امتدادات `code` المضمنة

المبادئ

النص الأساسي 14px لا 16px: كثافة النثر في GitHub هي هويته. يُقرأ المنتج بـ14px لاحتواء مزيد من الصفوف في إطار العرض.
الوزن ثنائي: 400 للكل افتراضياً؛ 600 للعناوين والتأكيد. لا 500، لا 700.
خطوط النظام دائماً: لا تُحمّل خط ويب للواجهة — يجب أن يُعرض النص فورياً على الاتصالات البطيئة.

4. تنسيقات المكونات

الأزرار

الأساسي (أخضر)

الخلفية: #1f883d
النص: #ffffff
الحد: 1px solid rgba(31, 35, 40, 0.15)
الحشو: 5px 16px
نصف القطر: 6px
الظل: 0 1px 0 rgba(31,35,40,0.1)
عند التمرير: خلفية #1a7f37
الاستخدام: "إنشاء مستودع"، "دمج طلب السحب"

الافتراضي

الخلفية: #f6f8fa
النص: #1f2328
الحد: 1px solid #d0d7de
الحشو: 5px 16px
نصف القطر: 6px
عند التمرير: خلفية #f3f4f6، حد #d0d7de

محدد الخطوط (نمط رابط أزرق)

الخلفية: #ffffff
النص: #0969da
الحد: 1px solid #d0d7de
عند التمرير: خلفية #0969da، نص #ffffff

الخطر

الخلفية: #ffffff
النص: #cf222e
الحد: 1px solid #d0d7de
عند التمرير: خلفية #a40e26، نص #ffffff، حد #a40e26

البطاقات / الصناديق

الخلفية: #ffffff
الحد: 1px solid #d0d7de
نصف القطر: 6px
الحشو: 16px (الرأس) + 16px (الجسم)
للرأس شريط #f6f8fa مع حد سفلي.

حقول الإدخال

الخلفية: #ffffff
الحد: 1px solid #d0d7de
نصف القطر: 6px
الحشو: 5px 12px
عند التركيز: حد #0969da، حلقة 0 0 0 3px rgba(9,105,218,0.3)

شارات الحالة (مشكلة / طلب سحب)

مفتوح: خلفية #1a7f37، نص أبيض، حشو 4px 10px، نصف قطر 9999px.
مغلق: خلفية #cf222e، نص أبيض.
مدمج: خلفية #8250df، نص أبيض.
مسودة: خلفية #6e7781، نص أبيض.

التسميات (وسوم على المشكلات/طلبات السحب)

الحشو: 0 7px
نصف القطر: 9999px
الخط: 12px / 500
الخلفية والنص برمجيان (لون التسمية ← نص محسوب للتباين).

5. التباعد والتخطيط

الوحدة الأساسية: 4px. مقياس التباعد: 4، 8، 12، 16، 24، 32، 40، 48.
أقصى عرض للصفحة: 1280px (Container-xl).
الشريط الجانبي: 296px على سطح المكتب، ينهار أسفل 1012px.
حشو الصف: 16px أفقي، 12px رأسي (القوائم كثيفة بالتصميم).

6. الحركة

المدة: 80ms للتمرير؛ 200ms لفتح القائمة/المنبثق.
التخفيف: ease-out للفتح، ease-in للإغلاق.
المتجنب: تحريك تحميل الصفحة، التأثير المتوازي، التفاعلات الدقيقة الدائمة. الأشياء تظهر؛ لا تؤدي عروضاً.

7. قيود الاستخدام

احتفظ بالقوائم الكثيفة والصناديق المحددة بالحدود وطباعة النظام معاً؛ الأزرار الخضراء المعزولة وحدها لا تكفي لإنشاء سطح منتج شبيه بـGitHub.
استخدم الأخضر لإجراءات المستودع البنّاءة، والأزرق للروابط والتركيز، والأحمر/البنفسجي/الرمادي فقط لحالات المشكلات وطلبات السحب وسير العمل.
فضّل الواجهة الهادئة والحدود الصريحة والتباعد المضغوط على الظلال الزخرفية أو البطاقات الكبيرة بأسلوب التسويق.

11 KiB Raw Blame History