技能 sleek-design-mobile-apps
📱

sleek-design-mobile-apps

安全

Mobile Apps mit KI gestalten

Diese Fähigkeit ermöglicht es Claude und Codex, mobile App-UIs mit der Sleek KI-Designplattform zu gestalten. Benutzer beschreiben, was sie wollen, und die Fähigkeit erstellt Projekte, generiert Bildschirme und liefert gerenderte Screenshots.

支持: Claude Codex Code(CC)
🥉 72 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“sleek-design-mobile-apps”。 Create a new project called 'Todo App' and design a task management interface

预期结果:

  • Projekt erstellt: proj_abc123
  • Bildschirm erstellt: Home (scr_home) - Aufgabenliste mit Hinzufügen-Schaltfläche
  • Bildschirm erstellt: Aufgabe hinzufügen (scr_add) - Eingabeformular mit Prioritätsauswahl
  • Bildschirm erstellt: Einstellungen (scr_settings) - Design-Umschalter, Benachrichtigungseinstellungen
  • [Screenshots gerendert und angezeigt]

正在使用“sleek-design-mobile-apps”。 Add a dark mode toggle to the settings screen

预期结果:

  • Bildschirm aktualisiert: Einstellungen (scr_settings)
  • Umschaltkomponente für Dunkelmodus hinzugefügt
  • [Screenshot des aktualisierten Einstellungsbildschirms]

安全审计

安全
v1 • 3/1/2026

This skill is a legitimate API client for the Sleek mobile app design service. The static analyzer flagged patterns (external commands, network access, environment variables) but all are false positives - they represent expected API client behavior documented in SKILL.md. No malicious code execution, data exfiltration, or prompt injection was found.

1
已扫描文件
435
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
39
社区
100
安全
91
规范符合性

你能构建什么

Schnelle UI-Prototypenerstellung

Schnell mobile App-Bildschirm-Mockups durch Beschreibung der gewünschten UI in natürlicher Sprache generieren. Ideal für Prototypisierung und Iteration von Designideen.

Natürliche Sprachgestaltung

Mobile Oberflächen durch konversationelle Beschreibung von Funktionen erstellen. Die Fähigkeit übersetzt natürliche Sprache in gerenderte UI-Komponenten.

Automatierter Design-Workflow

Mobile UI-Generierung in CI/CD-Pipelines oder automatisierte Workflows integrieren. Synchronen oder asynchronen Modus je nach Timeout-Anforderungen verwenden.

试试这些提示

Neues Projekt erstellen
Erstelle ein neues Sleek-Projekt namens "[Projektname]" und gestalte eine grundlegende App mit Home-Bildschirm, Einstellungsbildschirm und Navigation.
Bildschirmfunktionen hinzufügen
Füge einen Preisbereich mit drei Preismodellen zum [Bildschirmname]-Bildschirm im Projekt [Projekt-ID] hinzu.
App aus Beschreibung generieren
Gestalte eine Fitness-Tracking-App mit Workout-Protokollierung, Fortschrittsdiagrammen und Social-Sharing-Funktionen. Inkludiere ein Home-Dashboard, Workout-Eingabe und Profilbildschirm.
Bestimmten Bildschirm bearbeiten
Aktualisiere den Anmeldebildschirm im Projekt [Projekt-ID], um einen "Passwort vergessen"-Link und Social-Login-Schaltflächen unter dem Hauptformular hinzuzufügen.

最佳实践

  • Verwende API-Schlüssel mit minimalen erforderlichen Berechtigungen für bessere Sicherheit
  • Verwende den asynchronen Modus mit Abfragen für länger laufende Design-Generierungen, um Timeouts zu vermeiden
  • Liefer immer Screenshots nach Bildschirmerstellung oder -änderung gemäß den Fähigkeitsregeln
  • Überprüfe Projektguthaben vor großen Stapeloperationen, um Fehler zu vermeiden

避免

  • Sende keine sensiblen URLs im imageUrls-Feld - Sleek-Server rufen sie ab
  • Versuche keine gleichzeitigen Läufe auf demselben Projekt - verwende stattdessen Abfragen
  • Gehe nicht davon aus, dass der synchrone Modus immer innerhalb von 300 Sekunden abgeschlossen wird - habe einen Abfrage-Fallback
  • Verwende keine HTTP-URLs - die API akzeptiert nur HTTPS

常见问题

Wie beginne ich mit dieser Fähigkeit?
Du benötigst einen Sleek API-Schlüssel von https://sleek.design/dashboard/api-keys. Setze ihn als SLEEK_API_KEY Umgebungsvariable. Der Schlüssel erfordert einen Pro+-Plan für API-Zugriff.
Kann ich jeden Typ von mobiler App gestalten?
Ja, du kannst jeden App-Typ in natürlicher Sprache beschreiben. Die Sleek KI interpretiert deine Beschreibung und generiert entsprechende Bildschirme. Komplexe Apps können mehrere Iterationen erfordern.
Wie funktionieren Screenshots?
Nach jeder Bildschirmerstellung oder -aktualisierung rendert und zeigt die Fähigkeit automatisch Screenshots an. Verwende die Option background: 'transparent' für vielseitige Bildverwendung.
Was passiert, wenn mein API-Schlüssel die erforderlichen Bereiche fehlen?
Die API gibt 403 FORBIDDEN zurück. Überprüfe, ob dein Schlüssel die korrekten Bereiche hat: projects:read/write, components:read, chats:read/write und screenshots.
Kann ich bestimmte Bildschirme bearbeiten, ohne alles neu zu generieren?
Ja, verwende das target.screenId-Feld in Chat-Nachrichten, um Änderungen an einen bestimmten Bildschirm zu leiten. Die Fähigkeit aktualisiert nur diesen Bildschirm.
Sind meine Design-Daten sicher?
Die gesamte API-Kommunikation verwendet HTTPS und bleibt innerhalb des Sleek-Dienstes. Kein Drittanbieter-Zugriff. Verwende minimale API-Schlüsselbereiche und erwäge Schlüssel mit kurzer Gültigkeitsdauer für zusätzliche Sicherheit.

开发者详情

文件结构

📄 SKILL.md