Zugang aus Übersee: www.kdjingpai.com
Ctrl + D Lesezeichen für diese Seite
Derzeitige Position:Abb. Anfang » Praktische AI-Tutorials

Diese kleine Aktualisierung des Codex könnte die Front-End-Arbeiten um die Hälfte reduzieren

Ich habe heute ein Update von Codex gesehen, keine große Neuigkeit, aber ich dachte, es wäre es wert, darüber zu schreiben.

OpenAI hat einen eingebauten Browser zu Codex's device toolbarDies ist auch als Symbolleiste für die Gerätegröße bekannt. Von nun an müssen Sie beim Erstellen von Webseiten, Ändern der Benutzeroberfläche oder Anpassen des responsiven Layouts im Codex nicht mehr auf ein Standardfenster starren, um die Auswirkungen zu sehen.

Sie können Codex die App in verschiedenen Größen testen lassen - Handy, Tablet, Desktop. Er schaut sich die Seite selbst an und findet Fehlausrichtungen, Überläufe, zu kleine Schaltflächen, falsche Abstände, eine Navigation, die auf dem Handy nicht funktioniert, und fährt dann fort, den Code zu ändern.

Die Eingabe ist ebenfalls sehr einfach: drei Punkte rechts neben der URL-Leiste im integrierten Codex-Browser und schon kann es losgehen.

配图1:Codex App 代码审查界面 Abbildung 1: Codex App Code Review Interface

Die Codex App vereint das Schreiben von Code, das Betrachten von Änderungen und das Durchführen von Überprüfungen in einer einzigen Workbench.
Quelle: OpenAI Developers Codex App Page

Diese ganze Sache ist vordergründig ein kleiner Knopf mit einer Menge echter Bedeutung.

Wenn wir in der Vergangenheit KI zum Schreiben von Frontends verwendet haben, bestand das häufigste Problem darin, dass der Code ausgeführt und die Seite geöffnet werden konnte, aber in dem Moment, in dem wir das Gerät wechselten, wurden wir enttarnt.

Auf dem Desktop sieht es gut aus, auf dem Handy werden die Überschriften in drei Zeilen gequetscht, die Kartenbreite wird zu Tode geschrieben und horizontale Bildlaufleisten tauchen auf, Schaltflächen kleben an den Rändern des Bildschirms, Pop-up-Fenster werden auf kleinen Bildschirmen nicht ganz abgedeckt und die Navigationsleiste wird direkt zu einer Katastrophenseite.

Es geht nicht darum, dass das Modell nicht weiß, wie man Code schreibt, sondern darum, dass es in der Vergangenheit an einem stabilen “Sehen” und “Validieren” von Links gemangelt hat.

Das eigentliche Problem bei Frontends ist, dass man nie einfach die React Die Komponenten sind ausgeschrieben. Die Schwierigkeit besteht darin, sie immer wieder zu betrachten, zu optimieren und auf ihre Größe hin zu testen. Vor allem bei responsiven Seiten gibt das Design in der Regel nur einen oder zwei Zustände vor, und das reale Gerät hat eine Reihe von seltsamen Größen.

Dieses Manko füllt die Gerätesymbolleiste aus.

配图2:Codex App 新线程界面 Passende Abbildung 2: Codex App New Thread Interface

Eine Front-End-Aufgabe kann mit einer natürlichen Sprache beginnen und dann in eine geschlossene Schleife aus Code-Implementierung, Seitenüberprüfung und Änderung münden.
Bildquelle: OpenAI Developers Codex Seite

Anstatt nur ein “Assistent des Codeschreibers” zu sein, bewegt sich Codex nun darauf zu, ein “Entwicklungsagent zu sein, der die Frontend-Ergebnisse selbst überprüft”.

Ich mache mir eher Sorgen, dass diese Funktion die Art und Weise, wie Front-End-Aufgaben erledigt werden, verändern wird.

In der Vergangenheit waren die Aufgaben, die Sie der KI stellten, in der Regel folgende:

Helfen Sie mir, eine responsive Seite zu erstellen.

Eine bessere Formulierung wäre jetzt:

