🎨

ux-prototyping

Name: ux-prototyping
Author: Emz1998

Niedriges Risiko ⚡ Enthält Skripte⚙️ Externe Befehle

대화형 UX 프로토타입 생성

대화형 프로토타입을 수동으로 만드는 것은 시간이 많이 들고 프론트엔드 기술이 필요합니다. 이 기술은 UX 사양서를 단일 파일 HTML 프로토타입으로 변환하여 모든 브라우저에서 실행할 수 있어 코딩 없이도 빠른 사용자 흐름 검증을 가능하게 합니다.

Unterstützt: Claude Codex Code(CC)

⚠️ 64 Schlecht

Die Skill-ZIP herunterladen

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

Einschalten und loslegen

Teste es

Verwendung von "ux-prototyping". Create a prototype for a task management app based on the UX spec at specs/architecture/ux.md

Erwartetes Ergebnis:

A single HTML file saved to /mnt/user-data/outputs/prototype.html
Interactive welcome screen with Get Started button
Login screen with email and password fields
Home screen showing empty state and sample task list
Tab navigation between Home, Search, and Profile screens
Create item modal with title and description fields
Detail view screen for individual items
Settings screen with account, notifications, and privacy options

Verwendung von "ux-prototyping". Build a prototype for the onboarding flow

Erwartetes Ergebnis:

Single HTML file with welcome screen
Sign up form with validation
Account creation flow
Onboarding tutorial screens
Transition to main app screen on completion

Sicherheitsaudit

Niedriges Risiko

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.

Gescannte Dateien

644

Analysierte Zeilen

befunde

Gesamtzahl Audits

Probleme mit mittlerem Risiko (2)

assets/prototype-template.html:505-513

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.

SKILL.md:12-121

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.

Probleme mit niedrigem Risiko (4)

assets/prototype-template.html:301 assets/prototype-template.html:320 assets/prototype-template.html:324 assets/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:254 assets/prototype-template.html:347 assets/prototype-template.html:402-403 assets/prototype-template.html:473-476 assets/prototype-template.html:480 assets/prototype-template.html:488 assets/prototype-template.html:509 SKILL.md:3 SKILL.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.

assets/prototype-template.html:513

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:81 assets/prototype-template.html:93 assets/prototype-template.html:131 assets/prototype-template.html:145 assets/prototype-template.html:152 assets/prototype-template.html:201 assets/prototype-template.html:208 assets/prototype-template.html:218 assets/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.

Risikofaktoren

⚡ Enthält Skripte

Keine spezifischen Standorte aufgezeichnet

⚙️ Externe Befehle

Keine spezifischen Standorte aufgezeichnet

Auditiert von: claude

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

Sicherheit

Spezifikationskonformität

Was du bauen kannst

이해관계자 검토를 위한 빠른 프로토타입

UX 사양서에서 대화형 프로토타입을 생성하여 개발 시작 전에 이해관계자에게 사용자 흐름을 시연합니다. 초기 단계에서 네비게이션 로직과 화면 순서를 검증합니다.

사용자 테스트 목업

사용성 테스트 세션을 위한 경량 프로토타입을 생성합니다. 단일 HTML 파일은 오프라인에서 작동하며 모든 브라우저에서 실행되어 원격 또는 대면 사용자 연구에 이상적입니다.

개발 핸드오프 레퍼런스

개발자가 구현 중 참조할 수 있는 대화형 프로토타입을 생성합니다. 명확한 화면 패턴과 상태 관리는 구현 청사진으로 활용됩니다.

Probiere diese Prompts

기본 프로토타입 요청

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.

Bewährte Verfahren

인라인 CSS와 JavaScript를 사용하여 프로토타입을 자체 포함 형태로 유지합니다. 신뢰할 수 있는 오프라인 테스트를 위해 외부 CDN 링크를 피하세요.
data-screen 속성을 사용하여 일관된 화면 관리 패턴을 적용합니다. 비활성 화면은 숨기고 활성 화면만 표시하세요.
빈 상태, 로딩 상태, 에러 상태, 성공 상태 등 모든 화면 상태를 문서화합니다. 이는 완전한 사용자 흐름 검증에 필수적입니다.

Vermeiden

프로토타입에서 빈 상태, 에러 상태 또는 로딩 상태를 건너뛰는 것. 사용자는 모든 시나리오에서 앱이 어떻게 처리하는지 확인해야 하며, 성공 경로만으로는 충분하지 않습니다.
프로토타입을 프로덕션 인터페이스로 사용하는 것. 프로토타입은 검증을 위한 것으로 적절한 구현을 대체해서는 안 됩니다.
브라우저에서 테스트하지 않고 프로토타입을 생성하는 것. 항상 네비게이션이 작동하고 모든 흐름이 완료 가능한지 확인하세요.