Fähigkeiten ux-prototyping
🎨
ux-prototyping
Niedriges Risiko ⚡
Enthält Skripte⚙️
Externe Befehle
インタラクティブなUXプロトタイプを作成
インタラクティブなプロトタイプを手動で作成すると時間がかかり、フロントエンドのスキルが必要です。このスキルはUX仕様を単一ファイルのHTMLプロトタイプに変換し、ブラウザで即座に実行できるため、コーディングなしでユーザーフローを迅速に検証できます。
Unterstützt: Claude Codex Code(CC)
1
Die Skill-ZIP herunterladen
2
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
3
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 Risikov1 • 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
Gescannte Dateien
644
Analysierte Zeilen
8
befunde
1
Gesamtzahl Audits
Probleme mit mittlerem Risiko (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.
Probleme mit niedrigem Risiko (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.
Risikofaktoren
⚡ Enthält Skripte
Keine spezifischen Standorte aufgezeichnet
⚙️ Externe Befehle
Keine spezifischen Standorte aufgezeichnet
Auditiert von: claude
Qualitätsbewertung
36
Architektur
100
Wartbarkeit
87
Inhalt
20
Community
72
Sicherheit
91
Spezifikationskonformität
Was du bauen kannst
ステークホルダーレビュー用の迅速なプロトタイプ
UX仕様からインタラクティブなプロトタイプを生成し、開発開始前にステークホルダーにユーザーフローをデモンストレーションします。ナビゲーションロジックと画面シーケンスを早期に検証します。
ユーザーテスト用モックアップ
ユーザビリティテストセッション用の軽量プロトタイプを作成します。単一のHTMLファイルはオフラインで動作し、どのブラウザでも実行できるため、リモートまたは対面のユーザー調査に最適です。
開発handoffリファレンス
実装中に開発者が参照できるインタラクティブなプロトタイプを生成します。明確な画面パターンと状態管理が実装の設計図として機能します。
Probiere diese Prompts
基本的なプロトタイプリクエスト
[PATH_TO_UX_SPEC]にあるUX仕様に基づいて[APP_TYPE]アプリのインタラクティブなプロトタイプを作成します。仕様からすべての画面、ナビゲーション、用户ーフローを備えた単一のHTMLファイルを生成してください。
特定の用户ーフロー
UX仕様から[FLOW_NAME]用户ーフローに焦点を当てたプロトタイプを構築します。このフローを最初から最後まで完了するために必要なすべての画面、状態、インタラクションを含めます。
モバイルアプリモックアップ
specs/architecture/ux.mdに基づく[APP_NAME]アプリのモバイルファーストプロトタイプを作成します。オンボーディング、メイン画面、モバイル使用に適したナビゲーションパターンを含めます。
完全なアプリプロトタイプ
完全なアプリ体験のための包括的なプロトタイプを生成します。UX仕様からのすべての画面を含めます：ウェルカム/オンボーディングフロー、認証画面、空状態とデータあり状態のメインビュー、設定、およびすべての主要なインタラクション。
Bewährte Verfahren
- プロトタイプをインラインCSSとJavaScriptで自己完結型に保ちます。信頼性の高いオフラインテストのため、外部CDNリンクを避けます。
- data-screen属性で一貫した画面管理パターンを使用します。非アクティブな画面を非表示にし、アクティブな画面のみを表示します。
- 空状態、読み込み状態、エラー状態、成功状態など、すべての画面状態を文書化します。これらは完全な用户ーフロー検証に不可欠です。
Vermeiden
- プロトタイプで空状態、エラー状態、または読み込み状態をスキップすること。ユーザーはハッピーパスだけでなく、すべてのシナリオでアプリがどのように対応するかを確認する必要があります。
- プロトタイプを本番インターフェースとして使用すること。プロトタイ��は検証用であり、適切な実装に置き換えることはできません。
- ブラウザでテストせずにプロトタイプを作成すること。ナビゲーションが機能し、すべてのフローが完了可能であることを常に確認します。
Häufig gestellte Fragen
このスキルは何用ですか？
このスキルはUX仕様文書をインタラクティブな単一ファイルHTMLプロトタイプに変換し、用户ーフロー検証のためにブラウザで開くことができます。
このスキルを使用するためにHTMLの知識が必要ですか？
いいえ。ユーザーがUX仕様を提供すると、スキルがすべての画面とインタラクションを備えた完全な動作プロトタイプを生成します。
私のUX仕様は何フォーマットである必要がありますか？
スキルはデフォルトでspecs/architecture/ux.mdから読み取るか、ユーザーが指定した任意のパスを使用します。仕様には画面、用户ーフロー、状態、インタラクションを記述する必要があります。
生成されたプロトタイプを本番で使用できますか？
いいえ。プロトタイプは検証とテストのみを目的としています。本番に必要な適切なアクセシビリティ、パフォーマンス最適化、セキュリティ対策が不足しています。
生成されたプロトタイプには何が含まれていますか？
インラインCSSとJavaScriptを備えた単一HTMLファイル、画面間を移動する動作ナビゲーション、必要なUIコンポーネント、空状態/読み込み状態/エラー状態、レスポンシブレイアウト。
プロトタイプをどのようにテストすればよいですか？
生成されたHTMLファイルを任意のWebブラウザで開きます。プロトタイプはオフラインで動作し、用户ーフローをテストするためのすべての必要なコードが含まれています。