Design mit KI

App Design mit KI erstellen

Die Erstellung von Benutzeroberflächen in Power Apps kann schnell zeitaufwendig werden. Vor allem, wenn es um responsive Layouts oder komplexere Strukturen geht.

Genau hier setzt ein neues Plugin von Tolu Victor an: Es ermöglicht dir, innerhalb weniger Minuten eine komplette Canvas-App-Oberfläche aus einem Screenshot oder einer Beschreibung generieren zu lassen. Hier geht’s zum Plugin

Ich zeige dir, wie du mithilfe von KI, deine Power Apps in Minuten designen kannst.

Was macht das KI Plugin?

Das Plugin (in Kombination mit Cloud Code oder GitHub Copilot CLI) generiert automatisch Code (YAML) für Power Apps – basierend auf:

• einem Screenshot (z. B. eines Mockups oder bestehenden Designs)
• oder einer Beschreibung (Prompt).

Das Ergebnis:
Eine fertige UI als YAML-Code, die du direkt in Power Apps einfügen kannst.

Schritt 1: Plugin in Claud Code nutzen

Das Plugin kannst du dir hier aktuell kostenlos herunterladen: Hier geht’s zum Plugin

Nach dem Setup und der Installation kannst du das Plugin direkt per Befehl starten.

/canvasapps-ui-gen

Danach wählst du einen Modus:

• Replizieren (Screenshot nachbauen)
• Verbessern (bestehendes UI optimieren)
• From scratch (komplett neu erstellen)

Für dieses Beispiel verwende ich einen Screenshot meines Gantt-Charts.

Schritt 2: Rückfragen seitens Claude beantworten

Die KI erkennt automatisch:

• Layout-Strukturen (Header, Body etc.)
• UI-Elemente
• Farben
• mögliche Komponenten

Zusätzlich stellt sie Rückfragen, z. B.:

• Welche Art von Visualisierung?
• Welche Komplexität?
• Ziel-Screen in Power Apps?

Schritt 3: Power Apps Code (YAML-Code) generieren

Nach der Klärung der offenen Rückfragen erhältst du in wenigen Minuten:

• eine YAML-Datei mit der kompletten UI-Struktur

Diese Datei wird automatisch in einem definierten Ordner gespeichert.

Schritt 4: YAML-Code in Power Apps einfügen

Den YAML-Code kannst du jetzt per Copy & Paste in deiner Power Apps Entwicklungsumgebung einfügen.

1. YAML-Code kopieren
2. Power Apps Entwicklungsumgebung öffnen
3. Rechtsklick auf den Screen → Einfügen

Ergebnis:
Die komplette Benutzeroberfläche wird direkt erstellt.

Wichtig: Ein paar Fehler können manchmal noch auftauchen, die du manuell anpassen musst. (z.B. Breiten korrigieren)

Vor- und Nachteile des Plugins

Für wen lohnt sich das Plugin?

Ich hoffe, diese Tipps helfen dir dabei, deine Apps schneller ansprechend und benutzerfreundlich zu designen.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier geht's zum Detailvideo: