نسّق بالكلمات: اجعلها جميلة
نسّق بالكلمات: اجعلها جميلة
إليك السر الذي لا يخبرك به أحد: عندما تمارس الـ vibe coding، أنت لا تنسّق بالكود — بل تنسّق بالصفات.
لست بحاجة إلى حفظ خصائص CSS. أنت تصف المظهر الذي تريده كما لو كنت توجّه مصممًا: بمشاعر وصفات ومراجع. "داكن، زجاجي، فاخر — مثل تطبيق موسيقى." والـ AI يترجم الإحساس إلى أصناف.
شاهد مثالًا حقيقيًا واحدًا.
أنت تقول:
"اجعل بطاقة التعريف داكنة وزجاجية، بزوايا مستديرة ناعمة وإحساس فاخر — مثل شاشة التشغيل الحالي في Spotify."
والـ AI يُنتج:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
كل صفة تحوّلت إلى صنف:
- داكن →
bg-gradient-to-br from-slate-950 to-indigo-950 - زجاجي →
bg-white/10 backdrop-blur-md border border-white/20 - فاخر، زوايا ناعمة →
rounded-2xl p-8
هذه هي الحيلة كلها: صفات تدخل، أصناف تخرج. وكلما كانت مراجعك أفضل ("مثل تطبيق موسيقى"، "مثل صفحة هبوط لبنك"، "مثل صالة ألعاب نيون")، كانت النتيجة أفضل.
بالأسفل بطاقة التعريف من الدرس السابق — مجرّدة من كل تنسيق. خلفية بيضاء عادية، نص افتراضي، صفر إحساس. مهمتك: أن تعيدها إلى الحياة، مظهرًا موصوفًا تلو الآخر.
التعليمات
أعطِ <body> خلفية متدرّجة داكنة — صف الإحساس لنفسك أولًا: داكن، عميق، فاخر. ثم أضف الأصناف
تلميح: جرّب: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
نسّق حاوية البطاقة: زجاج مصنفر، زوايا مستديرة ناعمة، حشوة سخيّة — ذلك المظهر "الزجاجي الفاخر"
حوّل رابط الدعوة إلى زر متدرّج الألوان — جريء، ملوّن، يستحيل تجاهله
أضف تأثير hover ليتفاعل الزر عندما تلمسه الفأرة — التفاصيل الصغيرة تجعل الأشياء تبدو حيّة
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أعطِ <body> خلفية متدرّجة داكنة — صف الإحساس لنفسك أولًا: داكن، عميق، فاخر. ثم أضف الأصناف