shape
UX/UI-Design vor der Codierung planen
Die meisten KI-generierten Benutzeroberflächen scheitern, weil sie das Design-Denken überspringen. Diese Fähigkeit führt ein strukturiertes Entdeckungsinterview durch, um Benutzerbedürfnisse, Einschränkungen und Ziele zu verstehen, bevor ein umfassendes Design-Briefing erstellt wird, das die Implementierung leitet.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "shape". Shape the UX for a user onboarding flow that helps new users set up their workspace.
Erwartetes Ergebnis:
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?
Verwendung von "shape". I need to design a dashboard for monitoring API health.
Erwartetes Ergebnis:
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?
Sicherheitsaudit
SicherStatic 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.
Probleme mit niedrigem Risiko (1)
Qualitätsbewertung
Was du bauen kannst
Produktmanager plant neues Feature
Bevor Anforderungen an die Entwicklung übergeben werden, nutzen Sie diese Fähigkeit, um eine klare UX-Richtung, Erfolgsmetriken und Design-Einschränkungen festzulegen.
Entwickler beginnt mit der Implementierung
Nutzen Sie diese Fähigkeit vor der Codierung, um zu klären, was gebaut werden muss, und vermeiden Sie Mehraufwand durch missverstandene Anforderungen oder übersehene Grenzfälle.
Designer definiert Interaktionsmuster
Strukturieren Sie Ihr Denken rund um Benutzerflüsse, Zustände und Inhaltsanforderungen, bevor visuelle Mockups oder Prototypen erstellt werden.
Probiere diese Prompts
Ich muss [Feature-Beschreibung] entwerfen. Führen Sie das Entdeckungsinterview durch und erstellen Sie ein Design-Briefing.
Gestalten Sie die UX für [Feature]. Ich habe bereits Design-Kontext von /impeccable, nutzen Sie diesen also bei der Diskussion über Einschränkungen und Muster.
Planen Sie die UX für [Feature] mit diesen Einschränkungen: [Einschränkungen auflisten wie Mobile-First, Barrierefreiheitsanforderungen, Performance-Budgets]. Konzentrieren Sie das Interview darauf, wie diese das Design beeinflussen.
Ich möchte [Feature] entwerfen, aber ich mache mir Sorgen über [spezifische Bedenken wie Komplexitätsüberforderung]. Stellen Sie sicher, dass das Entdeckungsinterview Anti-Ziele und was dies NICHT sein sollte erforscht.
Bewährte Verfahren
- Rufen Sie /impeccable auf, bevor Sie diese Fähigkeit verwenden, um sicherzustellen, dass Designprinzipien und Projektkontext geladen sind
- Beantworten Sie Interviewfragen sorgfältig, auch wenn Sie glauben, dass ein Detail offensichtlich ist
- Überprüfen Sie das generierte Design-Briefing sorgfältig, bevor Sie es bestätigen
- Übergeben Sie das bestätigte Briefing an /impeccable craft oder /impeccable für eine nahtlose Implementierung
Vermeiden
- Das Entdeckungsinterview überspringen und direkt zu Designvorschlägen springen
- Ein-Wort-Antworten auf Interviewfragen ohne Kontext geben
- Diese Fähigkeit in der Erwartung verwenden, Code-Ausgabe statt Design-Dokumentation zu erhalten
- Den Briefing-Bestätigungsschritt ignorieren und mit unvollständigem Verständnis fortfahren