Frankenstein it

تعمل Frankenstein it (ركّب صفحة فرانكنشتاين) كما يقطع المصمم ملف مراجعه. تقص أنت (أو وكيلك) أجزاء من مراجع الواجهات على اللوحة، ثم ترصها في صفحات جديدة، عدة نسخ في وقت واحد. لا بأس بوضع جزء فاتح بجانب جزء داكن. الهدف أفكار لصفحة واحدة، لا تصميم نهائي.

Frankenstein it: صفحة هبوط من لوحتي. شريط التنقل من صفحة أداة المطورين،
والقسم الرئيسي من موقع القهوة، والبطاقات من أي مرجع.

لا شيء يقص من الصورة فعلا

الجزء هو دور ومستطيل قص. يعرض متصفحك ذلك المستطيل فوق الصورة الأصلية، محملة من مصدرها. لا ينزل GoBanana ملفات الصور ولا يقصها ولا يحفظها أبدا، وكل جزء يحتفظ برابط مصدره.

الخطوات

1. اختر اللوحة والمنصة ونوع صفحة واحدا.

   يستخدم الوكيل اللوحة المذكورة في المحادثة، أو يعرض لوحاتك. أنواع الصفحات: صفحة هبوط أو صفحة أسعار للموقع، وصفحة رئيسية للوحة معلومات في تطبيق الويب، وشاشة رئيسية للهاتف. تحتاج نحو 6 مراجع واجهات صالحة، وإذا كانت أقل يعرض الوكيل أن يستكشف أولا.

2. انظر واقطع باستخدام cut_parts.

   لكل مرجع، يختار الوكيل جزءا أو جزأين يستحقان الأخذ، ويقص كلا منهما مع:

   • دور: nav، hero، logos، features، cards، gallery، stats، testimonial، pricing، cta، form، faq، content، footer (الويب)؛ sidebar، toolbar، table، chart، filters (تطبيق الويب)؛ status-header، tabbar، list، detail، sheet، empty (الهاتف)؛ أو other
   • مستطيل قص بكسور من الصورة: { "x": 0, "y": 0.04, "w": 1, "h": 0.18 }
   • سمة: light أو dark أو unknown
   • ملاحظة تبدأ بـ steal:

   يسعى إلى 2 إلى 4 مرشحين لكل دور من 4 مصادر مختلفة على الأقل، حتى تختلف النسخ فعلا. حتى 24 قصة في كل استدعاء، وتتسع المكتبة لـ 80 جزءا لكل لوحة.

3. رص الأجزاء باستخدام frankenstein_page.

   إما وصفة من الأدوار مع 3 أو 4 نسخ (يملأ الخادم كل دور من المكتبة ويمزج 3 مصادر على الأقل في كل نسخة عندما يستطيع)، أو صفوف صريحة من معرفات الأجزاء عندما تحدد الأجزاء بنفسك. مقاسات الإطارات حسب المنصة: 390px للهاتف، و834px للجهاز اللوحي، و1440px للموقع وتطبيق الويب.

4. قيّم وأصلح.

   يفحص الوكيل الإيقاع (لا ثلاثة أشرطة مزدحمة متتالية)، والتسلسل البصري (قسم رئيسي واحد)، وقفزات التباين، والفواصل، وتنوع المصادر (لا جاران من الموقع نفسه). يصلح بـ update_frankenstein ويعيد المزج بـ remix_frankenstein. جولتان على الأكثر: أفكار، لا تلميع.

5. اعرض.

   هيكل مرقم لكل نسخة: الدور، وما يأخذه، ورابط المصدر لكل خانة.

6. سلّم.

   FRANKENSTEIN.md (المجانية) وfrankenstein-wireframe.html (Pro). انظر التصدير.

الوصفات

المنصة والصفحة	الوصفة، من الأعلى إلى الأسفل
موقع، صفحة هبوط	nav, hero, logos, features, cards, testimonial, cta, footer
موقع، صفحة أسعار	nav, hero, pricing, faq, cta, footer
تطبيق ويب، لوحة معلومات	sidebar بجانب toolbar، ثم stats, chart, table (كصفوف صريحة: widths: [1, 4])
هاتف، الشاشة الرئيسية	status-header, hero (أو detail)، list, cards, tabbar
جهاز لوحي	وصفة الهاتف لشاشات التطبيقات، ووصفة الموقع للمواقع

الأدوار التي ليس لها أجزاء جيدة تترك، ولا تملأ بأجزاء ضعيفة.

عندما لا يستطيع الوكيل رؤية الصور

كثير من الوكلاء لا يستطيعون رؤية الصور من رابط. عندها يقول الوكيل ذلك مرة واحدة، ويقص حسب الدور فقط، ويخمن الخادم شريطا:

الدور	الشريط المخمن
nav	الأعلى من 0 إلى 8% (من 0 إلى 4% في لقطات الصفحة الكاملة الطويلة)
hero	الـ 35% التالية (15% في لقطات الصفحة الكاملة)
footer، tabbar	الـ 10% السفلى
status-header	الأعلى من 0 إلى 14%
sidebar	الـ 18% اليسرى، بالارتفاع الكامل
كل ما عدا ذلك	الشريط الأوسط

