Sketch — Throwaway HTML mockups: 2-3 design variants to compare
Sketch — Throwaway HTML mockups: 2-3 design variants to compare
ابدأ بالمعنى، ثم انتقل إلى التفاصيل.
هذا الدرس يشرح Sketch — Throwaway HTML mockups: 2-3 design variants to compare ضمن موضوع بدء استخدام Hermes بصورة صحيحة. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.
إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟
للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.
للمتخصص: راجع Skill metadata، Reference: full SKILL.md، When NOT to use this، ثم افحص حالات الفشل والتوافق مع إصدارك.
لا تحتاج خبرة سابقة؛ اتبع الخطوات على جهاز تجريبي أولًا.
نتيجة واضحة قبل أن تقرأ.
- تفهم Sketch — Throwaway HTML mockups: 2-3 design variants to compare من دون افتراض معرفة سابقة.
- تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
- اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
تعريفات قصيرة قبل التفاصيل.
- Skill
- حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.
Throwaway HTML mockups: 2-3 design variants to compare
ما الذي يقوله المصدر، وبأي ترتيب؟
- 01Skill metadata
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
- 02Reference: full SKILL.md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 03When NOT to use this
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 04If the user has the full GSD system installed
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 05Core method
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 061. Intake (skip if the user already gave you enough)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 072. Variants (2-3, never 1, rarely 4+)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 083. Make them real HTML
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 094. Variant README
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 10Variant: stance name
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.
انسخ بعد أن تفهم الأثر.
intake → variants → head-to-head → pick winner (or iterate)sketches/
├── 001-calm-editorial/
│ ├── index.html
│ └── README.md
├── 001-utilitarian-dense/
│ ├── index.html
│ └── README.md
└── 001-playful-split/
├── index.html
└── README.mdbrowser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="Does this layout look clean and readable? Any visible bugs (overlapping text, unstyled elements, broken images)?")اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.