Ich bin der Gr\u00fcnder von OnTheGoSystems. Diese Woche habe ich pers\u00f6nlich die Admin-Oberfl\u00e4che von WPML, unserem gr\u00f6\u00dften Produkt, neu gestaltet. Nicht das Projekt geleitet. Nicht die Arbeit anderer \u00fcberpr\u00fcft. Sondern mit Claude Code zusammengesessen und die eigentliche Designarbeit selbst erledigt. <\/p>\n\n
Zwei Gr\u00fcnde.<\/p>\n\n
Erstens<\/strong>: Eine \u00fcbersichtlichere, intuitivere Admin-Oberfl\u00e4che ist das Wichtigste, was unsere Kunden von uns verlangen. Seit Jahren sagen sie uns, dass WPML zu viele Bildschirme hat, dass Einstellungen \u00fcber unzusammenh\u00e4ngende Bereiche verteilt sind, dass wichtige Funktionen schwer zu finden sind. Wenn etwas den Kunden so wichtig ist, m\u00f6chte ich es mit meinen eigenen H\u00e4nden leiten \u2013 nicht aus der Ferne. <\/p>\n\n Zweitens<\/strong>: Ich wollte aus erster Hand lernen, wie die Entwicklung echter Produkte mit KI heute aussieht. Nicht, was Demos zeigen. Nicht, was Vordenker behaupten. Echte Produktarbeit an einer Codebasis, die echte Kunden sehen werden, mit all dem Durcheinander, das dazugeh\u00f6rt. Ich entdecke lieber selbst, was funktioniert, indem ich die Arbeit selbst mache, als dass mir jemand davon berichtet. <\/p>\n\n Was ich herausfand, \u00fcberraschte mich in beide Richtungen. Einige Dinge, von denen ich erwartete, dass sie einfach sein w\u00fcrden, stellten sich als schwierig heraus \u2013 insbesondere die KI mit der Realit\u00e4t in Einklang zu halten, wenn sie versucht war, Funktionen zu erfinden, die plausibel klangen, aber nicht in unserem Produkt vorhanden waren. Andere Dinge, von denen ich erwartete, dass sie schwierig sein w\u00fcrden, stellten sich als nahezu trivial heraus \u2013 wie die Erstellung von dreizehn konsistenten HTML-Dateien f\u00fcr einen neuen Bereich in unter einer Stunde, jede mit funktionierendem JavaScript f\u00fcr Zustandsumschaltungen und Suchindizierung, und jede einzelne als Designreferenz f\u00fcr das Team verwendbar, das die echte Umsetzung vornimmt. <\/p>\n\n Die Geschwindigkeit war ehrlich gesagt die kleinere \u00dcberraschung. Die gr\u00f6\u00dfere war, wie sehr die Methode<\/em> z\u00e4hlt. Wenn Sie die Methode richtig anwenden, erhalten Sie kumulative Ergebnisse \u2013 bessere Ausgabe, schneller, mit Dokumentation, die zur \u00dcbergabe bereit ist. Wenn Sie sie falsch anwenden, erreichen Sie nur schneller Mittelm\u00e4\u00dfigkeit. <\/p>\n\n Was folgt, ist die vollst\u00e4ndige Methode, die ich verwendet habe \u2013 die Prompts, die funktionierten, die Fehler, die ich gemacht habe, die \u00dcberpr\u00fcfungsrunden, die von der KI erfundene Funktionen abfingen, bevor sie ausgeliefert werden konnten. Sie ist in erster Linie f\u00fcr OTGS-Entwickler geschrieben, die solche Projekte selbst durchf\u00fchren m\u00f6chten, aber jeder, der heute Benutzeroberfl\u00e4chen mit KI erstellt, kann wahrscheinlich etwas daraus mitnehmen. <\/p>\n\n Planen Sie in Text, bevor Sie Code produzieren.<\/strong><\/p>\n\n Claude Code wird gerne HTML erstellen, sobald Sie danach fragen. Es wird auch das falsche HTML erstellen \u2013 h\u00f6flich, schnell und in gro\u00dfen Mengen. Jedes Mal, wenn Sie durch das \u00dcberspringen einer Planungsrunde Zeit sparen, zahlen Sie doppelt bei der Nacharbeit \u2013 und die Nacharbeit ist schwieriger als die urspr\u00fcngliche Planung, weil es jetzt Code gibt, den Sie nicht wegwerfen m\u00f6chten. <\/p>\n\n Jeder erfolgreiche Zweig in der WPML-Sitzung hatte dieselbe Form:<\/p>\n\n \u00dcberall dort, wo diese Form zusammenbrach, gingen wir zur\u00fcck. Wenn Sie sich nichts anderes aus diesem Leitfaden merken, merken Sie sich die sechs Schritte oben. <\/p>\n\n Beginnen Sie mit dem Schmerz, den der Benutzer empfindet, nicht mit dem Bildschirm, den Sie \u00e4ndern m\u00f6chten.<\/p>\n\n Schlechter Einstieg:<\/strong><\/p>\n\n \u201eNeue Einstellungsseite f\u00fcr die Abrechnung der KI-\u00dcbersetzung hinzuf\u00fcgen.\u201c<\/p>\n<\/blockquote>\n\n Guter Einstieg<\/strong> (wie die WPML-Sitzung tats\u00e4chlich begann):<\/p>\n\n \u201eBenutzer berichten, dass WPML \u00fcberw\u00e4ltigend und unintuititiv wirkt aufgrund von:<\/p>\n\n\n\n Die zweite Version gibt Claude einen Rahmen zum Nachdenken. Es kennt den Schmerz des Benutzers, kann andere Dinge erkennen, die zu diesem Schmerz beitragen, und kann zur\u00fcckdr\u00e4ngen, wenn Ihre vorgeschlagene L\u00f6sung die Grundursache nicht angeht. Die erste Version reduziert Claude auf einen Schreiber. <\/p>\n\n In der WPML-Sitzung f\u00fchrte die Problemformulierung direkt zu Entscheidungen, die Claude nicht allein h\u00e4tte treffen k\u00f6nnen: dass \u201eZahlungen & Wartung\u201c ein Bildschirm zu viel war, dass Pakete nicht auf oberster Ebene sein sollten, dass das Kommunikationsprotokoll im falschen Men\u00fc war, dass das Glossar weder eine Einstellung noch ein Abrechnungselement war. Nichts davon w\u00fcrde greifen, wenn man mit \u201eEinstellungen neu gestalten\u201c beginnt. <\/p>\n\n Legen Sie alles, was die KI ben\u00f6tigt, in das Arbeitsverzeichnis, bevor Sie einen Prompt eingeben:<\/p>\n\n Claude funktioniert besser, wenn es die Quelle der Wahrheit sehen kann. Screenshots erm\u00f6glichen es, Behauptungen gegen die Realit\u00e4t zu \u00fcberpr\u00fcfen. Externe Links erm\u00f6glichen es, Recherchen \u00fcber Subagenten durchzuf\u00fchren (siehe Phase 8), ohne Sie mit Hintergrundinformationen zu bel\u00e4stigen. <\/p>\n\n Dies ist der Satz mit der h\u00f6chsten Hebelwirkung im Leitfaden. Jede Anweisungsreihe in der WPML-Sitzung endete mit einer Version von: <\/p>\n\n \u201eBevor Sie mit dem Design beginnen, \u00fcberpr\u00fcfen Sie alles, erstellen Sie eine Liste mit Fragen und stellen Sie sie mir. Treffen Sie keine Annahmen.\u201c<\/p>\n<\/blockquote>\n\n Ohne dies handelt Claude standardm\u00e4\u00dfig direkt nach Ihrer Anweisung. Damit verbringt Claude eine Runde damit, herauszufinden, was es nicht wei\u00df, und fragt Sie. Diese Runde spart Stunden. <\/p>\n\n Wenn Claude Fragen zur\u00fcckstellt, beantworten Sie sie knapp. Sie schulden keine Abs\u00e4tze. Aus der WPML-Sitzung: <\/p>\n\n F: \u201eMen\u00fcbezeichnung \u2014 als \u201aZahlung f\u00fcr KI-\u00dcbersetzung\u2018 beibehalten? (klingt etwas umst\u00e4ndlich)\u201c F: \u201eSeitenstruktur \u2014 eine lange Seite mit Abschnitten oder Unterseiten?\u201c Einzeilige Antworten sind in Ordnung. Vollst\u00e4ndige S\u00e4tze sind in Ordnung. Vollst\u00e4ndige Abs\u00e4tze sind normalerweise ein Zeichen daf\u00fcr, dass Sie Claudes Arbeit f\u00fcr es erledigen. <\/p>\n\n Der Abrechnungsbereich der WPML-Sitzung durchlief zwei vollst\u00e4ndige Fragerunden<\/strong>, bevor eine einzige Zeile HTML geschrieben wurde.<\/p>\n\n Runde 1<\/strong> \u2014 8 Fragen zu: Men\u00fcbezeichnung, Seitenstruktur, Zustandsvarianten, dem redundanten Z\u00e4hler f\u00fcr verbundene Websites, Platzierung des Glossars, Platzierung von \u201eWer kann verwenden\u201c, Umfang der Abrechnung, Behandlung von Aktionen nur f\u00fcr den Eigent\u00fcmer.<\/p>\n\n Runde 2<\/strong> \u2014 7 weitere, fokussierte Fragen: \u00dcbersicht vs. Index, der CTA \u201eM\u00fcde vom Zuweisen von Credits\u201c, Inhalt der Nutzungsberichte, UX f\u00fcr die \u00dcbertragung von Credits, Felder f\u00fcr den aktiven Zahlung nach Bedarf-Status, Status f\u00fcr Vorauszahlung aktiv, Umfang nur f\u00fcr den Eigent\u00fcmer.<\/p>\n\n Erst nach beiden Runden schlug Claude den Dateiplan vor. Erst nachdem der Dateiplan best\u00e4tigt wurde, wurde HTML geschrieben. Gesamte verstrichene Planungszeit: vielleicht f\u00fcnfzehn Minuten Hin und Her. Insgesamt produzierte Dateien: f\u00fcnf, alle beim ersten Mal korrekt. <\/p>\n\n Das Anti-Muster besteht darin, sich nach einer Runde auf die Ausgabe festzulegen und dann jede Datei zwei- oder dreimal neu zu generieren, weil die Einschr\u00e4nkungen nicht vollst\u00e4ndig aufgedeckt wurden. Dieser Weg f\u00fchlt sich schneller an bis zur dritten Stunde. <\/p>\n\n Mockups m\u00fcssen oft mehrere Zust\u00e4nde desselben Bildschirms zeigen \u2013 leer vs. gef\u00fcllt, sicher vs. Warnung, Plan aktiv vs. Plan inaktiv. Zwei Muster in dieser Sitzung funktionierten gut: <\/p>\n\n Der Umschalter f\u00fcr den Abrechnungsstatus.<\/strong> Die Abrechnungs-Landingpage verf\u00fcgt oben rechts \u00fcber ein Die Fehlerbehebungs-Warnungsumschaltung.<\/strong> Ohne diese w\u00fcrden Sie zwei separate HTML-Dateien f\u00fcr jeden Bildschirm mit einer Zustands\u00fcbergang ausliefern. Mit ihnen demonstriert eine Datei die gesamte Designoberfl\u00e4che. Pr\u00fcfer sehen mehr, schneller. <\/p>\n\n Rufen Sie sie im YT-Ticket-Update explizit auf:<\/p>\n\n \u201eOben gibt es einen Umschalter: \u201aVorschau-Status: Kein Plan \/ Zahlung nach Bedarf aktiv\u2018. Verwenden Sie ihn, um beide Zust\u00e4nde zu sehen. Dies ist nat\u00fcrlich nur ein Teil des Mockups und nicht f\u00fcr die tats\u00e4chliche Benutzeroberfl\u00e4che gedacht.<\/em>\u201c <\/p>\n<\/blockquote>\n\n Die kursiv gedruckte Klausel ist wichtig. Andernfalls wird ein Entwickler fragen, warum das Produkt eine Zustandsumschaltung hat. <\/p>\n\n Nachdem alles erstellt wurde, bevor Sie sich auf die \u00dcbergabe festlegen, f\u00fchren Sie eine \u00dcberpr\u00fcfungsrunde durch. In dieser Sitzung war es ein einzelner Prompt: <\/p>\n\n \u201eAlles sieht gut aus. F\u00fchren Sie eine \u00dcberpr\u00fcfungsrunde durch: <\/p>\n\n\n\n Claude untersuchte jeden Screenshot erneut, verglich ihn mit jeder produzierten Datei und gab einen strukturierten Bericht zur\u00fcck. Aus der WPML-Fehlerbehebungs\u00fcberpr\u00fcfung: <\/p>\n\n Jeder Punkt war in einer einzigen Folgerunde behebbar. Keiner w\u00e4re ohne den \u00dcberpr\u00fcfungsprompt aufgefallen. Die KI hat hier einen Vorteil, den Sie nicht haben \u2013 sie kann jede Seite und jeden Screenshot gleichzeitig in einer Runde erneut lesen. <\/p>\n\n Tun Sie es immer. Behandeln Sie es nicht als optional. <\/p>\n\n Das YT-Ticket-Update in der WPML-Sitzung durchlief w\u00e4hrend<\/em> der Sitzung mehrere Iterationen \u2014 verfeinert, w\u00e4hrend sich das Design entwickelte, nicht in Panik am Ende zusammengestellt. Als PostHog in \u201eNutzungsverfolgung und Berichterstattung\u201c umbenannt wurde, spiegelte das Ticket-Update dies sofort wider. <\/p>\n\n Ein gutes Ticket-Update f\u00fcr eine Benutzeroberfl\u00e4chen-Neugestaltungs\u00fcbergabe hat:<\/p>\n\n Das tats\u00e4chliche WPML-Ticket-Update umfasst etwa 2.500 W\u00f6rter und deckt drei Men\u00fcs der obersten Ebene ab (Einstellungen \/ AI Translation Billing \/ Fehlerbehebung). Es ist l\u00e4nger als die meisten Tickets, weil die \u00c4nderungsoberfl\u00e4che gro\u00df ist \u2013 haben Sie keine Angst vor L\u00e4nge, wenn die \u00c4nderung komplex ist, aber seien Sie diszipliniert dar\u00fcber, was in die Tabelle geh\u00f6rt (Pfade und Ziele) vs. was in Prosa geh\u00f6rt (Prinzipien und Begr\u00fcndung). <\/p>\n\n Wenn Sie m\u00f6chten, dass Claude das Ticket aktualisiert, w\u00e4hrend sich das Design entwickelt, funktioniert ein strukturierter Prompt am besten:<\/p>\n\n \u201eIch ben\u00f6tige, dass Sie meine Nachricht aktualisieren, die die vorgenommenen \u00c4nderungen erkl\u00e4rt.<\/p>\n\n\n\n Spezifisch, strukturiert, und es sagt Claude, was erhalten bleiben soll vs. was sich \u00e4ndern soll.<\/p>\n\n Wenn Claude Informationen von au\u00dferhalb des Arbeitsverzeichnisses ben\u00f6tigt \u2013 Anbieterdokumentation, Blogbeitr\u00e4ge, Mindestanforderungen \u2013 delegieren Sie an einen Subagenten. Holen und f\u00fcgen Sie nicht manuell ein. <\/p>\n\n Der Prompt, der die WPML-Fehlerbehebungsrecherche startete:<\/p>\n\n \u201eRecherchieren Sie die Fehlerbehebungs-\/Debug-Funktionen des WPML-Plugins auf wpml.org (der offiziellen Dokumentationsseite) und geben Sie eine pr\u00e4gnante Zusammenfassung zur\u00fcck, was jede Funktion tut und wie das Support-Team von WPML Benutzer normalerweise anweist, sie zu verwenden. [\u2026] Bitte suchen Sie die Dokumentation f\u00fcr jede der folgenden auf und sagen Sie mir: <\/p>\n\n\n\n Dieser Subagent gab eine strukturierte Zusammenfassung mit Quelllinks zur\u00fcck, die direkt die dreistufige Organisation (sicher \/ Protokolle \/ nur Support) der Fehlerbehebungs-Neugestaltung formte. Ohne ihn h\u00e4tten wir entweder geraten, wer was verwendet, oder den Ablauf unterbrochen, um selbst Dokumentation zu lesen. <\/p>\n\n Wenn Sie an einen Subagenten delegieren, sagen Sie ihm:<\/p>\n\n Die Methode ist das Wichtigste. Aber einige Prinzipien traten oft genug auf, um es wert zu sein, sie im Voraus zu kennen \u2013 sie ersparen Ihnen ein oder zwei Fragerunden. <\/p>\n\n Die aktuelle WPML-Fehlerbehebungsseite ist eine riesige Bildlaufseite mit ca. 25 Tools, die \u201eCache leeren\u201c mit \u201eWPML vollst\u00e4ndig zur\u00fccksetzen\u201c mit dem gleichen visuellen Gewicht mischt. Kunden k\u00f6nnen nicht erkennen, was sicher ist. Supporter k\u00f6nnen keine URL angeben. <\/p>\n\n Die Neugestaltung sortiert jedes Tool in eine von drei Stufen mit farbigen Abzeichen:<\/p>\n\n Wenn Sie eine dichte technische Seite neu gestalten, fragen Sie \u201eWas ist der Explosionsradius jedes Tools?\u201c, bevor Sie fragen \u201eZu welchem Thema geh\u00f6rt jedes Tool?\u201c<\/p>\n\n Damit ein Tool als Selbstbedienung funktioniert, muss sein Text dem Benutzer sagen:<\/p>\n\n Das WPML-Tool \u201epost_parent in \u00dcbersetzungen reparieren\u201c wurde von der knappen Formulierung des aktuellen Produkts \u201eRepariert die \u00fcbergeordneten Beziehungen \u00fcbersetzter Beitr\u00e4ge.\u201c zu:<\/p>\n\n \u201eVerkn\u00fcpft \u00fcbersetzte Unterseiten (oder andere hierarchische Inhalte) neu mit der \u00fcbersetzten Version ihres \u00fcbergeordneten Elements, anstatt auf das \u00fcbergeordnete Element in der Originalsprache zu verweisen. N\u00fctzlich nach Migrationen oder Massenimporten.\u201c<\/p>\n<\/blockquote>\n\n Dasselbe Tool, dreimal n\u00fctzlicher, weil der Benutzer jetzt wei\u00df, wann<\/em> er danach greifen soll.<\/p>\n\n Nicht jede destruktive Aktion ben\u00f6tigt dasselbe Best\u00e4tigungsmuster. Die WPML-Sitzung endete mit drei Stufen: <\/p>\n\n Unterschiedliche Risikoniveaus, unterschiedliche Reibung.<\/p>\n\n Wenn ein Tool mit einer Einstellung \u00fcberlappt, verlinken Sie, anstatt es zu besitzen. Die Seite \u201eFehlerbehebung \u2192 Nutzungsberichte\u201c verlinkt zu \u201eEinstellungen \u2192 KI-\u00dcbersetzung \u2192 Wer kann die automatische \u00dcbersetzung verwenden\u201c, anstatt dieses Steuerelement neu zu implementieren. Eine einzige Quelle der Wahrheit, ein Ort zur Pflege, eine konsistente Erfahrung. <\/p>\n\n Interne Anbieter- oder Akronymnamen geh\u00f6ren nicht in kundenorientierte Texte. In dieser Sitzung: <\/p>\n\n Der WPML-Einstellungsindex hat 16 Abschnitte; die Fehlerbehebungsseite hat ~25 Tools. Von einem Benutzer zu erwarten, dass er scannt und das richtige findet, ist unrealistisch. Eine prominente, bereichsbezogene Suche mit Unterelement-Indizierung \u2014 so dass die Eingabe von \u201eghost\u201c direkt zum Anker des Ghost-Eintr\u00e4ge-Tools springt \u2014 l\u00f6st die Auffindbarkeit besser als jede Navigationsbereinigung. <\/p>\n\n Der Abrechnungsbereich war anders: 4 Unterseiten, alle mit klar verst\u00e4ndlichen Bezeichnungen. Wir haben die Suche zun\u00e4chst hinzugef\u00fcgt, dann aber nach Bewertung der tats\u00e4chlichen Dichte wieder entfernt. Das Prinzip: <\/p>\n\n Wenn eine Seite \u22646 Top-Level-Elemente mit klar verst\u00e4ndlichen Bezeichnungen hat, f\u00fcgen Sie keine Suche hinzu. Wenn sie >10 technische Elemente hat, lohnt sich die Suche fast immer. <\/p>\n<\/blockquote>\n\n Wenn Ihre Website eine bekannte Anforderung nicht erf\u00fcllt, informieren Sie den Benutzer oben auf der Seite \u2014 warten Sie nicht, bis er es durch einen Fehler entdeckt. Die Fehlerbehebungs-Landingpage f\u00fchrt jede Pr\u00fcfung aus der WPML-Mindestanforderungsliste durch und zeigt Fehler in einem gelben Panel \u00fcber der Suche an. Wenn alles bestanden ist, wird das Panel vollst\u00e4ndig ausgeblendet. <\/p>\n\n Dies sind die exakten Formulierungen, die die WPML-Sitzung auf Kurs hielten. \u00dcbernehmen Sie sie. <\/p>\n\n \u201eBevor Sie fortfahren, \u00fcberpr\u00fcfen Sie alles und bitten Sie mich um Kl\u00e4rungen. Treffen Sie keine Annahmen.\u201c<\/p>\n<\/blockquote>\n\n \u201eWenn Sie noch Fragen haben, stellen Sie diese.\u201c<\/p>\n<\/blockquote>\n\n \u201eStellen Sie das Material zusammen und stellen Sie mir Fragen, bevor Sie das Ergebnis produzieren.\u201c<\/p>\n<\/blockquote>\n\n \u201eF\u00fchren Sie eine \u00dcberpr\u00fcfungsrunde durch:<\/p>\n\n\n\n \u201eTats\u00e4chlich sehe ich, dass die Suchfunktion f\u00fcr den Abrechnungsbereich nicht erforderlich ist. Bitte bewerten Sie und sagen Sie mir, ob ein Bedarf besteht, basierend auf dem Inhalt der Unterseiten.\u201c<\/p>\n<\/blockquote>\n\n Claude zu bitten, zu bewerten<\/em>, bevor er implementiert<\/em>, ist der Weg, um zu vermeiden, dass man etwas drei Bearbeitungen sp\u00e4ter r\u00fcckg\u00e4ngig machen muss. In der WPML-Sitzung f\u00fchrte dieser Prompt dazu, dass die Suche in der Abrechnung in einem Schritt sauber entfernt wurde, anstatt halb implementiert und dann wieder herausgerissen zu werden. <\/p>\n\n \u201e\u00dcberpr\u00fcfen Sie auf Konsistenz und Konflikte. Erstellen Sie eine aktualisierte Version, die frei von Konflikten und Mehrdeutigkeiten ist. Bevor Sie dies tun, stellen Sie mir Fragen, damit Sie keine Annahmen treffen oder erfinden m\u00fcssen.\u201c<\/p>\n<\/blockquote>\n\n Als dies gefragt wurde, lieferte Claude eine strukturierte Liste von Widerspr\u00fcchen in einem Entwurf f\u00fcr ein Ticket-Update (\u201eElemente, die als entfernt aufgef\u00fchrt sind, sind auch als verschoben aufgef\u00fchrt \u2014 was stimmt?\u201c, \u201e\u201aATE\u2018 ist mehrdeutig: Erweiterter \u00dcbersetzungs-Editor oder Automatische \u00dcbersetzungs-Engine?\u201c). Jeder konnte mit einer einzigen Antwort gel\u00f6st werden. Ohne diesen Prompt w\u00e4ren diese Widerspr\u00fcche ausgeliefert worden. <\/p>\n\n \u201eBenennen Sie \u201aX\u2018 in \u201aY\u2018 in allen Fehlerbehebungsdateien um.\u201c<\/p>\n<\/blockquote>\n\n \u201eVerschieben Sie den gelben Block f\u00fcr die Mindestanforderungen \u00fcber die Suche in troubleshooting.html.\u201c<\/p>\n<\/blockquote>\n\n Chirurgisch. Spezifisch. Funktioniert immer \u2014 solange die \u00c4nderung wirklich mechanisch ist. F\u00fcr alles, was Urteilsverm\u00f6gen erfordert, kehren Sie zum Planungsmuster zur\u00fcck. <\/p>\n\n Wenn Sie bis hierher gelesen haben, hier ist der gesamte Arbeitsablauf zusammengefasst:<\/p>\n\n Budgetieren Sie f\u00fcr die Schritte 3\u20135 und Schritt 8 \u2014 der Rest ist haupts\u00e4chlich Ausf\u00fchrung.<\/p>\n\n Die gr\u00f6\u00dfte Lektion der WPML-Sitzung ist, dass Claude Code kein Designer ist; es ist ein disziplinierter Erbauer, der einen gut spezifizierten Plan mit ungew\u00f6hnlicher Geschwindigkeit ausf\u00fchren kann.<\/strong> Ihr Wert in der Schleife ist Urteilsverm\u00f6gen, nicht Tippen. Geben Sie Claude das Problem, verlangen Sie, dass er Fragen stellt, bestehen Sie auf einem Plan in Textform, \u00fcberpr\u00fcfen Sie die Ausgabe anhand der Quelle der Wahrheit und bereiten Sie die \u00dcbergabe w\u00e4hrend des Prozesses vor. <\/p>\n\n Wenn Sie das tun, ist die Geschwindigkeit, die Sie erhalten, keine 2-fache Verbesserung gegen\u00fcber manueller UX-Arbeit. Sie liegt eher in der Gr\u00f6\u00dfenordnung \u2014 und die Ausgabequalit\u00e4t ist h\u00f6her, weil die \u00dcberpr\u00fcfungsdisziplin in den Workflow integriert ist, anstatt etwas zu sein, woran Sie sich erinnern m\u00fcssten. <\/p>\n\n Dieses Design-Update wird in WPML 4.10 integriert. Wie das KI-gesteuerte Design werden wir dieses riesige Update durch den Einsatz von KI-Agenten implementieren, die autonom als Team arbeiten. Wenn Sie an einer Vorschau interessiert sind, hier ist ein kurzes Video: <\/p>\n\nDie eine Regel, die dies zum Funktionieren bringt <\/h2>\n\n
\n
Die acht Phasen einer Sitzung <\/h2>\n\n
1. Formulieren Sie das Problem, nicht die L\u00f6sung <\/h3>\n\n
\n
\n
\n
2. Sammeln Sie Ihr Material, bevor die Sitzung beginnt <\/h3>\n\n
\n
Current\/<\/code> \u2013 WPML settings.jpg<\/code>, debug-main.jpg<\/code>, td-invoices.jpg<\/code>, td-translators.jpg<\/code> usw. Etwa zehn JPGs, die alles im Umfang abdecken. <\/li>\n\n\n\ninstructions.txt<\/code><\/strong>, die das Problem, den Umfang und die Ausgabeerwartung angibt. Siehe ..\/instructions.txt<\/code> f\u00fcr die tats\u00e4chliche \u2013 beachten Sie, wie sie \u00fcber drei Durchg\u00e4nge (--- 1 ---<\/code>, --- 2 ---<\/code>, --- 3 ---<\/code>) wuchs, als neuer Umfang hinzugef\u00fcgt wurde, anstatt jedes Mal neu geschrieben zu werden. <\/li>\n\n\n\nalready-updated\/<\/code>-Ordner. Die WPML-Sitzung begann mit einer gestalteten ai-translation.html<\/code>, die Claude als visuelle Vorlage f\u00fcr alles andere verwendete, was in der Sitzung produziert wurde \u2013 die Tailwind-Konfiguration, die Kartenklasse, das Zur\u00fcck-Link-Muster, die Flash-Animation f\u00fcr Ankerspr\u00fcnge. Diese einzelne Datei sparte etwa 30 Minuten an Entscheidungen zum visuellen System. <\/li>\n\n\n\nwpml.org\/home\/minimum-requirements\/<\/code>) das Design des Warnfelds. <\/li>\n<\/ul>\n\n3. Beenden Sie jedes Briefing mit \u201eStellen Sie mir Fragen, treffen Sie keine Annahmen.\u201c <\/h3>\n\n
\n
\n
\n
4. Durchlaufen Sie Fragerunden, bevor Sie mit der Implementierung beginnen <\/h3>\n\n
5. Kennzeichnen Sie Mockup-spezifische Bedienelemente explizit <\/h3>\n\n
Preview state: No plan | PAYG active<\/code> Steuerelement. Durch Klicken auf eine der Optionen wechselt das \u00dcbersichtsfeld zwischen den beiden Zust\u00e4nden \u2014 \u201ekein Plan\u201c zeigt beide Akquisitionskarten, \u201eZahlung nach Bedarf aktiv\u201c zeigt das einzelne Panel \u201eIhr Zahlung nach Bedarf-Plan\u201c mit Kartendetails. Beschriftet mit \u201eVorschau-Status:\u201c, damit Pr\u00fcfer verstehen, dass dies eine Mockup-Funktion und keine Produkt-Benutzeroberfl\u00e4che ist. <\/p>\n\nPreview state: Has warnings | All OK<\/code> zeigt oder verbirgt das gelbe Mindestanforderungsfeld. Gleiche Beschriftung, gleicher Grund. <\/p>\n\n\n
6. F\u00fchren Sie eine \u00dcberpr\u00fcfungsrunde durch, bei der Mockups mit der Quelle verglichen werden <\/h3>\n\n
\n
\n
\n
7. Schreiben Sie die Entwickler\u00fcbergabe parallel, nicht am Ende <\/h3>\n\n
\n
WPML \u2192 Translation Dashboard \u2192 Payments & Maintenance \u2192 Advanced Translation Editor \u2192 Overview \u2192 Who can use Automatic Translation?<\/code> \u2013 keine Zusammenfassungen, keine Paraphrasen. <\/li>\n\n\n\n\n
\n
8. Verwenden Sie Subagenten f\u00fcr externe Recherchen <\/h3>\n\n
\n
\n
\n
\n\nKritische UX-Prinzipien, die aus der Arbeit hervorgingen <\/h2>\n\n
Organisieren Sie nach Risiko, nicht nach Thema <\/h3>\n\n
\n
Jedes Tool beantwortet drei Fragen <\/h3>\n\n
\n
\n
Abgestufte Sicherheitskontrollen <\/h3>\n\n
\n
RESET WPML<\/code>-Phrase m\u00fcssen beide korrekt sein.<\/li>\n<\/ul>\n\nQuerverkn\u00fcpfen, nicht duplizieren <\/h3>\n\n
F\u00fcr Kunden umbenennen <\/h3>\n\n
\n
Suche schl\u00e4gt Navigation bei dichten Oberfl\u00e4chen <\/h3>\n\n
\n
Proaktive Warnungen statt passiver Einstellungen <\/h3>\n\n
\n\nFunktionierende Prompt-Muster <\/h2>\n\n
Fragerunden erzwingen <\/h3>\n\n
\n
\n
\n
\u00dcberpr\u00fcfung vorantreiben <\/h3>\n\n
\n
\n
Bewertung vor dem Handeln <\/h3>\n\n
\n
Mehrdeutigkeit aufdecken <\/h3>\n\n
\n
Gezielte Umbenennungen und Verschiebungen <\/h3>\n\n
\n
\n
\n\nZu vermeidende Fallstricke <\/h2>\n\n
\n
href<\/code> und das YT-Ticket aktualisiert werden. Sagen Sie Claude, dass er es verbreiten soll \u2014 jagen Sie es nicht Datei f\u00fcr Datei. <\/li>\n\n\n\n
\n\nEin Beispiel f\u00fcr einen Sitzungsablauf <\/h2>\n\n
\n
instructions.txt<\/code>, das mit \u201e\u00dcberpr\u00fcfen Sie alles, stellen Sie mir Fragen, treffen Sie keine Annahmen.\u201c endet.<\/li>\n\n\n\n
\n\nAbschluss <\/h2>\n\n