Helfen Sie mir, diese Seite zu realisieren und überprüfen Sie das Layout bei 390px, 768px bzw. 1440px. Behoben das Problem auf meine eigene, wenn ich es gefunden, und schließlich sagte mir, was bei jeder Größe geändert wurde.

Das ist etwas anderes.

Bei ersterem geht es darum, die KI zum Schreiben von Code zu bewegen, bei letzterem darum, die KI dazu zu bringen, eine akzeptable Front-End-Aufgabe zu erledigen.

Wenn man einen Schritt weiter geht, kann der Codex eine sehr nützliche Reihe von geschlossenen Kreisläufen bilden:

Generieren Sie zunächst die Seite, öffnen Sie dann die lokale Anwendung, wechseln Sie zwischen verschiedenen Gerätegrößen, beobachten Sie das Problem, ändern Sie die CSS- und Komponentenstruktur, führen Sie die Seite erneut aus und übermitteln Sie schließlich den Diff.

Hier fängt die KI-Front-End-Produktivität an, wirklich schwierig zu werden.

Mit der zusätzlichen Geräte-Symbolleiste kann Codex die Seiten auf verschiedenen Bildschirmgrößen überprüfen, anstatt nur auf dem Desktop zu arbeiten.

OpenAI hat auch ein paar Details geändert: Der Browser ist etwa 30% schneller, die Mauszeigeranimation ist straffer, es gibt eine neue Möglichkeit, den Composer im Vollbildmodus auszublenden, und es gibt einige Korrekturen für Windows-Browser.

Das hört sich lästig an, ist aber wichtig für das Gefühl des Werkzeugs.

Was ist die größte Angst vor KI-Codierungstools?

Es geht nicht darum, dass es eine weniger coole Funktion ist, sondern darum, dass es klemmt, langsam ist, die Sicht verdeckt und die Gedanken unterbricht, wenn man es benutzt. Sobald man den Browser häufig anstarren muss, um die Auswirkungen zu sehen, werden diese kleinen Details unendlich vergrößert. Ein schnellerer Browser, ein stabilerer Cursor und weniger Blockierungen im Vollbildmodus würden die Bereitschaft erhöhen, ihn mit echten Aufgaben zu betrauen.

配图4:Codex Web / Cloud 输入界面 Abbildung 3: Codex Web- / Cloud-Eingabeoberfläche

Codex Web kann Aufgaben in einer Cloud-Umgebung bearbeiten oder mehrere Entwicklungsaufgaben parallel ausführen.
Bildnachweis: OpenAI Developers Codex Cloud Dokumentation

Deshalb denke ich, dass die Richtung von Codex heute klar ist.

Es ist nicht nur in und Claude Bei Code geht es darum, wer besser im Schreiben von Code ist als wer besser im Schreiben von Code ist, aber es geht darum, die schmutzigen, kaputten und realen Teile der “Softwareentwicklungsszene” auszugleichen.

Das Schreiben von Code ist nur der erste Schritt. In der realen Entwicklung gibt es auch Seitenvorschauen, Anomalien, Größenänderungen, Testrückmeldungen, PR-Änderungen und Prüfungsnachweise. In der Vergangenheit musste man all diese Dinge im Auge behalten, aber jetzt übernimmt der Codex das nach und nach.

Insbesondere die Front-End-Entwicklung ist am stärksten gefährdet, durch diese Fähigkeit umgeschrieben zu werden.

Denn beim Frontend geht es nicht nur um die richtige Logik, sondern auch um die richtige Optik, die richtigen Interaktionen und die richtigen Geräte.

Ob eine Schaltfläche angeklickt werden kann oder nicht, ob ein Pop-up-Fenster blockiert wird oder nicht, ob es auf dem Handy überläuft oder nicht, ob der Kontrast im dunklen Modus ausreichend ist - all diese Fragen waren früher nur schwer mit Code zu beurteilen. Solange Codex den Browser öffnen, die Größe ändern und die Seite beobachten kann, hat er eine Chance, das Problem selbst zu finden.

Natürlich empfehle ich nicht, völlig loszulassen.

Vor allem bei Markenseiten, Produktwebsites und komplexen Backend-Systemen neigt die KI immer noch dazu, “ähnlich aussehende” Fehler zu machen. Sie kann offensichtliche Fehler beheben, aber Ästhetik, Informationshierarchie und Interaktionsabsicht müssen immer noch von Menschen überprüft werden.

Es ist sinnvoller, den Codex die erste Runde der Implementierung und die Bereinigung von Problemen auf niedriger Ebene übernehmen zu lassen, während ein Mensch die endgültige Beurteilung vornimmt.

Wenn zum Beispiel eine Seite fertig ist, kann man den Codex einfach eine Runde laufen lassen:

  • - Desktop 1440px Einmal prüfen
  • - Flachbett 768px Einmal prüfen
  • - Mobil 390px Einmal prüfen
  • - Überprüfung von Zeilenumbrüchen in der Kopfzeile, Blockieren von Schaltflächen, horizontalem Scrollen, Formularüberlauf, Absturz der Navigation
  • - Nachdem Sie den Fehler behoben haben, übermitteln Sie den Diff mit einer Erklärung, was in jeder Größe geändert wurde.

Diese Art von Aufgaben eignet sich perfekt für die Übergabe an die KI.

Denn sie ist repetitiv, trivial und beansprucht das Auge, beeinträchtigt aber die Qualität der Lieferung.

Responsive Probleme sind in der Regel keine großen Fehler, sondern eher kleine Probleme wie Zeilenumbrüche, Schaltflächenaufkleber, Kartenüberlauf und falsch ausgerichtete Navigation.

Unter diesem Gesichtspunkt liegt der Wert der Geräte-Symbolleiste nicht in der “Simulation des Telefonbildschirms” selbst.

Browser-Entwicklungstools sind dazu schon seit langem in der Lage.

Und jetzt kommt der Clou: Diese Fähigkeit wird in die Ausführungskette des Codex aufgenommen.

Früher mussten menschliche Entwickler diese Aufgabe übernehmen:

Öffnen Sie die Seite, sehen Sie sie sich an, finden Sie eine falsche Ausrichtung, gehen Sie zurück zum Editor und ändern Sie den Code, aktualisieren Sie sie erneut, ändern Sie die Größe, sehen Sie sie sich erneut an, ändern Sie sie erneut.

Jetzt kann der Link von Codex selbst betrieben werden.

Das ist die Veränderung.

配图6:Codex PR / 测试反馈界面 Abbildung 4: Codex PR / Test Feedback Schnittstelle

Die Codex-Ergebnisse sollten nicht nur aus Code bestehen, sondern auch aus Diffs, Testergebnissen und Änderungsnotizen, die überprüft werden können.
Bildquelle: OpenAI Developers Codex Seite

Ich betrachte diese Aktualisierung daher lieber als ein Zeichen.

KI, die Code schreibt, hat sich von “kann man generieren” zu “kann man verifizieren” entwickelt.

Früher waren wir überrascht, dass KI tatsächlich Seiten schreiben kann.

Der nächste wirklich wertvolle Aspekt ist, ob die KI die Seite selbst betrachten, das Problem selbst finden, es selbst beheben und das Ergebnis dann einer menschlichen Überprüfung unterziehen kann.

Das Frontend wird wahrscheinlich der erste Ort sein, an dem sich die Arbeitsgewohnheiten ändern.

In Zukunft wird die Standardabgabe einer Front-End-Aufgabe nicht mehr lauten: “Die Seite ist geschrieben”, sondern:

Die Desktop-Seite hat es gesehen.

Das Tablettenende wurde gesehen.

Ich habe es auf dem Handy gesehen.

Die Interaktion hat sich überschlagen.

Offensichtliche Layout-Probleme behoben.

diff kann jetzt überprüft werden.

Das ist der Grund für diese kleine Aktualisierung des Codex.

Nicht eine zusätzliche Taste.

Es ist die KI, die sich langsam aber sicher im Front-End durchsetzt.

Empfohlen

Sie können keine AI-Tools finden? Versuchen Sie es hier!

Geben Sie Schlüsselwörter ein.Zugänglichkeit zur Bing-SucheAI-Tools, finden Sie schnell die AI-Tools auf dieser Website.

zurück zum Anfang