Ich bringe Ihnen bei, wie Sie mit KI-Programmierwerkzeugen schöne Frontend-Seiten erstellen können.

Einführung

Aus welchem Grund? AI-Programmierwerkzeuge Das grundlegende Problem bei der Erstellung von Frontend-Seiten, die gut aussehen, und solchen, die es nicht tun, besteht darin, dass diese Tools eine ganze Reihe von Stichworten für die Erstellung von Frontend-Seiten entwickelt haben, die alle Arten von Frontend-Spezifikationen einschränken. Diese Stichwörter sind lang...

Nicht nur die Prompt-Wörter sind lang, sondern die Erstellung der Frontend-Seite erfordert die Ausgabe vieler, vieler Token... Deshalb finden Sie eine Menge Token in der claude Die offizielle Generierung des vollständigen Front-End-Seitencodes wird häufig unterbrochen.

Es gibt zwei Probleme, die gelöst werden müssen, damit KI schöne Frontend-Seiten generiert: die Generierung der für die Frontend-Seite benötigten Prompt-Wörter und die vollständige Generierung des Frontend-Seitencodes.

verwirklichen

1. die für die Front-End-Seite benötigten Prompt-Wörter zu generieren

Einführung der ersten Methode, die keine überlangen Stichworte erfordert, sondern das Erlernen von Leitfragen und Zwängen

Erste Runde von Stichwörtern

Als Front-End-Designer helfen Sie den Produktmanagern bei der Erstellung von Spezifikationen für das UI-Design. Sie müssen die vom Produktmanager beschriebenen Nutzeranforderungen im Detail verstehen und die Designlösung an die Nutzeranforderungen anpassen.
Bitte beachten Sie die folgenden Anforderungen: 1. modernes und hochwertiges Frontend-Design 2. folgen Sie der Design-Spezifikation, konzentrieren Sie sich auf UI-Details und Benutzererfahrung 3. führen Sie Tailwind CSS CDN anstelle von Schreibstil ein 4. verwenden Sie unsplash random images für Bilder 5. vermeiden Sie Scrollbalken in der Schnittstelle

Zweite Runde von Stichwörtern

Die Kerngruppe sind Haustierbesitzer, und die Nutzer verwenden das Produkt mit dem Ziel, Spielzeug und Videos für ihre Haustiere zu kaufen. Die Nutzer werden das Produkt auf allen Geräten verwenden. Die wichtigsten Funktionsmodule des Produkts sind: Startseite (mit verschiedenen Haustierkategorien und Produktkategorien), Einkaufskassenseite, Haustier-Einkaufslistenseite, Benutzerzentrum. Es sind keine speziellen Markenfarben erforderlich. Die Schnittstelle ist mehrsprachig. Die Benutzer besuchen das Produkt in der Regel einmal pro Woche. Keine besonderen Anforderungen an die Zugänglichkeit des Produkts.

Hinweis: In claude offiziellen Website-Dialog, kann die Ausgabe-Code nicht vollständig sein, müssen Sie die Anforderungen zu vereinfachen, erhalten Sie zunächst eine typische Seite Beispiel-Code, und dann versuchen, die komplette Webseite Code zu verbessern.

Die zweite Methode, bei der klare textliche Hinweise oder Bilder als Beispiele verwendet werden

Fügen Sie zum Beispiel den folgenden UI-Style-Tipp zum ersten Tipp-Wort hinzu:

Oder gehen Sie auf eine UI-Design-Website und wählen Sie einen Seitenstil, der Ihnen gefällt:

Dieser Teil zeigt nicht die Wirkung der generierten Front-End-Seite, die im nächsten Teil der Demonstration gezeigt wird.

2. vollständige Generierung des Front-End-Seitencodes

Gehen Sie nicht direkt in die chatgpt oder Claude zu versuchen, den vollständigen Front-End-Code zu generieren, ist ihre Ausgabe nicht lang genug und sie sind nicht in der Lage, mehrschichtigen Projektcode zu erstellen. Deshalb müssen wir eineAI-ProgrammierwerkzeugeDer Klecks und die Cursor Alles gute Entscheidungen, aber dieses Mal versuchen wir es mit dem potenziell weniger effektiven Trea, um zu sehen, wo das Ergebnis liegt.

