brand-landingpage
تصميم صفحة هبوط قائمة على الهوية التجارية مع مقابلات تفاعلية
تفشل معظم صفحات الهبوط لأنها تتخطى خطوة الهوية التجارية. ترشد هذه المهارة المستخدمين خلال مقابلة هيكلية للعلامة التجارية، ثم تُنشئ صفحة هبوط مصقولة مع نظام تصميم مطابق باستخدام Stitch SDK.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "brand-landingpage". Create a landing page for my API tool called DataPipe
النتيجة المتوقعة:
تسأل المهارة عن غرض منتجك، ثم ترشدك لاختيار 3 صفات للعلامة التجارية مثل نظيف، تقني، وعصري. بعد تأكيد السمة الداكنة مع لمسات نيلي، تُنشئ صفحة هبوط لسطح المكتب تحتوي على أقسام البطل، مقتطف الشيفرة، الميزات، والتذييل.
استخدام "brand-landingpage". The colors feel wrong, can you change them?
النتيجة المتوقعة:
تسأل المهارة عن المشكلة في الألوان: ساطعة جداً، باهتة جداً، أو درجة اللون خاطئة. بعد إجابتك ساطعة جداً، تُنشئ متغيراً خافتاً بنفس التخطيط لكن مع تشبع لوني معدّل.
استخدام "brand-landingpage". I want to compare different layout options
النتيجة المتوقعة:
تُنشئ المهارة 3 متغيرات لصفحة الهبوط: بطل في المنتصف، تخطيط منقسم، ورأس بعرض كامل. تفتح الثلاثة في علامات تبويب المتصفح وتسأل عن الاتجاه الذي تفضّله.
التدقيق الأمني
مخاطر منخفضةAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
مشكلات منخفضة المخاطر (1)
عوامل الخطر
⚙️ الأوامر الخارجية (7)
🌐 الوصول إلى الشبكة (1)
🔑 متغيرات البيئة (1)
درجة الجودة
ماذا يمكنك بناءه
إطلاق صفحة هبوط لمشروع جانبي
مطور يبني أداة CLI أو مشروع مفتوح المصدر يحتاج إلى صفحة هبوط لكن ليس لديه خبرة في التصميم. تشغّل هذه المهارة مقابلة العلامة التجارية وتُنشئ صفحة احترافية.
إنشاء موقع تسويقي لشركة ناشئة
شركة ناشئة في مرحلة مبكرة تحتاج إلى صفحة هبوط لمنتجها SaaS. تساعد المهارة في تعريف الهوية التجارية وتنتج صفحة تحتوي على أقسام الميزات والأسعار والشهادات.
بناء صفحة محفظة مطور
مطور أو مصمم يريد صفحة هبوط لمحفظته الشخصية. تُجري المهارة مقابلة العلامة التجارية وتُنشئ صفحة تحتوي على أقسام المشاريع المميزة وقسم عني.
جرّب هذه الموجهات
Create a landing page for my project called [Project Name]. It is a [description]. The target users are [audience].
I want to design a landing page for my product [Project Name]. Let me go through the brand interview to define my visual identity first.
The hero section on my landing page feels too plain. Can you generate a variant with a bolder layout and more color contrast? Keep the color scheme.
I have a saved design session from yesterday. Resume from where I left off and help me finalize the bundle for deployment.
أفضل الممارسات
- أكمل مقابلة العلامة التجارية حتى لو كنت ترغب في تخطيها. الأسئلة تستغرق 5 دقائق وتصنع الفرق بين قالب عام وصفحة تناسب منتجك.
- راجع الصفحات المُنشأة بفتح HTML في المتصفح بدلاً من طلب وصف نصي. التغذية البصرية تؤدي إلى تكرارات تصميم أفضل.
- احفظ مفتاح Stitch API في بيئتك قبل البدء حتى تتمكن المهارة من إنشاء التصاميم والتكرار عليها دون انقطاع.
تجنب
- طلب تضمين شعار الشركة أو رفع الصور من المهارة. Stitch SDK يُنشئ من نصوص تعليمية ولا يقبل مدخلات الصور.
- تقديم ملاحظات على مستوى CSS مثل إضافة padding-top 40px. ترجم الملاحظات إلى نية تصميمية مثل أضف مساحة تنفس أكثر أعلى العنوان الرئيسي.
- تخطي متغير الجوال. غالباً ما يحتاج تخطيط سطح المكتب إلى تعديلات للعرض على الجوال، وتوليد كليهما يضمن تجربة متسقة.
الأسئلة المتكررة
هل أحتاج إلى حساب Stitch لاستخدام هذه المهارة؟
ماذا يحدث إذا انقطعت جلستي؟
هل يمكنني استخدام ألوان علامتي التجارية الخاصة؟
هل تعمل هذه المهارة مع الصور والشعارات؟
ما نوع الصفحات التي يمكن لهذه المهارة إنشاؤها؟
هل يمكنني تعديل HTML بعد الإنشاء؟
تفاصيل المطور
المؤلف
wshobsonالترخيص
MIT
المستودع
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/مرجع
main
بنية الملفات