스킬 ux-prototyping
🎨
ux-prototyping
낮은 위험 ⚡
스크립트 포함⚙️
외부 명령어
إنشاء نماذج أولية تفاعلية لتجربة المستخدم
إنشاء النماذج الأولية التفاعلية يدويًا يستغرق وقتًا ويتطلب مهارات في الواجهة الأمامية. تحوّل هذه المهارة مواصفات تجربة المستخدم إلى نماذج أولية HTML بملف واحد تعمل في أي متصفح، مما يتيح التحقق السريع من تدفقات المستخدم دون كتابة كود.
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"ux-prototyping" 사용 중입니다. Create a prototype for a task management app based on the UX spec at specs/architecture/ux.md
예상 결과:
- ملف HTML واحد محفوظ في /mnt/user-data/outputs/prototype.html
- شاشة ترحيب تفاعلية مع زر بدء
- شاشة تسجيل الدخول مع حقلي البريد الإلكتروني وكلمة المرور
- الشاشة الرئيسية تظهر الحالة الفارغة وقائمة مهام نموذجية
- التنقل بالعلامات بين الشاشة الرئيسية والبحث والصفحة الشخصية
- قائمة منبثقة لإنشاء عنصر مع حقلي العنوان والوصف
- شاشة عرض التفاصيل للعناصر الفردية
- شاشة الإعدادات مع خيارات الحساب والإشعارات والخصوصية
"ux-prototyping" 사용 중입니다. Build a prototype for the onboarding flow
예상 결과:
- ملف HTML واحد مع شاشة الترحيب
- نموذج التسجيل مع التحقق
- تدفق إنشاء الحساب
- شاشات البرنامج التعليمي الإلزامي
- الانتقال إلى الشاشة الرئيسية للتطبيق عند الاكتمال
보안 감사
낮은 위험v1 • 1/23/2026
Static scanner flagged 51 patterns but all evaluations confirm false positives. The scanner misidentified Date.now() timestamps as cryptographic algorithms, markdown backticks as shell commands, and standard DOM methods as reconnaissance. This is a legitimate UX prototyping skill that generates self-contained HTML mockups from UX specifications. No network calls, no filesystem access, no credential handling.
2
스캔된 파일
644
분석된 줄 수
8
발견 사항
1
총 감사 수
중간 위험 문제 (2)
False Positive: innerHTML Assignment
Scanner flagged line 505 innerHTML assignment as XSS risk. This is a false positive because the prototype is self-contained with no external input vectors. The data displayed comes from local form input within the same prototype session.
False Positive: Markdown Backticks as Shell Commands
Scanner flagged SKILL.md code block delimiters as Ruby/shell backtick execution. This is a documentation file containing markdown code blocks for example prototypes, not executable code.
낮은 위험 문제 (4)
assets/prototype-template.html:301assets/prototype-template.html:320assets/prototype-template.html:324assets/prototype-template.html:328
False Positive: Hardcoded URLs
Scanner flagged SVG namespace URLs at lines 301, 320, 324, 328 as hardcoded URLs. These are standard SVG xmlns attributes required for inline SVG rendering in HTML.
assets/prototype-template.html:254assets/prototype-template.html:347assets/prototype-template.html:402-403assets/prototype-template.html:473-476assets/prototype-template.html:480assets/prototype-template.html:488assets/prototype-template.html:509SKILL.md:3SKILL.md:121
False Positive: Date.now() as Cryptographic Algorithm
Scanner misidentified Date.now() and template literal strings as weak cryptographic algorithms. Date.now() is a standard timestamp function used for generating unique item IDs.
False Positive: Array.join() as Obfuscation
Scanner flagged .join('') as obfuscation pattern. This is standard JavaScript array method usage for converting item arrays to HTML strings.
assets/prototype-template.html:81assets/prototype-template.html:93assets/prototype-template.html:131assets/prototype-template.html:145assets/prototype-template.html:152assets/prototype-template.html:201assets/prototype-template.html:208assets/prototype-template.html:218assets/prototype-template.html:485
False Positive: DOM Methods as System Reconnaissance
Scanner flagged document.querySelectorAll and similar DOM methods as system reconnaissance. These are standard JavaScript DOM manipulation functions.
위험 요인
⚡ 스크립트 포함
기록된 특정 위치가 없습니다
⚙️ 외부 명령어
기록된 특정 위치가 없습니다
감사자: claude
품질 점수
36
아키텍처
100
유지보수성
87
콘텐츠
20
커뮤니티
72
보안
91
사양 준수
만들 수 있는 것
نموذج أولي سريع لمراجعة أصحاب المصلحة
إنشاء نموذج أولي تفاعلي من مواصفات تجربة المستخدم لإظهار تدفقات المستخدم لأصحاب المصلحة قبل بدء التطوير. التحقق من منطق التنقل وتسلسل الشاشة مبكرًا.
نماذج أولية لاختبار المستخدمين
إنشاء نماذج أولية خفيفة لجلسات قابلية الاستخدام. ملف HTML الواحد يعمل دون اتصال ويعمل في أي متصفح، مما يجعله مثاليًا لبحث المستخدم عن بُعد أو شخصيًا.
مرجع لتسليم التطوير
إنشاء نماذج أولية تفاعلية يمكن للمطورين الرجوع إليها أثناء التنفيذ. أنماط الشاشة الواضحة وإدارة الحالات تعمل كخطط تنفيذ.
이 프롬프트를 사용해 보세요
طلب نموذج أولي أساسي
Create an interactive prototype for a [APP_TYPE] app based on the UX specification at [PATH_TO_UX_SPEC]. Generate a single HTML file with all screens, navigation, and user flows from the spec.
تدفق مستخدم محدد
Build a prototype focusing on the [FLOW_NAME] user flow from the UX spec. Include all screens, states, and interactions needed to complete this flow from start to finish.
نموذج هاتف محمول
Create a mobile-first prototype for a [APP_NAME] app based on specs/architecture/ux.md. Include onboarding, main screens, and navigation patterns appropriate for mobile use.
نموذج أولي للتطبيق الكامل
Generate a comprehensive prototype for the complete app experience. Include all screens from the UX spec: welcome/onboarding flows, authentication screens, main app views with empty and populated states, settings, and all key interactions.
모범 사례
- حافظ على استقلالية النماذج الأولية باستخدام CSS و JavaScript مضمنة. تجنب روابط CDN الخارجية لاختبار موثوق دون اتصال.
- استخدم أنماط إدارة شاشة متسقة مع سمات data-screen. أخفي الشاشات غير النشطة واعرض النشطة فقط.
- وثّق جميع حالات الشاشة بما في ذلك الحالات الفارغة والتحميل والأخطاء والنجاح. هذه ضرورية للتحقق الكامل من تدفق المستخدم.
피하기
- تجاهل الحالات الفارغة أو الأخطاء أو التحميل في النماذج الأولية. يحتاج المستخدمون لرؤية كيفية تعامل التطبيق مع جميع السيناريوهات، وليس المسار الناجح فقط.
- استخدام النموذج الأولي كواجهة إنتاج. النماذج الأولية للتحقق ولا يجب أن تحل محل التنفيذ السليم.
- إنشاء نماذج أولية دون اختبارها في متصفح. تحقق دائمًا من عمل التنقل وإتمام جميع التدفقات.
자주 묻는 질문
ما هذه المهارة؟
تحوّل هذه المهارة مستندات مواصفات تجربة المستخدم إلى نماذج أولية HTML تفاعلية بملف واحد يمكن فتحها في أي متصفح للتحقق من تدفقات المستخدم.
هل أحتاج لمعرفة HTML لاستخدام هذه المهارة؟
لا. أنت توفر مواصفات تجربة المستخدم وتقوم المهارة بإنشاء نموذج أولي كامل العمل مع جميع الشاشات والتفاعلات.
ما شكل مواصفات تجربة المستخدم التي يجب أن تكون؟
تقرأ المهارة من specs/architecture/ux.md افتراضيًا، أو أي مسار محدد من المستخدم. يجب أن يصف المواصفات الشاشات وتدفقات المستخدمين والحالات والتفاعلات.
هل يمكنني استخدام النموذج الأولي المُنشأ في الإنتاج؟
لا. النماذج الأولية للتحقق والاختبار فقط. تفتقر إلى إمكانية الوصول والأداء المحسّن وتدابير الأمان المطلوبة للإنتاج.
ماذا يتضمن النموذج الأولي المُنشأ؟
ملف HTML واحد مع CSS و JavaScript مضمنة، تنقل يعمل بين الشاشات، مكونات واجهة المستخدم الأساسية، حالات فارغة/تحميل/أخطاء، وتخطيط متجاوب.
كيف أختبر النموذج الأولي؟
افتح ملف HTML المُنشأ في أي متصفح ويب. النموذج الأولي يعمل دون اتصال ويضمين جميع الكود اللازم لاختبار تدفقات المستخدم.