1) Zunächst einmal sollte es ein vollständiges Projekt geben, bei dem es nicht darauf ankommt, ob es schön ist oder nicht, es muss nur voll funktionsfähig sein.

Hier werde ich eine zufällige Musterseite erstellen

2. die KI-Tools Lösungen für die Front-End-Optimierung bereitstellen

Als Front-End-Designer helfen Sie den Produktmanagern bei der Erstellung von Spezifikationen für das UI-Design. Sie müssen die vom Produktmanager beschriebenen Nutzeranforderungen im Detail verstehen und die Designlösung an die Nutzeranforderungen anpassen.
Bitte beachten Sie die folgenden Anforderungen: 1. modernes und hochwertiges Frontend-Design 2. folgen Sie der Design-Spezifikation, konzentrieren Sie sich auf UI-Details und Benutzererfahrung 3. führen Sie Tailwind CSS CDN anstelle des Schreibstils ein 4. verwenden Sie unsplash random images für Bilder 5. vermeiden Sie Scrollbars in der Schnittstelle

Anforderung des Produktmanagers:
Vorliebe: Glasmorphismus
Optimieren des Seitenstils: index.html

Generieren Sie noch keinen Code, sondern geben Sie mir nur Vorschläge zur Optimierung des Front-End-Stils

Diese Dialogrunde bezieht sich hauptsächlich auf die Vorschläge des KI-Programmiertools und erfordert keine Änderungen am Code, so dass sie in den Chat-Modus wechselt

Die Empfehlungen lauten wie folgt:

Auf der Grundlage der Anforderungen des Produktmanagers und einer bestehenden Website für Gebrauchtwagenvermietungen möchte ich einige Vorschläge zur Optimierung des Designs unterbreiten:

1. **Anwendung des Glasmimik-Stils**
- Ändern Sie die Suchleiste und die Fahrzeugkarten in einen Glasmimik-Effekt, fügen Sie Hintergrundunschärfe und Transparenz hinzu
- Fügen Sie subtile Lichteffekte und Farbverläufe hinzu, um den hochwertigen Eindruck zu verstärken.
- Erwägen Sie das Hinzufügen eines gläsernen Glanzes im Schwebezustand.

2. **Optimierung des Farbschemas**
- Das derzeitige Dunkelblau (#1e3a8a) ist etwas schwerfällig, schlagen Sie stattdessen eine modernere Farbe mit Farbverlauf vor.
- Erwägen Sie die Verwendung eines violett-blauen Farbverlaufs, z. B. "von-indigo-500-nach-violett-500".
- Dem Hintergrund können ein weicher Verlauf und dynamische Effekte hinzugefügt werden.

3. **Layout-Optimierung
- Fixierung der Suchleiste am oberen Rand für einen Haarglaseffekt
- Übernahme des Rasterlayouts für Fahrzeugkarten, aber Hinzufügen unregelmäßiger Abstände, um das visuelle Interesse zu erhöhen.
- Erwägen Sie die Verwendung des Masonry-Layouts, um die Höhe der Karten anpassbar zu machen.

4. **Verbesserung der interaktiven Erfahrung
- Fügen Sie der Karte eine sanfte Hover-Animation hinzu
- Hinzufügen eines Ripple-Effekts beim Klicken
- Hinzufügen einer Mikro-Animation zur Suchschaltfläche

5. **Optimierung der visuellen Details
- Hochwertige Autobilder von unsplash verwenden, feste Stile berücksichtigen
- Fügen Sie subtile Hintergrundmuster oder geometrische Formen hinzu.
- Geeignete Schattenstufen hinzufügen
- Schriftarten Ziehen Sie modernere serifenlose Schriftarten in Betracht.

6. **Responsive Design Vorschläge
- Verwenden Sie die responsiven Klassen von Tailwind
- Behalten Sie den Glasmimikry-Effekt auf dem Handy bei, aber reduzieren Sie die Unschärfe
- Optimieren Sie die Größe des Touchbereichs

7. **Empfehlungen zur Performance-Optimierung**
- Verwenden Sie Tailwinds JIT-Modus
- Verwenden Sie "Lazy Loading" für Bilder
- Erwägen Sie die Verwendung von Bildern im Webp-Format

8. **Überlegungen zur Barrierefreiheit
- Stellen Sie einen angemessenen Farbkontrast sicher
- Hinzufügen geeigneter ARIA-Tags
- Unterstützung der Tastaturnavigation

3. eine Optimierung des Front-End-Stils durchführen

Ich stelle die folgende Frage
Als Front-End-Designer helfen Sie dem Produktmanager bei der Erstellung von Spezifikationen für das UI-Design. Sie müssen die vom Produktmanager beschriebenen Benutzeranforderungen im Detail verstehen und die Designlösung an die Benutzeranforderungen anpassen.
Bitte beachten Sie die folgenden Anforderungen: 1. modernes und hochwertiges Frontend-Design 2. befolgen Sie die Design-Spezifikation und achten Sie auf UI-Details und Benutzererfahrung 3. führen Sie Tailwind CSS CDN ein, anstatt Stilvorlagen zu schreiben 4. verwenden Sie unsplash random images für Bilder 5. vermeiden Sie Scrollbalken in der Benutzeroberfläche

Anforderung des Produktmanagers:
Vorliebe: Glasmorphismus
Optimieren Sie den Seitenstil: index.html

Die Front-End-Designer geben folgende Ratschläge:
{Zitat von Ratschlägen des AI-Programmiertools}

Beginnen Sie nun mit der Optimierung der Frontend-Seite

Wirkung:

Da fehlt etwas...

1. Stil ist nicht getrennt (es ist am besten, um den ersten Schritt in das Tutorial Stil Trennung zu vervollständigen, und reduzieren Sie die Verdoppelung von Text und Code, und dann Front-End-Stil Optimierung, da sonst die Menge der Web-Seite Code wird zu groß sein, um die Erzeugung einer unvollständigen Seite führen, die Front-End-Optimierung der Qualität wird auch reduziert werden)

2. die Aufforderung "verwenden unsplash zufälliges Bild", dieser Satz ist nicht wirksam, was in der Seite fehlt Bild Platzhalter. (Unsplash offiziellen Aufruf Bild Regeln geändert haben, hat das große Modell noch nicht verstanden)

4. die Gesamtabstimmung auf der Grundlage der oben genannten Punkte

Lösen Sie zunächst das Problem der Höhe der Seite Code, für verschiedene Merkmale des Projekts spezifische Problem spezifische Analyse

Beheben Sie das Problem mit den Bildplatzhaltern. Anstatt unsplash aufzurufen, verwenden wir dieses Mal einfach den Hintergrundplatzhalter.

Die Effektanzeige (scheint immer noch hässlich zu sein...)

Vielleicht ist diese Art von Website schwarz-weiß minimalistischen Stil ist besser, laden Sie das Referenzbild und neu zu generieren den Effekt

5. eine Stilbeschreibungsdatei generieren, andere Seitengestaltung aufgrund der Gestaltung des Dokuments

Erfahrung teilen

1. das KI-Programmierungstool auf der Grundlage von Claude-3.7-Sonnet verwenden.

2. Mr. in den Back-End-Code, nach der Generierung von Front-End-Code

3 Behalten Sie das Dokument mit den Stilnoten

4. in komplexen Projekten die UI nicht mehr direkt optimieren, sondern versuchen, UI-Lösungen individuell zu generieren mit folgenden Aufforderungen

Sie sind ein Full-Stack-Ingenieur, der sowohl in der Produktplanung als auch im UI-Design bewandert ist.
Ich möchte eine iOS-App zum Thema "Meditation" entwickeln und benötige einen kompletten Satz von App-Prototypendiagrammen. Bitte beachten Sie die folgenden Anforderungen:
- Simulieren Sie die realen Szenarien und Bedürfnisse echter Nutzer, die die Meditations-App verwenden;
- Kombinieren Sie die Bedürfnisse der Nutzer mit der Perspektive des Produktmanagers, um die Funktionen, Seiten und Interaktionen der App zu planen;
- Kombinieren Sie die Benutzeranforderungen mit der Perspektive des Produktmanagers, um die Funktionen, Seiten und Interaktionen der APP zu planen; Kombinieren Sie die Produktplanung mit der Perspektive des Designers, um die komplette UI/UX auszugeben;
- Alle oben genannten Seiten werden in der gleichen HTML-Datei angezeigt.

5. mehr UI-Referenzdiagramme verwenden, einige Beispiele bereitstellen, um die Erstellung zu hässlicher Seiten zu verhindern