Für das Design waren traditionell mehrere Rollen erforderlich, die nacheinander arbeiteten: ein Stratege Definieren Sie das Downsideein Designer zu Gestalten Sie die Lösungund ein Entwickler zu baue es. Das bedeutet, Zeitpläne zu koordinieren, Meinungen abzugleichen und Iterationsrunden zu durchlaufen, bevor etwas Greifbares entsteht.

Claude Design beseitigt einen Großteil dieser Reibung, indem es Ideen direkt in Arbeitsergebnisse umwandelt. Was früher Wochen dauerte, kann jetzt in wenigen Minuten geschehen. In diesem Artikel erläutern wir die Funktionsweise von Claude Design und gehen durch reale Beispiele von der Idee bis zum endgültigen Prototyp.

Was ist Claude Design?

Claude Design ermöglicht es dem Anthropic-System, echte visuelle und funktionale Ergebnisse zu erzeugen, nicht nur Beschreibungen. Die meisten KI-Instruments fungieren wie Berater und bieten Vorschläge an. Claude baut tatsächlich. Es kann animierte Präsentationsexporte generieren, UI-Designs an Canva senden und sogar vollständige React-Apps mit Authentifizierung und Zahlungen erstellen.

Der entscheidende Unterschied liegt in der Denkweise: Claude nähert sich dem Design wie ein leitender Designer und bewertet mehrere Faktoren in einem einzigen Durchgang. Seine Fähigkeiten sind in drei Kernebenen gegliedert:

• Visuelle Gestaltung: Das System erstellt Designelemente, die Layoutkomponenten und Farbsysteme sowie Schriftdesign- und Raumverteilungs- und Komponentendesignelemente umfassen.
• Inhaltsgestaltung: Das System erstellt eine Erzählstruktur, die das Verfassen von Texten und die Gestaltung der Informationshierarchie umfasst.
• Funktionelles Design: Das System verwendet Betriebscode, um interaktive Prototypen zu erstellen, die eine Verbindung zu Again-Finish-Systemen herstellen.

Die meisten Instruments existieren nur auf einer operativen Ebene. Claude arbeitet gleichzeitig auf allen drei operativen Ebenen.

Wie funktioniert es?

Das Verfahren ist unkompliziert und die nächsten Schritte helfen Ihnen zu verstehen, wie die Dinge funktionieren.

1. Beginnen Sie damit, die Idee im Klartext zu erklären. Sogar ein kurzer Satz funktioniert, etwas mehr Kontext hilft jedoch. Claude kann mit minimalem Enter dennoch etwas Nützliches produzieren.
2. Anschließend werden einige kurze, klärende Fragen zu Zielgruppe, Ton, Format und Einschränkungen gestellt. Das dauert ein paar Minuten, erspart aber später stundenlanges Hin und Her.
3. Als nächstes erstellt Claude einen groben Plan, bevor er etwas baut. Es durchdenkt zunächst die Struktur, sodass die Ausgabe nicht zufällig oder verstreut ist.
4. Von dort aus generiert es in einem Rutsch die volle Ausgabe. Das kann bedeuten, Inhalte zu schreiben, Layouts zu entwerfen oder sogar einen funktionierenden Prototyp zu erstellen.
5. Sie können so viel wie nötig iterieren. Geben Sie einfach Suggestions in einfacher Sprache und es wird sich an die gesamte Ausgabe anpassen, einschließlich Markenänderungen.
6. Schließlich wird die Arbeit in das von Ihnen benötigte Format exportiert, sei es eine Präsentation, ein Code, eine Designdatei oder etwas Interaktiveres.

Erste Schritte mit Claude-Design

Ein Benutzer kann über die folgenden Schritte auf das Claude-Design zugreifen:

1. Besuchen https://claude.ai/design Um auf die Plattform zuzugreifen, sind die Modelle dieselben wie im Claude Chat, mit einer anderen Schnittstelle.
2. Danach können Sie wählen, ob Sie einen Prototyp, ein Diadeck oder ein animiertes Design unter Verwendung eines vorhandenen Vorlagendesigns erstellen möchten.
3. Geben Sie Ihrem Projekt nach der Auswahl einen Namen und wählen Sie ein Standarddesign aus. Anschließend können Sie mit Ihrer Eingabeaufforderung beginnen.

Fingers-On 1: „Erklären Sie unser Produkt“ → Animiertes Deck mit Markenlogo

Dies ist kein starrer Schritt-für-Schritt-Prozess. Es ist ein kontinuierlicher Fluss, von der Definition des Ziels über die Gestaltung des Ergebnisses, die Anregungen für Claude bis hin zum Endergebnis.

In den folgenden Abschnitten werden die wichtigsten Elemente erläutert, damit Sie wissen, worauf Sie achten müssen.

1. Definieren Sie das Ziel
Sie erstellen einen Cowork-Kurs, der erklärt, wie Plugins in einem Workflow-Automatisierungssetup für Unternehmen funktionieren.

2. Identifizieren Sie die Lücke
Vorhandene Dokumente sind zu komplex und die Groups verstehen nicht genau, was Plugins sind oder wie sie sich von MCP-Konnektoren und -Abilities unterscheiden.

3. Entwerfen Sie die Ausgabe
Ein 25-minütiges Lehrdeck, das Konzepte, Nutzung, Marktplatzzugang, Berechtigungen und Sicherheit erklärt.

4. Generieren Sie mit Claude
Fordern Sie Claude auf, ein Deck mit ca. 15 Folien im dunklen Modus im Entwicklerstil mit Sprechernotizen zu erstellen.

5. Verfeinern Sie die Struktur
Stellen Sie sicher, dass das Deck wichtige Abschnitte wie Grundelemente, Marktplatzhandbücher, Installationsablauf, Lebenszyklus und Sandbox-Sicherheit enthält.

6. Polnische Konsistenz
Überprüfen Sie Structure, Abstände, Monospace-Schriftart und allgemeine Klarheit auf allen Folien.

7. Branding anwenden
Passen Sie das Deck mithilfe früherer Beispiele an bestehende Markenstile (Farben, Schriftarten, Logos) an.

Sehen Sie sich den gesamten Arbeitsablauf an

Das folgende Video führt diesen gesamten Prozess in einem kontinuierlichen Ablauf durch: vom prompten bis zum raffinierten Deck.

Endgültige Ausgabe

Das folgende Video zeigt den fertigen Prototyp und wie das Endergebnis aussieht.

Fingers-On 2: App-Idee → Structure-Prototyp → Reside in Canva

Dies ist keine strenge Abfolge von Schritten. Es handelt sich um einen geführten Aufbau – von der Idee → Struktur → Design → Verfeinerung, wobei Claude in jeder Part hilft.

Die folgende Aufschlüsselung gibt Ihnen ein klares mentales Modell, bevor Sie es in Aktion sehen.

1. Definieren Sie die Idee
Eine App für Benutzer der Era Z zum Aufzeichnen von Emotionen und psychischer Gesundheit mithilfe von Stimmungsverfolgung, Spracheingabe und KI-generierten wöchentlichen Zusammenfassungen.

2. Identifizieren Sie das Publikum
Junge Erwachsene (ca. 22 Jahre), die ihre psychische Gesundheit in den Griff bekommen möchten, bestehende Therapie-Apps jedoch nicht als hilfreich empfinden.

3. Legen Sie das Ziel fest
Erstellen Sie einen vollständigen, bearbeitbaren Prototyp, der in Instruments wie Canva exportiert und verfeinert werden kann.

4. Generieren Sie den ersten Prototyp
Fordern Sie Claude auf, Kernbildschirme zu erstellen: Onboarding, Startseite, Tagebucheintrag, Stimmungs-Verify-in und wöchentliche Zusammenfassung.

5. Ordnen Sie die Benutzererfahrung zu
Definieren Sie, wie Benutzer in jeder Part denken und fühlen – beim erstmaligen Onboarding im Vergleich zur wiederkehrenden Nutzung.

6. Erstellen Sie Kernbildschirme
Entwickeln Sie ca. 6 Schlüsselbildschirme mit klarem Structure, klaren Abständen und klarer Struktur.

7. Fügen Sie funktionale Particulars hinzu
Beziehen Sie Elemente wie Stimmungsverfolgung (Stimmungsring), Sprachjournal und schriftliche Reflexionen ein.

8. Designentscheidungen dokumentieren
Erstellen Sie ein Protokoll, in dem Sie Layoutoptionen, Typografie, Farbe und allgemeine Benutzerfreundlichkeit erläutern.

9. Bereiten Sie den Export vor
Strukturieren Sie Bildschirme, damit sie einfach als bearbeitbare Rahmen in Canva exportiert werden können.

Sehen Sie sich den gesamten Arbeitsablauf an

Das folgende Video zeigt diesen gesamten Prozess in einem fortlaufenden Construct: Von der Idee bis zum funktionierenden Prototyp.

Endgültige Ausgabe

Das folgende Video zeigt den fertigen Prototyp und wie das Endergebnis aussieht.

Vor- und Nachteile von Claude Design

Bei all dem, was dieses Software bietet, finden Sie hier eine Tabelle mit einer Zusammenfassung seiner Stärken und Schwächen:

Abschluss

Designer, Entwickler und Strategen werden nicht durch Claude Design ersetzt. Es beseitigt die langsamen Teile: bei Null anfangen, erste Wireframes erstellen und tagelang auf Modelle warten. Die routinemäßigen Engpässe verschwinden, sodass Groups viel schneller von der Idee zum greifbaren Ergebnis gelangen können.

Was bleibt, ist die Arbeit, die wirklich zählt: die Entscheidung, ob ein Produkt ein echtes Downside löst, ob eine Marke authentisch wirkt und ob das Erlebnis emotional ankommt. Claude hilft Ihnen, Ideen frühzeitig zu testen und zu präsentieren, sodass Sie, anstatt Konzepte vorzustellen, mit funktionierenden Prototypen in Besprechungen gehen.

Häufig gestellte Fragen

Knowledge Science Trainee bei Analytics Vidhya
Derzeit arbeite ich als Knowledge Science Trainee bei Analytics Vidhya, wo ich mich auf die Entwicklung datengesteuerter Lösungen und die Anwendung von KI/ML-Techniken zur Lösung realer Geschäftsprobleme konzentriere. Meine Arbeit ermöglicht es mir, fortschrittliche Analysen, maschinelles Lernen und KI-Anwendungen zu erforschen, die es Unternehmen ermöglichen, intelligentere, evidenzbasierte Entscheidungen zu treffen.
Mit einem starken Fundament in den Bereichen Informatik, Softwareentwicklung und Datenanalyse ist es mir eine Leidenschaft, KI zu nutzen, um wirkungsvolle, skalierbare Lösungen zu schaffen, die die Lücke zwischen Technologie und Geschäft schließen.
Du kannst mich auch erreichen unter (e-mail protected)

Wir sind in die Zeit der künstlichen Intelligenz mit mehreren Agenten eingetreten. Es gibt jedoch eine sehr wichtige Frage: Wie können entfernte KI-Agenten reichhaltige und interaktive Erlebnisse erzeugen, ohne das System Sicherheitsrisiken auszusetzen? Das Google A2UI-Protokoll (Agent-to-UI) beantwortet diese Frage auf sehr intelligente Weise und ermöglicht es Agenten, Benutzeroberflächen zu erstellen, die vollständig in die gesamte Plattform integriert sind.

Was ist Google A2UI?

A2UI ist ein öffentliches Protokoll, das es KI-Agenten ermöglicht, explizit Benutzeroberflächen zu erstellen JSON-basierte Kommunikation. Anstatt die Kommunikation nur auf Textual content zu beschränken oder die unsichere HTML/JavaScript-Ausführungsmethode zu verwenden, können die Agenten erweiterte Benutzeroberflächen entwickeln, indem sie die bereits genehmigten Komponentenkataloge kombinieren und abgleichen.

Schlüsselinnovation: Agenten kommunizieren ihre UI-Anforderungen; Anwendungen nutzen ihre nativen Frameworks zum Rendern (React, Flutter, Angular, SwiftUI usw.)

Downside, das A2UI löst

In der Welt des Multi-Agent-Mesh arbeiten Agenten verschiedener Unternehmen distant zusammen. Die traditionellen Lösungen sind:

• Nur-Textual content-Schnittstellen – Langsam und ineffizient
• Sandbox-HTML/Iframes – Schwere, optisch unzusammenhängende Sicherheitsrisiken
• Direkte UI-Manipulation – Nicht möglich, wenn die Agenten auf Distant-Servern ausgeführt werden

A2UI eröffnet eine neue Möglichkeit, die Benutzeroberfläche zu senden, die sicher wie Daten, aber ausdrucksstark wie Code ist.

Hauptvorteile von Google A2UI

Hier sind einige der wichtigsten Vorteile von A2UI:

1. Safety-First-Architektur

• Verwendet ein deklaratives Datenformat anstelle von ausführbarem Code
• Agenten dürfen Komponenten aus vertrauenswürdigen und bereits freigegebenen Katalogen übernehmen
• Kein Risiko der Code-Injection, die volle Kontrolle verbleibt beim Kunden

2. LLM-freundliches Design

• Flache Bauteilstruktur mit ID-Referenzen
• Für große Sprachmodelle ist es unmöglich, etwas anderes als inkrementell zu generieren
• Ermöglicht progressives Rendering und Echtzeit-Updates
• Agenten können Schnittstellen Ingredient für Ingredient streamen

3. Framework-unabhängige Portabilität

• Eine JSON-Nutzlast ist für Internet, Mobilgeräte und Desktop gültig
• Funktioniert mit jedem UI-Framework
• Durch die lokale Darstellung wird sichergestellt, dass das Markenerlebnis des Kunden gleich bleibt
• Kein Code Es ist eine plattformspezifische Angabe erforderlich

4. Nahtlose Protokollintegration

• Kompatibel mit dem A2A-Protokoll (Agent-zu-Agent-Kommunikation)
• Funktioniert mit AG-UI für Agent-Benutzer-Interaktionen
• Bereit zur Verbindung mit der vorhandenen Agenten-Infrastruktur

So funktioniert A2UI

Die Funktionsweise von A2UI umfasst vier Phasen:

1. Part 1: Generierung

• Der Agent (Gemini oder ein anderer LLM) ist für die Erstellung einer JSON-Nutzlast verantwortlich.
• Es beschreibt die UI-Elemente und ihre entsprechenden Attribute.
• Es kann entweder UI-Elemente von Grund auf erstellen oder die Vorlagen ausfüllen.

2. Part 2: Transport

• Die JSON-Nachricht wird über das A2A-Protokoll, AG-UI oder REST-APIs versendet.
• Die Kommunikationsmethode ist nicht von einem bestimmten Protokoll abhängig und kann mit jedem Kommunikationskanal verwendet werden.

3. Part 3: Lösung

• Der A2UI-Renderer des Shoppers interpretiert den JSON.
• Es überprüft die Struktur und die Berechtigungen der Komponenten.
• Es stellt sicher, dass alle Komponenten zum vertrauenswürdigen Katalog gehören.

4. Part 4: Rendern

• Es konvertiert die abstrakten Komponenten in ihre jeweiligen nativen Implementierungen.
• Beispielsweise wird das Textfeld zu einer Materials Design-Eingabe, einem Chakra-UI-Feld usw.
• Für das Rendering wird das bereits vorhandene UI-Framework des Shoppers verwendet.

Sicherheitsvorteil: Der Kunde sieht und betreibt nur Komponenten, die vorab genehmigt wurden. Es wird keine unsichere Codeausführung geben.

Sie können sich über anmelden https://a2ui-composer.ag-ui.com/ und nach der Anmeldung müssen Sie den Agenten nur noch auffordern, die Ausgabe zu erhalten.

2. Über das Repository

Sie können auf A2UI zugreifen, indem Sie das Repository klonen https://github.com/google/A2UI und dann die Schnellstart-Demo ausführen. Sie werden sehen, wie von Gemini unterstützte Agenten die Schnittstellen generieren, und Sie können die Komponenten einfach an Ihren Anwendungsfall anpassen.

Praktische Aufgabe 1: Good Price range Tracker

Der alte Weg (textbasiert):

Benutzer: „Was habe ich diesen Monat ausgegeben?“

Agent: „Sie haben 1.234 US-Greenback für Essen ausgegeben, 567 US-Greenback für das Essen auswärts …“

Benutzer: „Welche Kategorie überschreitet das Price range?“

Agent: „Auswärts essen kostet 67 $ mehr als Ihr Price range von 500 $“

Benutzer: „Geben Sie mir einen detaillierten Bericht“

Mit A2UI:

Immediate:

„Ich stelle unten meine Transaktionsdaten bereit. Verwenden Sie diese, um ein Good Price range Tracker-Dashboard zu erstellen. Die Daten:

1. Dezember: 200 $ (Essen)

1. Dezember: 300 $ (Kleidung)

2. Dezember: 500 $ (Reise)

Budgetgrenzen: Legen Sie die Standardgrenzen für jede Kategorie auf 400 $ fest.“

Ausgabe:

Der Agent erstellt sofort ein vollständiges Dashboard mit den folgenden Komponenten:

• Ein interaktiver Schieberegler, der die Verteilung der Ausgaben professional Kategorie anzeigt.
• Die bearbeitbaren Grenzen des Benutzers mit zugehörigen Inline-Textfeldern.
• Mit der Datumsbereichsauswahl können Sie verschiedene Zeiträume vergleichen.
• Die Kategoriefilter mit Kippschaltern.
• Die Trendanalyse zeigt die Ausgabenmuster im Zeitverlauf.
• Die Benutzer interagieren direkt mit den visuellen Komponenten; Daher ist keine Eingabe erforderlich.

Benutzer können Budgets mit Schiebereglern anpassen, Kategorien mit Kontrollkästchen herausfiltern und mit einem einzigen Tastendruck zu Einzelheiten gelangen.

Praktische Aufgabe 2: Taxibuchungssystem

Der alte Weg (textbasiert):

Benutzer: „Buchen Sie ein Taxi“

Agent: „Wo befinden Sie sich?“

Benutzer: „Ich bin in der 123 Essential Road.“

Agent: „Wohin möchten Sie gehen?“

Benutzer: „Ich möchte zur 456 Oak Avenue gehen.“

Agent: „Wann brauchen Sie das Taxi?“

Benutzer: „Ich möchte es so schnell wie möglich.“

Agent: „Welche Artwork von Fahrzeug würden Sie bevorzugen?“

Mit A2UI:

Immediate:

„Generieren Sie eine hochauflösende Taxibuchungsoberfläche mit nur einem Bildschirm basierend auf den folgenden Anforderungen:

### 1. VORBUCHUNGSPHASE (Planungsmodus)

– INTERAKTIVE KARTE: Rendern Sie eine Karte mit einem ziehbaren „Abhol“-Pin (am aktuellen Standort) und einem „Ziel“-Pin. Zeigen Sie die berechnete Route an.

– ADRESSEINGABEN: Zwei Textfelder (Abholung/Ziel) mit automatischer Vervollständigung. Standardziel ist „456 Oak Avenue“.

– FAHRZEUGAUSWAHL: Eine horizontale Liste von Optionen (Economic system, Premium, XL) mit:

– Preise in Echtzeit

– ETA (z. B. „3 Minuten entfernt“)

– Hochwertige Fahrzeugsymbole

– EINSTELLUNGEN:

• Ein Schalter für die Route „Kürzeste vs. Schnellste“.
• Eine Liste „Gespeicherter Orte“ (Zuhause, Arbeit, Fitnessstudio) zur Auswahl mit einem Fingertipp.
• Eine Zeitauswahl, die standardmäßig auf „Jetzt“ eingestellt ist.
• KOSTENSCHÄTZUNG: Eine dynamische Zusammenfassung mit Grundpreis + Steuern.

### 2. ÜBERGANGSLOGIK (Die Aktion „Buchen“)

Wenn der Benutzer auf „Buchung bestätigen“ tippt, wird der Bildschirm nicht gelöscht. Überführen Sie die vorhandene Benutzeroberfläche in den „Reside-Monitoring-Modus“.

### 3. LIVE-TRACKING-PHASE (Aktivmodus)

• KARTEN-UPDATE: Zeigt ein fahrendes Autosymbol an, das den aktuellen Standort des Fahrers darstellt.
• ANKUNFTSKARTE: Ersetzen Sie den Fahrzeugwähler durch eine „Fahrerinformationskarte“, einschließlich:
• Title des Fahrers, Bewertung und Kennzeichen des Fahrzeugs.
• Ein Reside-Countdown-Timer (z. B. „Ankunft in 2 Minuten und 14 Sekunden“).
• KOMMUNIKATION: Fügen Sie zwei One-Faucet-Schaltflächen hinzu: (Fahrer anrufen) und (Fahrernachricht).
• NOTFALL: Fügen Sie eine intestine sichtbare „SOS“-Style hinzu.

### 4. DESIGNSTIL

• Sauberes, kartenzentriertes Structure (wie Uber/Lyft).
• Verwenden Sie schwebende Aktionsblätter für Eingaben, um die Sichtbarkeit der Karte zu maximieren.“

Ausgabe:

Der Agent bereitet eine Buchungsoberfläche mit einem Bildschirm vor mit:

• Eine interaktive Karte mit den Zielen und Abholpunkten
• Adressfelder mit automatischer Vervollständigung und Geolokalisierungsunterstützung
• Zeitauswahl, die standardmäßig auf sofortige Buchung eingestellt ist
• Fahrzeugoptionen, die Reside-Preise und voraussichtliche Ankunftszeiten anzeigen
• Orte, die für häufige Ziele gespeichert sind
• Umschalten der Routenpräferenz (kürzeste vs. schnellste)
• Ein Kostenschätzer-Schieberegler, der sich an Parameter anpasst

Nach der Bestätigung wird dieselbe Schnittstelle aktualisiert mit:

• Reside-Standortverfolgung des Fahrers
• Countdown der voraussichtlichen Ankunft
• Fahrer- und Fahrzeuginformationen
• Schaltflächen für die Kommunikation mit einem Fingertipp

Abschluss

Google A2UI weist auf einen großen Wandel hinsichtlich der Interaktionen der KI-Agenten hin. Die Fähigkeit der Agenten, sichere, umfangreiche und native Benutzeroberflächen zu erstellen, wird die Barrieren beseitigen, die die breite Akzeptanz der Agenten bisher verhindert haben. Agenten werden nun in der Lage sein, Anwendungen wie Budgetierungstools, Buchungssysteme, Projekt-Dashboards oder sogar neue Anwendungskategorien zu erstellen, bei denen A2UI den Einsatz der Technologie verbessern wird.

Gen AI-Praktikant bei Analytics Vidhya
Abteilung für Informatik, Vellore Institute of Expertise, Vellore, Indien

Derzeit arbeite ich als Gen AI-Praktikant bei Analytics Vidhya, wo ich zu innovativen KI-gesteuerten Lösungen beitrage, die Unternehmen in die Lage versetzen, Daten effektiv zu nutzen. Als Informatikstudent im Abschlussjahr am Vellore Institute of Expertise bringe ich solide Grundlagen in Softwareentwicklung, Datenanalyse und maschinellem Lernen in meine Rolle ein.

Kontaktieren Sie mich gerne unter (e mail protected)