الأجزاء المخمنة تحمل العلامة guessedCrop، وتبدأ ملاحظاتها بـ guessed:، وتوسم كل خانة مخمنة بعبارة “(guessed crop)” في الرد. أصلحها على اللوحة (Recrop، إعادة القص) أو أخبر الوكيل أين تقع الأشياء: «بطاقات الأسعار في الثلث الأوسط».

طرق العرض

لكل إطار صفحة فرانكنشتاين ثلاث طرق عرض. بدّل بينها بمجموعة أزرار الاختيار على الإطار، أو اطلب «اعرضها كمخطط هيكلي».

طريقة العرض	ما تعرضه	استخدمها لـ
Collage	الأجزاء كما هي. الافتراضي	تقييم الفكرة
Wireframe	تدرج رمادي، مخفف، مع تسميات الأدوار	تقييم البنية والإيقاع
Even	الأجزاء الداكنة معكوسة، وكل شيء أقل تشبعا قليلا، بسمة واحدة	تقييمها كصفحة واحدة

إعادة المزج مع التثبيت

أعجبك شريط التنقل والقسم الرئيسي في النسخة 2؟ قل «أبق شريط التنقل والقسم الرئيسي، وأعد مزج الباقي، 3 محاولات». يستدعي الوكيل remix_frankenstein مع lock: ["nav", "hero"] وcount: 3. تظهر إطارات جديدة يمين الأصل، بعناوين “…, remix 1” و”…, remix 2”. يحدد vary الأدوار التي تتغير. والاستدعاء نفسه يعطي دائما النتيجة نفسها.

التعديل اليدوي على اللوحة

قص جزء

1. انتقل إلى صورة على اللوحة أو حددها.
2. اضغط M (أو انقر بالزر الأيمن) واختر Cut part (قص جزء).
3. اسحب مقابض القص، أو اكتب الأرقام: From left وFrom top وWidth وHeight، كنسب مئوية من الصورة.
4. اختر الدور والسمة (Not sure أو Light أو Dark)، وأضف ملاحظة «خذ منه»، ثم احفظ.

يذهب الجزء إلى تبويب Parts في الدرج.

رص الأجزاء

1. افتح تبويب Parts في الدرج.
2. اختر الأجزاء بالمفتاح Space (أو بالنقر)، بالترتيب من الأعلى إلى الأسفل.
3. اختر Frankenstein it (n). يظهر إطار جديد في قسم Frankenstein pages.

تغيير صفحة

• التبديل: اسحب جزءا من تبويب Parts إلى خانة، أو انتقل إلى الخانة واضغط M ثم Swap with part…
• النقل: انتقل إلى خانة واضغط Alt+مفاتيح الأسهم، أو استخدم Move up/down/left/right وJoin the row above/below وOwn row في قائمة الخانة.
• إعادة القص: انتقل إلى خانة واضغط Enter.
• الملاحظة: F2 على الخانة.
• الإزالة: Delete على الخانة.
• إعادة تسمية الصفحة: F2 على الإطار.

لوحة المفاتيح داخل الإطار

المفتاح	ما يفعله
Arrow keys	ينقل التركيز بين الخانات
Alt + Arrow keys	ينقل الخانة المحددة
Home، End	الخانة الأولى أو الأخيرة
Enter	إعادة قص الخانة
M، Shift+F10	قائمة الخانة
F2	تعديل ملاحظة الخانة
Delete، Backspace	إزالة الخانة من الصفحة
Escape	العودة إلى الإطار

التصدير

الصيغة	الملف	الخطة	ما يحتويه
stitch_md	design/explorations/<slug>/FRANKENSTEIN.md	المجانية	هيكل لكل صفحة فرانكنشتاين: دور كل خانة وملاحظة «خذ منه» ورابط المصدر، مع إرشادات للبناء: خذ البنية لا البكسلات، ووحّد كل شيء في سمة واحدة
wireframe_html	design/explorations/<slug>/frankenstein-wireframe.html	Pro	مخطط هيكلي مستقل منخفض الدقة: صناديق رمادية لكل خانة مع تسميات الأدوار والملاحظات، وقائمة مصادر، دون صور المراجع

• Directorydesign/explorations/editorial-landing/

  • FRANKENSTEIN.md
  • frankenstein-wireframe.html
  • BUILD-PROMPT.md يسرد صفحات فرانكنشتاين

عندما تحتوي اللوحة على صفحات فرانكنشتاين، يسردها BUILD-PROMPT.md حتى يتمكن وكيل البرمجة من البناء انطلاقا من هيكل.

لا ملفات PNG

إذا طلبت «الصور المقصوصة كملفات» فسيرفض الوكيل: لا توجد ملفات، بل مستطيلات قص فوق صور ملك لأصحابها. تحصل بدلا من ذلك على FRANKENSTEIN.md والمخطط الهيكلي ورابط اللوحة.

تفاصيل الأدوات

cut_parts · frankenstein_page · update_frankenstein · remix_frankenstein