shape
تخطيط تصميم UX/UI قبل البرمجة
تفشل معظم الواجهات التي يولدها الذكاء الاصطناعي لأنها تتخطى التفكير التصميمي. تعمل هذه المهارة على إجراء مقابلة اكتشاف منظمة لفهم احتياجات المستخدمين والقيود والأهداف قبل إنتاج مذكرة تصميم شاملة توجه التنفيذ.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "shape". Shape the UX for a user onboarding flow that helps new users set up their workspace.
النتيجة المتوقعة:
Feature Summary: First-time workspace setup for users who just signed up. Primary goal is getting users to 'aha moment' within 5 minutes while reducing anxiety about configuration complexity. Primary User Action: Complete workspace configuration with confidence. Design Direction: Calm, reassuring, progressive disclosure. Layout Strategy: Single-column vertical flow with clear progress indicators. Key States: First visit (welcome), In-progress (step indicators), Completed (success celebration), Error (validation with guidance). Interaction Model: Guided wizard with skip optional steps, auto-save after each section. Content Requirements: Welcome message, step headers, inline help text, validation messages. Recommended References: interaction-design.md, form-design.md. Open Questions: Should we allow skipping profile setup?
استخدام "shape". I need to design a dashboard for monitoring API health.
النتيجة المتوقعة:
Feature Summary: Real-time API monitoring dashboard for DevOps engineers. Primary goal is rapid issue identification and root cause analysis. Primary User Action: Spot and diagnose API anomalies quickly. Design Direction: Information-dense, high contrast, fast-scanning. Layout Strategy: Grid-based with status overview top, detailed metrics bottom, left-to-right severity gradient. Key States: All systems healthy, partial degradation (warning), critical failure, loading (initial data fetch), no data. Interaction Model: Hover for details, click to drill down, auto-refresh every 30s, manual refresh available. Content Requirements: Service names, status indicators, latency numbers, error counts, timestamps, error messages. Recommended References: data-visualization.md, dashboard-design.md. Open Questions: Alert threshold preferences?
التدقيق الأمني
آمنStatic analysis detected 22 potential issues (21 'weak cryptographic algorithm' patterns, 1 'external commands' pattern). All findings are false positives caused by pattern matching on markdown formatting (backticks around `.impeccable.md`) and common English words ('block', 'key', 'cipher'). This is a pure documentation/planning skill with no executable code, no network operations, no file system access, and no security risks. The skill runs a structured interview process and generates design documentation.
مشكلات منخفضة المخاطر (1)
درجة الجودة
ماذا يمكنك بناءه
مدير المنتج يخطط لميزة جديدة
قبل تسليم المتطلبات للهندسة، استخدم هذه المهارة لتحديد اتجاه UX واضح ومقاييس النجاح وقيود التصميم.
المطور يبدأ التنفيذ
استخدم قبل البرمجة لتوضيح ما يحتاج بناؤه، مما يتفادى إعادة العمل الناتجة عن سوء فهم المتطلبات أو الحالات الطرفية المفقودة.
المصمم يحدد أنماط التفاعل
هيكلة التفكير حول تدفقات المستخدم والحالات ومتطلبات المحتوى قبل إنشاء النماذج المرئية أو النماذج الأولية.
جرّب هذه الموجهات
أحتاج لتصميم [feature description]. أجريت مقابلة الاكتشاف وأنشئ مذكرة التصميم.
شكّل UX لـ [feature]. لدي بالفعل سياق تصميمي من /impeccable، لذا استخدم ذلك عند مناقشة القيود والأنماط.
خطط UX لـ [feature] مع هذه القيود: [list constraints مثل mobile-first، متطلبات إمكانية الوصول، ميزانيات الأداء]. ركّز المقابلة على كيفية تشكيل هذه القيود للتصميم.
أريد تصميم [feature] لكنني قلق بشأن [specific concern like complexity overwhelm]. تأكد من أن مقابلة الاكتشاف تستكشف الأهداف المعاكسة وما لا ينبغي أن يكون عليه.
أفضل الممارسات
- استدعِ /impeccable قبل استخدام هذه المهارة لضمان تحميل مبادئ التصميم وسياق المشروع
- أجب على أسئلة المقابلة بتأنٍ حتى لو اعتقدت أن التفاصيل واضحة
- راجع مذكرة التصميم الناتجة بعناية قبل التأكيد
- سلّم المذكرة المؤكدة إلى /impeccable craft أو /impeccable للتنفيذ السلس
تجنب
- تخطي مقابلة الاكتشاف والقفز مباشرة إلى اقتراحات التصميم
- تقديم إجابات بكلمة واحدة لأسئلة المقابلة بدون سياق
- استخدام هذه المهارة توقعاً لإخراج كود بدلاً من وثائق التصميم
- تجاهل خطوة تأكيد المذكرة والمتابعة بفهم غير مكتمل