④段整套同步（六节＋ 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
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,160 @@
+# نظام تصميم مستوحى من Duolingo
+
+> Category: الإنتاجية والبرمجيات كخدمة
+> منصة تعلّم اللغات. الأخضر البومي الزاهي، الظلال السميكة، البهجة المحوّلة إلى ألعاب.
+
+## 1. الثيم البصري والأجواء
+
+Duolingo هو تحويل الألعاب إلى لغة بصرية. الواجهة زاهية بجرأة واضحة، مع **الأخضر البومي** (`#58cc02`) كلون رئيسي للعلامة التجارية، وظل سفلي سميك بارتفاع 4px على كل عنصر تفاعلي يشبه زر ثلاثي الأبعاد ينتظر الضغط عليه. الصفحة بيضاء (`#ffffff`) مع حدود سميكة 2–3px بلون رمادي داكن (`#e5e5e5`)، ويُقرأ النظام بأكمله كتطبيق iOS من عام 2015 أُعيد توليده بتدرج هرمي أفضل.
+
+تستخدم الطباعة **Feather Bold** (خط مستدير مخصص بلا أسنان) لعناصر الواجهة و**Mona Sans** (أو Inter) لمحتوى النص. أحجام العرض كبيرة وواثقة — Duolingo لا يهمس أبدًا. غالبًا ما تحمل العناوين خطًا أخضر تحتها أو تجلس على حبة خضراء، وتظهر تميمة Duo (بومة خضراء) كشخصية توضيحية نشطة، لا كشعار ثابت.
+
+لغة الأشكال ودية: نصف قطر 16–20px على البطاقات، 12px على الأزرار، 9999px على الشرائح وأشرطة التقدم. الأيقونات مملوءة، مستديرة، ومشفّرة بالألوان حسب المهارة — لكل سطح درس زوج ألوان يمكن التعرف عليه فورًا.
+
+**الخصائص الرئيسية:**
+- الأخضر البومي (`#58cc02`) كلون مهيمن للعلامة التجارية، يُستخدم في أكثر من 30% من السطح
+- ظل سفلي سميك 4px على كل زر (خاصية "الضغط اللمسي")
+- حدود صلبة 2–3px، لا خطوط رفيعة أبدًا
+- Feather Bold (عرض مستدير) + Mona Sans (المحتوى)
+- نص كبير وواثق — أحجام العرض تبدأ من 48px وتتصاعد
+- التميمة كشخصية: تظهر بومة Duo في الإعداد الأولي، الأخطاء، التتاليات
+- البرتقالي للتتاليات (`#ff9600`) والزهري الجوهرة (`#ce82ff`) كألوان ثانوية للعلامة التجارية
+
+## 2. لوحة الألوان والأدوار
+
+### الأساسية
+- **الأخضر البومي** (`#58cc02`): الأساسي للعلامة التجارية، CTA الرئيسي، الإجابة الصحيحة.
+- **الأخضر البومي العميق** (`#58a700`): لون الضغط/الظل لأزرار خضراء.
+- **الأخضر البومي الفاتح** (`#89e219`): التمرير فوقه، التعبئات الخفيفة.
+- **الأخضر البومي الباهت** (`#dbf8c5`): سطح خفيف، لافتة النجاح.
+
+### النبرات الثانوية
+- **البرتقالي للتتاليات** (`#ff9600`): عداد التتاليات، أيقونة اللهب، الطاقة المميزة.
+- **البرتقالي العميق للتتاليات** (`#cc7a00`): البرتقالي عند الضغط.
+- **الزهري الجوهرة** (`#ce82ff`): عملة الجواهر، Super Duolingo.
+- **الأزرق الثعبان** (`#1cb0f6`): زر التلميح، رابط المعلومات.
+- **الأحمر الكاردينالي** (`#ff4b4b`): إجابة خاطئة، فقدان حياة.
+- **الأصفر النحلة** (`#ffc800`): شارة المحترفين، الإنجاز.
+
+### السطح
+- **الثلج** (`#ffffff`): الخلفية الأساسية.
+- **الثعبان** (`#f7f7f7`): فاصل الأقسام، السطح الثانوي.
+- **البجعة** (`#e5e5e5`): خلفية معطّلة، كتلة مضمّنة.
+- **الذئب** (`#777777`): فاصل داكن، نص ثانوي.
+
+### الحبر والنص
+- **أسود الثعبان** (`#3c3c3c`): النص الأساسي.
+- **الذئب** (`#777777`): النص الثانوي، التعليقات التوضيحية.
+- **الأرنب** (`#afafaf`): معطّل، عنصر نائب.
+
+### الحدود
+- **البجعة** (`#e5e5e5`): حد قياسي 2px.
+- **الأرنب** (`#afafaf`): حد مؤكد عند التمرير.
+
+## 3. قواعد الطباعة
+
+### عائلة الخطوط
+- **العرض / واجهة المستخدم / العناوين**: `Feather Bold`، مع بديل: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
+- **المحتوى / النص الطويل**: `Mona Sans`، مع بديل: `'Helvetica Neue', system-ui, sans-serif`
+- **الكود (نادر، المدارس/الإدارة)**: `JetBrains Mono`، مع بديل: `ui-monospace, Menlo, monospace`
+
+### التسلسل الهرمي
+
+| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
+|------|------|------|--------|-------------|----------------|-------|
+| العرض | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | بطل الإعداد الأولي |
+| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | عنوان الصفحة |
+| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | عنوان القسم |
+| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | عنوان البطاقة، صف الدرس |
+| محتوى كبير | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | تلميح الدرس، التعليمات |
+| المحتوى | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | النثر القياسي |
+| التعليق التوضيحي | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | عداد XP، البيانات الوصفية |
+| الزر | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | تسمية الزر القياسية |
+| التتالي | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | رقم التتالي، على اللهب |
+
+### المبادئ
+- **800 هو الافتراضي**: يعمل Feather Bold بوزن 800 على العناوين والأزرار. يبدو 700 ضعيفًا في هذا النظام.
+- **نص كبير**: أحجام العناوين أكبر بنسبة 25–40% من العلامات التجارية النموذجية للمنتجات — الثقة كهوية.
+- **أحرف مستديرة**: لكل رمز نهايات ناعمة؛ ستؤدي الأحرف المسنّنة إلى كسر عقد الودية.
+
+## 4. تصميم المكونات
+
+### الأزرار
+
+**الأساسي (الأخضر البومي)**
+- الخلفية: `#58cc02`
+- النص: `#ffffff`
+- الحشو: 14px 24px
+- الزاوية: 16px
+- Border-bottom: 4px solid `#58a700` (الظل السميك)
+- التمرير فوقه: خلفية `#89e219`
+- النشط: translate-y 4px، border-bottom 0 (الزر "ينضغط")
+- الاستخدام: "متابعة"، "تحقق"، CTA الرئيسي.
+
+**الثانوي (أبيض مع ظل سفلي)**
+- الخلفية: `#ffffff`
+- النص: `#777777`
+- الحد: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- الزاوية: 16px
+- الحشو: 14px 24px
+- التمرير فوقه: النص `#3c3c3c`، الحد `#afafaf`
+
+**برتقالي التتاليات**
+- الخلفية: `#ff9600`
+- النص: `#ffffff`
+- Border-bottom: 4px solid `#cc7a00`
+- الاستخدام: هدف التتالي، "ابدأ التتالي"
+
+**الخطأ (الأحمر الكاردينالي)**
+- الخلفية: `#ff4b4b`
+- النص: `#ffffff`
+- Border-bottom: 4px solid `#cc3b3b`
+- الاستخدام: تغذية راجعة للإجابة الخاطئة.
+
+### البطاقات / بلاطات الدرس
+- الخلفية: `#ffffff`
+- الحد: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- الزاوية: 16px
+- الحشو: 16px
+- التمرير فوقه: رفع 2px، ظل `0 4px 0 #d7d7d7`
+
+### عقدة شجرة المهارات (فقاعة الدرس)
+- الحجم: 80×72px
+- الخلفية: لون المهارة مظلّل (أخضر للنشط، رمادي للمقفل)
+- Border-bottom: 6px solid متغير أغمق
+- الزاوية: 50% (دائري)
+- النشط: ينبض 1.0 → 1.05 كل 1.6s
+
+### حقول الإدخال
+- الخلفية: `#ffffff`
+- الحد: 2px solid `#e5e5e5`
+- الزاوية: 12px
+- الحشو: 12px 16px
+- التركيز: حد `#1cb0f6` (أزرق الثعبان)، حلقة `0 0 0 3px rgba(28, 176, 246, 0.2)`
+
+### شريط التقدم
+- المسار: `#e5e5e5`
+- التعبئة: `#58cc02` (أو `#ff9600` للتتالي)
+- الزاوية: 9999px
+- الارتفاع: 16px
+- تعبئة متحركة: 320ms ease-out عند الزيادة.
+
+## 5. التباعد والتخطيط
+
+- **الوحدة الأساسية**: 4px. المقياس: 4، 8، 12، 16، 24، 32، 48، 64.
+- **الحاوية**: حد أقصى 1080px، هامش 24px.
+- **عمود شجرة الدروس**: عرض 320px؛ محاذاة مركزية على سطح المكتب.
+
+## 6. الحركة
+
+- **المدة**: 180ms لضغط الزر؛ 320ms لفتح قفل عقدة المهارة؛ 1.6s لنبضة العقدة النشطة.
+- **التسهيل**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out، تجاوز طفيف) لفتح الأقفال.
+- **التميمة**: تومض Duo كل 4–6s، وتقفز عند معالم التتاليات (480ms ease-out نابض).
+
+## 7. إرشادات الاستخدام
+
+- حافظ على الأخضر البومي عالي التشبع، والظلال السفلية السميكة، وهندسة الدروس المستديرة معًا؛ الأزرار الخضراء المسطحة وحدها لا تُعطي انطباع Duolingo.
+- احتفظ بالنص الغامق كبير الحجم لحظات الدروس والتتاليات والتقدم حيث يحتاج المنتج إلى تشجيع أو تغذية راجعة.
+- استخدم الحركة المرحة بتقتير حول تغييرات حالة التقدم، مع تجنب الرسوم المتحركة المرتدة العامة على كل عنصر تحكم.