Rough.js
ستايل الرسم باليد
الأداة 6 من 10وش هي؟
مكتبة صغيرة ترسم الأشكال كأنها مرسومة بقلم رصاص: بدال خط مستقيم مثالي، تطلع لك خطوط فيها روح الرسم باليد. Claude يرسم فيها فريم فريم ويحوّلها لفيديو.
متى تستخدمها؟
- شروحات بستايل السبورة والورقة
- ستيكمان يشرح فكرة
- رسوم بيانية وخرائط أفكار بستايل بسيط وودود
كيف تشغّلها
- افتح Claude Code في مجلد جديد، أو محادثة جديدة في شات Claude العادي.
- الصق واحد من البرومبتات اللي تحت.
- Claude يثبّت الأداة بنفسه، يكتب الكود، ويرندر لك MP4.
أمر التثبيت اللي يشغّله Claude (للي يحب يعرف):
npm i roughjs
البرومبتات الثلاث
غيّر اللي بين الأقواس [ ] بفكرتك، وبعدها الصقه في Claude Code أو شات Claude العادي.
1ستيكمان يشرح فكرتك
سوّ لي فيديو [المدة، مثلاً 12] ثانية 1920×1080 بستايل الرسم باليد بـ Rough.js (على canvas، ورندر الفريمات بـ Playwright وجمّعها بـ FFmpeg) يشرح [فكرتك]: ورقة بيضا، ستيكمان [وش يسوي الستيكمان]، وبعدها [العناصر اللي تنرسم وكلماتها]. كل عنصر ينرسم كأنه بقلم رصاص. مهم: ثبّت الـ seed لكل شكل عشان الخطوط ما ترجف بين الفريمات. خط Cairo، طلّع MP4.
2رسم بياني كأنه على سبورة
سوّ بـ Rough.js رسم بياني أعمدة كأنه على سبورة، بعنوان «[العنوان]»، والأرقام: [الاسم 1: الرقم، الاسم 2: الرقم، الاسم 3: الرقم…]. كل عمود ينرسم بتظليل خطوط ويطلع رقمه فوقه، بالترتيب من اليمين. seed ثابت لكل شكل، خط Cairo، [المدة] ثواني، طلّع MP4.
3خريطة أفكار تنرسم فرع فرع
سوّ بـ Rough.js خريطة أفكار تنرسم فرع فرع على ورقة بيضا: «[الفكرة الرئيسية]» في دائرة بالنص، وتطلع منها فروع بالترتيب: [الفرع 1]، [الفرع 2]، [الفرع 3]، [الفرع 4]. كل فرع ينرسم بخط قلم رصاص وبعدها تطلع كلمته في شكل بيضاوي مظلّل. seed ثابت لكل شكل، خط Cairo، [المدة] ثواني، طلّع MP4.
⚠️ خذ بالك
- لو كل فريم يرسم الخط من جديد بشكل مختلف، الرسمة كلها ترجف. الحل إن Claude يثبّت الـ seed لكل شكل من أول فريم لآخر فريم، وهذا موجود في البرومبتات فوق.
السعر والرخصة
مجانية ومفتوحة المصدر برخصة MIT.
روابط رسمية
شفتها في الحلقة
تبي تشوف الأداة وهي تشتغل؟ الحلقة فيها 3 أمثلة حقيقية لكل أداة.